Membuat aplikasi CRUD dengan floor

     Pada pembahasan kali ini saya akan membagikan tentang praktikum pemrograman mobile mengenai cara membuat aplikasi CRUD dengan menggunakan sistem database floor. jadi floor tersebut merupakan package dari flutter yang bisa digunakan untuk membuat aplikasi yang menggunakan database.

    Langsung saja kita ke praktikumnya

    Hal yang harus kita lakukan terlebih dahulu adalah membuat tampilan utama yang akan muncul ketika aplikasi dibuka. akan tetapi, sebelum kita membuat program halaman utama, kita harus membuat sebuah program untuk menjalankan aplikasi kita (debugging), biasanya saya akan menggunakan file "main.dart". untuk isi programnya adalah sebagai berikut:

import 'package:flutter/material.dart';

import 'home.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

    Setelah membuat program tersebut, maka kita bisa lanjut ke tahap pembuatan Tampilan utama dari aplikasi kontak.

Tampilan utama (Home page)

     Berikut ini adalah program dari tampilan utama aplikasi kontak:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {

  const HomePage({super.key});

  @override

  State<HomePage> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Apk Kontak'),

      ),

      body: ListView.builder(

        itemCount: 10,

        itemBuilder: (context, index) {

          return Card(

            child: Column(

              crossAxisAlignment: CrossAxisAlignment.start,

              children: [

                Text('nama'),

                Text('08123456789'),

              ],

            ),

          );

        },

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: () {},

        child: const Icon(Icons.add),

      ),

    );

  }

}

    Untuk tampilan utama ini, akan menghasilkan tampilan seperti berikut ini ketika di jalankan:

membuat aplikasi CRUD dengan SQFLite - Flutter

     Pada pembahasan kali ini, saya akan membagikan Materi sekaligus Praktikum mengenai SQFLite pada Flutter. Akan tetapi, sebelum membahas hal yang mendalam tentang SQFLite, Ada sesuatu yang harus difahami dulu, yaitu SQL. Berikut ini adalah pembahasannya.

Apa itu SQL?

    SQL Adalah sistem manajemen database relasional (RDBMS) yang dirancang untuk Aplikasi dengan arsitektur client/server atau biasa disebut sebagai bahasa yang digunakan dalam mengakses data, khususnya untuk data yang memiliki basis relasional, contohnya seperti MySQL, Postgre, SQL, Microsoft SQL Server, serta SQFLite.

Apa itu SQFLite?

    SQFLite adalah salah satu library yang mengelola sistem database lokal yang digunakan pada flutter yang menerapkan query languange (SQL). Sama seperti RDBMS lain, SQFLite juga dapat mengeksekusi perintah select, update, delete dan lain sebagainya. 

Apa saja karakteristik dari SQFLite?

    Beberapa karakteristik SQFLite yaitu sebagai berikut:

        -    Ukurannya lebih kecil dari MySQL

        -    Database tertanam langsung dalam kode program dalam bentuk file.

        -    Bertujuan untuk mengembangkan aplikasi yang bersifat stand alone  atau bisa dibilang kecil

        -    Tidak memerlukan skalabilitas yang besar

        -    Bersifat portable, tidak memerlukan server.

Apa saja tipe data yang dimiliki SQFLite?

    Tipe data pada SQFLite yaitu sebagai berikut:

    -    Integer

    -    Real (num)

    -    Text/String

    -    BLOB (Uint8list)

Adakah contoh penggunaan SQFLite untuk pembuatan aplikasi?

    Beberapa contoh penggunaan SQFLite yaitu untuk membuat aplikasi seperti:

    -    TODO List

    -    Note atau Catatan

    -    Buku Telepon

    -    Dan lain sebagainya.

Bisakah SQFLite bisa digunakan untuk semua platform?

    Platform yang sudah support dengan SQFLite yaitu sebagai berikut:

    -    Android

    -    IOS

    -    MacOS

    Jadi itulah materi mengenai SQFLite, Selanjutnya kita akan masuk pada tahap praktikum SQFLite. Untuk prosedur Praktikumnya yaitu sebagai berikut:

Praktikum Inisialisasi  SQFLite Database - Flutter

1. Siapkan packages yang akan digunakan, pada praktikum ini, akan ada dua packages yang akan            digunakan, yaitu sqflite dan path_provider. untuk link packagesnya yaitu sebagai berikut:

    -    sqflite

    -    path_provider

2. Siapkan IDE yang akan digunakan untuk praktikum, disini saya menggunakan Visual Studio Code        untuk praktikum. Langkah awal yang harus kita lakukan tentunya membuat project terlebih dahulu,        dengan cara melakukan shortcut ctrl+shift+p > Flutter:New Project > Application. Setelah itu                tentukan folder yang akan digunakan untuk menyimpan project ini.

3. Tunggu Prosesnya selesai hingga muncul tampilan seperti berikut ini:

flutter

4. Daftarkan packages yang sudah disiapkan tadi dengan cara masuk ke file pubspec.yaml, lalu di bagian dependencies daftarkan packages sqflite dan path_provider, sehingga file pubspec.yaml nya menjadi seperti berikut ini

pubspec.yaml

5. Setelah itu safe, hingga proses pub get berjalan. Jika berhasil, maka akan muncul seperti pada                gambar berikut ini:

   

flutter pub get

6. Lakukan perubahan pada file main.dart, sehingga menjadi seperti berikut ini:

Communication skill - Presentasi Naskah (Manuscript) & teknik menarik perhatian audiens

PRESENTASI NASKAH (MANUSCRIPT)

    Ada bebrapa jenis jenis Presentasi salah salah satunya adalah presentasi nasakah atau manuscript,Presentasi naskah  Merupakan jenis presentasi dimana dalam menyampaikan informasinya seorang pembicara melakukannya dengan membaca nasakah. Tidak sedikit orang dalam menyampaikan informasi menggunakan naskah berupa teks. Setiap kata-kata yang keluar merupakan hasil dari sebuah naskah. pembicara melupakan tugasnya yang utama yaitu melakukan kontak mata dengan pendengar. Jadi dapat dikatakan pembicara bukan menyampaikan pidato, tetapi membacakan naskah pidato.Adapun kelemahan dan kelebihan dari jenis presentasi naskah yaitu:

Kelemahan:

• Pendengar akan merasa bosan dalam mendengarkannya,
• Bagi pendengar tidak termotivasi untuk mendengarkannya,
• Tidak menarik dalam menyampaikan informasinya,
• Terlalu sibuk akan membaca naskah sehingga tidak melakukan kontak mata dengan pendengar seolah-olah acuh tak acuh terhadap pendengar

Kelebihan:

• Penyampaian dilakukan secara berurut/sistematis,
• Kata yang keluar diungkapkan secara baik dan benar,
• Tidak terjadi kesalahan dalam penyampaiannya.

 TEKNIK MENARIK PERHATIAN AUDIENS

1.       Menguasai public speakeng

    Hal yang paling utama yaitu menguasai dan memiliki kemampuan untuk public speaking, karena dengan memiliki kemampuan itu, akan membuat anda menjadi lancar dan tidak kaku saat berbicara di depan banyak orang, jika kita tidak menguasai public speaking, maka akan membuat para audiens makin tidak nyaman dengan anda yang berbicara di depan mereka

2.       Menggunakan bahasa yang mudah difahami oleh audiens

    Menggunakan bahasa tingkat tinggi dan terlalu familiar dapat membuat para audiens makin merasa bosan mendengar anda yang sementara berbicara, karena menggunakan bahasa tingkat tinggi kadang kala dapat membuat para audiens makin sulit memahami dan mencerna penyampaian yang dipresentasikan.

 

3.       Menyapa audiens

    Dengan menyapa audiens, dapat mengalihkan perhatian mereka dan makin terfokus kepada anda yang sedang melakukan presentasi. Ini adalah upaya untuk mengalihkan para audiens yang mulai tidak fokus menjadi fokus lagi kepada anda yang melakukan presentasi

 

4.       Berinteraksi dengan audiens

    Jika kita berbicara terus dari awal sampai akhir tanpa memberikan kesempatan berbicara kepada auidens, dapat membuat para audiens makin lama merasa bosan dan mengantuk, hal ini dapat diatasi dengan cara memberikan kesempatan berbicara kepada audiens, contohnya seperti memberikan suatu pertanyaan terkait materi yang disampaikan, meminta pendapat, dan membuat audiens yang satu dengan yang lainnya saling berinteraksi, sehingga dapat membuat mereka makin aktif.

 

5.       Memberikan suatu hal yang baru

    Jika yang disampaikan hanyalah berupa opini, maka tidak akan membuat para audiens yakin dengan apa yang disampaikan, sehingga hal yang sangat pantas dilakukan yaitu menyampaikan opini dan diserakan dengan data yang valid dan informasi sesuai fakta yang sudah terealisasikan, dengan menyampaikan fakta-fakta seputar informasi disertai dengan kata dan bahasa yang mudah dimengerti.

 

6.       Berpenampilan rapi dan sopan

    Selain dengan cara berbicara, para audiens terkadang melihat penampilan yang kita pakai, jika kita berpenampikan rapi, dapat membuat kesan yang baik juga dari para audiens, sehingga membuat para audiens nyaman saat memperhatikan anda yang melakukan presentasi. Jika anda menggunakan gaya busana dan penampilan yang kurang rapi, maka para audiens tidak akan fokus dengan apa yang kita sampaikan, justru malah membuat para audiens makin fokus dengan penampilan anda yang kurang rapi

 

7.       Mengenali lingkungan audiens

    Saat melakukan presentasi, pastikan bahwa anda mengetahui ritme napas anda, kapan anda harus bernada tinggi, kapan anda harus bernada rendah, kapan anda berbicara cepat, kapan anda berbicara sedang, kapan anda harus menegur dan menyapa audiens. Jika anda tidak mengenali lingkungan audiens, maka para audiens makin merasa kurang nyaman dengan memperhatikan cara anda saat melakukan presentasi

Latihan membuat desain apk cleaning service sederhana pada flutter

     Pada pembahasan kali ini, saya akan membagikan program khususnya desain aplikasi cleaning service sederhana dengan menggunakan flutter. Dengan menggunakan software android studio, saya dapat melakukan sebuah pemrograman dari aplikasi tersebut. 

    Sebelum masuk ke source codenya, langkah awal yang harus kita lakukan yaitu membuat sebuah projek flutter di android studio, kemudian isikan identitas dari projek tersebut seperti nama projek, package, dan lain sebagainya. Setelah mengisi identitas projek, langkah berikutnya yang harus dilakukan yaitu menyiapkan assets yang akan digunakan untuk projek tersebut, di dalam projek flutter buatlah sebuah direktori baru dengan nama "assets" yang di dalamnya ada folder fonts, images, dan icons.

    Agar lebih jelasnya, perhatikan gambar berikut ini :

Struktur data

    Setelah itu, di masing-masing folder tersebut, masukkan file assets yang akan kita gunakan, seperti pada folder fonts yang berisi file dari fonts yang akan kita gunakan pada projek aplikasi, file icons, yang berisi file gambar icon-icon yang akan digunakan pada projek, dan folder images yang berisi gambar-gambar yang akan digunakan pada projek ini, sehingga hasilnya seperti berikut ini :

File assets

    Setelah menyiapkan file assets, lakukan konfigurasi file "pubspec.yaml", seperti berikut ini :

pubspec.yaml

    Setelah itu simpan atau save, kemudian lanjut kita akan mengganti program dari file "main.dart' yang ada di folder "lib", jadi program yang ada di file main.dart akan kita hapus semuanya, kemudian ganti. untuk program main.dart nya yaitu sebagai berikut :

main.dart

    Setelah itu, di dalam folder lib buat folder atau direktori baru lagi dengan nama pages, yang akan digunakan untuk menyimpan program dari halamann atau screen yang akan dibuat. perhatikan gambar berikut ini :

folder pages

    Kemudian di dalam folder pages, buatlah tampilan SplashScreen yang nantinya akan tampil di halaman awal aplikasi begitu dibuka. untuk nama filenya disini saya berikan "splash_screen.dart", kemudian untuk programnya yaitu sebagai berikut : 

splash_screen.dart

    Setelah itu, di dalam folder pages lagi, buatlah file program dengan nama "main_screen.dart", sebagai program tampilan utama dari aplikasi ini. berikut ini adalah program dari main_screen.dart :

main_screen.dart

    Dan ketika di jalankan, maka hasilnya adalah sebagai berikut ini :

Splash Screen

    Jika button lanjutkan di klik, maka akan muncul tampilan utama aplikasi seperti ini :

Main Screen

Membuat OnBoarding pada flutter

     pada kesempatan kali ini saya akan membagikan materi mengenai OnBoarding khususnya pada flutter.  onboarding pada aplikasi biasanya berupa tampilan awal saat aplikasi diinstal, dan menyangkut pesan mengenai awal mula atau perkenalan dengan aplikasi yang baru diinstal tersebut.

    Untuk pembahasan kali ini, saya tidak membuatnya dari awal, melainkan hanya mencloning projek yang bebas digunakan melalui github. untuk nama akun githubnya yaitu senthilece01. berikut ini saya sertakan linknya :   https://github.com/senthilece01/SKOnboardingScreen.

    Setelah mengklik link tersebut, silahkan buka software android studio, dan klik File > New > Project From Version Control, kemudian di bagian url masukkan alamat atau link projek tersebut. Jika dimintai untuk login dengan akun github, silahkan login dengan akun masing-masing, maka proses cloning akan dimulai.

    Setelah proses cloning selesai, maka akan muncul tampilan sebagai berikut ini :

cloning project

    Gambar di atas adalah tampilan setelah proses clone selesai. di dalam berbagai folder terdapat banyak package yang digunakan untuk membuat onboarding dengan flutter. Saya harap kalian bisa menelusuri berbagai file di dalamnya dan bisa mempelajarinya. untuk source codenya adalah sebagai berikut : 

main.dart

    Setelah itu, sangat penting juga mengatur konfigurasi file pubspec.yaml, berikut ini adalah programnya: 

pubspec.yaml

    Pada file ini, kalian bisa menghapus comments yang tidak digunakan, sehingga programmnya akan terlihat sangat rapih.

    Kemudian untuk kode program lainnya, silahkan menelusuri lebih lanjut mengenai program dan strukturnya.

    Dari program tersebut, maka hasilnya adalah sebagai berikut : 

slide 1

slide 2

slide 3

Latihan membuat UI Profil Instagram dengan flutter

 

Pada pembahasan kali ini saya akan membagikan latihan mengenai pemrograman mobile khususnya mendesain tampilan profil instagram dengan menggunakan plugin flutter yang terdiri dari bahasa dart

Dari struktur datanya, di dalam folder “lib” terdapat file “main.dart” yang nantinya akan digunakan untuk menjalankan sebuah tampilan profile instagram yang akan di desain, berikut ini adalah isi dari tampilan “main.dart”

 

main.dart

Setelah itu, di dalam folder “lib” akan dibuatkan direktori baru dengan nama “pages” yang akan digunakan untuk menyimpan file “profile.dart”. file profile.dart tersebut yang berfungsi  sebagai program utama dari semua tampilan widget, karena dari semua tampilan widget akan di import dalam file program ini dalam bentuk package yang sudah di ekstrak. Berikut ini adalah tampilan dari file “profile.dart” :

profile.dart

Dari tampilan source code tersebut, sangat terlihat jelas bahwa ada file package yang di import di bagian atas, seperti yang sudah di sebutkan sebelumnya, file package tersebut adalah file program dari semua widget, jadi di dalam folder “lib” akan dibuat sebuah direktori baru lagi dengan nama “widget” yang digunakan untuk menyimpan semua file desain widget yang akan digunakan. Berikut ini adalah file widget tersebut.

1.      picture_profile.dart

picture_profile.dart

2.      info_item.dart

 

info_item.dart

 

3.      story_item.dart

story_item.dart

 

4.      tab_item

tab_item.dart

 

Dan berikut ini adalah hasilnya :

hasil_program

            Jadi itulah, source code beserta hasil yang akan muncul dari source code tersebut, Selamat mencoba.

Latihan Flutter Basic

        Setelah mempelajari berbagai macam materi dasar, sebaiknya kita harus melakukan pelatihan terhadap materi dasar kita, agar skill dari apa yang kita pelajari makin terasah. Baik berikut ini beberapa soal latihan dan source code dari latihan tersebut. Akan tetapi, sebelum memulai latihan, untuk file main.dart itu dibuat terpisah dari file widget dari soal-soal yang akan dibuat, Setelah itu buatlah direktori baru di dalam direktori lib dengan nama widget, nantinya direktori tersebut akan digunakan untuk menyimpan program dari berbagai soal latihan yang dikerjakan. Untuk file main.dart yaitu sebagai berikut

Source code main.dart

1. Soal 1 :

Gambar soal 1

• Source code :

Source code 1

2. Soal 2 :

Gambar soal 2

• Source code :

Source code 2

3. Soal 3 :

Gambar soal 3

• Source code :

Source code 3

4. Soal 4 :

Gambar soal 4

• Source code :

Source code 4

5. Soal 5 :

Gambar soal 5

• Source code :

Source code 5

6. Soal 6 :

Gambar soal 6

• Source code :

Source code 6