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
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