Membuat Aplikasi Catatan dengan Flutter

Latar Belakang

Aplikasi catatan ini dibuat dengan flutter dan database mysql. disalamnya digunakan Restapi dengan php untuk menjembatani aplikasi flutter dengan database.

Untuk implementasi dari aplikasi catatan (E-Notes) ini saya integrasikan dengan website Edugi. Di website edugi ada modul Evaluasi Harian, dan ditambahkan fitur catatan harian.

Spesifikasi

• Android Studio 3.6.2
• Flutter v1.12.13+hotfix.9

Fitur Aplikasi

1. Terintegrasi dengan website Edugi
2. Dapat melakukan registrasi akun edugi
3. Dapat login aplikasi dengan akun edugi
4. Ada pengecekan koneksi internet device
5. Ada auto login dengan sharedpreferences

Download Sourcecode

Alur Program

1. Download dan install aplikasinya dalam bentuk APK
2. Login dengan akun edugi, bisa juga daftar akun baru
3. Bisa melakukan tambah catatan, view, edit, dan delete
4. Jika data catatan belum terupdate bisa klik icon refresh
5. Catatan di android terintegrasi dengan catatan di web edugi

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 07-08-2021

KangAgus

Referensi Video untuk Belajar Coding Flutter

Latar Belakang

Sebelumnya saya telah membuat tutorial referensi-blog-untuk-belajar-coding-flutter sudah saya susun berdasarkan kelengkapan materi dan level belajarnya. Untuk melengkapi belajar saya dan teman-teman, saya buatkan artikel ini berdasarkan referensi dari senior saya mas Maulana Ilham.

• https://flutter.id/blog/video-tutorial-youtube-flutter-dari-erico-darmawan
• https://flutter.id/blog/video-tutorial-youtube-flutter-dari-edi-kurniawan
• https://flutter.id/blog/video-tutorial-youtube-flutter-dari-devindo
• https://flutter.id/blog/tutorial-flutter-rest-api-dari-ilmucoding-com
• https://flutter.id/blog/video-tutorual-youtube-flutter-dari-udacoding
• https://flutter.id/blog/video-tutorial-youtube-dari-buildwith-angga
• https://flutter.id/blog/video-tutorial-youtube-flutter-dari-flauinz
• https://flutter.id/blog/video-turorial-youtube-flutter-dari-filledstacks

Playlist Video Tutorial Flutter

• https://www.youtube.com/watch/erico
• https://www.youtube.com/watch/idrcorder
• https://www.youtube.com/watch/kuldiiproject

Sebelum Belajar Flutter, Kita harus belajar dahulu Fundamental Dart sebagai bahasa pemrogramannya. berikut playlist nya : Pemrograman Berorientasi Objek – Dart

Metode Belajar Coding

Terdapat 2 metode belajar coding yaitu “How” dan “Why”. Metode belajar “How” lebih menitik beratkan pada langkah-langkah tutorial bagaimana suatu aplikasi dibuat (best practise) dan dapat berjalan sebagaimana mestinya (running well). Metode ini tidak terlalu mementingkan konsep dasar dari coding yang menyusun aplikasi tersebut. Waktu belajarnya lebih cepat namun tidak kuat di konsep sehingga kesulitan dalam mengembangkan aplikasi yang telah dibuat.

Sedangkan metode belajar “Why” lebih menitik beratkan pada belajar konsep dasar atau fundamentalnya dahulu baru secara bertahap ke praktik pembuatan aplikasinya. Metode ini memakan waktu belajar yang lebih lama, namun lebih faham konsepnya sehingga lebih cepat dalam pengembangan aplikasi karena semuanya sudah dipelajari.

Oleh karena itu, artikel ini dibuat untuk melengkapi metode belajar teman-teman yang sebelumnya mendahulukan “How” dengan cara mencari contoh-contoh aplikasi yang sudah jadi. setelah itu dilanjutkan dengan metode “Why” dengan mempelajari konsep-konsep dasar sehingga mengetahui mengapa stuktur codingnya harus seperti itu, mengapa cara penulisannya harus seperti itu, dan pertanyaan-pertanyaan lainnya yang melatih daya analisa sehingga kita dapat lebih mudah dalam mengembangkan dan menemukan solusi jika ada kendala.

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 30-06-2021

KangAgus

Referensi Blog untuk Belajar Coding Flutter

Latar Belakang

Sebelumnya saya pernah membuat beberapa tutorial terkait flutter. dan melihat banyak alasan teman-teman bergabung ke website EDUGI karena ingin belajar flutter.

Ditambah perkembangan flutter yang multi platform android dan IOS. serta dapat membuat aplikasi mobile dan website menggunakan flutter. sehingga itu menjadi alasan saya memfokuskan diri untuk belajar flutter sebagai bahasa untuk membuat aplikasi mobile.

Referensi

Ada beberapa referensi blog atau website untuk belajar flutter dari teman-teman yang sebelumnya telah belajar flutter dan berpengalaman dalam menggunakan flutter. Diantaranya adalah :

1. https://belajarflutter.com/flutter
2. https://konsepkoding.com/flutter
3. https://juragankoding.com/flutter
4. https://www.byriza.com/flutter
5. https://daengweb.id/flutter
6. https://www.seredata.com/flutter
7. https://www.kodetr.com/flutter
8. https://kodingindonesia.com
9. https://ilmucoding.com/flutter
10. https://medium.com/flutter
11. https://filledstacks.com/flutter
12. https://protocoderspoint.com/flutter

Jika teman-teman ada referensi yang lain silahkan sharing dengan mengisi komentar.

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamin

Bogor, 27-05-2021

KangAgus

Nox Player untuk Emulator Visual Studio Code

Latar Belakang

Sebelumnya saya membuat tulisan nox-player-untuk-emulator-android-studio. Karena spesifikasi laptop saya masih terlalu berat jika menggunakan android studio. Maka untuk belajar mobile apps flutter saya menggunakan editor Visual Studio Code (VSCode).

Namun, kendalanya, emulator nox tidak terdeteksi di statusbar VSC. Sehingga harus menggunakan cara-cara tertentu agar device emulator terdeteksi dan saat menjalankan flutter doctor tidak ada masalah. best practisenya adalah sebagai berikut :

Langkah-langkah

1. Jalankan aplikasi NOX Player
2. Jalankan aplikasi Editor VSCode
3. Jalankan aplikasi CMD
4. Jalankan perintah berikut : cd C:\Program Files\Nox\bin\
5. Jalankan perintah berikut : nox_adb.exe connect 127.0.0.1:62001
6. Tunggu sampai muncul bacaan connected dan muncul nama device di VSCode
7. Jika devicenya menghilang. maka kembali ke point nomor 5 atau kill process “adb.exe” di task manager
8. Untuk mengecek nama device gunakan perintah : flutter devices

Tampilan Screenshoot

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 27-05-2021

KangAgus

Nox Player untuk Emulator Android Studio

Latar Belakang

Saya sudah mengupgrade memory laptop menjadi 8GB, dengan processor AMD. Namun saat saya menjalankan emulator android masih terasa sangat lama sampai ada notifikasi timeout. saya pun mencari alternatif lain seperti bluestack, virtualbox, genny monition. namun masih terasa lama loading di laptop. Akhirnya saya mencoba NoxPlayer.

Install Nox Player

1. Download https://id.bignox.com
2. Instalasi aplikasinya
3. Jalankan aplikasinya
4. Klik icon seting=>performance settings=>ganti resolusi dari ukuran tablet ke mobile device
5. Klik tombol save settings, tutup dulu aplikasinya kemudian jalankan kembali nox player

Kesimpulan

Setelah menggunakan emulator nox player, konsumsi memory sekitar 48% dan konsumsi processor 10%. Nox player memang biasa digunakan untuk menjalankan aplikasi gaming, namun saran saya tetap fokus menggunakan nox player untuk keperluan belajar aplikasi android.

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 06-03-2021

KangAgus

Membuat Aplikasi Login & CRUD Menggunakan Flutter, CI dan Rest API

Latar Belakang

Saya ingin mengkolaborasikan antara aplikasi website dan aplikasi mobile. Skenarionya adalah saya memiliki sebuah database untuk mengelola data “member”. Saya memiliki aplikasi web base untuk administrator login dan melalukan proses CRUD didalamnya. dan administrator juga dapat login melalui aplikasi android dan melakukan proses CRUD didalamnya.

Untuk aplikasi login dan CRUD dengan flutter saya memodifikasi dari 2 aplikasi pada artikel sebelumnya :

• Aplikasi-register-login-menggunakan-flutter
• Android-crud-restapi-menggunakan-flutter

Tujuan Project

Adapun tujuan dari mini project ini adalah membiasakan coding CRUD baik di aplikasi web base dengan codeigniter maupun coding CRUD di aplikasi android dengan flutter. Sehingga jika dasar codingnya sudah terbangun, diharapkan bisa mengembangkan ke aplikasi yang lebih kompleks dan bermanfaat.

Seperti biasa metode pada tutorial saya adalah metode best practice. tidak banyak teori yang disampaikan. asalkan faham dengan maksud dan tujuan dari aplikasi. dan menguasasi alur serta logika codingnya.

Pada sourcecode project ini terdapat beberapa file diantaranya :

• File db_restapi.sql.zip
• File web_admin.zip
• File web_restapi.zip
• File flutter_restapi.zip

Untuk mencoba contoh aplikasinya silahkan ikuti langkah-langkah dibawah ini :

1. Ke menu Download dan cari kata kunci : “Flutter”
2. Pertama import database yang saya lampirkan
3. Extract web_admin ke htdoc dan sesuaikan koneksinya
4. Extract web_restapi ke htdoc dan sesuaikan koneksinya
5. Jalankan android studi dan buka project flutter yang dilampirkan

Screenshot

Download Sourcecode

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 24-12-2020

KangAgus

Membuat Aplikasi Pendaftaran & CRUD Menggunakan Flutter dan Rest API

Latar Belakang

Sebelumnya saya telah membuat artikel android-crud-menggunakan-flutter-dan-rest-api. Seperti aplikasi website ada fitur login untuk mengamankan data yang ada didalamnya. Begitu juga dengan aplikasi mobile Android.

Pada contoh aplikasi ini terdapat beberapa fitur seperti :

• Registrasi member
• Login Member
• Logout Member
• Fitur CRUD data

Download Sourcecode

Untuk mencoba contoh aplikasinya silahkan ikuti langkah-langkah dibawah ini :

1. Daftar dan Login website
2. Ke menu Download dan cari kata kunci : “Flutter”
3. Pertama import database yang saya lampirkan
4. Extract webapi ke htdoc dan sesuaikan koneksinya
5. Jalankan android studi dan buka project yang dilampirkan

Screenshot

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Jakarta, 6-12-2020

KangAgus

Membuat Aplikasi CRUD Menggunakan Flutter, MySQL dan Rest API

Latar Belakang

Pada artikel kali ini masih terkait dengan pembuatan aplikasi android CRUD dengan berbagai bahasa dan database yang digunakan. Tujuannya untuk memberikan alternatif dalam pengembangan aplikasi android.

Rest API

Sebelumnya saya pernah membahas terkait API testing-website-api-dengan-aplikasi-postman dan di implementasikan ke dalam aplikasi website menggunakan framework Codeigniter dan Laravel. Sekarang saya akan mengimplementasikan ke aplikasi mobile menggunakan flutter. Database yang digunakan adalah mariadb. Sourcecode yang saya jadikan contoh kali ini saya dapat dari teman github.

Download Sourcecode

Untuk mencoba contoh aplikasinya silahkan ikuti langkah-langkah dibawah ini :

1. Daftar dan Login website
2. Ke menu Download dan cari kata kunci : “Flutter”
3. Pertama import database yang saya lampirkan
4. Extract webapi ke htdoc dan sesuaikan koneksinya
5. Jalankan android studi dan buka project yang dilampirkan

final response = await http.get("http://10.0.2.2/webapi/getdata.php");
//final response = await http.get("https://api.yourdomain.com/getdata.php");

Contoh alamat URL API saya adalah seperti diatas, silahkan disamakan atau disesuaikan dengan yang ada di komputer teman-teman. Bisa juga upload ke hosting yang telah disewa.

Website API nya disini masih menggunakan PHP biasa dengan parsing outputnya kedalam format JSON. Untuk pengembangannya teman-teman bisa menggunakan framework Lumen untuk membuat web API seperti yang telah saya bahas di artikel membuat-website-api-dengan-lumen-versi-6

Kendala Android Emulator

Saya telah mengupdate versi Android studio 4.1.1 dan versi Flutternya 1.22.4. Saat saya menjalankan aplikasinya dengan mengakses ke API local dengan alamat IP 10.0.2.2 ternyata tidak bisa. ada notifikasi error :

I/flutter (17219): Bad state: Insecure HTTP is not allowed by platform: http://10.0.2.2/webapi/getdata.php

Setelah bertanya dan mencari informasi di forum, Alhamdulillah saya mendapatkan solusinya dengan menambahkan script di AndroidManifest :

<uses-permission android:name="android.permission.INTERNET"/>
<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="crudflutter"
    android:usesCleartextTraffic="true"
    android:icon="@mipmap/ic_launcher">

Screenshot

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 5-12-2020

KangAgus

Android CRUD menggunakan Java dan Google Sheet

Latar Belakang

Aplikasi Android CRUD kedua ini menggunakan bahasa java dan databasenya menggunakan google sheet.

Download Sourcecode

Adapun langkahnya adalah sebagai berikut :

1. Daftar dan Login website
2. Ke menu Download dan cari kata kunci : “CRUD Java”
3. Setelah semua file di download, Login ke Gmail, setelah itu ke google drive
4. Buat File CRUDJAVA atau silahkan upload dari file yang telah saya sediakan
5. Setelah itu buka file CRUDJAVA dan pilih Top Menu : Tools=>Script Editor
6. Copy Paste Script yang ada di file “CRUDScript.txt” yang saya sediakan

Konfigurasi URL Script

Setelah file dan script di google sheet nya sudah siap, langkah selanjutnya adalah menyesuaikan URL file google sheet kedalam script. Langkahnya adalah sebagai berikut :

1. Klik kanan file CRUDJAVA kemudian klik menu Get Link
2. Setelah muncul popup link, copy link file tersebut dan paste ke bagian script yang ada di menu Tools=>Script Editor

Publish File Google Sheet

Setelah link file di sesuaikan ke scriptnya, maka langkah selanjutnya adalah mempublish script tersebut yang berfungsi sebagai jembatan pelantara atau Midleware antara file google sheet dengan aplikasi android yang kita buat. Adapun langkahnya adalah sebagai berikut :

1. Buka file CRUDJAVA dan pilih Top Menu : Tools=>Script Editor
2. Pilih Top menu Publish=>Deploy as web app
3. Setelah muncul popup, maka pilih aksesnya : everyone
4. Dan copy URL di bagian : Current web app url

Konfigurasi URL Android

Setelah URL script telah didapat, maka langkah selanjutnya adalah paste link tersebut di bagian coding android dengan membuka class Controller.java dan paste dibagian variabel URLnya di ujung URL harus ada tanda tanya “?”. Jika sudah semua, maka tinggal proses testing aplikasi.

Testing Aplikasi

Aplikasinya berbeda dengan aplikasi CRUD pertama, pada aplikasi yang kedua ini terdapat beberapa tombol CRUD dan untuk ID nya diinput secara manual baik saat akan Insert, Update, Delete, atau Read single data. Namun ada menu Untuk Read All data.

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan Anda semua…aamiin

Bogor, 3-12-2020

KangAgus

Aplikasi Android CRUD menggunakan Kotlin dan Firebase

Latar Belakang

Saya mendapatkan contoh aplikasi android dari teman kantor saya untuk saya pelajari. Skenarionya adalah saya mengumpulkan beberapa contoh aplikasi CRUD android dengan database yang berbeda. Seperti :

1. Aplikasi Android dengan Kotlin & Firebase
2. Aplikasi Android dengan Java & Google sheet
3. Aplikasi Android dengan Flutter & MariaDB
4. Aplikasi Android dengan AppInventor & CloudDB

Untuk sementara saya fokus pada 4 point diatas dengan metode coding CRUD ke beberapa database. Tujuannya agar mengetahui dan membandingkan beberapa cara alternatif dalam membuat aplikasi Android.

Mengenal Firebase

Firebase adalah suatu layanan dari google untuk mempermudah para pengembang aplikasi. Dengan adanya Firebase, developer dapat fokus mengembangkan aplikasi tanpa harus memberikan effort yang besar untuk urusan backend. Salah satu fitur dari Firebase yaitu Real-time database.

Untuk Menyimpan dan sinkronkan data antara pengguna dan perangkat secara realtime menggunakan database noSQL yang dihosting secara cloud. real-time adalah kondisi pengoperasian dari suatu sistem perangkat keras dan perangkat lunak yang dibatasi oleh rentang waktu dan memiliki tenggat waktu yang jelas, jadi data akan dikirim seketika waktu itu juga.

Untuk mencoba aplikasi ini silahkan download sourcecodenya via website Edugi dengan langkah sebagai berikut :

1. Ke menu Download dan cari “CRUD Kotlin”
2. Silahkan aplikasinya di download dan di extract
3. Buka aplikasinya dengan Editor Android Studio
4. Daftar dan login https://firebase.google.com
5. Untuk koneksinya silahkan baca artikel berikut

Testing Aplikasi

Setelah proses download sourcecode selesai, dan proses koneksi aplikasi ke firebase juga selesai. Maka langkah selanjutnya adalah proses testing aplikasi. Saya menjalankan aplikasinya menggunakan emulator di android studio. Untuk tampilannya adalah sebagi berikut :

Download Sourcecode

Sekian artikel dari saya semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Bogor, 3-12-2020

KangAgus