An introduction to

Mobile App Development

with

Welcome!

Welcome!

Tools of the trade:

Welcome!

Course overview:

Mobile App Development

What, Why and How

Mobile Apps: What?

What is a mobile app?

Mobile Apps: What?

What makes a great mobile app?

Mobile Apps: Why?

Why build a mobile app?

Mobile Apps: Why?

Why build a mobile app?

Mobile Apps: Why?

Why build a mobile app?

Mobile Apps: How?

A mobile app works differently to a traditional website.

Mobile Apps: How?

Traditional Website

Mobile Apps: How?

Mobile App

Mobile Apps: How?

Mobile Apps: How?

Smartphone architecture

Mobile Apps: How?

App Discovery and Delivery: App Stores

Types of Mobile App

Types of Mobile App

There are three main types of mobile app:

Native Apps

Web Apps

Hybrid Apps

Which type to use?

Hybrid Options

Hybrid Options

Within the hybrid type, there are further options.

Hybrid Options

Which to choose?

Hybrid Options

Which to choose?

A note on Ionic 3

A note on platform support

(and friends)

What is Ionic?

What is Ionic?

Ionic provides:

What is Ionic?

Ionic is built on two core technologies:

Ionic Architecture

Links

iOS SDK: Jump Right In

Android SDK: Building your First App

Cordova: Get Started

Shaping up with AngularJS

Ionic Presentation

Ionic Framework: Getting Started

Recap

Ionic is built using AngularJS.

It's therefore important that we understand the basic Angular concepts.

This section will cover the relevant parts of Angular that will be used for this course.

Dependency Injection

angular
  .module('myApp')
  .service('MyService', function($http) {
    // $http is injected and available for use
  });

// Later on...
angular
  .module('myApp')
  .controller('MyController', function(MyService) {
    // MyService is injected and available for use
  });

https://docs.angularjs.org/guide/di

Services / Factories

angular
  .module('myApp')
  .factory('MyService', function($http) {
    return {
      fetchAll: function() {
        return $http
          .get('http://some.example.com/api/items')
          .then(function(response) {
            return response.data;
          });
      }
    };   
  });

https://docs.angularjs.org/guide/services

Controllers & Data Binding

angular
  .module('myApp')
  .controller('MyController', function($scope) {
    $scope.name = 'John Smith';
  });

https://toddmotto.com/digging-into-angulars-controller-as-syntax/

<div ng-controller="MyController">
  <p>Hello, my name is {{name}}</p>
</div>

Lists

angular
  .module('myApp')
  .controller('MyController', function($scope) {
    $scope.vegetables = [
      { "name": "Carrot"   }, 
      { "name": "Potato"   },
      { "name": "Broccoli" }
    ];
  });

https://docs.angularjs.org/api/ng/directive/ngRepeat

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="veggie in vegetables">
      {{veggie.name}}
    </li>
  </ul>
</div>

ng-src

angular
  .module('myApp')
  .controller('MyController', function($scope) {
    $scope.img ='snoopy';
  });

https://docs.angularjs.org/api/ng/directive/ngSrc

<div ng-controller="MyController">
  <img ng-src="/images/{{img}}.png">
</div>

Conditional Show/Hide

angular
  .module('myApp')
  .controller('MyController', 
    function($scope) {
      $scope.shouldShow = true;
    });

https://docs.angularjs.org/api/ng/directive/ngIf

<div ng-controller="MyController">
  <p>
    This will always be shown.
  </p>
  <p ng-show="shouldShow">
    This will be shown.
  </p>
  <p ng-show="!shouldShow">
    This will be hidden.
  </p>
  <p ng-hide="shouldShow">
    This will be hidden.
  </p>
  <p ng-if="!shouldShow">
    This will be removed from the DOM.
  </p>
</div>

Conditional Classes

angular
  .module('myApp')
  .controller('MyController', function($scope) {
    $scope.shouldShow = true;
  });

https://docs.angularjs.org/api/ng/directive/ngClass

<div ng-controller="MyController">
  <p ng-class="
   {
    muted: shouldShow,
    loud: !shouldShow
   }">
    This will have the class 'muted'.
  </p>
</div>

Click handler

angular
  .module('myApp')
  .controller('MyController', function($scope) {
    $scope.submit = function() {
      // Handle submission...
    }
  });

https://docs.angularjs.org/api/ng/directive/ngClick

<div ng-controller="MyController">
  <button ng-click="submit()">Submit</button>
</div>

Forms

angular
  .module('myApp')
  .controller('MyController', 
  function(MyService, $scope) {
    $scope.formData = {};
    $scope.submit = function() {
      MyService.save(formData);
    }
  });

https://docs.angularjs.org/guide/forms

<div ng-controller="MyController">
  <form ng-submit="submit()">
    <input name="title" ng-model="formData.title">
    <input name="description" ng-model="formData.description">
    <input type="submit">
  </form>
</div>

UI Router

https://github.com/angular-ui/ui-router

The de-facto solution to flexible routing with nested views in AngularJS.

A

B

C

UI Router

angular
  .module('myApp')
  .config(config);

function config($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('feed', {
      url: '/posts',
      templateUrl: 'tmpl/posts/feed.html',
      controller: 'FeedController',
      controllerAs: '$ctrl'
    })
    .state('post', {
      url: '/posts/:id',
      templateUrl: 'tmpl/posts/post.html',
      controller: 'PostController',
      controllerAs: '$ctrl'
    });

  $urlRouterProvider.otherwise('posts');
}

https://github.com/angular-ui/ui-router

UI Components

CSS
Components

These are simple markup templates with specific CSS classes, which render static things like buttons, navigation bars and lists.

JavaScript
Components

These are dynamic components, initiated from your Angular controllers.

Woohoo!

Installing Ionic

Cross-Platform

Installing Cordova

Installing Cordova

Installing Ionic

Installing Ionic

• Install node.js (use LTS, v6)
• Install Git: Windows, Mac

Install dependencies:

Terminal Velocity

We'll be using the terminal when developing our Ionic apps.

If you are using Windows, the Git Bash program that was installed by the git installer should be used.

Otherwise, for Mac, use the default Terminal app.

Installing Ionic

npm install -g ionic gulp bower

npm is a package manager included with node.js.

Open your terminal and type:

This command installs these packages globally, so they can be used in the terminal.

Create our first app!

ionic start tabsApp tabs --type=ionic1

cd tabsApp

ionic serve

Open a terminal and type the following:

Your browser should open and display the demo tabs app.

Congratulations!

What did we just do??

ionic start tabsApp tabs --type=ionic1

ionic start is a command to create a new ionic project. You pass in the directory name to create, the template to use and the type of project to generate (Ionic 1).

What did we just do??

ionic serve

This starts a local web server and opens your browser at the URL, showing the Ionic app in your desktop browser. Remember, ionic is just HTML, CSS and JavaScript!
We can easily view this on a desktop browser. This makes development really fast, since we can use the same desktop development and debugging tools as for regular websites.

Deploy to the simulator

• Open the file config.xml in your code editor.
• Change the widget ID to something unique.
• In the terminal, run:

ionic cordova platform add ios

ionic cordova emulate ios

The app will open in the iOS simulator.

Deploy to an iPhone

• In the terminal, type

• Make sure there are no errors!

ionic cordova build ios

Deploy to an iPhone

• In the terminal, type

• In Xcode, click on 'MyApp' in the left hand pane.

open platforms/ios/MyApp.xcodeproj

• Choose your personal team from the 'Team' dropdown in the 'Signing' section.

Deploy to an iPhone

• Connect your iPhone to the mac via a USB cable.

• In the top left hand corner, choose your iPhone from the dropdown box.

• Ensure your iPhone is unlocked, and press Play.

• If there are any errors, follow the instructions and try again!

Deploy to the emulator

• In the terminal, run:

ionic cordova platform add android

ionic cordova emulate android

The app will open in the Android emulator.

Deploy to the phone

ionic cordova run android

• Connect your phone to your computer with the USB cable.

The app will be deployed to the phone, and will automatically open.

• In the terminal, run:

What did we just do??

ionic cordova platform add android

Ionic does not make any assumptions about your target platform. You must add each platform manually with this command. It only needs to be run once per platform. Once it has been run, you can deploy the app to a device connected to your computer.

What did we just do??

ionic cordova run android

This command builds a native app from your Ionic codebase, deploys it to a connected device, and opens it automatically. One command is all it takes!

Magic.