Ionic by Example

IONICMichal Haták

Mobile Platforms, More Problems

Native Apps

Platform specific

Best performance

Expensive development

Steep learning curve

Hybrid apps

Platform independent

JavaScript, HTML5 and CSS3

Limited performance

Quick development

What is Ionic

Hybrid mobile development framework

Uses standard technologies - HTML5, CSS3, JavaScript

Built on top of Cordova and AngularJS

Ionic & performance

HW animations

Minimal DOM manipulations

Zero jQuery

Ionic Tech Stack

Apache Cordova

AngularJS

Sass

AngularUI

What is Cordova (PhoneGAP)

Platform for building natively installed mobile applications using HTML, CSS and JavaScript

WebView on steroids

1000+ plugins available

Open-source - Apache License

Cordova Plugins

Battery status

Camera

Contacts

Device

Device orientation

File transfer

Geolocation

Media capture

Network information

Statusbar

Direct access to native APIs

What is AngularJS

Superheroic JavaScript MVW Framework

Dependency Injection

Data binding

Routing

How to start?

Requirements

HTML & JS editor

NodeJS

Platform SDK (Android SDK, XCode, VS) + related tools

Browser (:

Let's start

$ npm install -g cordova ionic

Create new app

$ ionic start <appName> <template>

Templates

blank sidemenu tabs

Create new app

$ ionic start myApp sidemenu

Start

$ cd myApp

$ ionic serve

That was quick, wasn't it?

What's included in Ionic ?

CLI tools

CSS & JavaScript components

Ionicons

CLI Tools

$ ionic start

$ ionic serve

$ ionic platform *

$ ionic build *

$ ionic resources

easy way how to manage your project


Buttons


Lists


More complex Lists


Tabs


ActionSheet


Side Menus


modals

forms

gestures

& more

Let's do something useful

Čtvrtkon app

$ curl http://ctvrtkon.cz/category/pozvanky/ | grep rss

http://ctvrtkon.cz/category/pozvanky/feed/

http://ctvrtkon.cz/category/pozvanky/

Battle plan

Create a single view app

Load data to a list using $http

Render the list using the Ionic list component

Splash screen

Publish?

Create & run

$ ionic start ctvrtkon blank $ cd ctvrtkon

$ ionic serve

HTML part

<body ng-app="app"> <ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">Čtvrtkon</h1> </ion-header-bar> <ion-content ng-controller="MainController as main”>

<!-- content there —> </ion-content> </ion-pane> </body>

HTML part

<body ng-app="app"> <ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">Čtvrtkon</h1> </ion-header-bar> <ion-content ng-controller="MainController as main”>

<!-- content there —> </ion-content> </ion-pane> </body>

application name

controller name

header

content

Javascript part #1

angular .module("app") .controller("MainController", MainController);

define controller

Javascript part #2

MainController.$inject = ["$http"]; function MainController($http){ var vm = this; vm.url = “http://.../feed/“); vm.invitations = []; getInvitations(); function getInvitations(){ // TODO: implement } }

Javascript part #2

MainController.$inject = ["$http"]; function MainController($http){ var vm = this; vm.url = “http://.../feed/“); vm.invitations = []; getInvitations(); function getInvitations(){ // TODO: implement } }

HTTP Service DI

minification BP

BP

The URL

vm.url = “http://cors.io/?u=" +encodeURIComponent( “https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q= http://ctvrtkon.cz/category/pozvanky/feed/“ );

https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q=

The URL

vm.url = “http://cors.io/?u=" +encodeURIComponent( “https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q= http://ctvrtkon.cz/category/pozvanky/feed/“ );

CORS bypass

RSS to JSON service

feed itself

https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q=

Javascript part #3

function getInvitations(){ $http.get(vm.url) .then(function(response){ // response.data.responseData.feed.entries response.data.forEach(function(item){ vm.invitations.push({ title: item.title, link: item.link, intro: item.contentSnippet }) }) }); }

demo shortcut

HTML part #2

<ion-content ng-controller="MainController as main”> <div class="list list-inset”> <a ng-repeat="invite in main.invitations" href="{{ invite.link }}" class=“item”> <h2>{{ invite.title }}</h2> <p ng-bind-html=“invite.intro”></p> </a> </div> </ion-content>

And you're done wasn't that easy?

But, what about to publish?

Build Android

Make sure you have Android SDK installed

$ ionic platform add android

$ ionic build android

=> generated .apk in ./platforms/android/build/outputs/apk/android-debug.apk

Next steps

Test app

Sign in with key tool (http://ionicframework.com/docs/guide/publishing.html)

Android developer account - one time fee (25 $)

Fill form and upload your .apk - ready in 30 mins

Build iOS

Make sure you are on MacOS and have Xcode installed

$ ionic platform add ios

$ ionic build ios

=> generated Xcode project in ./platforms/ios/<appName>.xcodeproj

Next steps

Test app

iOS developer account - 99 $ per year

Publish via Xcode

What about icons and splash screen?

Splash screen & icon

Put your images in the ./resources directory, named splash or icon

Accepted file types are .png, .ai, and .psd

Icons should be 192x192 px without rounded corners

Splashscreens should be 2208x2208 px, with the image centered in the middle

$ ionic resources

Thanks.

Questions?

Technology

Ionic by Example