ionic-seminar

Membuat Aplikasi mobile HTML5 (ionic)

by “Rizky Ariestiyansyah”

Seminar Make your own Android at Sekolah Tinggi Manajemen Industri

Jakarta, 30 Oktober 2014

“Ingin membuat aplikasi mobile?”

Banyak Platform. Banyak Masalah.

Kenapa kita masih koding untuk multiple platform?

Koding dengan Native

Wajib menguasai semua platform
Basis kode yang terpisah
Waktu & dan pengembangan yang mahal
Pengembangan semakin berkurang

“Apa yang kita butuhkan untuk membuat aplikasi yang mendukung berbagai platform?”

Anda butuh teknologi web yang cool

Teknologi Hybrid Apps!

HTML5 yang berjalan seperti native
Web yang menjadi native layer
Platform Independent (iOS, Androird, Web, Firefox OS)
Akses langsung ke native APIs Cordova
Cordova/Phonegap
Pengembangan yang cepat (apalagi yang familiar dengan web dev)

OK! Ini bukan tahun 2004 lagi

Perangkat mobile berkembang sangat cepat

“Cordova, AngularJS dan Ionic”

Cordova adalah platform untuk mengembangkan aplikasi naive menggunakan teknologi web HTML5, CSS dan JavaScript

Platform di Cordova

Android
iOS
Amazon Firef OS
Firefox OS
BlackBerry
Bada
Ubuntu
WebOS
Qt
Mac OSX
Windows Phone 7 & 8
Tizen
Browser

Plugin di Cordova

Baterry Status
Camera
Contact
Dialogs
Device & Device Orientation
Geolocation
File Transfer
In-App Purchase
and more...

AngularJS adalah superheroic javascript MVC (Model, View, Controller) framework

Keistimewaan AngularJS : Directives, Filters, 2-way Data Binding, Services, DI & Testablity

“Hello.”

CSS Generated By Sass

Tatap muka yang mengagumkan
CSS dirancang agar mudah dirubah atau dimodifikasi
Menimpa ionic.css atau Sass Preprocessor
Stand-alone CSS (independent of Ionic's JavaScript)

Performance Obsessed

Hardware accelerated animations
Minimal DOM Manipulation
Zero jQuery (Masih bisa digunakan jika ingin)

Native Suppport

Modeled off of native SDKs
Dapat berjalan dengan Cordova/Phonegap

Beautifully Designed

Cohesive visual system
Sederhana dan Mengagumkan
Mudah dirubah

Bekerja disemua resolusi

Ionicons

Lebih dari 600 font-icon dengan MIT licensed

ionicons.com

Lists

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  <a class="item" href="#">
    Kit Kat
  </a>

  ...

</div>

Complex Lists

AngularJS Directive
Buttons exposed by swiping
Reorder
Delete

<ion-list>
  <ion-item ng-repeat="item in items" class="item-thumbnail-left">
    <img ng-src="{{ item.pic }}">
    <h2>{{ item.name }}</h2>
    <p>{{ item.quote }}</p>
  </ion-item>
</ion-list>

Collection Repeat

Similar to Angular's ng-repeat
Scroll through thousands of items
Only renders the viewable items
Smooth jank-free scrolling
Low memory footprint

<div class="list">
  <div collection-repeat="c in contacts" class="item">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

Tabs

Nested views
Each tab has its own nav history

<ion-tabs class="tabs-icon-only">

  <ion-tab title="Home" icon="ion-star">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Feedback" icon="ion-thumbsdown">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Messages" icon="ion-chatbubble-working">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

</ion-tabs>

Side Menu

<ion-side-menus>

  <ion-side-menu-content>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-positive">
      <div class="title">Projects</div>
    </header>
    <ion-content has-header="true">
      <div class="list">
        <a href="#/work" class="item">Work</a>
        <a href="#/home" class="item">Home</a>
      </div>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

Slide Box

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

Action Sheet

$ionicActionSheet.show({
  titleText: 'Modify your album',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Pull to Refresh

<ion-content on-refresh="refreshData()">
  <ion-refresher></ion-refresher>
  <!-- content -->
</ion-content>

Navigation

Shows back button when possible
Each tab has its own history stack
Works with Android's back button

<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view animation="slide-left-right">
  <!-- content -->
</ion-nav-view>

                         $ npm install -g ionic

                          _             _
                         (_)           (_)
                          _  ___  _ __  _  ___
                         | |/ _ \| '_ \| |/ __|
                         | | (_) | | | | | (__
                         |_|\___/|_| |_|_|\___|  CLI

Buat proyek secara cepat dengan ionic template
Boilerplate yang siap dimodifikasi sesuka hati
Preconfigured tools: Gulp, Sass, Bower, etc.
Start a local dev server with LiveReload
Update Ionic Framework library files
Build and run native apps

Memasang Ionic dan Cordova

            $ npm install -g ionic cordova

Clone proyek ionic

Platform, Build dan Emulate

            $ ionic platform add android
            $ ionic build android
            $ ionic emulate android
            $ ionic run android
            $ ionic serve

LIVE DEMO

Let's Build

MIT LICENSED

Free to use (even commercially)

COMMUNITY POWERED

Pengembang aktif di forum dan repo Github

Sumber Daya ionic!

Easy-to-follow videos, tutorials and formulaslearn.ionicframework.com

Visit the Community Forumforum.ionicframework.com

Contribute on GitHubgithub.com/driftyco/ionic

ionic-seminar

ariestiyansyah

ionic-seminar

0 2 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

ionic-seminar

Banyak Platform. Banyak Masalah.

Koding dengan Native

Anda butuh teknologi web yang cool

Teknologi Hybrid Apps!

OK! Ini bukan tahun 2004 lagi

Cordova adalah platform untuk mengembangkan aplikasi naive menggunakan teknologi web HTML5, CSS dan JavaScript

Platform di Cordova

Plugin di Cordova

AngularJS adalah superheroic javascript MVC (Model, View, Controller) framework

Keistimewaan AngularJS : Directives, Filters, 2-way Data Binding, Services, DI & Testablity

CSS Generated By Sass

Performance Obsessed

Native Suppport

Beautifully Designed

Bekerja disemua resolusi

Ionicons

Lists

Complex Lists

Collection Repeat

Tabs

Side Menu

Slide Box

Action Sheet

Pull to Refresh

Navigation

Memasang Ionic dan Cordova

Clone proyek ionic

Platform, Build dan Emulate

LIVE DEMO

Let's Build

MIT LICENSED

Free to use (even commercially)

COMMUNITY POWERED

Pengembang aktif di forum dan repo Github

Sumber Daya ionic!

</Q&A>

Phone : 087804020496

Blog : oonlab.com

Twitter : @ariestiyansyah

Email : onto@evonestudio.com

0 2