INSTALASI IONIC FRAMEWORK DI WINDOWS 7 UNTUK...

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

INSTALASI IONIC FRAMEWORK DI WINDOWS 7

UNTUK PENGEMBANGAN APLIKASI MOBILE HYBRID

Dian Mustika Putri

[email protected] :: 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

mailto:[email protected]

https://dianmstkputri.wordpress.com/





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





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

2. Download NodeJs lalu install

by dianmustikaptr

by dianmustikaptr

by dianmustikaptr





3. Setelah proses instalasi Github dan NodeJs selesai, kemudian buka Command

Prompt atau dengan Start+R

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

langkah berikut ini

by dianmustikaptr

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

by dianmustikaptr





6. Hal berikutnya yang dilakukan adalah dengan menginstall cordova dan ini

membutuhkan koneksi internet, yaitu dengan cara berikut

Tunggu sampai proses instalasi selesai, dan setelah itu buka cmd dan cek apakah

cordova sudah terinstal atau belum. Yaitu dengan melakukan langkah berikut

by dianmustikaptr

by dianmustikaptr





7. Langkah selanjutnya adalah menginstal ionic, dengan cara berikut

by dianmustikaptr

by dianmustikaptr





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

enter

8. Membangun aplikasi ionic dengan Command Prompt

by dianmustikaptr

by dianmustikaptr





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





9. Running aplikasi Ionic di browser

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.

by dianmustikaptr





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!

INSTALASI IONIC FRAMEWORK DI WINDOWS 7 UNTUK...

Documents

Transcript of INSTALASI IONIC FRAMEWORK DI WINDOWS 7 UNTUK...