image1

LET'S MAKE SOMETHING|I'M MAKER FROM SANTRI

Memulai Menggunakan Ionic Framework - Building Hybrid App

Ionic Framework - Bahasa Indonesia
Ionic Framework - Bahasa Indonesia

Pada kesempatan kali ini saya akan melanjutkan dari tulisan saya sebelumnya Mengenal Ionic Framework, sekarang bagaimana cara mempersiapkan alat - alat yang dibutuhkan sebelum bisa menggunakan ionic framework. Dsini saya hanya menjelaskan dengan metode CLI nya saja.

Pra Alat

  1. IDE atau Integrated Development Environment adalah sebuah aplikasi / software yang membantu programmer dalam membuat sebuah aplikasi dan biasanya memiliki GUI. Aplikasi IDE adalah tempat programmer menuliskan baris – baris kode (coding) dan menjalankan programnya. Dan saya sendiri menggunakan Visual Studio Code silahkan download sesuai dengan operating system-nya.  Karena banyak sekali extension2 nya, juga saya gunakan Ionic Extension Pack sebagian extension untuk ngedukung pembuatan App dengan Ionic
    Memulai Menggunakan Ionic Framework - Building Hybrid App
    Ionic Extension Pack - Visual Studio Code
  2. NPM adalah package manager untuk JavaScript. Karena ionic menggunakan Angular js jadi untuk menginstall module - module diperlukan NPM. NPM adalah sebuah tool/aplikasi kecil untuk mengatur package/aplikasi JavaScript yang mengunakan Node.js. Cara install install terlebih dahulu node js sesuai dengan operating system-nya. Berikut gambar dibawah ini adalah contoh bila NPM sudah terinstall. 
    Memulai Menggunakan Ionic Framework - Building Hybrid App
    Cek Versi NPM dan NODE JS via Terminal
  3. CORDOVA CLI 
    Untuk OSX atau Linux   $ sudo npm install -g cordova
    Untuk windows          C:\>npm install -g cordova
    Memulai Menggunakan Ionic Framework - Building Hybrid App
    Cek  Versi cordova yang sudah terinstall via Terminal
    Selanjutnya untuk bisa disimulasikan di emulator Android atau iOS dan dinstall di real device:
    1. ANDROID
      • Install Java Development Kit (JDK) 8 atau yang lebih tinggi versinya.
      • Install Android Studio
      • Lebih jelasnya mengenai ini bisa dilihat disni
    2. iOS
      • Install XCODE, bila Xcode-nya sudah terinstall harus jalankan perintah dibawah ini agar si Cordova dapat dijalankan
        $ xcode-select --install
      • ios-deploy tools allow you to launch iOS apps on an iOS Device from the command-line. To install it, run the following from command-line terminal:
        $ npm install -g ios-deploy
      • Lebih jelasnya mengenai ini bisa dilihat disni
  4. Install IONIC CLI  nahh ini dia yg terpenting dan ter inti.
    npm install -g cordova ionic
    Memulai Menggunakan Ionic Framework - Building Hybrid App
    Cek Versi Ionic yang sudah terinstall via Terminal
Mari sekarang saya kan coba untuk membuat aplikasi baru, sebagai contoh disini saya beri nama HelloIonic silahkan ketikan kode dibawah ini ke terminal :
ionic start
Bila tidak error, maka akan ada pertanyaan.
? What whoud you like to name your project:
Silahkan sesuaikankan dengan yang saya contohkan dulu. Selanjutnya silahkan disesuaikan dengan nama sendiri proyek name nya. Catata!!  gk boleh pake space yaa nanti error kalo di kasih spasi seperti ini [ERROR] haha haha is not a valid package or directory name.
Sebenarnya kenapa tidak boleh pake spasi, karena nanti akan di buatkan otomatis folder. Step selajutnya adalah memilih template yang udah di sediain ama ionic cli, berikut daftar nya
StarterDescription
tabsSebuah contoh proyek dengan tabulasi sederhana dibawah
blankSebuah contoh  proyek kosong, bagi yang mau coba2 dari awal
sidemenuSebuah contoh proyek dengan menu samping dengan navigasi ke beberapa contoh halaman
superSebuah contoh proyek lengkap dengan beberapa halaman, provider dan ini cocok buat mau ulik daleman Ionic Framework 
conferenceSebuah contoh proyek dengan aplikasi jadi
tutorialSebuah contoh proyek sesuai yang ada di dokumentasi ionic 
awsAWS Mobile Hub Starter
Selanjutnya bila ada pertanyaan ? Would you like to integrate your new app with Cordova to target native iOS and Android? di no aja dan jawab NO untuk pertanyaan selanjutnya, itu nanti akan dibahas untuk tulisan berilutnya.
Memulai Menggunakan Ionic Framework - Building Hybrid App
Membuat proyek baru dengan Ionic Cli
Finally jalankan kode berikut dibawah, untuk melihat hasil proyek via browser. Dan otomatis default browser akan terbuka


ionic serve
Memulai Menggunakan Ionic Framework - Building Hybrid App
Tes proyek baru dan melihatnya via browser

Selesai.
Sudahi cukup dulu sampai bisa sini, mulai dari install beberapa tools yang dibutuhkan untuk bisa menggunakan IOnic Framework. Tulisannya selanjutnya akan mencoba dengan real device ke android dan iOS. Pantengin trus yaaa blog nyaa

Terima kasih, semoga bermanfaat.

Share this:

CONVERSATION

0 comments: