Thursday, March 28, 2019

Panduan Instalasi dan Membuat Projek Flutter dengan Android Studio

Membuat Projek Flutter
Tutorial Flutter : Cara Instalasi Flutter pada Windows dan Membuat Projek Flutter dengan Android Studio - Halo sobat Eduprog jika sebelumnya saya sudah membahas seputar perkenalan framework Flutter kali ini saya akan mengajak sobat untuk memulai instalasi dan segala sesuatu yang perlu disiapkan untuk memulai projek baru dengan Flutter dimana pada kasus ini menggunakan sistem operasi Windows.

IDE yang saya pilih di sini adalah Android Studio, walaupun banyak alternatif lain yang bisa sobat gunakan untuk pengembangan penulisan kode dengan framework Flutter, seperti IntelliJ IDEA atau Visual Studio Code (VS Code) yang lebih umum. Di sini saya memilih Android Studio sebagai pilihan IDE karena pada Android Studio terdapat fitur atau menu untuk membuka AVD Manager sehingga lebih singkat, selain itu target utama untuk pengembangan aplikasi pada kasus ini adalah untuk sistem Android.

Untuk mempersingkat waktu, langsung saja kita ke poin utama pembahasan pada materi ini yaitu melakukan instalasi dan pembuatan projek pada Flutter dengan Android Studio. berikut adalah hal-hal yang perlu anda lakukan :

Instalasi Flutter

Sebelum sobat melakukan instalasi Flutter pada sistem operasi Windows, sobat perlu memperhatikan beberapa aspek berikut, salah satunya adalah spek minimal yang dibutuhkan untuk proses instalasi.
  1. Sistem Operasi : Windows 7 SP1 atau yang lebih baru (64 bits).
  2. Ruang Hardisk : Ruang hardisk minimal yang dibutuhkan adalah 400 MB untuk framework saja (tidak termasuk IDE yang sobat gunakan).
  3. Tool : Flutter tergantung pada tool-tool ini yang harus tersedia di lingkungan pengembangan sobat. 
Jika Git untuk Windows sudah diinstal, pastikan Anda dapat menjalankan perintah git dari command prompt atau PowerShell. 

Mendownload SDK Flutter

Setelah sobat memperhatikan spesifikasi minimal yang dibutuhkan untuk melakukan instalasi Flutter pada Windows, sobat bisa melanjutkan dengan mengunduh SDK Flutter terbaru melalui link dibawah ini :
Lalu ikuti langkah-langkah berikut :
  1. Simpan hasil unduhan SDK flutter anda di lokasi yang anda kehendaki.
  2. Ekstrak file zip dan tempatkan folder flutter beserta isinya di lokasi pemasangan yang sobat inginkan untuk Flutter SDK (misalnya. C:\ src\ flutter; jangan instal Flutter di direktori seperti C:\Program Files\ yang membutuhkan hak akses istimewa).
  3. Temukan file flutter_console.bat di dalam direktori flutter. Lalu jalankan dengan mengklik dua kali.

Memperbaharui Path

Jika sobat ingin menjalankan perintah Flutter di konsol Windows secara umum, lakukan langkah-langkah berikut ini untuk menambahkan Flutter ke variabel PATH sistem Windows:
  • Mulai dengan mengklik Start lalu pada bar pencarian, ketik ‘env’ dan pilih Edit environment variables for your account
  • Lalu setelah fasilitas System Properties terbuka, pilih Environtment Variables..
  • Perhatikan pada bagian User Variables pada variable Path, pilih variable tersebut lalu tekan tombol Edit.
Variabel Path
  • Lalu tambahkan lokasi bin dari SDK Flutter dimana sobat mengekstrak sebelumnya. Misalnya D:\Libs\flutter\bin\
  • Lalu OK atau Simpan.
Yang perlu diperhatikan bahwa sobat harus menutup dan membuka kembali jendela konsol yang ada agar perubahan ini dapat diterapkan. Lalu ketikan Flutter maka, perintah tersebut akan segera dikenali oleh konsol Windows.

Memastikan Instalasi

Langkah selanjutnya adalah memastikan hasil intalasi SDK Flutter apakah sudah sesuai atau belum, untuk itu lakukan dari jendela konsol yang memiliki direktori Flutter (lokasi instalasi SDK sebelumnya), jalankan perintah berikut untuk melihat apakah ada dependensi platform yang sobat perlukan untuk menyelesaikan pengaturan:
D:\Libs\flutter>flutter doctor
Perintah diatas tujuanya adlah untuk memeriksa lingkungan pengembangan Flutter kita dan menampilkan laporan status pemasangan Flutter kita. Periksa output dengan cermat untuk perangkat lunak lain yang mungkin perlu Anda instal atau tugas lebih lanjut untuk dilakukan (ditunjukkan dalam teks tebal). Perintah ini sangat  berguna untuk memastikan apakah SDK Flutter yang kita install sudah siap digunakan atau belum.

Instalasi IDE (Android Studio)

Setelah sobat menyelesaikan instalasi SDK Flutter di atas, sekarang kita lanjutkan intalasi IDE yaitu Android Studio. Ikuti langkah-langkah berikut untuk memulai instalasinya:
  • Download Android Studio versi terbari di website resminya melalui link ini.
  • Install Android Studio dan SDK Android yang termasuk didalamnya.
  • Setelah instalasi Android Studi dan SDK Android selesai, lalu jalankan Android Studio dan install plugin Flutter melalui menu File - Setting - Plugins
Plugin Flutter di Android Studio

  • Selesai

Setting Emulator Android

Langkah paling cepat untuk menjalankan aplikasi yang kita buat dengan Flutter atau perubahan-perubahan kode yang kita lakukan adalah dengan menggunakan Emulator, pada saat instalasi Android Studio terdapat fasilitas AVD Manager yang bisa kita gunaan untuk membuat Emulator Android. Langkah-langkahnya adalah sebagai berikut:
  • Jalankan Android Studio lalu buka menu Tool - AVD Manager lalu pilih Create Virtual Device.
  • Pilih tipe device dan versi sistem operasi Android yang anda inginkan, sobat akan segere mendownload jika image dari versi Android tersebut belum ada.
  • Jalankan Virtual Device yang baru sobat buat.
  • Selesai.

Membuat Projek Flutter

Setelah sobat mempersiapkan semua perlengkapan yang dibutuhkan untuk membuat dan mengembangkan aplikasi mobile dengan Flutter saat nya kita memulai pembuatan projek baru dengan Flutter pada IDE Android Studio.
Pada langkah sebelumnya kita telah memasang plugin Flutter pada Android Studio dimana dengan plugin ini secara otomatis Android Studio akan mengenali Flutter dan Dart di dalam lingkunganya. Salah satunya adalah menu untuk pembuatan projek Flutter dengan template yang telah disediakan melalui langkah-langkah berikut ini:

  • Buka Android Studio lalu pilih menu File - New - New Flutter Project.. sehingga akan ada 4 pilihan yaitu Flutter Application, Flutter Plugin, Flutter Package, dan Flutter Module.
  • Pilih Flutter Application seperti gambar dibawah ini.
Membuat Projek Baru Flutter
  • Lalu tekan tombol Next dan sobat akan diminta untuk mengisikan nama projek (secara default adalah flutter_app), untuk penamaan projek flutter disarankan menggunakan huruf kecil (lower case) semua dan menggunakan _ (underscore) sebagai pemisah kata dalam nama projek. Misalnya nama projeknya adalah projek_anuku. Pilih lokasi penyimpanan projek yang sobat sukai dan berikan deskripsi dari projek tersebut.
  • Tekan tombol Next maka sobat diminta mengisikan Company Domain (misalnya : eduprog.net) dan biarkan isian Package Name sesuai yang di generate oleh aplikasi.
  • Tekan tombol Finish sehingga akan terbuka projek Flutter baru di Android Studio sobat seperti dibawah ini.
Projek Flutter

Menjalankan / Debug Projek Flutter

Setelah sobat berhasil membuat projek baru Flutter di Android Studio pada langkah sebelumnya, sekarang waktunya untuk menjalankan atau men-debug projek Flutter tersebut untuk melihat hasil nya secara langsung di emulator Android yang telah kita install sebelumnya.

  • Pada aplikasi Android Studi pilih menu Tool - AVD Manager, pilih Virtual Device yang telah sobat buat sebelum nya lalu jalankan.
  • Setelah Virtual Device jalan, lalu kembali ke aplikasi Android Studio dan tekan kombinasi tombol Shift+F10 (atau tekan icon Play) untuk mode Run atau tekan Shift+F9 (atau tekan icon Kutu) untuk mode Debug.
  • Tunggu beberapa saat (jika tidak ada kesalahan) lalu alihkan fokus kita ke Virtual Device maka akan muncul tampilan aplikasi dari projek Flutter kita.
Virtual Device

Nah, sobat eduprog sampai di sini dulu pembahasan tentang panduan instalasi dan membuat projek Flutter sampai cara menjalankan projek Flutter di Android Virtual Device, sampai jumpa di tutorial selanjutnya.

Wednesday, March 20, 2019

Mengenal Flutter, Framework Modern untuk Membuat Aplikasi Android dan IOS buatan Google

Flutter
Mengenal Flutter, Framework Terbaru untuk Membuat Aplikasi Mobile Pesaing ReactNative - Di era millenial pemrograman seperti saat ini dimana framework baru bermunculan setiap saat tentunya membuat kita semakin bingung dan bimbang, framework mana yang sangat cocok untuk kita pakai. Tujuan framework dibuat adalah untuk mempermudah programmer dalam mengembangkan aplikasi secara cepat dan efisien sehingga dapat menghemat waktu dalam pengembangan aplikasi baik aplikasi web, mobile, maupun desktop.

Rupanya banyaknya framework yang bertebaran di Internet malah membuat kita semakin bingung, karena tentunya setiap framework dipromosikan dengan slogan dan motto yang menggiurkan untuk menarik programmer atau pengembang aplikasi agar memilih dan tergantung pada framework tersebut. Untuk itu sebagai programmer sobat eduprog harus jeli dan bijak menyikapi situasi seperti saat ini.

Bagi para pemula, untuk memilih framework mungkin didasari 2 hal yaitu Popularitas Framework dan Pengembang Framework. Ya, dengan menimbang 2 hal tersebut paling enggak mereka cari aman, karena semakin populer framework semakin besar pula peluang pekerjaan dari framework tersebut, dan nama besar / perusahaan yang mengembangkan framework bisa menjadi jaminan bahwa framework tersebut akan terus dikembangkan secara kontinu tentunya karena ketersediaan sumber daya baik secara skill maupun finansial.

Sebut saja ReactNative framework ini sukses merebut hari pada pengembang aplikasi mobile karena dibalik ReactNative ada nama Facebook yang mana bisa menjadi daya tarik tersendiri bagi pada pegembang aplikasi mobile. Belum lagi konsep yang ditawarkan yaitu membuat aplikasi native (setara native) multi pltaform (Android dan IOS) dengan bahasa Javascript dan konsep React. Sungguh sebuah lompatan besar dalam model pengembangan aplikasi mobile yang diprakarsai oleh Facebook.

Padalah kalau dipikir-pikir, konsep ReactNative ini sendiri tidak jauh berbeda dengan pendahulunya yaitu Cordova dimana kedua-nya sama-sama menggunakan kode Javascript untuk merender tampilan (UI) dimana cordova memanfaatkan engine browser (webview) sedangkan ReactNative mengembed Javascript Engine yang bekerja pada thread terpisah lalu menerjemahkan kode React ke tampilan native mobile.

Sobat eduprog, kali ini saya akan membahas framework sejenis ReactNative (facebook) dan Xamarin (Microsoft) buatan google yang sangat luar biasa dengan fitur-fitur yang powerfull yang siap bersaing dengan ReactNative atau Xamarin.

Apa itu Flutter?

Flutter adalah framework untuk mengembangkan aplikasi mobile yang dapat dikompile menjadi aplikasi native (setara native) di Android dan IOS dengan basis kode tunggal. Artinya sobat cukup menulis satu basis kode saja, lalu sobat bisa mengkompile menjadi aplikasi Android atau IOS (dengan sedikit penyesuaian).

Bahasa Pemrograman Flutter?

Lalu apa bahasa yang kita guakan untuk mengembangkan aplikasi mobile dengan framework flutter? Bahasa pemrograman yang digunakan adalah bahasa Dart. Dart sendiri adalah bahasa pemrograman dengan konsep modern yang juga dikembangkan oleh google sejak tahun 2011. Dart mengusung fitur-fitur powerfull yang sangat memanjakan programmer sehingga memudahkan programmer dalam menulis kode dengan Dart. Dart sendiri sudah mencapai versi stabil saat ini, sehingga aman untuk digunakan. Kalau saya pribadi, Dart ini adalah bahasa pemrograman modern dengan fitur-fitur unggulan yang beriorientasi pada pemrograman bebas terstruktur, sehingga sangat nyaman untuk digunakan.

Kelebihan Flutter?

Flutter memiliki banyak keunggulan dibandingkan produk sejenisnya, karena Flutter dirancang untuk menghasilkan tampilan aplikasi (setara) native dengan konsep modern yang menggabungkan kecantikan tampilan dan kecepatan eksekusi rendering. Jika dirangkum, berikut adalah keunggulan-keunggulan yang bisa menjadi alasan untuk memilih Flutter sebagai framework UI dalam pembuatan aplikasi mobile.

1. Pengembangan Lebih Cepat

Flutter memiliki fitur hot restart dan hot reload yang sangat membantu programmer dalam pengembangan aplikasi mobile dengan flutter, terutama fitur hot reload pada flutter yang memiliki kecepatan tinggi dalam menginterprestasikan perubahan kode kedalam sebuah tampilan sehingga sobat tidak perlu menjalankan ulang dari awal (mengkompile) aplikasi yang sedang sobat kembangkan untuk melihat perubahan tampilan yang berhubungan dengan perubahan kode sobat.
Selain itu flutter dibuat multiplatform, sehingga secara umum sobat cukup  menulis satu basis kode untuk membuat aplikasi IOS dan Android dengan performa (setara) native.

2. Interface yang Ekspresif dan Fleksibel

Flutter dibuat dengan dibekali widget-widget dengan desain tampilan yang sangat fleksible dan ekspresif sehingga memungkinkan sobat membuat aplikasi yang sangat cantik dengan mudah karena banyak tersedia widget-widget siap pakai dan class-class pendukung animasi. Selain itu, fleksibel artinya, sobat bisa mengkostumisasi aplikasi yang sobat buat dengan widget yang tersedia sesuka imaginasi sobat tentu saja.

3. Native Performance

Flutter dibekali dengan struktur engine dengan kecepatan rendering luar bisa, sehingga performa tampilan aplikasi yang dibuat dengan flutter sama (setara) dengan aplikasi native. Flutter menulis engine renderingnya sendiri dengan 4 fase pada level paling rendah yaitu ditulis dengan bahasa C dan C++ dan dikompile dengan NDK pada Android dan LLVM pada IOS. Jadi sobat tidak perlu meragukan lagi kecepatan yang akan dihasilkan dengan sistem rendering seperti ini.

4. Dibuat oleh Google

Jika sobat khawatir siapa dibalik layar flutter ini, maka sobat tidak perlu khawatir karena flutter dan dart dikembangkan oleh perusahaan raksasa internet yaitu Google dan didukung oleh komunitas. Untuk itu, pastinya Google tidak main-main karena pada segmen framework interface untuk pengembangan aplikasi mobile flutter adalah senjata utama google untuk bersaing dengan ReactNative dan Xamarin.

Nah sobat eduprog demikian perkenalan singkat dengan flutter, apakah sobat tertarik untuk belajar flutter? Sebagai kesimpulan penutup, jangan pernah ragu untuk menentukan pilihan sobat terhadap sebuah framework karena kebimbangan akan membuat sobat bingung sendiri.Baiklah sobat eduprog, sampai jumpa di artikel dan tutorial selanjutnya..