LAPORAN PEMBUATAN APLIKASI Khairul Umam
A. Pembuatan Aplikasi
Aplikasi ini dirancang khusus untuk memudahkan proses sertifikasi oleh Badan Nasional Sertifikasi Profesi (BNSP). Dengan antarmuka yang intuitif dan fungsional, aplikasi ini menawarkan fitur-fitur yang membantu pengguna dalam navigasi. Terdapat beberapa fitur yang dibuat pada aplikasi ini seperti berikut:
1. Splash Screen
Splash Screen dalam Flutter digunakan untuk menampilkan layar selamat datang atau identitas visual awal saat aplikasi dibuka.
import 'dart:async';
import 'package:flutter/material.dart';
import 'login_page.dart';
Kode ini mengimpor pustaka dan berkas yang diperlukan untuk mengimplementasikan SplashScreen, termasuk pustaka dasar Flutter dan file login_page.dart yang akan ditampilkan setelah SplashScreen.
class SplashScreen extends StatefulWidget {
const SplashScreen({Key? key}) : super(key: key);
@override
_SplashScreenState createState() => _SplashScreenState();
}
Ini mendefinisikan kelas SplashScreen sebagai StatefulWidget dan menghasilkan instance dari _SplashScreenState sebagai State-nya.
class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _animation;
@override
void initState() {
super.initState();
// ...
} // ...
}
State dari SplashScreen mengimplementasikan _SplashScreenState dan menggunakan SingleTickerProviderStateMixin untuk menyediakan ticker yang diperlukan untuk AnimationController.
_animationController = AnimationController(duration:
Duration(seconds: 2), vsync: this);
_animation = Tween<double>(begin: 0.0, end:
1.0).animate(_animationController);
Inisialisasi _animationController dengan durasi 2 detik dan vsync menggunakan objek State (_SplashScreenState). Animasi Tween dari 0.0 hingga 1.0 diatur untuk mengontrol transisi elemen UI.
_animationController.forward();
Timer(
Duration(seconds: 3), () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()), );
}, );
Animasi dimulai dengan _animationController.forward(). Selanjutnya, setelah 3 detik (sesuai dengan durasi animasi), aplikasi akan pindah ke halaman login menggunakan Navigator.
@override
Widget build(BuildContext context) { return Scaffold(
backgroundColor: Colors.blue, body: Center(
child: FadeTransition(
opacity: _animation, child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [ // ...
], ), ), ), );
}
Metode build() mengembalikan tampilan Scaffold dengan latar belakang biru dan elemen-elemen UI yang muncul secara bertahap dengan efek animasi.
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
Pada saat widget di-"dispose", AnimationController dihentikan untuk mencegah kebocoran sumber daya.
Dengan menggunakan animasi dan timer, SplashScreen memberikan pengalaman visual yang menarik sebelum pengguna dipandu ke halaman login.
2. Halaman Login
Melalui halaman login, pengguna dapat mengakses akun mereka dengan aman menggunakan kredensial yang valid. Halaman login yang dibuat menggunakan Firebase Authentication. Berikut adalah penjelasan singkat tentang fungsi dan komponen utama dalam kode tersebut:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:modernlogintute/components/my_button.dart';
import 'register_page.dart';
import 'home_page.dart';
Mengimpor pustaka dan berkas yang diperlukan, termasuk pustaka UI Flutter (material.dart), Firebase Authentication (firebase_auth.dart), widget kustom (my_button.dart), dan dua halaman lainnya (register_page.dart dan home_page.dart).
class LoginPage extends StatelessWidget { LoginPage({Key? key});
Mendefinisikan kelas LoginPage sebagai StatelessWidget. Widget ini bertanggung jawab untuk menampilkan antarmuka pengguna halaman login.
final usernameController = TextEditingController();
final passwordController = TextEditingController();
Dua objek TextEditingController digunakan untuk mengontrol input teks pada kolom email (usernameController) dan kata sandi (passwordController).
Future<void> _showErrorDialog(BuildContext context, String message) async {
// ...
}
Menampilkan dialog kesalahan dengan pesan yang disediakan. Digunakan untuk memberi tahu pengguna tentang kesalahan yang terjadi selama proses otentikasi.
Future<void> signUserIn(BuildContext context) async { // ...
}
Validasi dilakukan terhadap kolom email dan kata sandi, dan kemudian mencoba untuk masuk menggunakan Firebase Authentication. Jika berhasil, pengguna akan diarahkan ke halaman beranda (HomePage), jika tidak, pesan kesalahan yang sesuai akan ditampilkan.
@override
Widget build(BuildContext context) { return Scaffold(
backgroundColor: Colors.grey[300], body: SafeArea(
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, children: [
// ...
], ), ), ), ), );
}
Metode build digunakan untuk membuat antarmuka pengguna halaman login.
Ini mencakup elemen-elemen seperti logo, formulir masuk, tombol masuk, dan tautan pendaftaran.
Antarmuka Pengguna: Logo: Menggunakan ikon kunci warna biru. Formulir Masuk: Terdiri dari kolom input email dan kata sandi. Tautan Lupa Kata Sandi:
Tautan yang pengguna dapat ketuk untuk mengatur ulang kata sandi. Tombol Masuk:
Tombol kustom yang memicu metode signUserIn saat ditekan. Tautan Pendaftaran:
Tautan yang mengarahkan pengguna ke halaman pendaftaran (RegisterPage).
3. Halaman Registrasi
Untuk Memungkinkan calon pengguna untuk membuat akun baru dengan mengisi formulir registrasi. Informasi yang dimasukkan akan digunakan untuk proses sertifikasi lebih lanjut. Halaman pendaftaran (RegisterPage) dalam aplikasi Flutter dengan Firebase Authentication. Berikut adalah penjelasan singkat tentang fungsionalitas dan struktur antarmuka pengguna dalam kode tersebut:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import
'package:modernlogintute/components/my_button_register.dart';
import 'package:modernlogintute/components/my_textfield.dart';
Kode ini mengimpor pustaka Flutter (material.dart), Firebase Authentication (firebase_auth.dart), widget kustom untuk tombol registrasi (my_button_register.dart), dan widget kustom untuk kolom teks (my_textfield.dart).
class RegisterPage extends StatelessWidget { RegisterPage({Key? key});
Ini mendefinisikan kelas RegisterPage sebagai StatelessWidget. Halaman ini bertanggung jawab untuk menampilkan antarmuka pengguna pendaftaran.
final usernameController = TextEditingController();
final emailController = TextEditingController();
final passwordController = TextEditingController();
Objek TextEditingController digunakan untuk mengontrol input teks pada kolom username, email, dan password.
Future<void> registerUser(BuildContext context) async { // ...
}
Metode ini berfungsi untuk mendaftarkan pengguna dengan menggunakan Firebase Authentication. Jika pendaftaran berhasil, informasi pengguna dapat disimpan atau dapat digunakan Firebase Cloud Firestore untuk menyimpan detail pengguna tambahan. Jika terjadi kesalahan, pesan kesalahan yang sesuai akan ditampilkan.
@override
Widget build(BuildContext context) { return Scaffold(
backgroundColor: Colors.grey[300],
body: SafeArea(
child: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, children: [
// ...
], ), ), ), ), );
}
Metode build digunakan untuk membuat antarmuka pengguna halaman pendaftaran. Ini mencakup elemen-elemen seperti judul pendaftaran, kolom input untuk username, email, dan password, tombol pendaftaran, dan tautan untuk masuk jika pengguna sudah memiliki akun.
Antarmuka Pengguna: Judul Pendaftaran: Menampilkan teks "Register"
dengan gaya tertentu. Kolom Input: Terdiri dari kolom untuk username, email, dan password menggunakan widget kustom (MyTextField). Tombol Pendaftaran: Tombol kustom yang memicu metode registerUser saat ditekan. Tautan Masuk: Tautan yang mengarahkan pengguna kembali ke halaman login jika sudah memiliki akun.
4. Halaman Utama
Pada halaman HomePage ini menyajikan tampilan yang sederhana dengan tiga halaman utama dan menu akses ke halaman galeri dan kontak dari halaman utama.
Tombol logout memungkinkan pengguna untuk keluar dari aplikasi dan kembali ke halaman login. Berikut penjelasan kode dari homepage:
class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) { return MaterialApp(
title: 'Home Page', theme: ThemeData(
primarySwatch: Colors.blue, ),
home: HomePage(), );
} }
MyApp adalah kelas utama yang mewakili aplikasi Flutter. Menggunakan MaterialApp sebagai widget utama untuk memberikan struktur dasar aplikasi.
Menentukan HomePage sebagai halaman utama yang akan ditampilkan ketika aplikasi dimulai.
class HomePage extends StatelessWidget { @override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(
'Home Page',
style: TextStyle(color: Colors.amber), ),
actions: [ IconButton(
icon: Icon(Icons.logout), onPressed: () {
// Logout functionality Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) =>
LoginPage()), );
}, ), ], ),
body: Padding(
padding: const EdgeInsets.all(16.0), child: GridView.count(
crossAxisCount: 2, crossAxisSpacing: 16.0, mainAxisSpacing: 16.0, children: [
// ... Widgets for Gallery and Contacts ],
), ), );
} }
HomePage adalah kelas yang merepresentasikan halaman utama aplikasi.
Menggunakan widget Scaffold sebagai kerangka kerja dasar halaman, termasuk AppBar dan body. AppBar memiliki judul "Home Page" dengan teks berwarna amber dan tombol logout di kanan atas. Tombol logout menggunakan Navigator.pushReplacement untuk membuka halaman login (LoginPage) dan menggantikan halaman saat ini. body berisi tata letak GridView dengan dua kartu (Card) yang mewakili akses ke halaman galeri (GalleryPage) dan halaman kontak (ContactsPage).
GestureDetector(
onTap: () {
// Navigate to the gallery/contacts page Navigator.push(
context,
MaterialPageRoute(builder: (context) => GalleryPage()), );
},
child: Card(
color: Colors.blue, // atau Colors.green child: Column(
mainAxisAlignment: MainAxisAlignment.center, children: [
Icon(
Icons.photo, // atau Icons.contacts size: 50.0,
color: Colors.white, ),
SizedBox(height: 8.0), Text(
'Gallery', // atau 'Contacts'
style: TextStyle(color: Colors.white), ),
], ), ), ),
Masing-masing kartu (Card) di dalam GridView memiliki widget GestureDetector untuk menanggapi ketukan pengguna. Saat kartu ditekan, aplikasi akan menavigasi ke halaman yang sesuai (Galeri atau Kontak) menggunakan Navigator.push. Setiap kartu memiliki ikon dan teks yang sesuai dengan fungsi halaman yang akan diakses.
Keseluruhan antarmuka pengguna (HomePage) memberikan tampilan yang bersih dan responsif dengan menu akses yang jelas ke halaman galeri dan kontak.
Tombol logout di App Bar memungkinkan pengguna untuk keluar dari aplikasi dan kembali ke halaman login.
5. Halaman Galeri
Dengan memanfaatkan kekuatan API, halaman galeri dapat diperbarui secara otomatis untuk mencerminkan pembaruan terbaru atau penambahan gambar baru, memberikan pengalaman yang segar dan menarik setiap kali pengguna mengakses halaman tersebut. Berikut source kode yang digunakan:
class GalleryPage extends StatefulWidget { @override
_GalleryPageState createState() => _GalleryPageState();
}
class _GalleryPageState extends State<GalleryPage> { List<String> photoUrls = [];
@override
void initState() { super.initState();
fetchData();
} // ...
}
GalleryPage: Kelas yang mewakili halaman galeri dan merupakan stateful widget._GalleryPageState: Kelas state yang mengelola status atau data internal dari GalleryPage.
@override
void initState() { super.initState();
fetchData();
}
Future<void> fetchData() async { final response = await http.get(
Uri.parse(
'https://api.unsplash.com/photos/random?
count=10&client_id=3skFEVHvSZI-P6uqxi9_qB8d4xNEC_qNkUspD3UeWMA'), );
if (response.statusCode == 200) {
final List<dynamic> data = json.decode(response.body);
List<String> urls = [];
for (var item in data) {
urls.add(item['urls']['regular']);
}
setState(() {
photoUrls = urls;
});
} else {
print('Failed to load data: ${response.statusCode}');
} }
initState: Metode ini dipanggil ketika widget pertama kali dibuat. Pada saat inisialisasi, kita memanggil fetchData untuk mengambil data gambar dari API.
fetchData: Metode asynchronous ini menggunakan paket http untuk melakukan permintaan HTTP ke API Unsplash. Data diterima dalam format JSON dan diuraikan untuk mendapatkan URL gambar. Setelah itu, state diupdate dengan daftar URL gambar.
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Text('Gallery Page'), ),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisSpacing: 8.0, mainAxisSpacing: 8.0, ),
itemCount: photoUrls.length, itemBuilder: (context, index) { return GestureDetector(
onTap: () {
print('Clicked on photo ${index + 1}');
},
child: Card(
child: Image.network(
photoUrls[index], fit: BoxFit.cover, ),
), );
}, ), );
}
Scaffold: Ini adalah kerangka dasar untuk halaman dan menyediakan struktur dasar seperti AppBar dan body. AppBar: Bagian ini menunjukkan judul halaman yang disetel sebagai "Gallery Page". Body: Ini adalah bagian utama dari halaman yang berisi GridView.builder. GridView.builder: Membuat grid dinamis yang dapat menampung daftar gambar dengan jumlah kolom yang tetap. Sliver Grid Delegate
With Fixed Cross Axis Count: Mengatur tata letak grid dengan jumlah kolom tetap.
itemCount: Menentukan jumlah item dalam grid, yaitu panjang daftar photoUrls.
itemBuilder: Membangun widget untuk setiap item dalam grid menggunakan GestureDetector dan Card untuk menanggapi ketukan pengguna dan menampilkan gambar dengan URL yang sesuai.
Dengan menggunakan paket http untuk melakukan permintaan HTTP ke API Unsplash, halaman galeri ini memberikan pengalaman visual yang dinamis dengan gambar-gambar yang diambil secara dinamis dari sumber eksternal. Setiap gambar di dalam grid dapat diklik, dan pesan "Clicked on photo {index + 1}" akan dicetak pada konsol ketika gambar tersebut diklik.
6. Halaman Kontak
Halaman ini mengambil data kontak secara acak dari API Random User dan menampilkannya dalam bentuk daftar menggunakan ListView.builder. Berikut penjelasan komponen utama dari kode tersebut:
class ContactsPage extends StatefulWidget { @override
_ContactsPageState createState() => _ContactsPageState();
}
class _ContactsPageState extends State<ContactsPage> { List<dynamic> contacts = [];
Future<void> fetchRandomUsers() async { final response = await http.get(Uri.parse(
'https://randomuser.me/api/?
results=5&inc=name,picture,email,location,phone'));
if (response.statusCode == 200) {
final data = json.decode(response.body);
setState(() {
contacts = data['results'];
});
} else {
throw Exception('Failed to load random users');
} }
@override
void initState() { super.initState();
fetchRandomUsers();
} // ...
}
ContactsPage: Kelas ini adalah stateful widget yang mewakili halaman kontak.
_ContactsPageState: Kelas ini adalah state yang terkait dengan ContactsPage dan mengelola status atau data internal dari halaman kontak.
Future<void> fetchRandomUsers() async { final response = await http.get(Uri.parse(
'https://randomuser.me/api/?
results=5&inc=name,picture,email,location,phone'));
if (response.statusCode == 200) {
final data = json.decode(response.body);
setState(() {
contacts = data['results'];
});
} else {
throw Exception('Failed to load random users');
} }
fetchRandomUsers: Metode asynchronous ini menggunakan paket http untuk melakukan permintaan HTTP ke API Random User. Data diterima dalam format JSON dan diuraikan untuk mendapatkan informasi kontak seperti nama, gambar, email, lokasi, dan nomor telepon. Setelah itu, state diupdate dengan daftar kontak.
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Text('Contacts Page'), ),
body: ListView.builder(
itemCount: contacts.length, itemBuilder: (context, index) { final contact = contacts[index];
final name = contact['name']['first'] + ' ' + contact['name']['last'];
final email = contact['email'];
final location = contact['location']['city'] + ', ' +
contact['location']['country'];
final phone = contact['phone'];
final imageUrl = contact['picture']['large'];
return ListTile(
leading: CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(imageUrl), ),
title: Text(name), subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start, children: [
Text(email), Text(location), Text(phone), ],
), );
}, ), );
}
Scaffold: Ini adalah kerangka dasar untuk halaman dan menyediakan struktur dasar seperti AppBar dan body. AppBar: Bagian ini menunjukkan judul halaman yang disetel sebagai "Contacts Page". body: Ini adalah bagian utama dari halaman yang berisi ListView.builder. ListView.builder: Membuat daftar kontak dengan cara yang efisien secara memori. itemCount menentukan jumlah item dalam daftar, dan itemBuilder digunakan untuk membangun widget untuk setiap item. ListTile: Widget yang mewakili satu item dalam daftar kontak. leading: Bagian ini menampilkan gambar profil dengan menggunakan CircleAvatar. title: Menampilkan nama lengkap kontak.
subtitle: Menampilkan email, lokasi, dan nomor telepon kontak.
Dengan menggunakan API Random User, halaman kontak ini menyediakan pengalaman untuk melihat daftar kontak yang dihasilkan secara acak dan menampilkan informasi kontak utama seperti nama, gambar profil, email, lokasi, dan nomor telepon.
B. Kesimpulan
Aplikasi yang dikembangkan menggunakan Flutter ini menyajikan pengalaman pengguna yang terstruktur dan intuitif dalam. Dimulai dari Splash Screen yang memberikan sambutan visual kepada pengguna, aplikasi kemudian membimbing pengguna ke Halaman Login. Di sini, pengguna dapat memasukkan informasi login mereka, dengan validasi yang ketat untuk memastikan keakuratan data. Jika pengguna
belum memiliki akun, mereka dapat dengan mudah beralih ke Halaman Pendaftaran yang memfasilitasi pembuatan akun baru dengan otentikasi Firebase.
Halaman Beranda menjadi pusat navigasi utama, memberikan akses ke dua fitur utama: Galeri dan Kontak. Halaman Galeri menarik gambar secara dinamis dari API Unsplash, menampilkan mereka dalam tata letak grid yang estetis. Sebaliknya, Halaman Kontak mengambil data kontak secara acak dari API Random User dan menyajikannya dalam daftar yang informatif.
Pengguna memiliki kemampuan untuk logout dengan mudah melalui opsi di Halaman Beranda, memberikan kontrol penuh terhadap sesi login. Keseluruhan, aplikasi ini memberikan pengalaman yang komprehensif dan terintegrasi, mencakup pendaftaran, otentikasi, dan interaksi dinamis dengan sumber daya eksternal, semuanya dalam kerangka Flutter yang efisien dan responsif. Dengan desain antarmuka yang bersih dan fungsionalitas yang terstruktur, aplikasi ini memenuhi kebutuhan dasar untuk pengembangan lebih lanjut.