myaasiinh / Mobile-Programming-2024-2025

Repository untuk mata kuliah mobile programming dan praktikum bertanya materi dan fixing bug
0 stars 0 forks source link

Aisa Putri Maryam Ismanda_All Food Lovers_32602200036_Kelas Mitra #88

Open AisaPutri09 opened 1 month ago

AisaPutri09 commented 1 month ago

desain mobile

core:

data: restaurant:

features: restaurant_finder:

lib core Typography.dart:

Step 1: Definisikan kelas Typography yang menyimpan semua gaya teks yang digunakan di aplikasi. Step 2: Buat style untuk teks besar seperti judul "Find Your Restaurant" dengan ukuran font besar (misalnya 24px) dan warna utama (misalnya warna putih). Step 3: Definisikan style untuk teks kecil seperti nama dan alamat restoran dengan ukuran font lebih kecil (misalnya 14px) dan warna yang sesuai (misalnya warna abu-abu gelap). Step 4: Buat style khusus untuk teks navigasi atau link seperti "See All" yang menggunakan warna yang menonjol dan ukuran sedang. ButtonComponent.dart:

Step 1: Buat komponen ButtonComponent yang menerima parameter seperti teks, ikon, dan aksi onPressed. Step 2: Implementasikan tombol "Reserve Now" dengan background berwarna kontras (misalnya kuning) dan teks berwarna putih. Step 3: Buat properti borderRadius untuk tombol agar sudutnya melengkung, memberi tampilan modern. Step 4: Tambahkan logika enabled atau disabled berdasarkan ketersediaan layanan (contohnya, jika layanan penuh tombol menjadi abu-abu dan non-aktif). ProgressBarComponent.dart:

Step 1: Implementasikan komponen ProgressBarComponent untuk menampilkan indikator loading saat data sedang di-fetch. Step 2: Gunakan widget seperti CircularProgressIndicator untuk progress loading berbentuk lingkaran atau LinearProgressIndicator untuk garis horizontal. Step 3: Terapkan progress bar pada halaman yang membutuhkan waktu lama untuk memuat data restoran atau navigasi jarak. AvatarComponent.dart:

Step 1: Buat komponen AvatarComponent untuk menampilkan avatar pengguna. Step 2: Gunakan widget CircleAvatar di Flutter untuk membuat avatar berbentuk lingkaran, menerima URL gambar atau ikon default. Step 3: Atur properti ukuran avatar sesuai kebutuhan, seperti profil pengguna pada bagian header atau navbar. NetworkImageLoader.dart:

Step 1: Implementasikan komponen NetworkImageLoader untuk memuat gambar dari URL, misalnya gambar restoran. Step 2: Gunakan widget Image.network di Flutter untuk memuat gambar dari URL eksternal. Step 3: Tambahkan properti loadingBuilder untuk menampilkan placeholder saat gambar sedang di-load, dan errorBuilder jika gambar gagal dimuat. config main_app.dart: Step 1: Definisikan aplikasi utama di main_app.dart, termasuk pengaturan tema global, rute, dan layar utama. Step 2: Implementasikan fungsi build untuk merender widget utama seperti HomeScreen sebagai halaman awal. Step 3: Gunakan MaterialApp untuk navigasi antar layar dan mengatur rute halaman seperti detail restoran dan profil. Step 4: Atur rute navigasi untuk berbagai halaman penting seperti RestaurantDetailsScreen. utils route_utils.dart: Step 1: Buat file utilitas untuk memudahkan navigasi antara halaman seperti dari HomeScreen ke halaman detil restoran. Step 2: Definisikan fungsi seperti navigateToDetails(context, restaurantId) untuk mempermudah perpindahan antar halaman. Step 3: Tambahkan animasi transisi untuk navigasi antar halaman, seperti transisi halus saat berpindah dari daftar restoran ke halaman detail. constants string.dart:

Step 1: Definisikan konstanta teks untuk menghindari pengulangan seperti "Find Your Restaurant" atau "Reserve Now". Step 2: Gunakan konstanta ini di berbagai bagian aplikasi untuk mempermudah perubahan teks di masa mendatang. color.dart:

Step 1: Definisikan warna-warna utama aplikasi seperti warna background, warna tombol, dan aksen warna untuk dipakai di UI. Step 2: Gunakan konstanta warna ini untuk menjaga konsistensi desain di seluruh aplikasi. images.dart:

Step 1: Simpan path gambar yang sering digunakan seperti ikon avatar default atau gambar restoran di images.dart. Step 2: Gunakan path ini untuk mengambil gambar tanpa harus menduplikasi URL di berbagai tempat dalam aplikasi. data CourseResponse.dart (dapat diadaptasi menjadi RestaurantResponse.dart):

Step 1: Buat model RestaurantResponse yang mewakili data restoran seperti nama, alamat, gambar, dan rating. Step 2: Implementasikan fungsi fromJson dan toJson untuk konversi dari/ke data JSON API. Step 3: Gunakan model ini untuk menampilkan informasi restoran di halaman seperti HomeScreen dan RestaurantDetailsScreen. DummyCourses.dart (dapat diadaptasi menjadi DummyRestaurants.dart):

Step 1: Definisikan data dummy restoran yang digunakan jika API tidak tersedia. Step 2: Gunakan data dummy ini untuk mengisi daftar restoran sementara API masih dalam proses integrasi. features course_display -> HomeScreen.dart (adaptasi menjadi RestaurantFinderScreen.dart): Step 1: Buat layar utama RestaurantFinderScreen yang menampilkan daftar restoran. Step 2: Gunakan widget seperti ListView untuk menampilkan daftar restoran populer. Step 3: Tambahkan tombol "Find Restaurant" di bagian atas untuk navigasi ke halaman pencarian restoran. course_display -> widgets -> CourseCardWidget.dart (adaptasi menjadi RestaurantCardWidget.dart): Step 1: Buat widget RestaurantCardWidget yang menampilkan informasi singkat restoran seperti gambar, nama, dan rating. Step 2: Gunakan widget Card untuk menampilkan informasi restoran dalam bentuk kotak yang bisa di-klik. course_display -> widgets -> ContinueLearningWidget.dart (adaptasi menjadi RecentViewedWidget.dart): Step 1: Buat widget RecentViewedWidget untuk menampilkan restoran yang terakhir dilihat pengguna. Step 2: Terapkan navigasi ke halaman detil restoran saat item di-klik. quiz_interface -> QuizScreen.dart (jika diadaptasi ke skenario lain): Step 1: Buat layar QuizScreen untuk menampilkan kuis atau pertanyaan interaktif kepada pengguna. Step 2: Buat layout yang memungkinkan pengguna untuk memilih jawaban dengan opsi yang jelas. onboarding -> WelcomeScreen.dart: Step 1: Buat layar selamat datang WelcomeScreen yang menampilkan teks dan ilustrasi untuk pengguna baru. Step 2: Tambahkan tombol "Get Started" untuk memandu pengguna ke halaman utama. profile_management -> ProfileScreen.dart: Step 1: Buat layar ProfileScreen untuk menampilkan dan mengelola informasi profil pengguna. Step 2: Sertakan komponen seperti AvatarWidget untuk menampilkan gambar profil, serta ProfileDetailsWidget untuk menampilkan detail pengguna seperti nama dan email.

myaasiinh commented 1 month ago

mas saya ada kendala @myaasiinh