Ionic Framework by Rizky Ariestiyansyah

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




  
    Candy Bars
  

  
    Butterfinger
  

  
    Kit Kat
  

  ...

Complex Lists

AngularJS Directive
Buttons exposed by swiping
Reorder
Delete



  
    
    {{ item.name }}
    {{ item.quote }}

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



  
    {{ c.name }}
    {{ c.email }}

Tabs

Nested views
Each tab has its own nav history

Side Menu

Slide Box



  
    Slide 1
  
  
    Slide 2
  
  
    Slide 3

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

Navigation

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



  
    Back


                         $ 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 formulas
learn.ionicframework.com

Visit the Community Forum
forum.ionicframework.com

Contribute on GitHub
github.com/driftyco/ionic