dianmustikaptr INSTALASI IONIC FRAMEWORK DI WINDOWS 7

INSTALASI IONIC FRAMEWORK DI WINDOWS 7
UNTUK PENGEMBANGAN APLIKASI MOBILE HYBRID
Dian Mustika Putri
mustika@raharja.info :: https://dianmstkputri.wordpress.com

Abstrak
Pembangunan aplikasi pada saat ini sudah semakin berkembang, dengan berbagai
sumber yang telah disediakan dan dengan berbagai macam teknik yang digunakan,
pembangunan aplikasi mobile relatif menjadi lebih mudah. Pada pengembangan aplikasi
mobile, dapat dilakukan dengan berbagai teknik, salah satunya yang terkenal saat ini
adalah pengembangan aplikasi hybrid. Mobile hybrid merupakan teknik pembangunan
aplikasi dengan mengkombinasikan native apps dan web apps, sehingga hal ini menjadi
alasan utama dalam pengembangan aplikasi mobile hybrid. Salah satunya dari
fleksibilitas, yaitu dengan mengkombinasikan fitur-fitur yang ada pada SDK dengan
teknologi pada web apps. Saat ini sudah cukup banyak framework mobile yang dapat
dipakai untuk pengembangan aplikasi mobile hybrid, salah satunya adalah ionic
framework. Ionic framework adalah salah satu framework yang dapat dipakai untuk
mengembangkan aplikasi mobile hybrid dengan memanfaatkan HTML5 dan javascript
sebagai komponen yang sangat penting dalam pengembangan aplikasi mobile hybrid
ini.


Kata Kunci: Mobile hybrid, Native apps, Web apps, Ionic framework, HTML5,
javascript

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Pendahuluan
Ionic Framework adalah sebuah framework open source yang telah dikembangkan
secara baik

untuk

membangun

aplikasi

berbasis


mobile,

yang didalamnya

memanfaatkan HTML5 dan framework angularjs, sehingga proses pembangunan
aplikasi menjadi lebih sederhana.
Penggunaan ionic framework saat ini perlahan sering digunakan, karena memang
memiliki beberapa fitur dan komponen yang mudah digunakan. Ionic framework
berjalan atas beberapa teknologi lainnya, yaitu angularjs dan cordova, dengan
memanfaatkan teknologi tersebut, penggunaan ionic framework menjadi lebih
maksimal.
Dalam pemanfaatan aplikasi mobile biasanya tidak terlepas dari penggunaan teknologi
web service di dalamnya, hal ini bertujuan untuk memudahkan dalam membuat berbagai
fungsi didalamnya yang berkaitan dalam memanipulasi data berupa menambah data,
menghapus data dan merubah data.
Tujuan dalam membangun aplikasi mobile hybrid adalah bahwa diyakini HTML5
mampu memerintah smartphone dari waktu ke waktu persis dengan yang telah diatur di
desktop. Dengan adanya komputer desktop dan teknologi browser yang cukup maju dan
kuat, menyebabkan hampir semua orang menghabiskan waktu komputasi mereka di

dalam browser. Sehingga sampai saat ini, sudah muncul banyak pengembang yang
mulai membangun teknologi mobile, smartphone, dan tablet yang mampu menjalankan
fungsi aplikasi web yang sama
Dengan adanya Ionic, dibangunlah sebuah kerangka pengembangan mobile HTML5
yang berfokus pada aplikasi asli atau hybrid dan bukan situs mobile. Dan banyak
pengembang aplikasi mobile hybrid yang ingin memastikan bahwa Ionic sebagai open
source yang didukung oleh pembangunan komersil dan terbuka serta menyediakan
berbagai komuniti yang bagus dan kuat dalam proyek ini

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Pembahasan
Untuk membangun aplikasi mobile dengan Ionic framework yang perlu dilakukan
adalah:
1. Download terlebih dahulu Git For Windows dan opsional console di laptop
kemudian install, dan tunggu sampai proses instalasi selesai

by dianmustikaptr

by dianmustikaptr

2. Download NodeJs lalu install

by dianmustikaptr

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

by dianmustikaptr

3. Setelah proses instalasi Github dan NodeJs selesai, kemudian buka Command
Prompt atau dengan Start+R

by dianmustikaptr


4. Selanjutnya cek apakah NodeJs sudah terinstal atau belum, yaitu dengan melakukan
langkah berikut ini

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

by dianmustikaptr

Jika keluar error seperti :
C:\Users\LENOVO>node-v
‘node’

is

not


recognized

as

an

internal

or

external

command,

operable program or batch file.
Yang perlu dilakukan adalah dengan mensetting Pathnya, yaitu dengan cara:
Select Start -> Computer -> System Properties -> Advanced system settings ->
Environment Variables -> System variables -> PATH.
5. Setelah mencek NodeJs, maka yang dilakukan selanjutnya adalah dengan mencek
NPM (Node Package Manager). NPM ini sudah terinstall bersamaan dengan install

nodejs. Tools ini akan sangat membantu saat menambahkan module nodejs akan
terinstall secara default di C:\Program Files\nodejs\node_modules\npm\bin
Cara menceknya adalah sebagai berikut

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

by dianmustikaptr

6. Hal berikutnya yang dilakukan adalah dengan menginstall cordova dan ini
membutuhkan koneksi internet, yaitu dengan cara berikut

by dianmustikaptr

Tunggu sampai proses instalasi selesai, dan setelah itu buka cmd dan cek apakah
cordova sudah terinstal atau belum. Yaitu dengan melakukan langkah berikut


Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

by dianmustikaptr

7. Langkah selanjutnya adalah menginstal ionic, dengan cara berikut

by dianmustikaptr

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Tunggu sampai proses Instal ionic selesai, kemudian cek dengan cara ketikan ionic lalu
enter


by dianmustikaptr

8. Membangun aplikasi ionic dengan Command Prompt

by dianmustikaptr

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

a. Pertama ketikkan “cd desktop”, ini berarti kita membuka folder desktop windows
b. Kedua kita membuat aplikasi ionic yang otomatis akan didownload dan disimpan
di desktop dengan nama folder myApp
c. Myapp adalah nama aplikasi yang akan dibuat
d. Blank adalah template dari ioni, ada tiga pilihan template yang bisa dipilih blank,
tabs, dan sidemenu
e. Tunggu sampai proses download selesai, dan folder myApp akan muncul pada

desktop

by dianmustikaptr

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

9. Running aplikasi Ionic di browser

by dianmustikaptr

Penutup
Ionic merupakan satu dari banyak Framework yang bisa digunakan untuk membuat
aplikasi mobile dengan mudah dan cepat. Jika mempunyai pengetahuan pemrograman
dasar dasar seperti CSS, HTML, dan javascript, maka bisa dimulai dengan membuat
aplikasi mobile tanpa harus belajar android java dan pemrograman lainnya. Ionic
framework ini juga punya kekurangan dibandingkan dengan Native apps, yaitu dalam

hal performa. Dan Ionic framework ini juga memiliki kelebihan yaitu lisensi yang open
source artinya kita dapat membuat aplikasi secara bebas ataupun komersil dengan ionic.
Dan dengan semakin berkembangnya teknologi mobile, smartphone ini, diharapkan
munculnya para pengembang-pengembang mobile hybrid yang dapat membuat aplikasi
mobile yang bermanfaat bagi para pemakai smartphone pada saat ini.

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Referensi
Pengalaman Pribadi

Biografi
Holla, nama saya Dian Mustika Putri (Lahir Sragen, 30 Mei 1997). Dian seorang
Mahasiswi di salah satu Perguruan Tinggi di Kota Tangerang Jurusan Sistem
Informasi dengan Konsentrasi Business Intelligence. Punya Hobi youtubing, baca,
nyanyi juga yaaa bisa deh. Dian tertarik dengan dunia bisnis atau manajemen
khususnya dengan mengoptimalkan penggunaan IT yang semakin berkembang.
Senang untuk berbagi dengan kalian. Untuk sharing lebih lanjut tentang IT, yuk
kontak Dian di Instagram: @dianmustikaptr , Line: dianmustikaptr. Salam Mahasiswa! 

Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org