Tutorial Workshop Ionic dengan Angular JS

enter image description here

Tutor Muhammad Faisal Rahman
Ditulis Nurul Anisa Sri Winarsih
Hari,Tanggal Sabtu, 25 Oktober 2014
Tempat Lab HW UDINUS
OS TeaLinux OS 6.0 – Jasmine Tea
Kenapa harus Web Apps?
Development yang cepat,
Cross platform (iOS, Android, Firefox, etc), dapat bekerja di berbagai platform
Tidak memakan waktu lama dan lebih efisien
Bahasa pemrograman lebih mudah
Based on HTML5, CSS3, JS
Device native API yang sudah banyak tersedia.
Kekurangan Web Apps:
Lebih berat
Fragmented

Let’s start workshop 😀

Ini pemanasan yaa..

  1. Buka alamat Angular JS . Buka tab developer lalu download – pilih yang versi 1.3.0 karena ini versi paling baru dan stabil
    enter image description here
  2. Masuk 1.3.0 lalu pilih angular.js
    enter image description here
  3. Isi dari Angular JS sebagai berikut:
    enter image description here
    Copy semua alamatnya
  4. Buka sublime : klik logo teaLinux – Programming – Sublime
    Untuk sementara, buat 1 folder di dekstop dan buat file index.html di dalamnya. Ketik seperti yang dibawah ini:
    enter image description here
    Tulisan yang ada di box akan dicetak ulang secara realtime oleh tulisan yang ada dibawahnya, baik itu menambah atau menghapus huruf juga akan mengikuti.
  5. Buat 1 file bernama app.js di folder yang sama. Untuk tahap pertama tuliskan sebagai berikut:
    var app = angular.module('workshop',['appControllers']);
    Perbaharui index.html seperti di bawah ini:
    enter image description here
  6. Buat file controller,js, rombak codingan seperti dibawah ini:
    enter image description here
  7. Buat objek baru yaitu employee di controller.js seperti ini:
    enter image description here

Hasilnya sebagai berikut:
enter image description here

Objek yang kita buat berupa array (kumpulan dari objek-objek), berawal dari index ke – 0 dan seterusnya.

Intermezzo: cara untuk mengecek apakah json yang kita tulis itu benar atau tidak, silahkan copy-paste codingan Anda di alamat ini JSON LINT
enter image description here


Ayo Kita Mainan sama IONIC :3

Ionic adalah framework untuk membuat aplikasi mobile dengan HTML5. Untuk lebih lengkap link nya di sini “http://ionicframework.com/”. Let’s play baby :*

  1. Gunakan komputer yang sudah terinstall node.js, cordova, ionic command-line tools
  2. Buka terminal. Ketik “ionic”, lalu ketik “ionic start workshop tabs”
  3. Otomatis akan download dari ionic, akan muncul seperti ini:
    enter image description here
  4. Kalau sudah terdownload, ketik “cd workshop”, lalu ketik “ionic serve”
    enter image description here
  5. Akan ada pilihan no 1. ada angka-angka dan no 2. localhost, lalu pilih localhost
  6. Dengan otomatis dashboard akan terbuka di web browser masing-masing dengan alamat
    localhost:8100/#/tab/dash , seperti iniiii..
    enter image description here
  7. Kalo lama download nya ngopy punya’e temen yaa… lalu ulangi langkah nomor 4 sampai 6 😀
  8. Sekarang kita edit-edit yuk, seperti gambar di bawah ini :
    enter image description here
    Dan tampilan akan berubah seperti ini
    enter image description here
  9. Yuuuuk, edit lagi
    1. controller.js
      enter image description here
    2. tab-friends.js
      enter image description here
    3. Pada jsonp, kita menggunakan html sebagai berikut : http://public-api.wordpress.com/rest/v1/freshly-pressed, tetapi ditambah ?callback=JSON_CALLBACK untuk memanggil. Sesungguhnya data yang kita ambil dari alamat berikut ini https://wordpress.com/fresh, konten yang berisi halaman artikel-artikel wordpress.
      Tadaa, hasilnya seperti ini
      enter image description here
  10. Edit untuk bagian detail friend
    1. controller.js
      enter image description here
    2. tab-friends.js
      enter image description here
    3. app.js
      enter image description here
  11. Cara membuat aplikasi
    buka terminal lagi, ketik “ionic platform add android”
    Tunggu proses yang sedang berjalan
  12. Cara membangun project, ketik “ionic build android”
Share folder dari tentor, mas Faisal:
https://dl.dropboxusercontent.com/u/38370071/workshop.zip
twitter : @fzlrhmn_
fb : faizal rahman
email : faizal.rahman@gmail.com
hp : 081328305756

Daftar Isi

Written with StackEdit.

One thought on “Tutorial Workshop Ionic dengan Angular JS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>