Cara menggunakan belajar ionic windows

Sebelumnya apa sih ionic itu…

Ionic Framework

Ionic Framework adalah sebuah Toolkit UI yang open source untuk membuat suatu aplikasi web PWA, dekstop, mobile (Android dan iOS). Memiliki lintas platform yang berkualitas tinggi serta memiliki pergerakan yang cepat dengan satu baris kode.

Ionic dibuat untuk bekerja dan berjalan cepat di semua perangkat seluler terbaru.

diantaranya:

• Scroll di mobile atau desktop : Up sampai 60 FPS
• Skor kinerja Lighthouse PWA : Consistent 100%
• Waktu untuk interaktif : 1.8 sec
• Lebih cepat dari versi sebelumnya : Up sampai 2x

Simple, deklaratif Komponen UI

Komponen Ionic ditulis dalam HTML, CSS, dan JavaScript, membuatnya mudah untuk membangun UI modern berkualitas tinggi yang berkinerja hebat di mana saja.

Fungsionalitas perangkat

Akses fitur perangkat hanya dengan sedikit JavaScript. Dari perpustakaan kaya lebih dari 120 plugin perangkat untuk mengakses Kamera, Geolokasi, Bluetooth, dan banyak lagi, atau selami SDK lengkap.

Pada ionic juga sudah tersedia document yang dimana berguna untuk mempermudah kita dalam membuat project yang kita bangun.

Sebagai contoh kalau kita sebagai frontend maka sudah tersedia fitur berupa

UI Components

Berguna untuk mempermudah kita ketika membuat suatu button misalnya maka akan muncul juga penjelasan dari ion-button. Atribut yang digunakan serta element apa saja yang harus di pakai, tidak hanya itu sudah tersedia pula script yang sudah jadi tergantung UI Components apa yang akan kita gunakan. Serta dari script tersebut juga sudah di filter dengan berbagai macam bahasa seperti

• Angular
• Javascript
• React
• Stencil
• Veu

Dengan begitu project yang kita kerjakan akan menjadi sangat mudah, tergantung kita apakah mau bereksplorasi lebih tentang ionic.

stack teknologi Ionic Framework:

Ionic framework juga bisa menggunakan frontend framework seperti angular, reactjs, veujs, stencil, dan vanila javascript tentunya.

Sejarah Singkat Ionic

Ionik lengkap dibuat oleh Max Lynch, Ben Sperry, dan Adam Bradley dari Drifty Co. pada 2013. Versi aslinya dirilis pada 2013 dan dibangun di atasnya AngularJS dan Apache Cordova.

Platform yang didukung

Untuk Android, Ionic mendukung Android 4.4 dan lebih tinggi. Untuk iOS, Ionic mendukung iOS 10 dan yang lebih baru. Ionic 2 mendukung Platform Windows Universal untuk membangun Windows 10 aplikasi.Kerangka Ionic, berdasarkan Angular.js, mendukung BlackBerry 10 aplikasi.

Performa

Aplikasi ionik berjalan dengan campuran kode asli dan kode web, memberikan akses penuh ke fungsionalitas asli jika perlu, dengan sebagian besar UI aplikasi yang dibangun dengan teknologi web standar. Ionic memanfaatkan transisi CSS dan mengubah animasi sebagai cara untuk memanfaatkan GPU dan memaksimalkan waktu prosesor yang tersedia.

Persiapan Untuk Install Ionic

Aplikasi ionik dibuat dan dikembangkan terutama melalui utilitas baris perintah ionic.

Alat-alat lain yang harus dipersiapkan:

• Text editor (Sublime 3, Visual code studio, Notepad++ dll)
• Node.js
• Ionic CLI

Ionic CLI: adalah metode penginstalan yang disukai, karena menawarkan berbagai alat pengembang dan opsi bantuan di sepanjang jalan. Ini juga merupakan alat utama untuk menjalankan aplikasi dan menghubungkannya ke layanan lain, seperti Appflow.

Install Node.js

Sebelumnya kalian harus sudah install terlebih dahulu Node.js

Sudah install…

lalu cek versi node sama npm kalian:

Disini saya menggunakan terminal Hyper, atau kalian bisa menggunakan CMD.

Install Ionic CLI

Ionic CLI merupakan program berabasis teks untuk membuat project Ionic, menjalankan server, dan build aplikasi.

Install Ionic CLI menggunakan NPM:

Step 1

Install cordova terlebih dahulu, lalu tunggu proses hingga selesai.

npm install -g cordova

Setelah proses install selesai lalu cek versi cordova kalian.

Step 2

Buka Hyper atau CMD lalau ketikan perintah dibawah di terminal kalian.

npm install -g @ionic/cli

Tunggu hingga proses install Ionic CLI hingga selesai.

“Jika ada instalasi Ionic CLI sebelumnya, itu perlu dihapus karena perubahan nama paket.”

Uninstall terlebih dahulu, terus install kembali Ionic CLI kalian.

npm uninstall -g ionicnpm install -g @ionic/cli

Membuat Project Baru Dengan Ionic

Buat aplikasi ionic menggunakan salah satu template aplikasi yang sudah jadi atau dengan template kosong. Ada 3 tahapan dalam menggunakan template di ionic di antaranya:

• blank : Project kosong dengan satu halaman
• tabs : Project dengan miliki tab layout
• sidemenu : Project dengan memiliki side menu layout

Step 1

Ketik perintah dibawah pada terminal kalian.

ionic start myApp tabs

Note:

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

Maka kalian akan disuguhkan dengan 3 pilihan Framework yang akan dipakai nantinya.

disini saya memilih React.js

Tunggu proses tersebut hingga selesai.

Step 2

Buka project kalian di text editor

Struktur direktori project ionic.

Yang nantinya akan menjadi tempat kita untuk mengembangakan lebih jauh lagi aplikasi yang akan kita buat nanti.

Ada pun penjelasan dari tiap-tiap folder atau file pada direktori tersebut seperti:

• 📁 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.
• 📄 .capacitor.config.jsonfile JSON yang berisi id app, nama app, dir web serta web runtime bundle.
• 📄 .gitignore file git yang berisi daftar file dan folder yang diabaikan.
• 📄 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.
• 📄 tsconfig.json file JSON yang berisi konfigurasi untuk testing.

Menjalankan Development Server

Development Server adalah sebuah fitur Ionic CLI yang fungsinya ntuk menjalankan aplikasi ionic di browser.

Bisa menggunakan perintah:

cd myAppionic serve

Tunggu prosess hingga selesai.

Lalu..

Secara otomatis Ionic App akan terbuka di browser kalian

Dengan port: http://localhost:8100/tab1

Aplikasi dengan react.js & ionic berhasil tampil

Kita coba dengan tampilan mobilenya, apakah sudah langsung responsive apa tidak.

Untuk tampilan mobilenya pun sudah langsung responsive, dengan begitu untuk bagian tampilannya kita hanya cukup memperbagus dan membuat semenarik mungkin ketika digunakan oleh user nanti.

Selebihnya kita hanya fokus untuk bagian backendnya saja.

Signature

10918003 - Sidik Mulyana

Program Studi Manajemen Informatika

Fakultas Teknik dan Ilmu Komputer

Universitas Komputer Indonesia

Referensi:

• https://www.petanikode.com/ionic-untuk-pemula/
• https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework)
• https://ionicframework.com/docs/intro/cli
• https://www.nesabamedia.com/cara-install-ionic-framework-di-windows/

Sebutkan bahasa pemrograman apa saja yang digunakan pada saat membuat project di Ionic?

Apa yang dimaksud dengan Ionic?

Apakah bisa membuat aplikasi Android dengan javascript?