Membuat Drawer Menu Dengan Flutter

Daftar Isi Pelajaran ...

Sahabat ASIC kita akan membuat drawer menu dalam Flutter. Drawer menu adalah salah satu fitur Google Material Design yang didukung oleh library Flutter.  Karena bersifat cross platform maka code nya akan lebih ringkas dan hal ini yang membuat orang banyak beralih dan mempelajari Flutter.

Dalam latihan ini kita juga belajar mengaktifkan sumber gambar internal dalam project Flutter dengan merubah file pubspec.yaml.  Kita membuat directory assets dalam root project dan sub directory images.  Lokasi tersebut akan kita aktifkan dengan merubah file pubspec.yaml dengan menonaktifkan tanda # yang sebelumnya sudah ada.  Gambar tersebut akan kita gunakan untuk header drawer menu.  

Dalam Drawer menu kita akan melakukan pengisian parameter drawer header seperti foto, nama, email dan gambar background yang dapat dipilih apakan bersumber dari internet atau lokal.  Selamat Mencoba Sahabat ASIC.

Petunjuk Penggunaan : Penggunaan.pdf
Flutter_Code : Flutter_App_Drawer.zip
Github Project  : flutter_material

Link :

1. Flutter AppBar Basic
2. Flutter : Setting Up a Navigation Drawer Multiple Fragments
3. Flutter : Creating Drawers
4. Flutter from Zero to Comfortable
5. Belajar Flutter Basic DaengWeb
6. Flutter : Showing Snackbar Within  The Widget

Instalasi Flutter di Android Studio Windows

Daftar Isi Pelajaran ...

Sahabat ASIC kali ini kita akan menginstall Flutter ke Android Studio Windows kita. Flutter adalah user interface toolkit yang dikembangkan Google dengan menggunakan bahasa Dart untuk perangkat mobile baik android maupun IOS dan web (cross flatform).  Seperti React Native di Facebook.  Salah satu daya tarik flutter adalah kesederhanaanya.  Karena menggunakan material design jadi tidak jauh berbeda tampilannya jika dibuat dengan android.  Android Studio dapat diinstall di operating system Windows dan MacOS.  Begitu juga Flutter dapat diinstall di dua operating system tersebut.  Jika kita menginstall Flutter di MacOS kita dapat membuat file APK untuk android dan file IPA untuk IOS dengan perintah flutter build apk dan perintah flutter build ios.  Jika kita menginstall di Windows kita hanya bisa membuat file APK saja seperti biasa karena perintah flutter build ios hanya bisa berjalan di MacOS.  Kita bisa membuat file IPA IOS dari windows dengan konversi online dengan memanfatkan GitHub dan codemagic (https://codemagic.io/start/) untuk build IOS dan mendapatkan file nya melalui email.

Pada latihan ini kita akan menginstall Flutter dalam Android Studio dengan operting system windows.  Membuild APK dan menjalankannya dalam emulator android (Android Virtual Device-AVD).  Lalu kita membuat register di GitHub dan CodeMagic untuk membuild aplikasi yang kita buat untuk kita konversi menjadi file IPA untuk dapat kita install di perangkat IOS.

Android Studio IDE menyediakan menu untuk terhubung dan sharing file project Flutter ke GitHub.  Aplikasi online codemagic nanti dibuka dengan menghubungkan project yang kita share  di GitHub.  Di codemagic nanti ada pengaturan untuk penghapusan project, build untuk Andorid, IOS dan Web, provisioning certifcate untuk perangkat IOS dan lain-lain.  Selamat mencoba sahabat ASIC.

Petunjuk Penggunaan : Penggunaan.pdf
Petunjuk CodeMagic untuk IOS : CodeMagic.pdf 
Project Flutter di GitHub : GitHub_Astimen


Link :

1. Developing for IOS Device in Windows environment with Flutter
2. React Native or Flutter : Which should I choose?
3. Continuous Integration for Flutter and Codemagic
4. What is a provisioning profile and code signing in IOS?
5. How to Create a Distribution Provisioning Profile for IOS

Membuat Scanner QR Code Dengan Google Vision

Daftar Isi Pelajaran ...

Dalam rangka mendukung machine to machine learning (MML) dan image processing Google mengluarkan library google vision.  Salah satu fungsinya adalah membaca gambar diantaranya QR Code.  Pada latihan ini kita akan membuat scanner QR Code dengan menggunakan Google Vision yang akan kita tambahkan pada Gradle Script. Kita akan membuat ScanActivity untuk melakukan scan dan kita akan gunakan activity tersebut baik pada Activity maupun fragment.  Pengkodeanya sama persis hanya dibedakan pada penggunaan this dan getActivity.

Untuk mendukung pemrosesan gambar diatas dibuat file pdf yang mengkombinasikan QR Code, warna, frame dasar gambar yang akan dibaca oleh scanner.  Pembuatan file pdf tersebut dilakukan pada file php dalam server yang dijalankan melalui browser.  Pada fragment ditambahakan alamat google map yang dibaca dan dijalankan pada sebuat web view.  Selamat Mencoba Sahabat ASIC.

Petunjuk Penggunaan : Petunjuk.pdf
Aplikasi Android : MyApplication.zip
Webservice PHP : Webservice.zip
Struktur Database dan Data : Datababse.zip

Link :

1. Membuat QR Code Scanner dengan Google Vision Api, Juanas
2. Error : cannot access zzbfm class file StackOverflow.com

Membuat Scanner Zxing QR Code dan Pencarian Data pada Fragment dan Activity

Daftar Isi Pelajaran ....

Sahabat ASIC kita dapat mengitegrasikan scanner library Zxing untuk membuat scanner QR Code dan melakukan pencarian data marka ke server melalui object JSON volley dan menampilkan hasilnya.  Secara default Zxing menggunakan model scanner horisontal seperti pada fragment.  Kita akan membuat scanner berbentuk potrait pada sebuah activity.

Pada latihan ini kita akan menggimplementasikan onClickListener untuk mengaktifkan klick button scanner dan pencarian data.  Pengkodean java untuk mengaktifkan Zxing scanner di activity dan di fragment memiliki sedikit perbedaan.  Ditambahkan juga pengkodean PHP untuk membuat  QR Code dari data marka yang ada di database dalam bentuk data JSON (id_rec dan nama_marka). QR Code tersebut akan discan oleh aplikasi untuk ditampilkan data key nya dan dilakukan pencarian data yang lain.

Untuk kemudahan sebaiknya file APK yang sudah dibuilt di PC diupload ke Google Drive dan dodownload ke Gadget Google Drive dan diinstall.  PC dapat membuat QR Code melalui browser dan discan untuk mengakses REST Webservice PHP dalam database di alamat hosting tertentu.  Selamat mencoba sahabat ASIC.

Petunjuk Penggunaan : Penggunaan.pdf
Aplikasi Android : MyApplication.zip
Aplikasi dan Webservice PHP : Webservice.zip
Struktur dan Data Database : Database.zip

Link :

1. Raj Deol, Adroid Barcode Scanner and Camera Flash
2. Zxing OnActivityResult not call in fragment only in activity

Membuat Kotak Polygon Marka Google Maps dan CRUD Bottom Sheet

Daftar Isi Pelajaran ....

Sahabat ASIC kita dapat membuat titik marka pada peta Google untuk memberi tanda lokasi kordinat latitude dan longitude tertentu. Tapi itu akan mengalami kesulitan jika kita akan membedakan satu rumah dengan rumah yang lain karena jaraknya yang rapat.  Untuk membantu penandaan tersebut dibuatlah poligon kotak yang lebar dan tingginya digambar sesuai posisi kordinat marka. Untuk membedakan kotak satu dengan kotak yang lain diberikan juga pembeda warna, ketebalan garis dan sudut yang dapat disesuaikan dengan posisi rumah atau gedung. Pada latihan ini kita akan membuat kotak persegi panjang, jadi dibutuhkan empat buah titik dengan lebar dan tinggi tertentu dari posisi marka.

Pada latihan ini juga kita membuat fungsi Volley yang mengakses alamat URL Webservice PHP JSON metode POST dengan parameter kotak isian dengan fungsi create, read, update dan delete (CRUD) melaui bottom sheet. Tujuannya agar marka baru yang sudah diinput posisinya tetap ada dalam fragment tertentu untuk menampilkan data marka yang lain.  Selamat mencoba sahabat ASIC.

Petunjuk Penggunaan : Penggunaan.pdf
Aplikasi Android : Application.zip
Webservice PHP JSON : php_webservice.zip
Database dan Struktur : database.zip

Informasi Tambahan Marka Google Maps melalui Bottom Sheet

Daftar Isi Pelajaran ...

Bottom Sheet adalah informasi yang muncul dari bawah dan dapat ditutup kembali dengan scroll down sheet tersebut.  Bottom Sheet menjadi satu dan menempel pada sebuah fragment atau activity.  Jadi kita dapat memunculkan informasi tambahan yang diperlukan dengan Bottom Sheet dan kita masih berada dalam lingkungan fragment dan activity tersebut.  Pada latihan ini kita mempelajari penggunaan Bottom Sheet pada Google Maps untuk menampilkan detail sebuah marka jika diklik informasinya.  Dengan menggunakan Bottom Sheet kita tidak perlu keluar dari Google Maps dan dapat menutupnya untuk beralih dan menampilkan detail marka yang lain.

Kita akan membuat class Bottom Sheet dan membuat file WebService Data JSON yang baru sesuai ID  marka yang diklik windownya.  WebService akan mengembalikan informasi tambahan marka untuk ditampilkan dalam Bottom Sheet.  Server juga akan memberikan informasi URL gambar yang akan ditampilkan dengan Glide.  Selamat Mencoba Sahabat ASIC.

Petunjuk Penggunaan : Petunjuk.pdf
Aplikasi Android : Application.zip
Web Service dan File Gambar : WebService_Blog.zip
Struktur Data : Struktur_Data.zip

Gambar Marka Pada Google Maps Clustering

Daftar Isi Pelajaran ...

Sahabat ASIC kali ini kita akan belajar membuat gambar marka jika dilakukan clustering pada Google Maps.  Sebelumnya kita dapat mengganti gambar marka ketika menambahkan marker melalui marker option.  Sekarang kiat akan belajar merubah gambar marka ketika dilakukan clustering melalui fungsi OnBeforeClusterItemRendered.  Juga ditambahakan fungsi yang akan mengupdate secara otomatis tampilan angka clustering sesuai jumlah marka nya.  Fungsi data JSON Volley dengan metode POST dan parameter tetap akan digunakan untuk mengakses WebService data JSON untuk mendapatkan data marka dan data status yang akan kita hubungkan dengan gambar marka.

Pada Pelajaran ini kita akan menambahkan activity menu drawer yang ditampilkan sesuai pilihan login.  Main3Activity ini akan menampilkan fragment frg_google_sheet yang menunjukkan angka clustering marka jika di zoom out (perkecil) dan menampilkan image marka sesuai kriteria jika di zoom in (perbesar).  Agar angka clustering tetap uptodate sesuai dengan jumlah marka ditambahkan fungsi tertentu.  Selamat mencoba sahabat ASIC.

Petunjuk Penggunaan : Petunjuk.pdf
Aplikasi Andriud : Application.zip
WebService PHP JSON : webservice.zip
Struktur Database : database.zip