Dedie Nugroho Elearning App-32602200151

[32602200151]

E-learning-Mobile-App

lib:

• core:

  • config:
  • main_app.dart
  • utils
  • route_utils.dart
  • constants:
  • string_constants.dart
  • image_constants.dart
  • color_constants.dart
  • global_component: -button.dart

• features:

  • welcome:

  • controller:

    • welcome_controller.dart

  • screens:

    • welcome_screen.dart
    • widgets:
      • intro_slider.dart

  • courses:

  • controller:

    • course_controller.dart

  • screens:

  • course_list_screen.dart

  • course_detail_screen.dart

  • widgets:

    • course_card.dart
    • progress_bar.dart

  • quiz:

  • controller:

    • quiz_controller.dart

  • screens:

    • quiz_screen.dart
    • result_screen.dart

  • widgets:

    • question_card.dart
    • answer_option.dart

-data:

• models:
  • course_model.dart
  • quiz_model.dart
  • user_model.dart

[myaasiinh]

lib :

  core:
    - global_component:
      - Typography.dart 
      - ButtonComponent.dart 
      - ProgressBarComponent.dart 
      - AvatarComponent.dart 
      - NetworkImageLoader.dart 
    - config :
      - main_app.dart
    - utils :
      - route_utils.dart
    - constants :
      - string
      - color
      - images

  data:
      course:
      - modelresponses:
        - CourseResponse.dart 
      - dummy:
        - DummyCourses.dart 
      profile:
      - modelresponses:
        - ProfileResponse.dart 
      - dummy:
        - DummyProfile.dart 
      quizez:
      - modelresponses:
        - QuizResponse.dart 
      - dummy:
        - DummyQuiz.dart    

  features:
    course_display:
      - screen:
        - HomeScreen.dart
      - widgets:
        - CourseCardWidget.dart
        - ContinueLearningWidget.dart
        - AvatarWidget.dart
      - controller:
        - HomeController.dart 
    quiz_interface:
      - screen:
        - QuizScreen.dart 
      - widgets:
        - QuizCardWidget.dart 
        - AnswerOptionWidget.dart 
        - ProgressBarComponent.dart 
      - controller:
        - QuizController.dart       
    onboarding:
      - screen:
        - WelcomeScreen.dart 
      - widgets:
        - WelcomeIllustrationWidget.dart
        - GetStartedButtonWidget.dart 
      - controller:
        - WelcomeController.dart        
      profile_management:
      - screen:
        - ProfileScreen.dart 
      - widgets:
        - AvatarWidget.dart 
        - ProfileDetailsWidget.dart 
      - controller:
        - ProfileController.dart 

[myaasiinh]

dari gambar dimana sesuai struktur file ini, petakan perfile algoritma dalam penjelasan bahasa indonesia cara codenya :

lib :

core:
    - global_component:
      - Typography.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - ButtonComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - ProgressBarComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - AvatarComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - NetworkImageLoader.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
    - config :
      - main_app.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
    - utils :
      - route_utils.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
    - constants :
      - string -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - color -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - images -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya

  data:
      course:
      - modelresponses:
        - CourseResponse.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - dummy:
        - DummyCourses.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      profile:
      - modelresponses:
        - ProfileResponse.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - dummy:
        - DummyProfile.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      quizez:
      - modelresponses:
        - QuizResponse.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - dummy:
        - DummyQuiz.dart    -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya

  features:
    course_display:
      - screen:
        - HomeScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - widgets:
        - CourseCardWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
        - ContinueLearningWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
        - AvatarWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - controller:
        - HomeController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
    quiz_interface:
      - screen:
        - QuizScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - widgets:
        - QuizCardWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
        - AnswerOptionWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
        - ProgressBarComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - controller:
        - QuizController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya        
    onboarding:
      - screen:
        - WelcomeScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - widgets:
        - WelcomeIllustrationWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
        - GetStartedButtonWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - controller:
        - WelcomeController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya        
      profile_management:
      - screen:
        - ProfileScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - widgets:
        - AvatarWidget.dart  -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
        - ProfileDetailsWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya
      - controller:
        - ProfileController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
                - 
                -
                - dan seterusnya

[32602200151]

Core:

• global_component:
  • Typography.dart:
    • Buat kelas TextStyle untuk gaya teks pada judul, subtitle, dan body teks.
    • Judul besar di halaman welcome fontSize: 24, fontWeight: FontWeight.bold, dan warna #ffffff
    • Semua Font Menggunakan jenis SF Pro Display

    • 191919 untuk layarcourse

    • 202020 untuk button

    • 8978f4 untuk halaman welcome screen

    • ffffff Untuk body text

  • ButtonComponent.dart:
    • Buat widget ElevatedButton dengan padding dan corner radius yang seragam.
    • Buat warna tombol ungu dengan shadow muda
    • Buat OutlinedButton dengan border radius dan warna sesuai.
  • ProgressBarComponent.dart:
    • Buat LinearProgressIndicator dengan warna ungu di halaman kuis.
    • Set nilai progress berdasarkan pertanyaan yang telah dijawab, misalnya 32% dari 25 pertanyaan.
    • Sesuaikan tinggi progress bar agar terlihat jelas
  • AvatarComponent.:
    • Buat widget CircleAvatar di halaman profil dan Home untuk avatar pengguna.
    • Gunakan radius: 30 dengan gambar profil pengguna.
  • NetworkImageLoader.dart ->:
    • buat Image.network untuk menampilkan gambar ilustrasi di welcome screen dan avatar pengguna.
    • Buat caching dan placeholder untuk menghindari blank space saat gambar di-load.
• config:
  • main_app.dart:
    • buat MaterialApp untuk inisialisasi aplikasi dengan theme berwarna ungu yang konsisten.
    • Gunakan initialRoute untuk mengarahkan pengguna ke halaman Welcome pada awalnya.
    • Buat rute navigasi untuk WelcomeScreen, HomeScreen, dan QuizScreen.
• utils:
  • route_utils.dart -> untuk mempermudah navigasi:
    • Buat utilitas untuk mengatur navigasi antar layar, seperti pindah dari welcome screen ke home screen saat tombol "Get Started" ditekan.
    • Gunakan Navigator.pushNamed atau Navigator.pushReplacementNamed.
• constants:
  • string ->:
    • buat untuk Simpan teks.
  • color ->:
    • buat warna utama #8978f4 yang digunakan di seluruh aplikasi.
    • Simpan warna untuk teks putih, latar belakang, dan tombol.
  • images ->:
    • buat path welcome screen dan gambar profil dummy. Data:
• course:
  • modelresponses:
    • CourseResponse.dart ->:
    • Buat data model yang menampung nama kursus, progress, dan jumlah pelajaran yang ditampilkan di home screen.
    • Gunakan properti seperti String courseName, int totalLessons, dan double progress.
  • dummy:
    • DummyCourses.dart -> untuk data kursus dummy:
    • Buat beberapa objek CourseResponse sebagai data dummy untuk menampilkan kursus yang telah diambil oleh pengguna.
• profile:
  • modelresponses:
    • ProfileResponse.dart ->:
    • Definisikan model untuk profil seperti String name, String avatarUrl, dan statistik belajar.
  • dummy:
    • DummyProfile.dart ->:
    • Buat data dummy untuk profil pengguna termasuk nama dan avatar URL.
• quizzes:
  • modelresponses:
    • QuizResponse.dart:
    • Definisikan model pertanyaan kuis yang mencakup pertanyaan, opsi jawaban, dan jawaban yang benar.
  • dummy:
    • DummyQuiz.dart ->:
    • Buat data dummy untuk kuis seperti di halaman kuis dalam gambar, dengan beberapa pertanyaan dan opsi jawaban. Features:
• course_display:
  • screen:
    • HomeScreen.dart ->:
    • Buat Scaffold dan GridView untuk menampilkan kursus dalam layout grid, dengan progress di bawah masing-masing kursus.
  • widgets:
    • CourseCardWidget.dart ->:
    • Buat widget yang menampilkan gambar kursus, judul, dan progress
    • ContinueLearningWidget.dart ->:
    • Tampilkan kursus yang belum selesai dengan progress bar dan ikon kursus.
    • AvatarWidget.dart :
    • Gunakan CircleAvatar untuk avatar pengguna di sudut kanan atas seperti yang ada di gambar.
  • controller:
    • HomeController.dart ->:
    • Buat controller untuk memuat data sumber dummy dan menampilkannya di halaman Home.
• quiz_interface:
  • screen:
    • QuizScreen.dart ->:
    • Buat tampilan kuis dengan progress bar di atas dan pertanyaan di tengah layar.
  • widgets:
    • QuizCardWidget.dart ->:
    • Buat widget untuk menampilkan pertanyaan kuis di halaman kuis.
    • AnswerOptionWidget.dart:
    • Buat Tampilkan beberapa opsi jawaban dalam bentuk tombol
    • ProgressBarComponent.dart ->:
    • Buat progress bar yang sudah didefinisikan sebelumnya untuk menampilkan progress kuis yang sedang berlangsung.
  • controller:
    • QuizController.dart:
    • Buat controller yang mengatur pertanyaan kuis dan pengecekan jawaban yang benar.
• onboarding:
  • screen:
    • WelcomeScreen.dart ->:
    • Tampilkan gambar ilustrasi dan teks besar seperti di gambar pertama, dengan tombol "Get Started" di bawah.
  • widgets:
    • WelcomeIllustrationWidget.dart ->:
    • Gunakan Image.network untuk menampilkan
    • GetStartedButtonWidget.dart -> untuk tombol "Get Started":
    • Buat tombol dengan warna ungu dengan ElevatedButton.
  • controller:
    • WelcomeController.dart ->:
    • Buat controler welcome screen ke home screen saat tombol "Get Started" ditekan.
• profile_management:
  • screen:
    • ProfileScreen.dart ->:
    • Tampilkan nama pengguna, avatar, dan statistik belajar.
  • widgets:
    • AvatarWidget.dart ->
    • Buat wiget untuk menampilkan avatar pengguna di halaman profil.
    • ProfileDetailsWidget.dart ->
    • Buat untuk menampilkan detail profil seperti nama pengguna dan progress kursus.
  • controller:
    • ProfileController.dart ->
    • Buat controller yang mengelola data profil pengguna.

[32602200151]

core:
  - global_component:
    - ButtonComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - Warna semua button ungu gelap
            - semua button radius

    - AvatarComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - avatar berbentuk bulat di sebelah kanan
            - Ukuran menyesuaikan layar

    - NetworkImageLoader.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - buat Image.network untuk menampilkan gambar ilustrasi di welcome screen dan avatar pengguna.
            - optimalkan gambar agar tidak lambat saat dimuat

  - config :
    - main_app.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - Buat inisialisasi aplikasi
            - saat klik button get started dari welcomscreeen akan menuju ke home screen
            - saat card course di klik akan menuju ke quiz

  - utils :
    - route_utils.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - Route WelcomeScreen, HomeScreen, Quizscreen

  - constants :
    - string -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - get started
            - immersion in the world knowledge
            - programming
            - design
            - Business and Finance
            - Continue Learning
            - Complete
            - Leassons
            - python for beginners
            - HTML 5
            - C++ Beckend
            - Basic CSS
            - New Courses
            - Courses
            - Home
            - Favorites
            - Search
            - settings
            - Next Question
    - color -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - #191919 
            - #202020 
            - #8978f4 
            - #ffffff 
    - images -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - welcomescreen.jpeg
            - desain.png
            - programming.png
            - businessandFinance.png
            - pyton.png
            - html.png
            - cplus.png
            - css.png
            - avatar.png

data:
    course:
    - modelresponses:
      - CourseResponse.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - judulkursus 
            - jumlahkursus

    - dummy:
      - DummyCourses.dart -> buatkan dummy data sesuai dari model diatas
            - judul kuis
            - nilai progrees selesai
            - jumlah kursus
    quizez:
    - modelresponses:
      - QuizResponse.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - pertanyaan quiz
            - jawaban pertanyaan

    - dummy:
      - DummyQuiz.dart    -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - pertanyaa quiz
            - jawaban pertanyaan

features:
  course_display:
    - screen:
      - HomeScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - latar belakang warna biru

    - widgets:
      - CourseCardWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - tepi melengkung radius bisa disii
            - latar belakang warna ungu bisa diisi
            - diatas latar belakang ada tulisan text bisa di isi
            - dibawah text1 dan text2 bisa diisi manual

      - ContinueLearningWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - tepi melengkung radius bisa disii
            - latar belakang warna ungu bisa diisi
            - diatas latar belakang ada tulisan text bisa di isi
            - sebelah kiri ada iconleariningcourse bisa diisi manual
            - disamping icon ada text1 dan text2 bisa di isi manual
            - disampaing text1 ada icon text dimana :
                - ada text = nilai angka bisa berubah bisa diisi manu kiri
                - text lesson
            - dibawahnya ada tulisan textprogreescomplete
            - dibawah text ada progress bar indikator kemajuan bisa diisi manual
            - dan seterusnya
      - AvatarWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - buat circle avatar di sudut kanan
      - NavigationBarWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - navbar tampil screen paling bawah
            - label dan icon home
            - label dan icon Courses
            - label dan icon Favorites
            - label dan icon Search
            - label dan icon Settings
    - controller:
      - HomeController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - buat sebuah controler untuk memuat data dummy
            - iconlessoncourse diklik menuju QuizScreen
            - icon home berwarna putih jika dalam layar homescreen

  quiz_interface:
    - screen:
      - QuizScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - buat tampilan layar pertanyaan
            - buat tampilan opsi jawaban
            - buat tampilan progrees bar
            - buat tampilan "Next Question" dengan text diisi secara manual
    - widgets:
      - QuizCardWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - tepi radius bisa di isi
            - latar berwarn ungu
            - gambar circle pertanyaan 
            - dibawah gambar tampil text pertanyaan bisa d iisi
            - dan seterusnya
      - AnswerOptionWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - 4 button jawaban disusun grid dua dua
            - warna button bisa di isi
            - jawaban yang di pilih ditandai dengan border dengan warna bisa di isi
      - NextButtonWidget.dart
            - buat button dengan text Next Question
            - warna button bisa di isi manual
      - ProgressBarComponent.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - buat progrees di bagian atas misalnya, 32% atau 7/25 pertanyaan
            - warna text bisa di isi manual

    - controller:
      - QuizController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - muat data pertanyaan dan jawaban dari model data dummy
            - buat fungsi untuk cek jawaban yang di pilih benar/salah
            - update progress bar
            - update jumlah pertanyaan yang sudah di kerjakan/total seluruh pertanyaan

  onboarding:
    - screen:
      - WelcomeScreen.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - latar belakang warna ungu bisa di isi manual
            - tampilkan ilustasi
            - tampilkan button get started
    - widgets:
      - WelcomeIllustrationWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - gambar ilustrasi bisa di isi manual
            - text judul ilustasi bisa di isi manual
            - text deskripsi bisa di isi manual
            - warna text putih
      - GetStartedButtonWidget.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - button radius bisa diisi 
            - warna ungu gelap
            - text button berwana putih 
            - samping text ada anak panah ke depan
    - controller:
      - WelcomeController.dart -> buatkan step deskripsi cara code sesuai digambar itu dimana :
            - saat button di klik arankan ke homescreen