Recents in Beach

Onsen UI - Part 0 persiapan install cordova

baiklah kita kemarin sudah membahas tentang apa sih onsen ui nah sesuai dengan perkataan admin kemarin jika kalian membaca artikel pendahulan tentang onsen ui sebelumnya pasti kalian tahu deh apa yang admin kata in kemarin :D nah langsung aja nih, tapi pertama kita akan bahas dulu deh apa itu apache cordova atau biasa di sebut dengan phonegap tentang keunggulan, kekurang dan lain sebagainya. baik langsung aja cek it dot.




CORDOVA

Cordova adalah fondasi dari beberapa lingkungan pengembangan, termasuk Adobe Phonegap (www.phonegap.com), Ionic (www.ionicframework.com), Monaca (http://monaca.io), ViziApps (www.viziapps.com), Convertigo (www.convertigo.com) dan appMobi (www.appmobi.com). Cordova Street, Vancouver, B.C. Cordova awalnya adalah PhoneGap, yang dikembangkan oleh startup Nitobi Software yang berbasis di Vancouver dan diakuisisi oleh Adobe pada tahun 2011. Adobe berkontribusi PhoneGap ke Apache Foundation, yang menamainya setelah lokasi kantor Nitobi. Lihat PhoneGap dan aplikasi seluler hibrida. Lingkungan pengembangan seluler hibrida sumber terbuka dari Apache Software Foundation (www.apache.org) yang menghasilkan aplikasi iOS, Android, BlackBerry, Windows Phone, WebOS, bada dan Symbian dari kode sumber yang sama.
Kelebihan dan Kekurangan apache cordova 

Kelebihan :
  1. Bersifat open source, sehingga akan banyak module yang di kembangkan oleh para developer
  2. Kita tidak perlu repot-repot belajar bahasa pemograman seperti java, objective c, c# dan lain sebagainya, jadi kita hanya perl menggunakan html, css, dan javascript
  3. Apache cordova sendiri juga multi-platform atau bisa di gunakan banyak perangkat antara lain : IOS, BlackBerry, Android, Symbian, WebOs, windows Phone.
Kekurangan :
  1. Karena multiplatform, phonegap sering ketinggalan ketika ada fitur baru pada platform aslinya.
  2. Tampilan yang ada terlihat sama untuk semua platform, dan tampilan terkadang tidak terlihat seperti mobile app.
  3. Reverse-engineering : banyaknya aplikasi yang dapat digunakan untuk code javascript sehingga memungkinkan dilakukannya pengeditan terhadap code aslinya.
  4. Alasannya dikarenakan aplikasi phonegap perlu menginterpret kode javascript agar bisa diterima native SDK sehingga membutuhkan waktu lebih untuk menjalankannya.
  5. Walau menghasilkan aplikasi yang bersifat “build once, run everywhere” tetap saja aplikasi yang dibangun tidak seoptimal aplikasi buatan native SDK asli.
  6. Jika di sinkronasikan dengan IOS platform mungkin akan banyak kendala
Jadi itulah sekilas tentang Apache Cordova kita langsungdeh cus install apache cordova

Install Apache Codova / Phonegap

Ketika kita ingin menginstall apache cordova kita memerlukan Node Js. Kalo di komputer atau laptop kalian belum terinstall Node Js maka sebaiknya kalian install terlebih dahulu Node Js nya  kalo kalian mengunakan sistem operasi berbasis windows maka kalian hanya perlu men unduh node js di sini . Setelah terinstall  Node Js langkah pertama adalah
  • buka cmd kalian dengan tekan tombol windows + R setelah terbuka kalian ketikan kode di bawah ini 

npm -g cordova

  • Kemudian tunggu hingga proses instalasi selesai, perlu kalian ketahui instalasi ini di perlukan koneksi internet. Jika sudah selesai terinstall maka akan muncul tampilan seperti gambar berikut
  • Untuk mengecek apakah apache cordova sudah terinstall apa belum kalian bisa jalankan perintah                                                                                                                                               
cordova -v
  • Maka hasilnya akan seperti gambar di bawah ini 



Untuk melihat apakah apache cordova kita sudah bisa di gunakan atau belum. Kita harus membuat sebuah project cordova terlebih dahulu scriptnya seperti di bawah ini

corodova create fristapp com.ilmunya-ngoding.fristapp FristApp

Perintah cordova create berfungsi untuk membuat initial project cordova. Parameter pertama adalah nama path folder project, parameter kedua adalah indentifier aplikasi, dan parameter ketiga adalah nama aplikasi. Perintah ini akan membuatkan folder dengan nama firstApp yang berisi file-file configurasi untuk membangun aplikasi. Setidaknya ada 4 folder yang disiapkan, yakni folder hooks, platform, plugins, dan www serta satu file config.xml. Aplikasi HTML kita disimpan di folder www

jika kalian ingin mendapatkan hasil simulasinya dengan baik, kita harus membukanya dengan emulator. Dengan cara masuk ke dalam cmd kalian masuk ke dalam folder project kalian misal kalian taruh di D:\cordova\fristapp kemudian jalankan perintah berikut 


cordova platform add browser

Perintah tersebut berfungsi untuk menambahkan library yang diperlukan untuk dapat berjalan di suatu platform, dalam kasus ini adalah platform browser. Dibutuhkan koneksi internet untuk menginstal library tersebut. Setelah selesai, jalankan perintah berikut untuk menjalankan aplikasi pada browser:


cordova run browser

Perintah ini akan di gunakan untuk membuka browser dan menjalankan aplikasi dengan baik. Hingga titik ini Kalian bisa mulai mengembangkan aplikasi yang Kalian inginkan menggunakan HTML5, CSS dan JavaScript. Kamu dapat menggunakan JavaScript library seperti jQuery atau JavaScript framework seperti Ionic atau AngularJS. Kamu juga dapat membuat style sendiri atau menggunakan CSS framework seperti Bootstrap dan Foundation


dalam seri ini kita akan mengunakan framework onsen ui Untuk keluar dari emulator, tekan tombol Ctrl + C pada keyboard. Kamu bisa sedikit bermain-main dengan kode html yang sudah ada, misalnya mengganti konten tag dan lain sebagainya.


Build ke Android


Dan untuk membuild folder yang telah kita buat tadi menjadi apk. kita harus menambahkan libary dulu yang kita perlukan untuk membuild ke platfrom android.
perintahnya seperti berikut :


cordova platform add android

 kemudian jalankan perintah untuk mem-build:


cordova build android

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder project firstApp\platforms\android\build\outputs\apkandroid-debug.apk. Kamu bisa mencoba menyalin file tersebut ke dalam handphone smartphone Android dan menginstalnya. Pastikan mode developer sudah diaktifkan di handphone Androidnya.

baiklah itulah tutorial bagaimana kita menginstall apache cordova sampai dengan membuild apk. cukup ribet ya? haha santai karena sukses butuh perjuangan. 

sekian semoga bermanfaat jangan lupa shere ya :) terimakasih.





Post a Comment

5 Comments