Native Apps on Steroids

Building super-polished native apps with HTML, CSS, JS, and Steroids

Download the AppGyver Scanner App

• http://internets.io/scanner-ios
• http://internets.io/scanner-android

About Me

• Founder of Dem Internets
• I've been coding like a boss since 1999
• I have 2 cats that help me be good at the internets.
     
• I work with awesome startups and agencies to help them build really cool stuff.

Native Apps Are The Future

Native apps are hard.

HTML IS EASY!

Apache Cordova (PhoneGap)

<h1>INSERT APP HERE</h1>

What is a WebView?

• A WebView is a browser instance inside an app.
• Apache Cordova gives you a single WebView and allows you to create your HTML, CSS, and JavaScript within that view.
• Usually the user interface is simulated with HTML, CSS, and JavaScript (ionic, ratchet)

This feels wonky.

Well Billy, that's because it is.

Trying to replicate the performance and stability of native apps by just using HTML, CSS, and JavaScript, is an almost insurmountable task.

What is Steroids?

• Steroids is a mobile app development framework that allows you to build cross-platform mobile apps using HTML5, CSS, and JavaScript.
• It's based on Apache Cordova (Phonegap) but with a few key differences.

Why is Steroids Cool?

Multiple WebViews with Native Transitions

Steroids handles all the hard stuff for you.

Cross-platform from the get go.

InstaTim

http://github.com/thedotmack/instatim

Installing Steroids

AppGyver offers a web-based wizard to help you install Steroids.

http://academy.appgyver.com/installwizard

Once you have the prerequisites installed, type this into your terminal window:

$ npm install steroids -g

To check that everything is working correctly, type the following into your terminal:

$ steroids login

Creating Your App

Steroids comes packed with some nifty command-line tools that make app development a breeze.

steroids create

steroids connect

steroids deploy

steroids create

To create your base Steroids app, type the following into your terminal window:

$ steroids create projectName

This creates a new folder called projectName with your base app inside.

steroids connect

In your project's folder, type:

$ steroids connect

The Steroids server will start running and a browser window will open a page displaying a QR code that allows you to test your app on iOS and Android using the Scanner app!

• Must be on the same network for the scanner to load the app

steroids deploy

Type the following into a terminal window in your project's root:

$ steroids deploy

A new QR code will open in your browser. Your app is now hosted on Steroids' Cloud Platform and anyone with the AppGyver Scanner app can scan the QR code to test the app on their device.

Developing your app

• Using Native UI Features
• Navigating in between WebViews
• Sharing data between WebViews

App Structure and Frameworks

Suggested File Structure

your_project/
└── app/
    ├── controllers/
    |   └── photo_gallery.js     
    ├── models/
    |   └── photo_gallery.js     
    └── views/
        ├── photo_gallery/
        |   ├── index.html
        |   ├── single.html
        |   └── feed.html
        └── layouts/
            └── photo_gallery.html

Steroids will take the app folder and compile it so you can keep DRY (Don't repeat yourself)

Bower for the win

Install cool packages using Bower if you'd like. I'm installing jQuery!

$ bower install jquery --save

The www and dist folders

The www folder is where all of your app's assets live.

When Steroids builds your app, it copies everything from www over to dist, as well as the compiled contents of your app folder.

Setting your start location

Let's change...

steroids.config.location = "http://localhost/index.html"

to...

steroids.config.location = 
       "http://localhost/views/photo_gallery/index.html"

Don't actually put a line break in the location string. This is for the slides, dude.

Using Native UI Features

Native Navigation Bar

In your current view's controller file app/controllers/photo_gallery.js

// Display the native navigation bar with 
// the title "Photo Gallery"
steroids.view.navigationBar.show("Photo Gallery");

Native Tab Bar

Set in config/application.coffee

steroids.config.tabBar.enabled = true
steroids.config.tabBar.tabs = [
  {
    title: "Gallery"
    icon: "icons/photos@2x.png"
    location: "http://localhost/views/photo_gallery/index.html"
  },
  {
    title: "Feed"
    icon: "icons/feed@2x.png"
    location: "http://localhost/views/photo_gallery/feed.html"
  }
]

Navigating in between WebViews

In app/controllers/photo_gallery.js

$('#thumbnails img').on('click',function(){

    var webView = new steroids.views.WebView(
                      '/views/photo_gallery/single.html'
                  );

    steroids.layers.push(webView);

});

Preloading WebViews

In app/controllers/photo_gallery.js

var singleView = new steroids.views.WebView({
    location:   "/views/photo_gallery/single.html",
    id:         "singleView"
});
singleView.preload();

Sharing Data between WebViews

In app/controllers/photo_gallery.js

$('#thumbnails img').on('click',function(){
    message = {
        recipient:  'singleView',
        src:        $(this).attr('src'),
        title:      $(this).attr('alt')
    }
    window.postMessage(message);
    steroids.layers.push(singleView);
});

Listening for Shared Data in Your Target WebView

In app/views/photo_gallery/single.html

function messageReceived(event) {
    // check that the message is intended for us
    if (event.data.recipient == "singleView") {
        $('#single .card').html(
            '<img src="' + event.data.src + 
            '"><h3>' + event.data.title + '</h3>'
        );
    }
}
window.addEventListener("message", messageReceived);

Accessing hardware with Cordova APIs

function getAcceleration() {
  navigator.accelerometer.getCurrentAcceleration(
  accelerometerOnSuccess, accelerometerOnError)
}

function accelerometerOnSuccess(acceleration) {
  acceleration_data.innerHTML =
    "x: " + acceleration.x + "<br>" +
    "y: " + acceleration.y + "<br>" +
    "z: " + acceleration.z + "<br>" +
    "timestamp: " + acceleration.timestamp
}

function accelerometerOnError(error) {
  alert("Accelerometer error: " + JSON.stringify(error));
}

http://docs.appgyver.com/en/stable/index.html

Accessing Your Device's Camera

function getPicture() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality         : 50,
        destinationType : Camera.DestinationType.DATA_URL
    });
}

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

http://docs.appgyver.com/en/stable/cordova_camera_camera.md.html

Testing your app

steroids simulator (iOS Only)

Type simulator in to the Steroids terminal window while steroids connect is running, and the iOS Simulator will open.

You can then open up Safari and inspect your app's WebViews using Safari's Developer Tools!

https://x.appgyver.com/categories/2-tooling/contents/60-debugging-with-the-safari-web-inspector

Building your app

steroids deploy

+

https://cloud.appgyver.com/applications

steroids generate tutorial

• begin – The very basics of AppGyver Steroids, start here.
• steroids – Basics of Steroids Native UI enhancements.
• controllers – Basics of Controllers (requires the steroids tutorial to be generated first)

steroids generate example

• accelerometer – Access the device's accelerometer.
• animation – Using native animations without moving to another document (iOS-only).
• audio – Play back audio files through Cordova's Media API.
• compass – Access the device's compass.
• device – Access the device properties.
• drumMachine – A simple drum machine.
• geolocation – Access the device's geolocation data.
• modal – Using the modal window.
• notification – Access native notifications.
• preload – Preload WebViews to have them available immediately.
• storage – Access Cordova's SQL Storage API.

AppGyver Academy

https://x.appgyver.com/categories

Thank You!!!! <3 <3 XOXOXO 5EVER

Follow me on Twitter: @thedotmack

Follow my Cats on Instagram: @thedailytim