Study Jam 6 Web.pdf

1. Study Jam WEEK 6
(Simple E-Commerce App with React Part 2)
Referensi belajar
● (Official) https://beta.reactjs.org/
● (Free 11 hours course) https://scrimba.com/learn/learnreact
● (Dea Afrizal)
https://youtube.com/playlist?list=PLc6SEcJkQ6DxQmmUzUilxRUNrJyeHDmX7
● (Official) https://firebase.google.com/docs/guides
Apa itu React?
React adalah salah satu library JavaScript yang sangat populer dalam penggunaannya untuk
mempermudah pembuatan User Interface. React sendiri terkesan cukup mudah untuk dipelajari
oleh pengguna baru karena pada dasarnya kita hanya menuliskan perintah HTML namun
perintah tersebut kita tuliskan dalam file JSX (JavaScript XML). Ciri khas dari React adalah
penggunaan component based di mana kita tidak perlu menuliskan ulang kode-kode repetitif
melainkan tinggal memanggil component yang sudah dibuat.
Apa itu Firebase?
Firebase adalah layanan Backend gratis yang ditawarkan oleh Google. Firebase menyuguhkan
berbagai layanan mulai dari database secara cloud hingga hosting. Firebase sendiri dapat
diintegrasikan dengan Web, Mobile app, Unity game, dst.
Apa yang kita perlukan?
● Node.js - Untuk panduan instalasinya dapat dilihat pada modul persiapan study jam
● Vite - Dikarenakan proses pembuatan project awal React lumayan memakan waktu,
maka kita akan menggunakan bantuan dari Vite. Salah satu tools front end tercepat
1 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

2. Apa yang akan kita buat?
Website e-commerce yang telah kita buat minggu lalu akan kita coba integrasikan dengan
Google Firebase. Kita tidak perlu lagi menyiapkan data sepatu secara lokal, melainkan akan
kita siapkan secara cloud dengan bantuan Google Firebase.
Desain UI yang sudah dirancang
https://www.figma.com/file/BXOwghRMovNsCJyMBAJBBo/React-Simple-E-Commerce?node-id
=0%3A1&t=zlF2EA8rMDS8Z8Ty-1
File Starter untuk Study Jam 6
https://drive.google.com/file/d/1M6gkFGZzJYsqkDtE7Rm0zlJlexzHwGIq/view?usp=share_link
2 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

3. Langkah-langkah pembuatan
*Untuk yang telah mengikuti Study Jam 5, bisa abaikan step 1 sampai 4
1. Kita buat folder baru bernama react-ecommerce
2. Buka file rar yang sudah didownload tadi dan drag and drop semua file dan folder di
dalamnya menuju ke folder react-ecommerce
3. Buka folder react-ecommerce ke dalam Visual Studio Code
3 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

4. 4. Jalankan perintah npm install pada terminal untuk mendownload dan menginstall semua
package yang belum lengkap
5. Kunjungi https://firebase.google.com/ lalu klik Go to console pada bagian pojok kanan
atas
4 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

5. 6. Lalu piih tombol Add project untuk menambahkan project firebase baru
7. Beri nama project firebase kalian react-ecommerce
8. Untuk sementara, kita tidak perlu menggunakan fitur analytics yang ditawarkan oleh
Firebase. Klik Create project
5 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

6. 9. Halaman dashboard nya seperti ini
10. Klik icon web (yang bersimbolkan </>). Lalu isikan nama aplikasi web kalian misalnya
adalah diberi nama yang sama yakni react-ecommerce
6 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

7. 11. Kita perlu menginstall package firebase pada project React kita di Visual Studio Code.
Pada terminal, jalankan npm install firebase
12. Selanjutnya kita buat file baru bernama firebase.js di dalam folder src.
13. Kita copy pastekan semua perintah ini ke dalam file firebase.js
7 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

8. 14. Karena kita akan menggunakan layanan firestore, kita perlu menambahkan beberapa
perintah tambahan
import { getFirestore } from "firebase/firestore";
export const db = getFirestore(app);
8 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

9. 15. Kembali ke firebase, klik Continue to console
16. Pilih tombol Cloud Firestore untuk membuat database pertama kita dengan Firestore.
Lalu klik Create Database
17. Klik next
9 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

10. 18. Ubah lokasi nya menjadi asia-southeast2 (Jakarta). Lalu klik Enable
19. Nanti tampilan awal dari Firestore adalah seperti ini
20. Klik Start collection
10 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

11. 21. Lalu kita tambahkan data sepatu pertama kita, seperti ini
22. Hasilnya seperti ini
23. Selanjutnya kita akan mengubah rules yang ada pada Firestore, hal ini perlu dilakukan
agar data-data yang sudah kita buat pada Firestore dapat terbaca oleh browser. Klik tab
rules, ubah menjadi seperti ini.
11 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

12. 24. Sekarang kita mencoba untuk menggunakan layanan Storage pada Firebase. Pada tab
kiri, klik tombol Build untuk mengexpand dropdown pilihannya. Dan klik Storage
25. Lalu klik Get Started
12 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

13. 26. Tampilan nya akan seperti ini
27. Kita akan mencoba untuk mengupload sebuah gambar sepatu. Klik Upload file, lalu pilih
gambar yang akan diupload. Sebagai contoh, kita akan mengupload gambar
shoes1.jpg yang ada pada folder src/assets/
13 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

14. 28. Nanti akan ada satu buah gambar di dalam storage kita
29. Lalu kita juga perlu mengubah rules yang ada pada Storage menjadi seperti ini
30. Kembali ke tab Files. Klik baris gambar shoes1.jpg. Nanti akan muncul tab di bagian
kanan. Seperti ini
14 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

15. 31. Kita akan menampilkan gambar yang ada pada Storage dengan memanggil download
url pada gambar tersebut. Jadi pada dasarnya semua file yang kita upload ke dalam
Storage pasti akan memiliki download url masing-masing agar dapat ditampilkan pada
browser dsb.
32. Klik tulisan berwarna biru pada tab kanan
33. Url inilah yang akan kita tuliskan ke dalam field image pada Firestore
34. Copy pastekan url tersebut ke dalam field image pada Firestore. Seperti ini
35. Kembali ke Visual Studio Code. Pada file home.jsx, kita perlu menambahkan beberapa
perintah import. Tambahkan perintah ini
import { db } from '../firebase';
import { collection, onSnapshot } from "firebase/firestore";
15 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

16. 36. Selanjutnya kita ubah initial value dari perintah useState menjadi dalam bentuk array
kosong. Seperti ini
const [dataSepatu, setDataSepatu] = React.useState([]);
37. Lalu kita perlu mereferensikan database yang telah kita buat pada Firestore. Data-data
yang ada pada Firestore biasa kita sebut dengan Collection. Kita tambahkan perintah ini
const shoesCollectionRef = collection(db, "shoes-list");
38. Lalu untuk memanggil data yang ada pada Firestore, kita bisa menggunakan salah satu
hooks yang ada pada React. Namanya adalah useEffect. Perintah yang ada di dalam
useEffect akan selalu dijalankan setiap pertama kali website kita berjalan atau load up
di browser.
https://beta.reactjs.org/apis/react/useEffect
39. Kita tambahkan perintah ini kedalam file home.jsx sebelum perintah return
React.useEffect(() => {
onSnapshot(shoesCollectionRef, snapshot => {
setDataSepatu(snapshot.docs.map(doc => {
return {
id: doc.id,
viewing: false,
...doc.data()
}
}))
console.log(snapshot);
})
}, [])
16 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

17. Di dalam useEffect, kita memanggil function onSnapshot yang merupakan bawaan dari
Firebase. Function onSnapshot digunakan untuk memanggil document yang ada pada
Cloud Firestore secara realtime.
https://firebase.google.com/docs/firestore/query-data/listen
Di dalam onSnapshot kita juga panggil ref atau reference yang sebelumnya sudah kita
buat. Lalu snapshot di sini kita set value nya dengan menggunakan nilai state
dataSepatu. Pada function setDataSepatu, kita memanggil function JavaScript Map
dengan menjabarkan isi dari object docs.
https://reactjs.org/docs/lists-and-keys.html
40. Selanjutnya, sementara kita comment dulu semua perintah tag Link di dalam perintah
return. Seperti ini
17 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

18. 41. Coba kita jalankan dengan perintah npm run dev pada terminal. Lalu pada browser, kita
lihat bagian console nya dengan cara membuka inspector window atau dengan shortcut
CTRL + Shift + I.
42. Di dalam function setDataSepatu, kita sempat memanggil function map terhadap object
docs. Apabila kita expand salah satu object yang ada pada console window, kita bisa
mengetahui maksud dari function map tersebut. Seperti ini
18 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

19. 43. Kita akan mencoba menampilkan state dataSepatu pada browser sebagai div card. Di
dalam lingkup HTML, kita bisa menuliskan perintah JavaScript dengan cara merangkap
perintah-perintah JavaScript pada simbol curly brackets { }.
44. Tambahkan perintah berikut di dalam tag div yang berada di bawah tag h1
{
dataSepatu.map((sepatu, index) => (
<Link to={`/product/${sepatu.id}`} state={{ data: sepatu }} key={index}>
<Card
title={sepatu.title}
image={sepatu.image}
price={sepatu.price}
/>
</Link>
))
}
19 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

20. 45. Hasilnya seperti ini
46. Hanya ada satu card karena pada Cloud Firestore, kita masih mengisi satu document
saja (biasanya pada database bisa kita sebut sebagai row atau baris). Kita bisa
menambahkan card baru dengan cara menambahkan row pada Firestore.
47. Kita upload dulu gambar sepatu kedua pada Storage
20 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

21. 48. Lalu pada Firestore, kita buat document atau row baru. Seperti ini
49. Karena kita menggunakan function onSnapshot, maka akan otomatis tersinkronisasi
secara real time tanpa harus merefresh page pada browser
What’s next?
● Try to add more functionality for this E-Commerce App
● Learn other React hooks (useContext, useRef, etc)
● Learn Next.js (5x faster than React)
● Learn TypeScript
● Learn Angular
● Learn Git and GitHub
● Create a stunning portfolio website
21 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1

22. 22 | Study Jam Web Week 5 - Simple E-Commerce App with React Part 1