Artikel Teknologi

Insight engineering, security, dan pengembangan produk digital.

Kumpulan artikel praktis dari pengalaman lapangan, mulai dari server hardening, pengembangan web modern, hingga automation workflow.

Filter /flutter-super-app-untuk-portal-learning-management-system

Detail Artikel

Portfolio 07 Mar 2026 397 views

Flutter Super App untuk Portal & Learning Management System

Overview

Fahram Mobile App adalah aplikasi mobile berbasis Flutter yang mengintegrasikan dua platform web utama:

  • Portal Fahram – portal publik berisi artikel, galeri, dokumen, dan katalog kursus.

  • Fahram LMS – sistem pembelajaran online untuk kursus, modul pembelajaran, dan ujian.

Aplikasi ini dirancang sebagai all-in-one mobile platform sehingga pengguna dapat mengakses konten publik tanpa login serta mengikuti kursus dan ujian setelah melakukan autentikasi.

Aplikasi ini mengadopsi arsitektur modern Flutter dengan pendekatan Clean Architecture, Riverpod State Management, dan Modular Feature Structure sehingga scalable dan maintainable untuk jangka panjang.


Tujuan Pengembangan

Tujuan utama aplikasi ini adalah:

  • Menggabungkan portal konten dan platform pembelajaran dalam satu aplikasi mobile.

  • Menyediakan pengalaman belajar yang lebih nyaman melalui perangkat mobile.

  • Mendukung akses cepat terhadap artikel, kursus, modul pembelajaran, dan ujian.

  • Meningkatkan engagement pengguna melalui fitur mobile seperti notifikasi, offline caching, dan deep linking.


Teknologi yang Digunakan

Mobile Framework

  • Flutter 3.29+

  • Dart 3.7+

State Management

  • Riverpod

  • Riverpod Generator

  • Freezed

Networking

  • Dio HTTP Client

  • Retrofit API Generator

  • Flutter Secure Storage

UI & Design

  • Flutter Material 3

  • Google Fonts

  • Cached Network Image

  • Flutter HTML Renderer

  • Carousel Slider

  • Shimmer Loading

  • Photo View

Navigation

  • GoRouter (Declarative Routing)

Storage & Cache

  • Hive Local Database

  • Shared Preferences

  • Secure Token Storage

Authentication

  • Email & Password Login

  • Google Sign In

  • Apple Sign In

  • OAuth Login


Arsitektur Aplikasi

Aplikasi menggunakan pendekatan Clean Architecture dengan struktur feature-first.

Struktur ini memisahkan setiap fitur menjadi tiga layer utama:

  • Data Layer
    Berisi API service, data source, dan model.

  • Domain Layer
    Berisi entity dan repository interface.

  • Presentation Layer
    Berisi UI, state management, dan widgets.

Contoh struktur project:

lib/
 ├── core
 │   ├── config
 │   ├── network
 │   ├── router
 │   ├── theme
 │   └── widgets
 │
 ├── features
 │   ├── auth
 │   ├── portal
 │   │   ├── home
 │   │   ├── articles
 │   │   ├── gallery
 │   │   ├── documents
 │   │   └── courses_catalog
 │   │
 │   ├── lms
 │   │   ├── dashboard
 │   │   ├── courses
 │   │   ├── modules
 │   │   ├── exams
 │   │   └── profile
 │   │
 │   └── settings

Pendekatan ini membuat aplikasi lebih mudah dikembangkan oleh tim dan mempermudah maintenance.


Fitur Utama Aplikasi

1. Portal Publik

Pengguna dapat mengakses konten tanpa login.

Fitur yang tersedia:

  • Artikel dan berita

  • Galeri foto

  • Dokumen publik

  • Katalog kursus

  • Halaman kontak

  • Informasi perusahaan

Fitur Artikel

  • Infinite scrolling

  • Kategori dan tag

  • HTML rendering

  • Syntax highlighting

  • Share ke media sosial

  • Related articles

Galeri

  • Album foto

  • Fullscreen viewer

  • Swipe navigation

  • Zoom image

Katalog Kursus

  • Pencarian kursus

  • Filter level

  • Preview modul

  • Informasi mentor

  • CTA untuk mengikuti kursus


2. Authentication System

Aplikasi menyediakan sistem autentikasi lengkap.

Fitur login:

  • Email dan password

  • Google Sign In

  • Apple Sign In

  • OAuth login

Fitur akun:

  • Registrasi

  • Verifikasi email

  • Reset password

  • Logout

Token autentikasi disimpan secara aman menggunakan Flutter Secure Storage.


3. Learning Management System (LMS)

Setelah login, pengguna dapat mengakses fitur LMS.

Dashboard

Menampilkan ringkasan aktivitas pengguna:

  • Kursus yang diikuti

  • Modul yang telah diselesaikan

  • Statistik ujian

  • Kursus terbaru

My Courses

Menampilkan semua kursus yang diikuti oleh pengguna.

Status kursus:

  • Active

  • Pending

  • Completed

  • Rejected

Setiap kursus memiliki progress indicator untuk memantau perkembangan belajar.


4. Modul Pembelajaran

Modul pembelajaran dapat diakses langsung dari aplikasi.

Fitur modul:

  • HTML content rendering

  • Navigation antar modul

  • Progress tracking

  • Sidebar modul

  • Auto tracking progress ke server


5. Sistem Ujian

Aplikasi menyediakan sistem ujian online.

Fitur ujian:

  • Timer countdown

  • Question navigator

  • Multiple choice questions

  • Auto-save jawaban

  • Local backup jawaban

  • Prevent back navigation

Saat ujian berlangsung, layar akan tetap aktif menggunakan WakeLock.


6. Hasil Ujian

Setelah ujian selesai, pengguna dapat melihat hasilnya.

Informasi yang ditampilkan:

  • Skor akhir

  • Jumlah jawaban benar dan salah

  • Review jawaban

  • Highlight jawaban benar dan salah


7. Profile Management

Pengguna dapat mengelola akun mereka melalui halaman profil.

Fitur profil:

  • Edit data profil

  • Update password

  • Statistik belajar

  • Logout


8. Settings

Pengaturan aplikasi meliputi:

  • Dark mode

  • Notifikasi

  • Bahasa

  • Cache management

  • Informasi aplikasi


Desain UI & Tema

Aplikasi menggunakan Material 3 Design System dengan warna utama biru.

Fitur desain:

  • Light & Dark Mode

  • Responsive layout

  • Smooth animations

  • Shimmer loading states

Typography menggunakan Google Sans untuk tampilan modern dan konsisten.


Optimasi Performa

Untuk memastikan performa optimal di perangkat mobile, beberapa teknik yang digunakan:

  • Image caching

  • Lazy loading pagination

  • Offline caching dengan Hive

  • Riverpod autoDispose

  • Debounce search


Keamanan Aplikasi

Keamanan menjadi fokus utama dalam pengembangan aplikasi.

Beberapa mekanisme yang diterapkan:

  • Secure token storage

  • HTTPS API communication

  • Laravel Sanctum authentication

  • Obfuscated release build

  • Sensitive data protection


Artikel Terbaru

Konten pilihan untuk pengembangan skill

Materi disusun ringkas dan aplikatif agar bisa langsung Anda praktikkan.

Fix Zima VM Web Console via Cloudflare Tunnel Using NGINX Stream (Port 5700)
Note 07 Apr 2026

Fix Zima VM Web Console via Cloudflare Tunnel Using NGINX Stream (Port 5700)

Solusi untuk error WebSocket Zima VM melalui Cloudflare Tunnel menggunakan NGINX Stream (port 5700).

Buka Detail
Mengakses Server SSH Melalui Cloudflare Tunnel dengan Port Forwarding PostgreSQL
Note 09 Mar 2026

Mengakses Server SSH Melalui Cloudflare Tunnel dengan Port Forwarding PostgreSQL

Cara menggunakan SSH melalui Cloudflare Access sekaligus membuat port forwarding ke database PostgreSQL menggunakan konfigurasi ~/.ssh/config.

Buka Detail
LMS Web Platform
Portfolio 06 Mar 2026

LMS Web Platform

Fahram LMS adalah platform Learning Management System berbasis web yang dirancang untuk menyediakan pengalaman belajar digital yang modern, interaktif, dan mudah digunaka...

Buka Detail
Gratis Email Bisnis dengan Custom Domain
Services 05 Mar 2026

Gratis Email Bisnis dengan Custom Domain

Email custom domain adalah alamat email yang menggunakan nama domain bisnis Anda sendiri, bukan domain penyedia email gratis. Contoh perbandingan: Email biasa namabisni...

Buka Detail
Jasa Pembuatan Website Murah Profesional Mulai Rp500.000
Services 05 Mar 2026

Jasa Pembuatan Website Murah Profesional Mulai Rp500.000

Mulai Website Bisnis Anda Sekarang Jangan biarkan bisnis Anda tertinggal di era digital. Dengan investasi yang sangat terjangkau, Anda sudah bisa memiliki website profesi...

Buka Detail
Sistem Informasi Gudang & Aset Manajemen Terintegrasi
Portfolio 23 Feb 2026

Sistem Informasi Gudang & Aset Manajemen Terintegrasi

Kelola stok barang, aset perusahaan, penyusutan, mutasi, hingga audit log dalam satu platform terpusat. SIGAM dirancang untuk organisasi yang membutuhkan kontrol inventar...

Buka Detail
Portal Website Polres Cilegon
Portfolio 01 Jan 2026

Portal Website Polres Cilegon

Polres Cilegon adalah website resmi Kepolisian Resor Cilegon - bagian dari Kepolisian Negara Republik Indonesia (Polri) yang bertugas menjaga keamanan, ketertiban, dan pe...

Buka Detail
Sistem Manajemen Email Kampus
Portfolio 26 Jun 2025

Sistem Manajemen Email Kampus

Platform untuk otomatis membuat dan mengelola akun email mahasiswa/dosen pada Google Workspace atau Microsoft 365. Fitur utama mencakup pendaftaran, approval admin, provi...

Buka Detail
Buku Pemrograman web dengan PHP framework Laravel
Buku 25 Jul 2023

Buku Pemrograman web dengan PHP framework Laravel

Buku ini dirancang untuk pemula yang ingin mempelajari dasar-dasar pemrograman web menggunakan PHP dan juga bagi mereka yang ingin menguasai Laravel, framework PHP yang s...

Buka Detail
Kampus Komputer Cilegon Banten
Schools 15 Mar 2010

Kampus Komputer Cilegon Banten

- Nama Perguruan Tinggi Politeknik PIKSI Input Website https://piksiinputserang.ac.id/ Prodi Ilmu Komputer D4 - Rekayasa Keamanan Siber, D3 - Manajemen Inform...

Buka Detail
MINI SIEM - Solusi Monitoring Log & Deteksi Ancaman Real-Time untuk Infrastruktur Anda
Portfolio 25 Feb 2026

MINI SIEM - Solusi Monitoring Log & Deteksi Ancaman Real-Time untuk Infrastruktur Anda

Kelola log server, deteksi anomali, dan respon insiden keamanan dalam satu dashboard terpusat. Mini SIEM dirancang untuk organisasi yang membutuhkan visibilitas penuh ter...

Buka Detail
Checklist teknis harian Bug Hunter untuk 90 hari pertama
Note 25 Feb 2026

Checklist teknis harian Bug Hunter untuk 90 hari pertama

BULAN 1 — CORE EXPLOIT SKILL (Hari 1–30) Target akhir: mampu eksploit SQLi, XSS, IDOR tanpa automation penuh. Senin–Kamis (2–3 jam/hari) 20...

Buka Detail