Catatan Belajar Dicoding

Tips Umum

Banyak tanya di forum diskusi, biar cepat pintar. Saya bisa bertanya jawab berkali-kali dalam satu hari kalau ada materi yang susah dimengerti. Kita sudah bayar mahal belajar di Dicoding, jadi manfaatkan forum diskusinya dengan baik.

Tutorial bisa didownload codenya dan dijalankan di komputer kita. Cukup klik link pada materi, lalu di bagian “Code” kita bisa pilih untuk download file project sebagai zip. Extract di laptop kita, lalu compile. Di sebelah atas ada nama repo yang sedang kita lihat dan di sebelah kiri ada kode branch yang sedang aktif.

Kita bisa membuka berbagai jenis terminal di VSCode. Ada PowerShell (PS), ada Command Prompt (CMD), Git, dst. Kadang satu perintah bisa jalan di PS saja atau di CMD saja, kadang bisa di keduanya.

Install Eslint

npm install eslint --save-dev
npx eslint --init

Frontend Langkah 4/4

Perubahan Code

Di langkah 4, kita mulai belajar dengan perubahan kode pada Git. Di akhir materi biasanya ada tautan yang bisa kita klik. Warna merah artinya kodenya tersebut dihapus pada versi terbaru, yang warna hijau artinya kode tersebut ditambahkan di versi terbaru. Untuk melihat kode akhir tanpa melihat perubahan, klik pada titik tiga di kanan atas, lalu pilih “view file”

Untuk melihat seluruh file pada repo terkait, klik pada nama repo di samping kode branch. Bukan pada nama repo di samping username (bagian atas). Lalu data bisa didownload dan dijalankan di komputer lokal kita.

Backend Langkah 3/6

Install Hapi & Install Nodemon

npm install @hapi/hapi
npm install nodemon --save-dev

Install Nanoid

npm install nanoid@3.x.x

Catatan: Pastikan Anda memasang nanoid dengan versi 3.x.x. Karena jika menggunakan versi terbaru, nanoid tidak dapat digunakan dengan format module CommonJS.

Restart server di port 5000

Tekan CTRL+C, lalu Y, lalu jalankan

npx kill-port 5000; npm run start

Enable CORS

Tutorial akan gagal pada saat mengakses dari notesapp-v1.dicodingacademy.com ke localhost. Hal ini karena server di localhost menganggap origin request tidak aman. Agar berhasil, kita whitelist origin sebagai domain yang aman.

Caranya, di chrome buka chrome://flags/#unsafely-treat-insecure-origin-as-secure

Lalu localhost, localhost:port, dan domain notes app Dicoding sebagai origin yang aman pada opsi berikut:

Ini berlaku pada Chrome 108 (29 Nov 2022). Untuk versi sebelumnya silakan ikuti panduan di forum diskusi Dicoding

Navigasi di EC2 Instance

EC2 memakai OS Linux, belajar navigasi folder dan file di sini

Git Tidak Berjalan di PowerShell/CMD Visual Studio Code

Jalankan PowerShell/CMD baru dari Windows Start Menu

Tanda () Menjadikan Sesuatu Jadi Object

Check detailnya di sini

⚠️ Di forum diskusi Dicoding ada siswa-siswa kena tagihan jutaan rupiah karena lupa matiin layanan AWS. Hapus semua resource yang telah Anda buat, termasuk EC2, VPC, Subnet, VPC Peering, NAT Gateway, dll. Ini semua harus Anda lakukan untuk menghindari segala biaya meskipun akun Anda adalah Free Tier.

Backend Langkah 4/6

Nggak Bisa Instance Connect

Login dulu ke aws.amazon.com sebagai root (super admin) AWS, lalu ke IAM management console, lalu kasih permission ke akun developer sebagai berikut:

Buat Key Pair

Di tutorial membuat EC2 instances, kata Dicoding nggak perlu buat key-pair. Tapi nyatanya saya gak bisa akses ke EC2 instances tanpa key-pair.

Key pair adalah kunci berupa file sebagai gantinya password, sama kayak kita masuk ke pintu rumah di dunia nyata perlu kunci fisik juga. Bisa sih kita masuk rumah dengan teriak minta dibukakan pintu oleh Amazon Instance Connect (penjaga rumah), tapi kalau kasusnya seperti saya, akun nggak dikenali instance connect, jadi perlu punya key pair (kunci rumah) sendiri.

Bahkan kata Amazon sendiri nggak bagus kalau nggak buat key pair. Jadi, pas buat instance EC2 pilih buat key pair.

Save baik-baik file .pem yang dibuat dan didownload. Nanti kita akan pakai file itu untuk connect ke EC2. Setelah itu pilih key pair yang kita buat untuk menjadi kunci masuk ke dalam EC2 kita

Denagn begini kalau gagal connect melalui Instance Connect, kita bisa lakukan koneksi menggunakan file .pem yg dibuat melalui software PuTTY, sebuah SSH client populer. Detailnya ada di docs.aws.amazon.com/AWSEC2/latest/UserGuide/putty.html

Pakai HTTP, bukan HTTPS

Kalau kita buka alamat di atas setelah pertama kali install apache di VPS (EC2) akan error, karena alamat di atas HTTPS. Copy linknya, ubah ke HTTP, baru nanti terbuka.

Editing di Vim

Di tutorial memakai text editor Vim yg susah dipakai. Klik tombol “insert” di keyboard untuk berubah ke mode editing file atau mode non-editing. Tanda ada di dalam mode editing ada tulisan INSERT/REPLACE di kiri bawah.

Untuk keluar dari mode editing tekan escape (Esc), lalu titik dua (:). Lalu ketikkan perintah untuk save file. Misalnya perintah (wq!), lalu tekan Enter.

Perintah wq! artinya write (w), quit vim (q), force write (!)

Solusi Memahami Istilah Asing

Ada istilah yang bikin nggat ngerti? Google/YouTube aja. NAT (Network Address Translation? Subnet? Cek di YouTube aja, dst, dst, dst

React Langkah 5/6

Cara Install PropTypes

npm install prop-types

• return ( … ) di dalamnya hanya boleh JSX element
• Di element butuh link?

import { Link } from ‘react-router-dom’;
import { Navigate, useNavigate } from ‘react-router-dom’;

• Di element ada form? Butuh state (class)

Karena di function tidak bisa ada state

• Di URL ada parameter? Butuh useParams
• Di URL ada query parameter? Butuh useSearchParams

import { useParams, useSearchParams } from “react-router-dom”;