SHARE MEMBUAT APLIKASI ANDROID DENGAN HTML 5 , PHP , JS DAN CSS [ VIA CORDOVA DAN IONIC ]

[RayMantic]

Bisa gak sih gan bikin aplikasi android dengan basic html ?
jawabannya : bisa dong gan

download Cordova : https://cordova.apache.org/
download ionic : https://ionicframework.com/
download nodejs : https://nodejs.org/en/

Apa itu Cordova?
Cordova adalah sebuah framework untuk membuat aplikasi mobile. Berkat cordova, kita jadi bisa membuat aplikasi mobile dengan bahasa HTML, CSS, dan Javascript.

Hasilnya bisa kita compile ke platform yang diinginkan, seperti Android, Windows Phone, dan iOS.

Cordova dulunya bernama PhoneGap dan awalnya dibuat oleh perusahaan bernama Nitobi. Lalu di tahun 2011, Adobe membeli perusahaan tersebut. 1

Tapi Adobe menyerahkan pengembangan Cordova kepada Apache Software Foundation.

Nasip Cordova kini dikelolah oleh Apache, makannya namanya Apache Cordova.

Apa bedanya Cordova dengan ionic ?

Cordova hanya fokus pada aplikasi mobile saja, sedangkan Ionic bisa di-compile ke Desktop dan Web.

Ionic juga akan menggunakan Cordova untuk compile ke Mobile.

Arsitektur Aplikasi Cordova
HTML, CSS, dan Javascript memang bahasa yang khusus untuk membuat web.

Tapi berkat Cordova, bahasa itu bisa kita pakai untuk membuat aplikasi mobile.

Lalu bagaimana sih Cordova bisa membuatnya menjadi aplikasi mobile?

Berikut ini arsitekturnya…

Kode aplikasi kita akan berada di Web App, lalu si Cordova akan menampilkannya melalui WebView.

Cordova juga menyediakan Native API seperti Camera, Geolocation, Device, dll. yang bisa kita gunakan dalam aplikasi.

Persiapan untuk Belajar Cordova
Ada beberapa alat yang harus kamu persiapkan untuk memulai belajar Cordova.

Apa saja itu?

1. Teks Editor dan Web Browser
Teks editor akan kita gunakan untuk menulis kode aplikasi dan web browser akan digunakan untuk melihat hasilnya.

Kamu bisa gunakan teks editor dan web browser apapun.

Rekomendasi saya:

• Untuk teks editor VScode
• Untuk web browser gunakan Google Chrome atau Firefox.

2. Instal Nodejs dan NPM
Pastikan di komputermu sudah tersintal Nodejs dan NPM, karena ini akan kita gunakan untuk menginstal Cordova.

Silahkan instal nodejs terlebih dahulu.

Caranya, ketik perintah berikut di terminal:

sudo apt install -y nodejs

Untuk pengguna Windows, silahkan download nodJS di website resminya lalu tinggal diinstal saja.

Setelah itu coba periksa versi Nodejs dan NPM yang terinstal.

NPM akan ikut terinsal secara otomatis saat kita menginstal Nodejs. Jadi kamu tidak perlu mengisntalnya.

3. Instal Cordova
Setelah kamu menginstal Nodejs, sekarang kita harus menginstal Cordova.

Caranya, ketik perintah berikut di terminal atau CMD.

[sudo] npm install -g cordova

Gunakan sudo jika kamu di Linux dan menginstal Nodejs pada root

Tungulah sampai prosesnya selesai.

Setelah itu, periksa versi yang terinstal dengan perintah:

cordova --version

Di komputer saya sudah terinstal Codova versi 8.1.2.

Jika kamu ingin update ke versi terbaru, cukup ketik perintah berikut:

[sudo] npm update -g cordova

Atau bisa juga menginstal versi tertentu secara spesifik seperti ini:

sudo npm install -g [email protected]

4. Instal JDK
JDK (Java Development Kit) kita butuhkan untuk membuat aplikasi Android.

Silahkan install JDK dengan perintah berikut:

sudo apt-get install -y openjdk-8-jdk

Setelah itu ketik perintah..

java -version

..untuk memeriksa versi Java atau JDK yang terinstal.

Pada komputer saya, sudah terinstal JDK versi 8.

Selanjutnya, kita harus membuat variabel environtment bernama JAVA_HOME dengan isi alamat path dari JDK yang sudah terinstal.

Biasanya akan terinstal di C:\Program Files dan di Linux akan terinstal di/usr/lib/jvm/java-8-openjdk-amd64/.

Silahkan buka file .bashrc..

nano ~/.bashrc

Kemudian tambahkan kode berikut:

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64/
export PATH=$PATH:$JAVA_HOME/bin/

5. Instal Gradle
Gradle akan digunakan untuk build aplikasi Android menjadi APK.

Gradle biasanya akan ditanam (embed) juga di dalam project.

Tapi untuk jaga-jaga, kamu bisa menginstalnya dengan perintah:

sudo apt install gradle

6. Install Android SDK
Android SDK dibutuhkan untuk membuat aplikasi Android.

Android SDK menyediakan tools dan api yang bisa dimanfaatkan dalam pembuatan aplikasi.

7. Install Android Studio
Android Studio dibutuhkan untuk membuat emulator. Karena Android SDK versi terbaru sudah tidak mendukung pembuatan emulator dari luar Android Studio.

Bisa saja sih sebenarnya menggunakan Command Line, tapi tetap nanti akan butuh Android Studio juga.

Karena itu, install saja Android Studio-nya.. meskipun kita tidak akan membukanya.

Membuat Aplikasi Cordova Pertama
Semua peralatan kini sudah siap.

Berikutnya kita bisa mulai membuat aplikasi.

Mari kita buat proyek baru, silahkan ketik perintah berikut:

cordova create AplikasiCordova

Perintah ini akan membuat folder baru bernama AplikasiCordova yang berisi source code dari aplikasi.

Penjelasan tentang file dan folder aplikasi Cordova:

• hoos adalah folder yang berisi script untuk dieksekusi saat kita menjalankan perintah cordova.
• node_modules berisi library atau modul Nodejs.
• platform berisi source code untuk platform seperti android, ios, dan web;
• plugins berisi plugin yang dibutuhkan untuk akses API;
• www berisi source code dari aplikasi, di sini lah kita akan menulis kode.
• config.xml berisi konfigurasi dari aplikasi
• package-lock.json berisi informasi versi modul nodejs yang dibutuhkan
• package.json berisi informasi proyek dan versi modul nodejs yang dibutuhkan

Run di Browser
Sekarang coba buka terminal dari VS Code, tekan Ctrl+` (backtik), kemudian ketik perintah berikut:

# menambahkan platform browser
cordova platform add browser
# menjalankan aplikasi di browser
cordova run browser

Tunggulah sampai browsr terbuka…

Hasilnya:

 

[RayMantic]

Membuat Aplikasi Android Menggunakan Ionic Framework -Basic
material design = https://material.io/guidelines/

Bagaimana caranya kita akan mengakses native API seperti mengakses kamera, WiFi, contact, file manager, dan sebagainya?
Nah! masalah inilah yang ingin diatasi oleh Ionic Framework.

Apa itu Ionic Framework?
Ionic Framework merupakan sebuah framework open source yang menyeidakan UI Toolkit untuk membuat aplikasi web PWA, dekstop, mobile (Android dan iOS) dengan menggunakan bahasa web seperti HTML, CSS, dan Javascript. 1

Jadi dengan satu code base, kita sudah bisa membuat aplikasi Web, desktop, dan mobile.

Enak bukan…

Ini adalah stack teknologi Ionic Framework:

Di atas Ionic Framework kita bisa menggunakan beberapa front-end framework seperti Angular, React, Vue, Stencil, dan vanila Javascript.

Saat ini Ionic Framework baru secara resmi mendukung penggunaan Framework Anglar dan dukungan untuk Vuejs dan Reactjs masih dalam tahap pengembangan.

Biar makin kenal dengan Ionic, kita bahas dulu sejarahnya…

Sejarah Singkat Ionic
Jadi pada tahun 2013 Ionic mulai dibuat oleh Max Lynch, Ben Sperry, dan Adam Bradley. 2 Waktu itu Ionic menggunakan AngluarJS.

Jadi untuk bisa membuat aplikasi dengan Ionic, kamu juga harus bisa menggunakan angularjs.

Lalu Angular versi 2 rilis dan pada versi ini ‘js’ dihilangkan dan diganti menggunakan Typescript.

Karena itu, disbut Angular saja bukan Angularjs.

Ionic versi 2 dan 3 juga rilis mengikuti Angular.

Seiring berjalannya waktu, framework javascript juga menjamur.

Berbagaimacam framework bermunculan.

Ledakan framework ini membuat kita bingung untuk memilih menggunakan yang mana.

Begitu juga yang terjadi dalam pengembangan Ionic.

Karena itu, pada tanggal 23 Januari 2019 Ionic versi 4 dirilis dengan selogan “Ionic for Everyone” (Ionic untuk siapa saja) 3

Artinya, Ionic tidak hanya fokus menggunakan Angular saja. Ionic juga akan mendukung untuk menggunakan framework yang lain seperti Vuejs, React, bahkan juga Web Components.

Persiapan alat untuk coding Ionic
Adapun alat-alat yang harus dipersiapkan untuk belajar atau coding Ionic adalah Text Editor, Nodejs, dan Ionic CLI.

Lalu untuk membuat APK dan menjalankannya di emulator, kita juga membutuhkan Android Studio dan Android SDK.

Tapi, mari kita fokus dulu mengugnakan peralatan utama, yaitu: Nodejs dan Ionic CLI.

Instalasi Nodejs
Nodejs adalah peralatan pertama yang harus diinstal, silahkan gunakan perintah berikut untuk menginstal Nodejs di Linux (Ubuntu).

sudo apt-get install -y nodejs

Berikutnya kita akan menginstal Ionic CLI.

Instalasi Ionic CLI
Ionic CLI merupakan prgram atau tool berabasis teks untuk membuat project Ionic, menjalankan server, dan build aplikasi.

Kita bisa menginstal Ionic CLI menggunakan npm dengan perintah:

sudo npm -g install ionic

Tunggulah sampai prosesnya selesai.

Setelah itu coba periksa versi yang terinstal dengan perintah ionic

Versi yang terinstal pada komputer saya adalah versi 4.10.1.

Membuat Project Baru
Setelah kita mengisntal semua peralatan yang dibuhkan, sekarang kita coba membuat sebuah project Ionic.

Caranya:

Ketik perintah berikut di terminal.

ionic start myApp tabs

Keterangan:

• start adalah perintah untuk memulai project;
• myApp adalah nama project atau aplikasi yang akan dibuat;
• tabs adalah jenis template yang akan digunakan.

Ada beberapa jenis template untuk memulai project baru:

1. Blank;
2. Tabs;
3. Side Menu.

Perintah ionic start merupakan perintah untuk membuat project Ionic. Perintah ini akan membuat sebuah direktori baru yang berisi source code aplikasi.

Sekarang coba buka project yang baru saja di buat pada teks editor.

Inilah struktur direktori project Ionic. Terdapat beberapa file dan Folder.

Buat kamu yang beru pertama melihat ini, mungkin ada beberapa file dan folder yang belum diketahui fungsinya.

Karena itu…

Mari kita:

Mengenal Stukrutr Project Ionic
Struktur project Ionic terdiri dari tiga direktori utama: e2e, node_modules, dan src. Direktori yang paling penting adalah src karena direktori ini berisi source code aplikasi.

Mari kita bahas lebih detail fungsi setiap folder dan file:

• e2e berisi source untuk Melakukan End 2 End Testing;
• node_modules berisi modul Nodejs;
• src berisi source code aplikasi, di sini lah kita akan menulis kode;
  • app berisi modul aplikasi;
  • assets berisi file statis seperti gambar;
  • environtment berisi file untuk mengatur environtment;
  • theme berisi file SASS untuk definisi tema aplikasi;
  • global.scss file sass global;
  • index.html file HTML untuk aplikasi;
  • karma.config.js file konfigurasi untuk karma;
  • main.ts file utama aplikasi;
  • polyfills.ts file polyfills yang dibutuhkan oleh angular;
  • test.ts file ini dibutuhkan oleh karma.config.js;
  • testconfig.app.json file ini akan di-load oleh test.ts;
  • testconfig.spec.json file ini akan di-load oleh test.ts;
• .gitignore file git yang berisi daftar file dan folder yang diabaikan;
• angular.json file JSON yang berisi konfigurasi untuk Angular;
• ionic.config.json file JSON yang berisi konfigurasi untuk Ionic;
• package-lock.json file JSON yang berisi daftar versi modul nodejs;
• package.json file JSON yang berisi info project dan daftar modul nodejs yang dibutuhkan;
• testconfig.json file JSON yang berisi konfigurasi untuk testing;
• tslint.json file JSON yang berisi konfigurasi untuk linting.

Mungkin kamu tidak akan langsung paham dengan membaca saja. Karena itu, kamu butuh praktik.

…dan sebenarnya penjelasan tentang struktur direktori project Ionic ini tidak perlu dihapal.

Mengapa?

Karena kita tidak sedang ujian . kKita sedang belajar untuk memahami dan bisa menggunakan Ionic, bukan belajar untuk ujian.

Baiklah…

Berikutnya mari kita coba:

Menjalankan Development Server
Development Server adalah sebuah fitur Ionic CLI yang fungsinya untuk membuat webserver sehingga aplikasi dapat dibuka melalui web browser.

Tujuannya untuk memudahkan pengembangan aplikasi.

Ini yang akan kamu lakukan saat membuat aplikasi android dengan Java (Android Studio):

1. Buat Project;
2. Coding;
3. Build dan Run;
4. Buka Emulator (berat uy!);
5. Ada Error, ulangi langkah 2;
6. App Selesai, Publish!

Ini yang akan kamu lakukan saat membuat aplikasi android engan Ionic:

1. Buar project;
2. Coding;
3. Jalankan Server;
4. Ada error, balik ke langkah 2;
5. App Selesai, Publish!

Perbedaanya di sana…

Kita tidak butuh emulator untuk membuka aplikasi, karena kita bisa menggunakan web browser.

Nanti kalau aplikasi sudah jadi, baru kita bisa coba menggunakan emulator dengan membuat APK-nya.

Baiklah, untuk menjalankan Development Server masuk dulu ke direktori projectnya dengan perintah cd.

cd myApp

Kemudian jalankan perintah:

ionic serve

untuk menjalankan Development Server.

Maka web browser akan terbuka.

Ini adalah tampilan aplikasi dengan template tabs.

Apa Selanjutnya?
Selamat, kamu sudah mengenal apa itu Ionic dan sudah berhasil membuat aplikasi pertama serta menjalankannya di Dev Server.

Berikutnya coba pelajari tentang:

• Cara Build APK dan Run Aplikasi Ionic di Emualtor Android;
• Cara Publish Aplikasi Ionic ke Playstore.

selesai gan gampang kan

 

[Ryantama43]

Ijin nyimak ilmunya suhu nanti tak coba buat Kedik klo lgi suwung

 

[RayMantic]

Ijin nyimak ilmunya suhu nanti tak coba buat Kedik klo lgi suwung

sama sama gan ..
html lebih familiar dan semuanya bisa

 

[then]

ijin nyimak smbil belajar ya Hu..
masih awam dg ginian nih.

Mksh Hu udh di share ilmunya.

Sehat dan Bahagia Hu, sukses d RL

 

[RayMantic]

ijin nyimak smbil belajar ya Hu..
masih awam dg ginian nih.

Mksh Hu udh di share ilmunya.

Sehat dan Bahagia Hu, sukses d RL

Terimakasih sudah saya folback

 

[Unknown234]

Ijin mantau suhu

 

[kenthirkatrok]

ijin nyimak & belajar

 

[jfunkb]

ijin belajar hu gpp telat setahun

 

[Unknow_unknow00]

Ane gak saranin pake Cordova sama Ionic, karena menurut ane terlalu berat, performa nya jauh sama React Native atau Flutter, dan Cordova sama Ionic sendiri sudah gak terlalu terkenal, pamornya kalah sama React Native & Flutter.