Memulai Menggunakan Ionic Framework – Building Hybrid App

You are currently viewing 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
Starter Description
tabs Sebuah contoh proyek dengan tabulasi sederhana dibawah
blank Sebuah contoh  proyek kosong, bagi yang mau coba2 dari awal
sidemenu Sebuah contoh proyek dengan menu samping dengan navigasi ke beberapa contoh halaman
super Sebuah contoh proyek lengkap dengan beberapa halaman, provider dan ini cocok buat mau ulik daleman Ionic Framework 
conference Sebuah contoh proyek dengan aplikasi jadi
tutorial Sebuah contoh proyek sesuai yang ada di dokumentasi ionic 
aws AWS 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.