Install ionic

Install Ionic Bab ini akan menunjukkan kepada Anda bagaimana untuk memulai dengan kerangka ionik. Tabel berikut berisi daftar komponen yang diperlukan untuk memulai dengan ionik.

S No.SoftwareDescription
1NodeJSIni adalah platform dasar yang diperlukan untuk membuat aplikasi Mobile menggunakan ion. Anda dapat menemukan detail pada instalasi NodeJS di kami NodeJS Environment Setup. Pastikan Anda juga menginstal npm ketika menginstal NodeJS.
2Android SDKJika Anda akan bekerja pada Windows platform dan mengembangkan aplikasi untuk Android platform, maka Anda harus memiliki setup Android SDK pada komputer Anda. Link berikut memiliki informasi rinci pada Android Environment Setup.
3XCodeJika Anda akan bekerja pada Mac platform dan mengembangkan aplikasi untuk iOS platform, maka Anda harus memiliki XCode setup pada mesin Anda. Link berikut memiliki informasi rinci pada iOS Environment Setup.
4Cordova and

Ionic

Ini adalah SDK utama yang diperlukan untuk mulai bekerja dengan ionik. Bab ini menjelaskan cara men-setup ionik dalam langkah sederhana dengan asumsi Anda sudah memiliki setup diperlukan seperti yang dijelaskan dalam tabel di atas.

Menginstal Cordova dan ionic

Kami akan menggunakan Windows command prompt untuk tutorial ini. Langkah yang sama dapat diterapkan ke OSX terminal. Buka jendela perintah Anda untuk menginstal Cordova dan Ionic:

C:\Users\Username> npm install -g cordova ionic

Membuat aplikasi

Sementara membuat aplikasi di ionik, Anda dapat memilih dari tiga opsi berikut untuk memulainya:

 Tabs App

 Blank App

 Side menu app

Di jendela perintah Anda, buka folder mana Anda ingin membuat aplikasi dan mencoba salah satu pilihan yang disebutkan di bawah ini.

App tab

Jika Anda ingin menggunakan template ionik tab, app akan dibangun dengan tab menu, header dan beberapa berguna layar dan fungsi. Ini adalah template ionik default. Buka jendela perintah Anda dan pilih mana Anda ingin membuat aplikasi Anda.

C:\Users\Username> cd Desktop

Perintah ini akan mengubah direktori kerja. App akan dibuat pada Desktop.

C:\Users\Username\Desktop> ionic start myApp tabs

Perintah memulai ionik akan menciptakan folder bernama myApp dan setup ionik file dan folder.

C:\Users\Username\Desktop> cd myApp

Sekarang, kita ingin mengakses folder myApp yang kami hanya dibuat. Ini adalah folder akar kami. Mari kita sekarang Tambahkan Cordova proyek untuk Android Platform dan menginstal plugin Cordova dasar juga. Kode berikut memungkinkan kita untuk menjalankan aplikasi pada Android emulator atau perangkat.

C:\Users\Username\Desktop\myApp> ionic platform add android

Langkah berikutnya adalah untuk membangun aplikasi. Jika Anda memiliki pesan kesalahan setelah menjalankan perintah berikut, Anda mungkin tidak menginstal Android SDK dan dependensinya.

C:\Users\Username\Desktop\myApp> ionic build android

Langkah terakhir dari proses instalasi akan menjalankan aplikasi Anda, yang akan mulai perangkat mobile, jika terhubung, atau default emulator, jika tidak ada perangkat yang terhubung. Android Default Emulator lambat, sehingga saya menyarankan Anda untuk menginstal Genymotion atau beberapa Emulator Android populer lainnya.

C:\Users\Username\Desktop\myApp> ionic run android

Ini akan menghasilkan hasil, yang merupakan aplikasi tab ionik dibawah.

Blank App

Jika Anda ingin memulai dari awal, Anda dapat menginstal template kosong ionik. Kami akan menggunakan langkah yang sama yang telah dijelaskan di atas dengan penambahan ionik mulai myApp kosong bukan ionik mulai myApp tab sebagai berikut.

C:\Users\Username\Desktop> ionic start myApp blank

Perintah memulai ionik akan membuat folder bernama myApp dan setup ionik file dan folder.

C:\Users\Username\Desktop> cd myApp

Mari kita tambahkan Cordova proyek untuk Android Platform dan menginstal plugin Cordova dasar seperti dijelaskan di atas.

C:\Users\Username\Desktop\myApp>ionic platform add android

Langkah berikutnya adalah untuk membangun aplikasi kami:

C:\Users\Username\Desktop\myApp> ionic build android

Akhirnya, kita akan mulai App sebagai dengan kode berikut:

C:\Users\Username\Desktop\myApp> ionic run android

Ini akan menghasilkan hasil sebagai berikut, yang adalah App kosong ionik.

Side Menu App

Ketiga template yang dapat Anda gunakan adalah sisi Menu Template. Langkah-langkah yang sama seperti dua buah template sebelumnya; kami hanya akan menambah sidemenu ketika memulai aplikasi kami seperti yang ditunjukkan pada kode berikut.

C:\Users\Username\Desktop> ionic start myApp sidemenu

Perintah memulai ionik akan membuat folder bernama myApp dan setup ionik file dan folder.

C:\Users\Username\Desktop> cd myApp

Mari kita tambahkan Cordova proyek untuk Android Platform dan menginstal plugin Cordova dasar dengan kode yang diberikan di bawah ini.

C:\Users\Username\Desktop\myApp> ionic platform add android

Langkah berikutnya adalah untuk membangun aplikasi kami dengan kode berikut.

C:\Users\Username\Desktop\myApp> ionic build android

Akhirnya, kami akan mulai App dengan kode yang diberikan di bawah ini.

C:\Users\Username\Desktop\myApp> ionic run android

Ini akan menghasilkan hasil sebagai berikut, yang merupakan aplikasi ionic Menu sisi.

Test App in Browser

Karena kita bekerja dengan JavaScript, Anda dapat melayani app Anda pada browser web manapun. Ini akan mempercepat proses bangunan Anda, tetapi Anda harus selalu menguji aplikasi Anda di asli emulator dan perangkat. Ketik kode berikut untuk melayani aplikasi Anda pada web browser.

C:\Users\Username\Desktop\myApp> ionic serve

Perintah di atas akan terbuka app di web browser. Google Chrome memberikan perangkat modus fungsi pengujian pengembangan mobile. Tekan F12 untuk mengakses konsol pengembang.

Sudut kiri atas jendela konsol klik memiliki ikon “Toggle perangkat Mode”. Langkah berikutnya akan untuk klik “Dermaga ke kanan” ikon di sudut kanan atas. Setelah halaman di-refresh, Anda harus siap untuk pengujian pada web browser.

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *