Submission Belajar Fundamental Front-End Web Development

🌀 #10. "Belajar Fundamental Front-End Web Development"

        

Profile
Nama	Nur Muhammad Himawan
Learning Path	Machine Learning & Front End Development
Progam	Studi Independen Batch 3 - Kampus Merdeka

Proyek submission untuk kelas Belajar Fundamental Front-End Web Development Dicoding.

Display Front-End

How to Install and Run this Project

Berikut langkah-langkah untuk menginstal dan menjalankan code progam ini.

1. Clone this repository
2. Install Node.JS
3. Buka folder project dan jalankan perintah npm install pada terminal.
4. Setelah node-modules terinstall, ketikkan perintah npm run start-dev (development mode)untuk mejalankan kode progam.
5. Kemudian, buka link project melalui local browser.
6. Atau cara kedua, anda dapat menjalankan perintah npm run build (production mode), kemudian buka progam dengan membuka file index.html yang tersedia pada folder .src/dist/index.html.

Demo Project

https://movee-apps.vercel.app/

Resource

• HTML

• CSS (Bootstrap 5.2)

• JavaScript

• Visual Studio Code (VSCode)

Kriteria Submission

Berikut kriteria dari proyek submission yang harus Anda penuhi:

• Menggunakan standar ES6 sintaks dalam menuliskan kode JavaScript pada proyek yang dibuat. (Done)

• Terdapat minimal satu penerapan custom element. (Done)

• Menggunakan Webpack sebagai module bundler (tahap produksi). (Done)

• Memanfaatkan Webpack sebagai environment dalam pengembangan proyek (tahap development). (Done)

• Memanfaatkan API dengan menggunakan konsep AJAX dalam menampilkan data yang dinamis pada aplikasi yang dibuat. (Done)

• Anda bebas menentukkan tema aplikasi yang ingin dibuat**,** terkecuali tema *Club Finder/*Pencarian Klub Olahraga, Sepak Bola, atau Dicoding Books. (Done)

Penilaian & Saran

Submission Anda akan dinilai oleh reviewer dengan penilaian bintang berskala 1-5 berdasarkan dari parameter yang ada. Anda dapat menerapkan beberapa saran untuk mendapatkan nilai tinggi, berikut sarannya:

• Menerapkan tampilan aplikasi yang menarik:
  • Memiliki pemilihan warna yang pas dengan tema aplikasi (dalam memilih warna, Anda dapat memanfaatkan tools pemilihan warna seperti colorhunt.co). (Done)
  • Tata letak elemen yang pas. (Done) Contoh : Tidak ada konten yang bertumpuk.
  • Penggunaan font yang pas dengan tema. (Done)
  • Penerapan padding, margin yang pas. (Done)
  • Responsif pada seluruh ukuran layar perangkat. (Done, i use Bootstrap for layouting.)
• Menggunakan package pihak ke-3 yang di-install melalui package manager (bukan CDN), contohnya:
  • Lodash
  • Axios
  • JQuery (Done)
  • dsb. (Done)
• Menuliskan kode dengan bersih dan konsisten. Anda bisa memanfaatkan Linter seperti ESLint dalam menjaga gaya penulisan kode. (Done)
• Bereksplorasi pada penerapan webpack. Seperti:
  • Menggunakan Loader atau Plugin di luar yang diajarkan pada modul. (Done)
  • Menerapkan optimasi bundle seperti minifying atau split chunk. (Done)

Berikut adalah detail penilaian submission:

• Bintang 1 : Semua ketentuan terpenuhi, namun terdapat indikasi plagiat yaitu dengan menggunakan proyek orang lain dan hanya mengubah kontennya saja.
• Bintang 2 : Semua ketentuan terpenuhi, namun tidak lebih baik dari latihan yang diberikan.
• Bintang 3 : Semua ketentuan terpenuhi, namun hanya mengikuti latihan yang ada di kelas.
• Bintang 4 : Semua ketentuan terpenuhi dan menerapkan minimal 2 (dua) saran di atas.
• Bintang 5 : Semua ketentuan terpenuhi dan menerapkan minimal 4 (empat) saran di atas. (Done)

Resources

Berikut beberapa rekomendasi public API yang bisa Anda manfaatkan dalam pengerjaan submission:

• TheMovieDB : https://www.themoviedb.org/documentation/api
• TheSportDB : https://www.thesportsdb.com/api.php
• TheMealDB : https://www.themealdb.com/api.php
• TheCockTailDB : https://www.thecocktaildb.com/api.php
• Covid-19 Statistic : https://github.com/mathdroid/covid-19-api

Untuk API, saya memakai TheMovieDB sebagai API yang direkomendasikan oleh tim Dicoding. Berikut API KEY yang saya gunakan.

API KEY TheMovieDB

Tips

Beberapa poin di bawah ini mungkin akan membantu Anda dalam pengerjaan submission:

• Anda bisa menggunakan JQuery dalam memanipulasi DOM jika Anda sudah terbiasa menggunakannya. (Done)
• Anda bisa menggunakan CSS Framework seperti Bootstrap, Materialize, atau lainnya dalam menyusun tampilan web app. (Done)
• Anda bisa menggunakan package pihak ketiga untuk melakukan AJAX pada proyek ini. (Done)

Ketentuan Berkas Submission

• Beberapa poin yang perlu diperhatikan ketika mengirimkan berkas submission:
  • Di dalam folder proyek tersebut terdiri dari HTML, CSS, JS, atau aset yang Anda gunakan dalam halaman web yang Anda buat. (Done)
  • Selain itu, pastikan di dalam folder proyek terdapat berkas package.json yang mengandung daftar dependencies yang proyek Anda gunakan. (Done)
  • Mengirimkan proyek dalam bentuk folder Proyek, kemudian arsipkan folder tersebut dalam bentuk ZIP. (Done)
  • Tidak perlu menyertakan package yang berada pada node_modules ke dalam berkas ZIP. Karena akan membuat berkas ZIP memiliki ukuran yang besar. (Done)

Reference and library or external repository/API used:

Saya mengembangkan moveee apps menggunakan bahan latihan di modul kelas dan beberapa tambahan package pihak ketiga. Untuk memudahkan dalam styling, layouting hingga pengembangan, saya memakai beberapa reference atau library external yang saya install melalui package manager. Berikut beberapa reference-nya.

• Bootstrap v.5.2

  Saya memakai bootstrap sebagai CSS Framework utama dalam pengembangan project ini.

• Bootstrap Icons

  Saya memakai icons yang disediakan oleh bootstrap.

  https://icons.getbootstrap.com/

• Canva

  https://www.canva.com/

• ColorHunt

  https://colorhunt.co/

• Dsb.

  Banyak package-package yang saya gunakan dalam pengembangan project ini mulai dari webpack, babel, jquery, minify, dll. yang tersimpan didalam package.json baik dari mode development hingga production.