• Kategori Tulisan

  • Masukkan alamat email Anda untuk berlangganan blog Ri32 dan menerima pemberitahuan posting baru melalui email anda. Jika sudah bosan silahkan unsubscript.
    Terima kasih... : )

    Join 859 other followers

  • Web Analytics

Android CRUD menggunakan Flutter 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.

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

  1. Daftar dan Login website https://edugi.web.id
  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.  Adapun langkahnya adalah sebagai berikut :

  1. Daftar dan Login website https://edugi.web.id
  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.

Download Sourcecode

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

  1. Daftar dan Login https://edugi.web.id
  2. Ke menu Download dan cari “CRUD Kotlin”
  3. Silahkan aplikasinya di download dan di extract
  4. Buka aplikasinya dengan Editor Android Studio
  5. Daftar dan login https://firebase.google.com
  6. 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 :

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

Bogor, 3-12-2020

KangAgus

Cara Koneksi Firebase ke Android Studio


Latar Belakang

Setelah sebelumnya saya membuat artikel cara-disconnect-firebase-dari-android-studio . Sekarang saya buat artikel bagaimana cara koneksi database firebase dengan aplikasi android di android studio.

Membuat Koneksi Firebase

  1. Login ke website https://firebase.google.com dengan akun gmail
  2. Di Android studi pilih menu Tools=>Firebase=>Lihat Sebelah kanan
  3. Pilih menu Realtime Database=>Save and retrieve Data
  4. Bagian pertama klik tombol Connect to Firebase
  5. Di halaman website firebase klik Create a Project
  6. Masukan nama projectnya dan klik tombol Continue
  7. Dibagian enable google analytics di uncheck saja
  8. Setelah itu klik Create Project dan tunggu sesaat
  9. Setelah selesai klik Continue tunggu sampai ke halaman project
  10. Saat muncul popup di halaman project klik tombol Connect

Membuat Realtime Database

Setelah berhasil melakukan koneksi ke firebase, maka langkah selanjutnya adalah membuat sebuat database realtime di firebase dengan cara :

  1. Di Android studi pilih menu Tools=>Firebase=>Lihat Sebelah kanan
  2. Pilih menu Realtime Database=>Save and retrieve Data
  3. Bagian kedua klik tombol Add the reaktme database
  4. Muncul popup klik tombol Accept Change
  5. Di halaman website project firebase menu sebelah kiri pilih menu “Realtime Database”
  6. Disebelah kanan klik tombol Create Database=>Pilih Start in Test Mode=>Klik tombol Enable
  7. Setelah itu Database siap digunakan kegiatan CRUD datanya menggunakan aplikasi android

Screenshot

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

Bogor, 02-12-2020

KangAgus

Cara Disconnect Firebase dari Android Studio


Latar Belakang

Saya mendapatkan contoh aplikasi android yang databasenya menggunakan firebase. Dan saya ingin aplikasi android tersebut koneksinya ke akun firebase saya. Caranya adalah sebagai berikut :

  1. Hapus file google-services.json
  2. “Hapus” Dependencies beserta ID nya. dengan memberi tanda comment
  3. Sinkronisasi ulang gradle nya
  4. Cek connection dan pastikan databasenya “kosong” kembali
  5. Koneksikan android studio dengan akun firebase yang lain

Screenshot

File Json sebelum dihapus

Firebase sebelum disconnect

Hapus Dependencies

Sinkronisasi Gradle

Firebase Setelah Disconnect

Referensi :

https://stackoverflow.com/questions/51549554/how-to-completely-disconnect-an-android-app-from-firebase-in-android-studio

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

Bogor, 2-12-2020

KangAgus

Aplikasi Dzikir Pagi & Petang Menggunakan AppInventor


Latang Belakang

Sebelumnya saya membuat sebuah halaman menu https://ri32.wordpress.com/quran-dan-dzikir-pagi-petang yang isinya berupa kumpulan link audio tilawah Al-Qur’an dan terjemahan. Serta dzikir pagi dan petang baik dalam bentuk file audio .mp3 maupun dalam bentuk file video .mp4

Untuk memperkenalkan dan memudahkan saudara muslim yang lain dalam menjalankan sunnah, maka saya memiliki ide untuk membuat aplikasi android sederhana. Namun karena saya belum mahir dalam membuat aplikasi android, maka saya mencari solusi bagaimana cara membuatnya tanpa harus coding. Ketemulah saya dengan website http://appinventor.mit.edu

Mengenal AppInventor

App Inventor adalah aplikasi web sumber terbuka (open source) yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology. App Inventor memungkinkan pengguna baru untuk memprogram komputer untuk menciptakan aplikasi perangkat lunak bagi sistem operasi Android.

Cukup dengan memiliki pemahaman alur logika sebuah program saja, kita sudah dapat membuat sebuah aplikasi android dengan sederhana.

Fitur Visual Block Programming yang ada pada MIT App Inventor ini mampu mengubah bahasa pemrogramman berbasis teks menjadi sebuah block puzel yang dapat kita susun sesuai dengan tindakan yang kita inginkan.

Alur Proses Aplikasi

Jadi di aplikasi tersebut diawali dengan sebuah splash screen selama 3 detik, setelah itu masuk ke tampilan menu. ada menu Dzikir Pagi, Dzikir Petang, dan Keutamaan Berdzikir.

Bagi teman-teman yang belum pernah belajar visual block programming silahkan coba aplikasi sederhana TalkToMe. Kita akan merasakan sensasi menyusun sebuah fuzle-fuzle logic. Berikut ini adalah video tutorial singkat dan demo aplikasinya.

Download Project

  • Login website https://edugi.web.id
  • Menu download, kemudian cari : MOBILE – APLIKASI DZIKIR PAGI PETANG
  • Setelah filenya di download silahkan login ke website https://appinventor.mit.edu
  • Menu MyProject – Import project from my computer – cari file extention .aia
  • Tunggu proses import sampai selesai, setelah itu silahkan dipelajari secara mandiri. Jika ada kendala silahkan ditanyakan

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

Bogor, 29-10-2020

KangAgus

Cara Instalasi Flutter di Windows


Latar Belakang

Saya sebelumnya sempat membuat beberapa tulisan terkait aplikasi mobile. Namun masih belum fokus mempelajarinya dan kembali lagi ke aplikasi web base.

Sampai saya mengenal Flutter sebagai Mobile App SDK (Software Development Kit) untuk membuat aplikasi Android dan iOS dari satu codebase. Artinya kita hanya perlu mempelajari Flutter untuk membangun aplikasi mobile untuk 2 platform.

Instalasi

Saya sendiri sebenarnya terkendala dengan spesifikasi laptop yg saya miliki. Dengan memori 4GB dan processor AMD cukup pas-pasan untuk belajar development mobile apps. Sehingga saya tidak menggunakan emulator untuk testing. Namun menggunakan USB untuk debug langsung ke handphone yang digunakan. Saya sendiri menggunakan handphone Vivo Y53.

Selanjutnya kita harus mempersiapkan beberapa software yang dibutuhkan seperti dibawah ini :

  1. SDK Flutter dengan mendownload di situs resminya.
  2. SDK Android yang ada di software Android Studio.
  3. Dart sebagai bahasa pemrograman yang digunakan flutter.
  4. Editor Visual Code untuk penulisan coding dan testing flutter.
  5. ADB USB Driver disesuaikan dengan handphone yang digunakan.

Setelah instalasi ada beberapa konfigurasi yang harus dilakukan mulai dari setup variable environment, flutter doctor –android-license, flutter create project, sampai flutter run untuk testing first apps.

Kursus Online

Agar belajarnya lebih terstruktur saya telah membuatkan kursus online “Membuat aplikasi mobile dengan Flutter” yang dapat diakses secara gratis melalui website EDUGI

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

Bogor, 17-04-2020

KangAgus

Membuat Aplikasi Luncher Android EDUGI


ri32-mobile-application-development

Latar Belakang

Saya menggunakan metode Learning by doing dalam belajar Android Studio dan saya implementasikan di mini project blog Ri32.

Aplikasi android yang saya gunakan adalah sebuah web launcher untuk menampilkan website EDUGI. Sebelum menampilkan halaman webview, muncul splash screen untuk menampilkan logo EDUGI dan disisipkan sebuah progressbar sebagai pemanis tampilan.

Download Sourcecode

Untuk membuat Edugi Mobile, saya menggabungkan dari 3 aplikasi yang dapat didownload dibawah ini :

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

Bogor, 12-10-2019

KangAgus

%d bloggers like this: