Hi teman-teman, Beberapa waktu lalu saya mendapat kesempatan untuk sharing pada acara Google IO Extended Bogor 2024. Topik yang saya bawakan adalah terkait salah produk baru dari Firebase. Saya mau sedikit sharing terkait materi yang saya bawakan di acara tersebut.

Oke langsung saja, saya akan mulai dengan pertanyaan:

Pertama pernah gak teman-teman merasa punya ide inovatif untuk membuat aplikasi web namun tidak memiliki waktu untuk mempelajari bagaimana menyiapkan infrastruktur yang dibutuhkan?

Atau teman-teman merasa ingin berinovasi dengan cepat namun terhambat oleh proses deploy yang masih manual dan tidak efisien?

Jika teman-teman merasakan hal tersebut, saya akan memperkenalkan Firebase App Hosting untuk teman-teman. "The next generation of serverless web hosting with Google"

Seperti yang kita tahu akhir-akhir ini fullstack framework Javascript cukup banyak digunakan seperti Angular dan Next.js. Dimana kita dapat memanfaatkan benefits dari server-side-rendering dari Javascript dengan mudah. Misalnya untuk meningkatkan SEO (search engine optimization) atau untuk meningkatkan load time dari aplikasi kita.

Untuk itu kita butuh lebih dari sekedar CDN (Content Delivery Network). Kita butuh sebuah backend karena fullstack framework seperti Next.js dan Angular menggabungkan antara backend dan frontend sekaligus. Maka dari itu kita perlu menyiapakan infrastruktur. Tetapi menyiapkan infrastruktur yang dibutuhkan dan kapan kita membutuhkannya terkadang menjadi hal yang memusingkan dan cukup memakan waktu.

Firebase App Hosting hadir untuk menyelesaikan masalah tersebut. "The new home for full-stack Angular and Next.js apps on Google".

Firebase App Hosting akan secara otomatis menyiapakan infrastruktur yang diperlukan dan menyajalankan aplikasi kita secara otomatis.

Firebase App hosting menyerderhanakan proses implementasi dari Github ke Google Cloud. Mulai dari membuat aset statis pada Google Cloud Build, lalu mengimplementasikan konten yang dinamis pada Google Cloud Run dan menyeajikan konten yang disimpan pada cache dalam Google Cloud CDN. Jadi kita cukup push kode kita ke Github, Firebase App Hosting akan menyelesaikan sisanya.

Deploy a NextJS App with Firebase App Hosting

Sekarang pertanyaannya bagaimna melakukan deploy ke Firebase App Hosting dan serumit apa prosesnya. Kita akan coba bahas pada sesi ini.

Jadi untuk men-deploy aplikasi Next.js ke Firebase App Hosting ada beberapa langkah yang perlu kita lakukan.

1. Download source code Next.js

   Untuk men-download project Next.js kita bisa menggunakan perintah:

    npx create-next-app@latest
   

2. Pergi ke Firebase Console

   Untuk pergi ke Firebase Console kamu bisa mengunjungi link berikut: https://console.firebase.google.com/

   Lalu masuk menu App Hosting pada bagian side bar seperti pada gambar dibawah dan kita bisa masuk ke bagian "Get started".

   

   Note: Untuk menggunakan Firebase App Hosting kita perlu meng-upgrade pricing plan aplikasi kita jadi "Blaze"

3. Set up App Hosting

   Pada bagian set up App Hosting ada tiga langkah yang harus kita lakukan yaitu:

   1. Import a Github repositoy

      Pada step ini kita diminta menghubungkan Firebase App Hosting dengan akun Github kita.

      

      Setelah tehubung kita import repository yang ingin kita deploy, seperti gambar dibawah:

      

   2. Deployment settings

      Pada step kedua ini kita akan melakukan deployment setting dimana kita perlu menentukan root directory dan memilih branch dari repository kita yang ingin kita deploy.

      Pada step ini juga terdapat fitur automatic rollout. Kita bisa mengaktifkannya atau tidak. Ketika fitur ini aktif maka setiap ada perubahan pada branch yang kita pilih maka Firebase App Hosting akan melakukan proses redeploy. Untuk lebih jelasnya bisa lihat gambar dibawah:

      

   3. Name your backend

      Pada step ketiga atau terakhir kita diminta untuk memberikan nama dari aplikasi backend kita. Firebase App Hosting akan membuatkan server untuk aplikasi backend kita secara otomatis pada layanan Google Cloud.

      

Setelah setupnya selesai kita bisa menekan tombol "Finish and Deploy*"* untuk memproses deployment kita. Firebase App Hosting akan menyiapakan infrasktuktur aplikasi kita secara otomatis baik untuk frontend ataupun backend.

4. Dashboard Firebase App Hosting

   

   Setelah proses deploy selesai kita bisa masuk ke dashboard aplikasi kita di Firebase App Hosting untuk melihat informasi dan fitur apa aja yang ada disana. Kurang lebih tapilannya seperti gambar diatas.

   Disini kita lihat pada dahsboard Firebase App Hosting terdapat dua section, yaitu:

   1. Current rollout

      Pada section current rollout terdapat informasi git dan commit terakhir, domain, manage domain dan masuk ke Google Cloud Run Log dan Metrics untuk melihat kesehatan dari aplikasi kita.

   2. Rollout History

      Pada section rollout history kita dapat melihat riwayat peluncuran dari apalikasi kita.

      Di Firebase App Hosting sendiri proses peluncurannya terdapat dua tahap yaitu build dan deploy, yang akan kita bahas pada bagian berikutnya.

5. Rollout Process

   Proses rollout pada Firebase App Hosting terdapat dua step yaitu:

   1. Build

      

      Pada proses build ini, Firebase App Hosting akan meminta Google Cloud Build Job mengenerate ases statis dan membuat container image untuk Google Coud Run.

   2. Deploy

      

      Setelah proses build selesai akan masuk ke proses berikutnya yaitu deploy. Pada tahap ini Firebase App Hosting akan membuat Google Coud Run Revision dengan image yang dibuat pada proses build. Lalu mengaktifkan trafik. Jika ada trafik yang masuk dan proses deploy-nya sudah selesai maka trafiknya akan secara otomatis diarahkan ke deploy yang terbaru sehingga memperkecil kemungkinan downtime.

Sekali lagi pada Firebase App Hosting proses rollout dikaitkan dengan Google Cloud Build Job dan Google Cloud Run Revision.

Tetapi Ketika kita menggunakan serverless, ada satu hal yang menantang yaitu mencari tahu dimana ketika terjadi kesalahan. Apalagi jika kita tida memiliki visibilitas pada backend tentu akan sulit untuk menemukannya.

Firebase App Hosting hadir dengan konsep yang namanya "Just the right level

of abstraction". Dimana kita dapat masuk ke Google Cloud Build dan Google Cloud Run Revision untuk mengetahui apa yang terjadi dibelakang layar untuk setiap tollout. Misalnya kita bisa mencari tahu diamana dan bagaimana aplikasi kita dijalankan. Kita juga dapat melihat runtime configuration seperti informasi CPU boost, minimun instance yang aktif dimana ini dapat scale up dan scale down secara otomatis sesuai permintaan. Dan kita dapat melakukan konfigurasi dalam bentuk yml.

6. Recap

   

   Untuk rangkuman bagaimana melakaukan deploy aplikasi Nextjs ke Firebase App Hosting kurang lebih seperti ini:

   1. Pertama kita buat aplikasi Nextjs-nya dengan menjalankan perintah npx create-next-app

   2. Kita hubungkan Firebase App Hosting dengan akun Github kita lalu import repo yang ingin kita deploy

   3. Setelah repo kita ter-import ke Firebase App hosting, Firebase App Hosting akan menyiapkan infranstruktur yang dibutuhkan dan menjalankan aplikasi kita secara otomatis.

   4. Kita juga dapat melihat build logs dan status backend dari aplikasi kita secara transparan.

   5. Yang terakhir kita dapat melakukan custom domain dan mendapatkan sertifikat SSL secara gratis.

Optimized for Modern, Full-stack frameworks

Jika teman-teman pengguna lama Firebase tentu teman-teman kenal dengan Firebase Hosing. Yaitu layanan dari Firebase yang bisa kita gunakan untuk men-deploy static website.

Sekarang pertanyaannya apakah Firebase App Hosting ini akan menggantikan Firebase Hosting? Jawabannya adalah tidak.

Firebase App Hosting hadir bukan untuk menggantikan Firebase Hosting tetapi untuk mengisi gap tertentu.

Firebase App Hosting hadir untuk mengoptimalkan aplikasi fullstack framework yang memerlukan backend seperti Next.js dan Angular.

Founding Principles

Pada sesi ini kita akan membahas tentang prinsip dari Firebase App Hosting. Ada empat prinsip dari Firebase App Hoshting dan kita akan coba bahas satu per satu.

1. Full-stack

   Firebase App Hosting di-design untuk me-manage semuanya dari Content Delivery Network (CDN) ke server-side-rendering (SSR).

   Firebase App Hosting tidak hanya mendukung pengalihan traffic ke backend tetapi akan menglola aplikasi backend kita sepenuhnya sesuai standarisasi layanan Google Cloud.

   Dimana layanan dari Google Cloud Run akan secara otamatis meningkatkan backend kita sesuai kebutuhan dan akan diturunkan ke 0 atau idle ketika tidak ada traffic. Hal tersebut bagus untuk menghemat cost.

2. Framework Aware

   Prinsip kedua dari Firebase App Hosting ini adalah "Framework Aware". Dimana build pack dari Firebase App Hosting di-design dapat mengenali kode yang kita gunakan baik menggunakan Next.js maupun Angular.

   Firebase App Hosting juga dapat men-deploy dan menjalankan aplikasi kita secara otomatis sesuai dengan kode yang kita gunakan. Untuk saat ini yang baru di-support Next.js dan Angular.

3. Git-centric

   Firebase App Hosting dirancang berdasarkan Continuous Integration dan Continuous Delivery (CI/CD) pada Github. Jadi penggunaanya cukup mudah. Setelah kita meng-install atau mengintegrasikan Firebase App Hosting dengan akun Github kita, implementasinya semudah melakukan git push.

   Kita bisa menjadi pengguna Firebase App Hosting tanpa perlu meng-install Firebase CLI di komputer kita.

   Kita juga dapat melihat status development dan deployment dari aplikasi kita. Selain itu kita juga dapat melihat peluncuran atau rollout dan dapat melacak setiap versi dari aplikasi kita.

   Firebase App Hosting dapat melihat commit baru sesuai kebijakan deploy yang kita buat. Dan akan men-deploy secara otomatis menggunakan Google Cloud Build.

4. Modern Architecture

   Prinsip yang keempat dari Firebase App Hosting adalah "Modern Architecture" yang artinya layanan Firebase App Hosting sepenuhnya bersifat regional.

   Seluruh layanan Firebase App Hosting diisolasi berdasarkan wilayah backend dari aplikasi kita. Kegagalan disuatu region tidak akan berpengaruh ke region lainnya. Bahkan dalam 1 region dibagi lagi ke beberapa bagian dengan menggunakan layanan dari Google Cloud Load Balancear dan CDN.

Benefits

Ada beberapa hal yang ditawarkan oleh Firebase App Hosting yang mungkin bisa menjadi pertimbangan teman-teman sebelum menggunakan layanan dari Firebase App Hosting.

1. Scalabel

   Layanan dari Firebase App Hosting cukup flexible. Dimana Firebase App Hosting dapat melakukan scale up dan scale down infrastruktur backend aplikasi kita secara otomatis sesuai kebutuhan.

2. Flexible

   Firebase App Hosting menawarkan flexibilitas yang cukup tinggi. Dimana memberikan kita kemampuan untuk melihat ke layanan dari Google Cloud, jadi kita dapat membangun infrastruktur aplikasi kita sesuai dengan kebutuhan.

3. Secure

   Firebase App Hosting juga menawarkan keamanan yang cukup tinggi karena didukung oleh layanan Google Cloud. Dan Firebase App Hosting membantu memastikan aplikasi kita memenuhi standar keamanan dan kepatuhan dari layanan Google Cloud.

Persiapan Awal
Sebelum menginstal Certbot, pastikan sistem Ubuntu kita sudah diperbarui dan siap untuk menginstal dependencies yang diperlukan.

Pastikan Nginx sudah terinstal dan ada domain yang sudah terknfigurasi pada server kamu. Untuk menginstalNginxdan mengkonfigurasidomainpadaUbuntukamu bisa membaca artikel berikut.

sudo apt update
sudo apt upgrade

Menginstal Certbot
Langkah pertama adalah menginstal Certbot menggunakan snapd:

sudo apt install snapd

Setelah snapd terinstal jalankan perintah berikut untuk mengintall Certbot pada mesin kita:

sudo snap install --classic certbot

Jalankan perintah berikut untuk memastikan perintah certbot dapat berjalan:

sudo ln -s /snap/bin/certbot /usr/bin/certbot

Mendapatkan Sertifikat SSL
Setelah Certbot terinstal, kita bisa mendapatkan sertifikat SSL untuk domain kita.

sudo certbot --nginx -d example.com

Gantilah example.com dengan nama domain kamu. Certbot akan secara otomatis mengonfigurasi Nginx untuk menggunakan sertifikat SSL.

Pastikan Nginx sudah terinstal dan ada domain yang sudah terknfigurasi pada server kamu. Untuk menginstalNginxdan mengkonfigurasidomainpadaUbuntukamu bisa membaca artikel berikut.

Memeriksa Instalasi
Pastikan sertifikat SSL berfungsi dengan benar dengan membuka situs web Anda di browser dan memeriksa ikon kunci di bagian alamat.

Sumber

• https://ajatdarojat45.id/cara-port-forwarding-menggunakan-nginx-di-ubuntu

• https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal

• https://snapcraft.io/docs/installing-snap-on-ubuntu

1. Perkenalan Generik

Generik memungkinkan kita untuk menulis fungsi, kelas dan interface yang fleksibel dan dapat digunakan berulang-ulang. Generik memungkinkan kita membuat komponen-komponen yang dapat bekerja dengan banyak tipe data tanpa kehilangan informasi tipenya.

Fungsi Generik Dasar

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("myString"); // Output: "myString"
let output2 = identity<number>(42); // Output: 42

Pada contoh ini, T adalah tipe parameter yang bertindak sebagai sebuah placeholder untuk tipe yang asli. Ketika fungsinya dipanggil, tipe parameternya telah diganti dengan tipe yang diberikan.

2. Fungsi Generik

Kita dapat membuat fungsi generik yang bekerja dengan banyak tipe data. Ini berguna khususnya untuk fungsi yang bekerja dengan array atau koleksi.

Contoh: Fungsi Generik

function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length); // Array has a `.length` property
  return arg;
}

let stringArray = loggingIdentity<string>(["Alice", "Bob", "Charlie"]);

Disini, fungsi loggingIdentity bekerja dengan sebuah array dari semua tipe T. Tipe array ditentukan ketika fungsinya dipanggil.

3. Kelas Generik

Generik dapat digunakan untuk membuat kelas yang bekerja dengan berbagai tipe. Ini berguna untuk struktur data seperti stacks, queues atau linked lists.

Contoh: Kelas Generik

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;

  constructor(zeroValue: T, addFunction: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = addFunction;
  }
}

let myNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myNumber.add(5, 10)); // Output: 15

let myString = new GenericNumber<string>("", (x, y) => x + y);
console.log(myString.add("Hello, ", "world!")); // Output: "Hello, world!"

Pada contoh ini, kelas GenericNumber bekerja dengan berbagai tipe T. Tipenya dispesifikasikan ketika sebuah instance dari kelas dibuat.

4. Constraints Generik

Terkadang, kita perlu untuk membatasi tipe-tipe yang dapat digunakan dengan generik. Kita dapat mencapainya dengan constraints.

Contoh: Constraints Generik

interface Lengthwise {
  length: number;
}

function loggingIdentityWithConstraint<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // Now we know it has a `.length` property
  return arg;
}

loggingIdentityWithConstraint({ length: 10, value: 42 }); // Works
// loggingIdentityWithConstraint(42); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.

Disini, tipe generic T telah dibatasi untuk tipe-tipe yang memiliki properti length.

5. Menggunakan Beberapa Parameter Tipe

Generik dapat juga menggunakan beberapa parameter tipe untuk membuat tipe-tipe yang lebih fleksibel dan kompleks.

Contoh: Beberapa Parameter Tipe

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

let mergedObject = merge({ name: "Alice" }, { age: 25 });
console.log(mergedObject); // Output: { name: "Alice", age: 25 }

Pada contoh ini, fungsi merge menerima 2 tipe objek yang berbeda dan menggabungkannya menjadi satu.

6. Interfaces Generik

Interfaces dapat juga menggunakan generics untuk membuat kontrak untuk fungsi, kelas dan objek yang fleksibel dan dapat digunakan kembali.

Contoh: Interfaces Generik

interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

let kvp: KeyValuePair<string, number> = { key: "age", value: 30 };
console.log(kvp); // Output: { key: "age", value: 30 }

Disini, interface keyValuePair menerima dua parameter, K dan V, membuat sebuah generik interface.

7. Parameter Tipe Bawaan

Kita dapat memberikan tipe bawaan untuk generik kit, membuat opsi generik ketika memanggil fungsi atau membuat sebuah instance dari sebuah kelas.

Contoh: Parameter Tipe Bawaan

function createArray<T = string>(length: number, value: T): T[] {
  return Array(length).fill(value);
}

let stringArray = createArray(3, "hello");
let numberArray = createArray<number>(3, 42);
console.log(stringArray); // Output: ["hello", "hello", "hello"]
console.log(numberArray); // Output: [42, 42, 42]

Pada contoh ini, jika tipe tidak diberikan, maka type string bawaan akan digunakan.

8. Constraints dan keyof Generik

Menggunakan typeof dengan generik memungkinkan kita untuk membuat fungsi yang beroperasi pada properti-properti objek yang spesifik.

Contoh: Constraints dan keyof Generik

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let person = { name: "Alice", age: 25 };
let name = getProperty(person, "name"); // Output: "Alice"
let age = getProperty(person, "age"); // Output: 25
// let unknown = getProperty(person, "unknown"); // Error: Argument of type '"unknown"' is not assignable to parameter of type 'keyof { name: string; age: number; }'.

Disini, fungsi getProperty menerima sebuah object T dan key K yang harus menjadi sebuah key dari T. Ini memastikan keamanan tipe.

Contoh Kode

Disini sebuah contoh yang mencontohkan penggunaan dari generik pada fungsi, kelas dan interface:

// Generic function
function reverseArray<T>(items: T[]): T[] {
  return items.reverse();
}

let reversedNumbers = reverseArray([1, 2, 3, 4, 5]);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]

// Generic class
class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(i => i !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

let textStorage = new DataStorage<string>();
textStorage.addItem("Alice");
textStorage.addItem("Bob");
textStorage.removeItem("Alice");
console.log(textStorage.getItems()); // Output: ["Bob"]

// Generic interface
interface Pair<T, U> {
  first: T;
  second: U;
}

let pair: Pair<string, number> = { first: "Alice", second: 25 };
console.log(pair); // Output: { first: "Alice", second: 25 }

Rangkuman

Hari ini, kita telah mempelajari generics pada Typescript, membahas fungsi, kelas, constraint, multiple parameter tipe, interface, parameter tipe bawaan, dan operator keyof generik.
Generik adalah sebuah fitur yang powerfull yang memungkinkan kita membuat komponen yang fleksibel, dapat digunakan kembali dan sebagai keamanan tipe.

Sumber

• https://anuj1.hashnode.dev/generics-in-typescript

Hal tersebut biasanya terjadi karena subfolder dari directory aplikasi kita terdapat folder .git. Itu yang menyebabkan folder/subfolder di directory project kita menjadi submodule.

Berikut cara mengatasi problem folder yang menjadi submodule di git:

1. Hapus folder .git didalam folder yang menjadi submodule. Bisa hapus secara manual lewat explorer atau jalankan perintah rm -rf .git di folder yang menjadi submodule.

2. Hapus cache dengan menjalankan command berikut git rm -r --cached -r .

3. Jalankan perintah git add .

4. Jalankan perintah git commit -m "some commit"

5. Jalankan perintah git push origin master --force

Setelah melakukan langkah-langkah di atas silahkan cek kembali folder git yang menjadi submodule tadi.

Selamat mencoba!

Petama, mari kita bahas secara terknis dari var, let dan const.

1. var

1.1. var memilikin cakupan fungsi

Jika kamu tidak terbiasa dengan javascript scope, scope mengacu pada konteks blok kode, yang menentukan aksesibilitas variabel tertentu. Jika variabel dideklarasikan diluar sebuah fungsi, itu tercakup secara global, artinya bisa di akses dimana aja di kode kamu. berikut adalah case var dalam cakupan fungsi. Lihat contoh di bawah ini.

function setup() {
var x = 16;
console.log(c); //output: 16
}
console.log(x); //output: x is nor defined

Dalam contoh diatas, karena x dideklarasikan dalam suatu fungsi, variabel x hanya dapat diakses di dalam fungsi tersebut.

1.2. var dapat di re-assigned dan re-declared

var dapat di re-assigned dan bahkan di re-declared tanpa menimbulkan error. mungkin kamu berpikir bahwa kode kita akan menjadi lebih fleksibel, tapi pada kenyataanya, itu akan menumbulkan suatu masalah. Karena var bisa di re-declared, ada kemungkinan kita lupa mendeklarasikan variabel tertentu, dan tidak sengaja mengganti value nya. Ketika aplikasi kita skalanya masih kecil, mungkin kita masih bisa menghindari masalah ini. Namun, saat aplikasi kita sudah mulai besar, best practice nya menggunakan let.

2. let dan const

let dan const berprilaku dengan cara yang sangat mirip, dengan satu perbedaan utama. Ayo kita liat pesamaanya dulu.

2.1. let dan const memiliki cakupan blok

Dengan let dan const, variable hanya bisa di akses dalam blok dimana mereka didekalrasikan. Jadi mungkin kamu bertanya, apa itu blok?

Blok adalah segala sesuatu yang dikelilingi oleh sepasang {} (contoh. For loop, if statement, dll). Lihat contoh di bawah ini.

function letExample() {
  let x = 2;
if (x === 2) {
let y = 6;
console.log(y); //output: 6
}
console.log(x); //output: 2
console.log(y); //output: x is nor defined
}

Dalam contoh diatas, variabel x dideklarasikan didalam lingkup blok fungsi, yang membuatnya dapat diakses didalam seluruh fungsi itu. Namun, variabel y dideklarasikan di dalam lingkup blok pernyataan if, membuatnya hanya dapat diakses dalam pernyataan itu, meskipun pernyataan itu ada di dalam fungsi.

2.2. let bisa di re-assigned tapi tidak bisa di re-declared

let mirip dengan var karena bisa di re-assigned, tapi tidak bisa di re-declared. Ini membantu masalah penimpaan value yang saya sebutkan diatas dengan var. Kita dapat re-assigned variabel let sebanyak yang kita butuhkan, tapi pernyataan aslinya akan selalu sama.

function letExample() {
  let x = 3;
  x = 6
  console.log(x); //output: 6
}

function letExample() {
  let x = 3;
  let x = 8;
  console.log(x); //error: variable has already been declare
}

2.3. const tidak bisa di re-assigned dan re-declared (agak)

const di javascript secara harfiah berarti konstan. Saat kamu ingin membuat sebuah variabel yang tidak akan pernah berubah didalam kode kamu, kamu bisa menggunakan const. Ini kan membantu readibility kamu dan developer lainnya.

const x = 20;
x = 20;
console.log(x); //output: error: assignment to constant variable

Note: Walaupun const tidak bisa di re-assigned dan re-declared, tapi nilainya bisa dimanipulasi. Contohnya, Jika kita me-assigned sebuah object kedalam variabel const, javascript mengizinkan nilai dan properti didalam sebuah object untuk dimanipulasi selama object aslinya tidak di re-assigned ke object baru. Contoh:

const particle = {x: 10, y: 20};
particle.x = 50;
console.log(particle); //output: {x: 50, y: 10}
particle = {x: 20, y: 60};
console.log(particle); //output: error: assignment to constant variable

3. Catatan

Hindari menggunakan var. Jika kamu memiliki sebuat variabel yang tidak akan pernah berubah, gunakan const. Jika tidak gunakan let! Saya harap ini membantu kamu mengerti "apa" dan "mengapa" variabel pada JavaScript!

Kalian bisa cek Spesifikasi Bahasa ECMACript 2020 (ES2020) dan TC39 proposal yang baru.

Di artikel ini, kita kan membahas tentang Optional Chaining di Javascript.

Apa itu Optional Chaining (?.) di Javascript?

Operator Optional Chaining memungkinkan kita untuk mengakses properti nested obyek, tanpa perlu mengecek apakah obyek parent-nya ada. Jadi, daripada mengembalikan sebuah error, ?. akan mengembalikan undefined jika obyek parentnya null atau undefined.

Operator ?. bekerja dengan cara yang sama seperti Operator . (chaining). Satu-satunya perbedaan yaitu alih-alih mengembalikan sebuah error jika referensinya nullish (null atau undefined), ia akan mengembalikan sebuah nilai undefined.

Syntax

object.value?.prop
object.value?.[expr]
object.value?.[index]
object.func?.(args)

Lihat contoh berikut

const userInfo = {
   firstName: 'Darsh',
   lastName: 'Shah',
   details: {
      bio: 'Auth0 Ambassador | Postman Student Expert | Blogger | Speaker',
      title: 'Software Developer'
   },
   sayHello() {
      return 'Hey there!👋';
   }
};

Sekarang bagaimana jika kita melakukan ini?

const userTitle = userInfo.details && userInfo.details.title;

Pertama kita mengecek apakah properti details ada di userInfo dan lalu kita assign title kedalam userTitle jika ia ada. Jika tidak, userTitle akan undefined.

Biasanya, kita menggunakan operator && untuk menghindari error ketika obyeknya null atau undefined.

Tapi itu membosankan bukan?

Dengan fitur Javascript yang baru, kita bisa menggunakan operator Optional Chaining (?.) untuk membuatnya terlihat lebih clear.

const userTitle = userInfo.details?.title;

Apakah itu nyata?

Ya, ini akan bekerja dengan cara yang sama seperti yang kita lakukan dengan operator &&.

Yang terjadi adalah, Operator ?. akan menghentikan evaluasi jika bagian sebelum ?. undefined atau null dan mengembalikan undefined daripada mengembalikan sebuah error.

disini contohnya

Note: Ini hanya akan bekerja di properti nested. Jika kita mencoba untuk menggunakannya di level pertama, ia akan mengembalikan sebuah error jika objeknya tidak ada. Operator Optional Chaining membutuhkan sebuah parent obyek untuk dilihat terlebuh dahulu.

Di contoh ini, user i.e., parent obyek tidak didefinisikan dan kita mencoba untuk menggunakan operator Optional Chaining. Jadi, ia akan mengembalikan sebuah error.

Manfaatkan operator Optional Chaining kapanpun ada kebutuhan. Semoga pekerjaan kamu menjadi sedikit lebih mudah.

Terimakasih telah membaca sampai akhir

Sumber

• https://dev.to/iamdarshshah/optional-chaining-in-javascript-28h3

• https://tc39.es/ecma262/2020/

• https://github.com/tc39/proposal-optional-chaining

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

• https://developer.mozilla.org/en-US/docs/Glossary/nullish

Sebelum kita mulai mengekplorasi lebih jauh, kita perlu memahami dua hal:

1. Dua tipe ini tidak meng-extend class dasar dari React.Component. Tidak ada tipe seperti Presentational atau Container. Ini lebih seperti konvensi atau pattern/pola. Dimana para developer biasanya menggunakan ketika membuat sebuah aplikasi dengan React.

2. Pasangan ini juga bisa disebut sebagai stateless dan statefull atau impure dan pure component, tapi ini tidak sama. Presentational component dapat menjadi statefull, dan Container component dapat menjadi stateless juga, dan mereka juga dapat menjadi functional component atau class component.

Pengenalan dan Gambaran

Seperti yang sudah disebutkan diatas, devisi untuk Presentational component dan Container component adalah development pattern, biasanya digunakan oleh developer untuk membedakan komponen berdasarkan tujuannya:

• Presentational component mengatur bagaimana sesuatu terlihat.

• Container component mengatur bagaimana sesuatu berkerja.

Fitur Utama dari Presentational Component

• Fungsi utamanya adalah untuk menampilkan data.

• Biasanya hanya berisi method render() atau hanya JSX.

• Memiliki style.

• Tidak memiliki state (Ketika memiliki, itu bisanya state UI bukan data).

• Tidak tahu bagaimana cara merubah data.

• Menerima data melalui props dari Container component.

• Biasanya ditulis sebagai stateless functional component (Meskipun ini bukan aturan)

Contoh

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={img_url} alt={title}/>
    <h3>{title}</h3>
  </div>
)
export default Book;

Contoh diatas hanya memiliki satu tugas yang harus dilakukan yaitu me-render props yang diterima yaitu title dan img_url kedalam DOM.

Contoh berikut juga merupakan contoh dari Presentational component karena apa yang sebenarnya dilakukan adalah menentukan cara menampilkan daftar komponen dan mengirim data melalui props ke child component.

const BookList = ({ books }) => (
  <div className="book-list">
    { books.map(book => <Book title={book.title} img_url={book.img_url} />) }
  </div>
)
export default BookList;

Presentational component mendapatkan data dari Container component, dan jika kita lihat relasinya, itu adalah relasi child-parent, dimana Presentational component sebagai child dan Container component hampir disetiap kasus merupaka parent dari Presentational component.

Fitur Utama dari Container Component

• Fungsi utamanya adalah mengatur prilaku data.

• Berisi lebih banyak element/komponen dengan fungsi render() (Presentational component, lifecycle methods atau hooks)

• Tidak memiliki style.

• Memiliki state dan mengaturnya.

• Memberikan data ke children component.

• Selalu ditulis sebagai statefull class component (walaupun saat ini cenderung ditulis menggunakan hooks, jadi paling sering ditulis sebagai functional statefull component)

Contoh (class component)

import BookList from './BookList'
class BookList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            books: []
        };
    }

    componentDidMount() {
        fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
        .then(response => response.json())
        .then(bookData => this.setState({ books: bookData.books }))
    }

   render() {
        return <BookList books={this.state.books} />
    }
}
export default BookListContainer;

Contoh (funtional component)

import BookList from './BookList';
import {useState, useEffect} from 'react';

const BookList = () => {
    const [books, setBooks] = useState([]);
    useEffect(() => {
        fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
        .then(response => response.json())
        .then(bookData => setBooks({bookData.books}) }, []);
    }

    render() {
        return <BookList books={books} />
    }
}

export default BookListContainer;

Kesimpulan

2 jenis komponen ini selalu berjalan bersamaan karena memiliki pola yang sama. Karena React terus berkembang, dimungkinkan untuk menulis aplikasi React HANYA menggunakan fungsional component dan hook, karena mereka dapat menyelesaikan sebagian besar masalah sekarang. Pemisahan masalah antara Presentational dan logika adalah cara yang baik untuk lebih memahami bagaimana aplikasi kita harus bekerja dan UI apa yang akan dimilikinya. Tetapi pola ini BUKANLAH suatu keharusan dan kamu dapat menggunakannya jika menurut kamu wajar untuk aplikasi kamu.

Sumber

• https://dev.to/olenadrugalya/presentational-and-container-components-in-react-4gfj

• https://reactjs.org/

Apa itu SSR?

SSR adalah singkatan dari server-side-rendering. Kemampuan aplikasi web untuk me-render halaman web di server alih-alih me-render-nya di browser. Ketika halaman web sampai di client, sudah sepenuhnya ter-render. Itu karena server-side telah me-render secara penuh sebelum halaman web dikirim oleh server ke client. Ketika request diterima oleh server-side, semuanya akan di compile, jika konten dari halaman web membutuhkan data dari database, server akan melakukanya, lalu me-render datanya ke halaman yang sudah dirender sepenuhnya dan mengrimnya ke client sebagai response. Sekarang, bagaimana jika client menavigasi ke route yang berbeda? Setiap client navigasi ke route yang berbeda, server akan melakukan pekerjaan itu lagi.

Apa itu CSR?

CSR adalah singkatan dari client-side-rendering. Overall, CSR adalah kebalikan dari SSR. Jika SSR me-render halaman web di server-side, CSR me-render halaman web di client-side. Ketika request diterima oleh server, server tidak akan me-render halaman web, sebaliknya, server akan mengirim satu halaman yang akan menjadi kerangka halaman ke client. Server mengirim halaman web dengan file javascript. Lalu, javascript akan mengubah halaman web menjadi halaman yang di-render sepenuhnya. Jadi dimana konten nya? Bagaimana jika halaman web membutuhkan data dari database? Kemudian, API masuk. Client akan membuat sebuah request ke API untuk mengambil data dan me-render-nya ke halaman web. Terakhir, bagaimana jika client navigasi ke route yang berbeda? Apakah server akan mengirim halaman web lagi? Server tidak akan mengirim halaman web lagi, sebagai gantinya, client akan me-render ulang halaman web sesuai route yang diminta client. Jadi halaman web yang digunakan, selalu halaman yang sama dengan request pertama.

Perbedaan

Perbedaan utama antara SSR dan CSR adalah dimana halaman web di-render. SSR me-render halaman web di server-side dan CSR me-render halaman web di client-side. Client-side mengatur route secara dinamis tanpa perlu me-refresh halaman setiap client request route yang beda.

Menggunakan SSR

• Jika SEO prioritas kita, biasanya ketika kita membuat sebuah situs blog dan kita ingin setiap orang yang mencari di google membuka website kita, maka SSR adalah pilihan kita.

• Jika website mu membutuhkan initial loading yang cepat.

• Jika konten dari website kita tidak membutuhkan banyak interaksi pengguna.

Menggunakan CSR

• Ketika SEO bukan prioritas.

• Jika situs kita memiliki banyak interaksi

• Jika kita membuat sebuah aplikasi website

Sumber

• https://dev.to/alain2020/ssr-vs-csr-2617

Sebagai seorang developer, apapun yang kita kerjakan harus dibagikan sebagai sebuah link yang orang lain bisa mengaksesnya. Terlepas apakah kita sebagai seorang frontend, backend, MERN stack atau seorang LAMP stack developer, saya asumsikan kamu tahu tentang pentingnya http://localhost.

Bagaimana cara membagikan pekerjaan kita di localhost agar bisa di akses oleh orang lain dengan simple?

Ada beberapa metode deploy project ke sebuah server sebagai link yang bisa diakses. Tapi problem dengan proses ini adalah kita harus:

• commit kode kita dan nge-push ke server eksternal sebelum orang lain bisa melihat progressnya.

• Proses ini merupakan proses yang memakan waktu dan data.

• Sebagai code newbie prosesnya bahkan lebih melelehkan karena kita harus mempelajari git, GitHub, heroku, AWS, dan lain-lain.

Jawaban dari semua masalah tersebut adalah membagikan pekerjaan kita di localhost tanpa perlu commit dan push code kita ke server eksternal. Ini sangat dimungkinkan dengan tunneling localhost kita ke internet menggunakan ngrok.

Ngrok mengekspos server local dibelakan NATs dan firewall ke internet publik melalui tunnel yang aman.

Ayo Kita Mulai

1. Download ngrok disini.

2. Unzip file yang sudah di tadi untuk meng-install-nya.

   Untuk Linux atau OSX kamu bisa meng-unzip ngrok dengan perintah unzip /path/to/ngrok.zip. Untuk pengguna Windows cukup double click ngok.zip.

3. Sambungkan dengan akun kita (opsional)

   Jalankan perintah berikut ./ngrok authtoken <your_auth_token>, untuk menmbahkan authtoken kita kedalam file ngrok.yml. Menghubungkan dengan akun akan mencantumkan tunnel yang terbuka ke dashboard. Memungkinkan kita untuk setup timeout tunnel lebih lama dan banyak lagi. Kunjungi dashboard untuk mendapatkan authtoken.

4. Jalankan ngrok

   Untuk menjalankan tunnel http di port 3000 jalankan perintah berikut ./ngrok http 3000.
   terminal akan terlihat seperti gambar berikut:

   

   Jadi link tersebut bisa dibagikan dan dapat diakses oleh orang lain. Link tersebut bekerja selama kita menjalankan programnya di kimputer kita.

Kenapa kita menggunakan ngrok?

Mereka memiliki dokumentasi yang baik, mudah untuk digunakan dan memiliki pengguna yang banyak yang dapat menolong kita dengan banyak proyek yang mungkin kita kerjakan.

Lihat dokumentasi untuk melihat lebih banyak ide bagaimana cara menggunakan ngrok.

Sumber

• https://ngrok.com/docs

• https://dev.to/kitarp/share-your-web-projects-easily-4i60

1. Cek lokasi file .gitconfig di komputer kalian dengan menjalankan command berikut:
   git config --list --show-origin

2. Buka file .gitconfig

3. Tambahkan script berikut:
   [remote "origin"]
fetch = +refs/pull/*/head:refs/remotes/origin/pr/*

4. Clone repo kalian lalu buka menggunakan editor kesukaan kalian.

5. Jalankan command berikut untuk checkout ke speifikasi pull request berdasarkan nomornya:
   git checkout pr/<nomor_pull_request>

6. Selesai

Nilai atau tipe data primitif adalah sesuatu yang bukan objek dan tidak memiliki metode yang terkait dengannya. Dengan kata lain, tipe data primitif adalah data sederhana tanpa metode dan properti tambahan.

Ada 7 tipe data primitif pada Javascript.

1. boolean

2. null

3. undefined

4. number

5. string

6. symbol

7. bigint

Kita dapat menggunakan operator typeof(value) untuk mengetahui tipe data dari nilai yang diberikan.

Contoh:

typeof 1;         // number
typeof "dev.to";  // string
typeof null;      // object
typeof undefined; // undefined
typeof true;      // boolean
typeof 1n;        // bigint
let sym = Symbol("key");
typeof key;       // symbol

1. boolean

   boolean adalah tipe data yang hanya memiliki dua nilai, yaitu, true dan false.

   Nilai boolean biasanya digunakan dalam operator perbandingan dan kondisi.

   Kita dapat menggunakan konstruktor Boolean() untuk membuat objek boolean. Namun, ini umumnya dianggap praktik yang buruk dan harus dihindari.

   Contoh:

    let x = new Boolean(true);
    typeof  x;  // boolean
   

   Jangan bingung antara tipe primitif boolean dengan objek Boolean.

2. null

   Nilai null mewakili ketiadaan objek.

   Contoh:

    let boo = null;
    typeof boo; //null
   

   Pada contoh diatas, variable boo ada tetapi tidak memiliki nilai yang terkait dengannya.

3. undefined

   undefined adalah nilai yang otomatis diberikan ke variabel yang telah dideklarasikan.

   Contoh:

    var x;
    typeof x;  // undefined
   

4. number

   Tipe data number berisi nilai numberik. Kamu dapat mendefinisikan nilai positif, desimal dan negatif. number juga memiliki nalai pisitif dan negatif yang tidak terbatas.

   Contoh:

    var num = 123;
    typeof num;   // number
    // using constructor
    var boo = new Number(123)
    typeof boo;   // object
    typeof boo.valueOf();  // number
   

5. string

   string adalah tipe data yang terdiri dari karakter atau urutan karakter dalam tanda kutip tunggal ('contoh') atau tanda kutip ganda ("contoh") atau dalam kutip belakang (`contoh` ).

   Kita bisa menggunakan fungsi konstruktor String() untuk membuat sebuah objek bertipe string.

   Contoh:

    let string1 = "Double quotes";
    let string2 = 'Single quotes';
    typeof string1;  // string
    let string4 = new String("string constuctor");
    typeof string4;  // object
    typeof string4.valueOf();  // stirng
   

6. symbol

   symbol adalah tipe data yang memberikan nilai unik dan anonim yang bisa digunakan sebagai properti objek.

   symbol diperkenalkan pada ES6.

   symbol tidak memiliki konstruktor jadi kita tidak bisa membuat objek symbol menggunakan kata kunci new.

   Contoh:

    let sym1  = new Symbol('a'); // TypeError
    let sym2 = Symbol('a');  // symbol is created
    let sym3 = Symbol('a');  // symbol is created
    sym2  === sym3;  // false
   

   Baris terakhir pada contoh diatas bernilai false karena antara sym2 dan sym3 adalah bernilai unik.

   Lihat halaman ini untuk mengetahui lebih lanjut tentang symbol.

7. bigint

   Tipe data primitif bigint diperkenalkan pada ES10.

   Sebelum ES10, nilai maksimal angka pada Javascript adalah 9007199254740991 atau Number.MAX_SAFE_INTEGER. Untuk mengatasi batasan ini, bigint diperkenalkan.

   Contoh:

    let x = 1;
    let y = 1n;
    typeof x;  // number
    typeof y;  // bigint
   

Terimakasih telah membaca artikel ini, harap berikan masukan yang membangun.

Sumber:

• https://developer.mozilla.org/en-US/docs/Glossary/Primitive

• https://dev.to/vineethsagar/introduction-to-primitive-types-in-javascript-575o

Definisi teknis tentang Git adalah

Git adalah sebuah Version System Control untuk menulusuri kode selama software di develop.

Apa itu VCS?

Sebuah Version System Control singkatnya adalah sebuah manajemen kode, dimana biasanya mengelola versi informasi yang berbeda (i.e source code).

VCS melacak modifikasi yang kita lakukan pada kode dan mencatat perubahan yang kita buat.

Tapi ada perbedaan tipe dari Version Control System.

1. Local Version Control System - ini memiliki sistem database untuk mengelola trek.

2. Centralized Versin Control System - Dimana semua pengguna terhubung ke semuah repo master.

3. Distributed Version Control System - Dimana semua pengguna dapat terhubung ke banyak repo di waktu yang sama.

Terminologi Peting Git

1. Repository

Simpelnya, repo/repositori adalah sebuah jenis wadah tempat kita menyimpan sesuatu. Secara teknis itu adalah sebuah struktur data yang digunakan oleh VCS dimana metadata dari file dan direktori kode yang disimpan.

2. Branch

Anggap ini sebagai cabang pohon sederhana yang menyipang dari akar pohon, demikian pula dengan branch git adalah versi repo yang membagi dari repositori utama. Di repo branch kita dapat mambuat berbagai perubahan seperti: daftar, hapus, ganti nama dan lain-lain.

3. Clone

Clonning di git berarti membuat sebuah salinan dari target repositori dan menduplikasi semua file dari target repo. clone adalah utilitas baris perintah git.

4. Index

Index di git dikenal juga sebagai staging area atau staging index. Sebuah file di direktori Git yang menyimpan informasi tentang apa yang akan masuk ke komit kita selanjutnya. File di staging index siap untuk ditambahkan ke repositori.

5. Push dan Pull request

Git push akan mengambil semua file dari direktori repo lokal dan akan di push ke repo utama misalnya di Github.

Git pull digunakan ketika kita ingin pull perubahan terakhir di repo utama.

Perintah untuk menggunakan Git di Command Line

1. git init - Untuk menginisiasi atau membuat sebuah repositori.

2. git add . - Untuk menambahkan file kode ke repo kita.

3. git status - Untuk melihat file di repositori.

4. git commit -m 'pesan komit' - Untuk menambahkan pesan komit ke file kode kita.

5. git push -u origin master - Untuk push kode kedalam repositori utama atau target repositori.

6. git pull 'nama_remote' 'nama_branch' - Ini akan pull konten dari repositori utama.

7. git fetch - Ini akan mengambil komit terbaru dari repo utama ke lokal repo kita.

8. git merge - ini akan menggabungkan branch dari remote ke repositori lokal.

9. git clone link_repositori - Untuk klone target repositori.

Jadi itu saja untuk Git, berharap artikel ini dapat membantu dalam belajar dan akan menjadi panduan yang mudah dibaca. Kasih tau jika artikel ini membantu.

Lanjutkan dan buat proyek pertama di Github dengan bantuan artikel ini. 🙂

Sumber:

• https://git-scm.com/docs

• https://dev.to/binalmehta/git-for-newbies-jm0

Asumsikan kita memiliki database dengan nama sandbox dan memiliki collection dengan nama malls.

Selanjutnya kita siapkan data dummy untuk dimasukan kedalam database dan collection yang baru kita buat tadi. Untuk data dummy kurang lebih seperti ini:

[
    {
        "name": "Pondok Indah Mall",
      "location": {
        "type": "Point",
          "coordinates": [
          106.7846567,
          -6.2653276
        ]
      }
    },
    {
      "name": "Central Park Mall",
      "location": {
          "type": "Point",
        "coordinates": [
          106.7909275,
          -6.176278
        ]
      }
    }
]

Selanjutnya yang kita lakukan adalah membuat index pada field location di collection malls dengan menjalankan command berikut pada mongosh:

# switch ke database sandbox
use sandbox

# create index
db.malls.createIndex({"location": "2dsphere"})

# response
'location_2dshpere'

Setelah berhasil membuat index, kita siapkan coordinate untuk melakukan query 106.7827962, -6.2615624 (coordinate Masjid Raya Pondok Indah). Lalu kita siapkan query yang akan kita jalakan seperti contoh dibawah ini:

{
  location: {
    $near: {
      $geometry: {
        type: "Point",
        coordinates: [106.7827962, -6.2615624]
      },
      $maxDistance: 1000
    }
  }
}

$maxDistance in meter

Jika berhasil kita akan mendapakan response seperti json di bawah ini:

[
    {
        "name": "Pondok Indah Mall",
      "location": {
        "type": "Point",
          "coordinates": [
          106.7846567,
          -6.2653276
        ]
      }
    }
]

References

• https://www.mongodb.com/docs/manual/reference/operator/query/near/

• https://www.mongodb.com/docs/manual/reference/glossary/#std-term-GeoJSON

• https://www.mongodb.com/docs/manual/core/2dsphere/

• https://www.mongodb.com/docs/v6.0/reference/operator/query/geometry/

Masalah

Pemrogram menggunakan banyak simbol, sering kali dikodekan dengan beberapa karakter. Untuk otak manusia, urutan seperti ->, <= atau:=adalah token logis tunggal, bahkan jika mengambil dua atau tiga karakter di layar. Mata kita menghabiskan jumlah energi yang tidak sedikit untuk memindai, mengurai, dan menggabungkan beberapa karakter menjadi satu karakter yang logis. Idealnya, semua bahasa pemrograman harus dirancang dengan simbol Unicode lengkap untuk operator, tetapi itu belum terjadi.

Solusi

Fira Code adalah font monospace gratis yang berisi ligatur untuk kombinasi multi-karakter pemrograman umum. Ini hanyalah fitur rendering font: kode yang mendasarinya tetap kompatibel dengan ASCII. Ini membantu untuk membaca dan memahami kode lebih cepat.

Download

Cara Install

macOS

Didalam folder TFF yang sudah di download:

1. Pilih semua file font

2. Klik kanan dan pilih Open (alternatif Open with Font Book)

3. Pilih Install Font

Atau

• Menggunakan brew dan cask

  Tidak di support secara resmi, mungkin menginstall versi lama.

    brew tap homebrew/cask-fonts
    brew install --cask font-fira-code
  

OS lain

Untuk menginstall Fira Code di OS lain bisa ikuti tautan berikut

Setup

VS Code

Pastikan sudah menginstall font-nya

1. Menggunakan visual Setting Editor

   Untuk membuka setting editor: dari menu Code, pilih Preferences > Setting atau gunakan shortcut keyboard ctrl + , (cmd + , di mac)

   Untuk mengaktifkan FiraCode di setting editor: dibawah "Commonly Used", klik "Text Editor" lalu klik "Font". Di bagian "Font Family" ganti semua conten dengan Fira Code. Lalu centang check box "Enables/Disables font ligatures" dibawah "Font Ligatures" untuk mengaktifkan special ligatures.

2. Edit setting.json secara manual

   Visual studio memungkinkan kita untuk mengedit file konfigurasi setting.json.

   • Tekan shift + ctrl + P ( shift + cmd + P di mac)

   • Ketikan "settings"

   • Klik "preferences: open settings(JSON)"

Lalu paste line berikut dan simpan.

    "editor.fontFamily": "'Fira Code'",
    "editor.fontLigatures": true,

Text Editor lain

Untuk menginstall Fira Code di text editor lain bisa ikuti tatutan berikut.

Sumber

• FiraCode

Namun ketika program yang kita develop terintergarsi dengan third party services seperti social login, cek ongkir, dll, terkdangan proses testing menjadi sesuatu yang tricky.

Terkadang me-mocking sebuah function yang terintegrasi dengan third party services diperlukan didalam sebuah testing guna mempercepat proses testing itu sendiri.

Berikut adalah sample code mocking menggunakan jest yang bisa teman-teman gunakan untuk menguji/testing sebuah function yang terintegrasi dengan third party services.

Saya asumsikan teman-teman sudah familiar dengan basic testing di jest.

// User.js
const db = require("./dbconfig"); // your db config

class User {
    static create = async (payload) => {
        try {
            return await db.create(payload);
        } catch (err) {
            throw err;
        }
    };

    static findAll = async () => {
        try {
            return await db.findAll();
        } catch (err) {
            throw err;
        }
    };

    static deleteAll = async () => {
        try {
            return await db.deleteAll();
        } catch (err) {
            throw err;
        }
    };
}

modul.exports = User;

// user.test.js
const User = require("./User");
const app = require("./app");
const request = require("supertest");

describe("Testing user", () => {
    beforeAll(async () => {
        await User.create({
            username: "udin",
            email: "udin@mail.com",
        });
    });

    beforeEach(() => {
        jest.restoreAllMocks();
    });

    afterAll(async () => {
        await User.deleteAll();
    });

    it("Should be return error when hit findAll", (done) => {
    jest.spyOn(User, "findAll").mockRejectedValue("Error"); // you can pass your value as arg
        // or => User.findAll = jest.fn().mockRejectedValue('Error')
        request(app)
            .get("/users")
            .then((res) => {
        // expect your response here
                expect(res.status).toBe(500);
                expect(res.body).toBe("Error");
                done();
            })
            .catch((err) => {
                done(err);
            });
    });
});

Sumber

• https://jestjs.io/docs/mock-function-api

Ketika kita membangun large-scale aplikasi menggunakan React, masalah yang sering kita temui adalah peforma aplikasi. Ketika aplikasi timbuh besar dan besar lagi, kinerjanya mungkin memburuk. Terutama initial loading time aplikasi akan lebih terpengaruh. Initial loading time harus cepat tanpa menampilkan blank screen ke pengguna. Karena mangambil banyak waktu untuk memuat akan menciptakan kesan yang buruk bagi pengguna.

Penyebab utama dari masalah ini adalah menambahkan terlalu banyak komponen kedalam satu bundle file, jadi loading dari bundle file tersebut mungkin memakan banyak waktu. Untuk menyelesaikan masalah ini React memiliki solusinya, yaitu code-splitting dan lazy loading. Yang memungkinkan pemisahan bundle file menjadi ukuran yang lebih kecil.

Tempat terbaik untuk memperkenalkan code-splitting adalah di route. Route-basecode-splitting menyelesaikan sebagian masalah ini. Tapi sebagian besar apikasi hanya memanfaatkan 50% dari keuntungan code-splitting.

Pertanyaanya, apakah kita menyusun komponen dengan benar saat menggunakan code-splitting? Kita akan lihat kenapa dan bagaimana menyelesaikanya menggunakan beberapa contoh kode. Untuk itu, kita akan menggunakan sebuah contoh aplikasi React dengan beberapa komponen UI.

Dari screenshoot dibawah, kita dapat lihat sebuah komponen dashboard, yang memiliki banyak tab. Setiap tab memiliki banyak komponen.

Dashboard komponen tersebut menggunakan route-basecode-splitting seperti kode dibawah ini.

const Dashboard = lazy(() => import('components/Dashboard'));
const Settings = lazy(() => import('components/Settings'));
const Configurations = lazy(() => import('components/Configurations'));

function App() {
  return (
    <Router>
      <Layout>
        <SideBar/>
        <Layout>
          <AppHeader/>
          <Content style={{padding: '20px'}}>
            <Suspense fallback={<div>Loading...</div>}>
              <Switch>
                <Route path="/dashboard">
                  <Dashboard/>
                </Route>
                <Route path="/settings">
                  <Settings/>
                </Route>
                <Route path="/configuration">
                  <Configurations/>
                </Route>
              </Switch>
            </Suspense>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

Dashboard komponen bersisi beberapa sub-komponen seperti Sales, Profit, Chart, Tiles dan Trend sepertu kode dibawah ini.

function Dashboard() {

  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Sales" key="1">
        <Sales/>
      </TabPane>
      <TabPane tab="Profit" key="2">
        <Profit/>
      </TabPane>
      <TabPane tab="Chart" key="3">
        <Chart/>
      </TabPane>
      <TabPane tab="Tiles" key="4">
        <Tiles/>
      </TabPane>
      <TabPane tab="Trends" key="5">
        <Trends/>
      </TabPane>
    </Tabs>
  );
}

Kita harus split kode kedalam route. Jadi ketika aplikasi di bundle, kita mendapatkan filebuild terpisah untuk setiap route, seperti dibawah ini.

Dari gambar diatas, ukuran file**405.1KB** adalah dashboard komponen dan file yang lainnya untuk Header, Sidebar, komponen lain dan css.

Ketika aplikasi di host di Netlify untuk menguji kinerjanya. Seolah-olah kita sudah menguji di lokal dan tidak ada perbedaan. Ketika kita test aplikasi yang di host menggunakan GTmetrix, dashboard screen butuh 2.9 detik untuk di load, Silahkan lihat gambar di bawah untuk frame by frame loading.

Komponen dashboard adalah halaman awal aplikasi, jadi ketika kita mengunjungi webistenya 405.1 KB akan di load bersama dengan header dan sidebar.

Awalnya user haya akan melihat tab Sales, tapi contoh dashboard komponen aplikasi memiliki banyak tab. Jadi browser mendownload komponen yang lain juga, itu menunda aplikasi ke user. Untuk mengurangi initial laod time, Kita membutuhkan beberapa perubahan di dashboard komponen seperti dibawah ini.

const Sales = lazy(() => import('components/Sales'));
const Profit = lazy(() => import('components/Profit'));
const Chart = lazy(() => import('components/Chart'));
const Tiles = lazy(() => import('components/Tiles'));
const Trends = lazy(() => import('components/Trends'));

const { TabPane } = Tabs;

function Dashboard() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Sales" key="1">
        <Suspense fallback={<div>Loading...</div>}>
          <Sales/>
        </Suspense>
      </TabPane>
      <TabPane tab="Profit" key="2">
        <Suspense fallback={<div>Loading...</div>}>
          <Profit/>
        </Suspense>
      </TabPane>
      <TabPane tab="Chart" key="3">
        <Suspense fallback={<div>Loading...</div>}>
          <Chart/>
        </Suspense>
      </TabPane>
      <TabPane tab="Tiles" key="4">
        <Suspense fallback={<div>Loading...</div>}>
          <Tiles/>
        </Suspense>
      </TabPane>
      <TabPane tab="Trends" key="5">
        <Suspense fallback={<div>Loading...</div>}>
          <Trends/>
        </Suspense>
      </TabPane>
    </Tabs>
  );
}

Disini kita telah mengimport setiap komponen dengan lazy loading dan membungkus komponen dengan suspend.

Disini kita telah menambahkan banyak suspend untuk pemahaman yang lebih baik, tapi kita bisa menggunakan satu sunpend untuk semua komponen.

Kita belum melakukan perubahan apapun pada code-splitting tingkat route. Ketika aplikasi di build, beberapa tambahan files akan ditambahkan karena kita telah me mgimplementasi lazy-loaded disetiap tab di dashboard komponen. Silahkan cek gambar dibawah untuk build file separation.

Sekarang kita test lagi aplikasi dengan GTmetrix dengan perubahan diatas. Lihat kinerja aplikasi pada gambar dibawah.

Seperti yang kita lihat, sekarang dashboard komponen di muat dalam 1 second, karena hanya kode tab Sales yang diload. Kita telah mengurangi hanpir 2 detik denga nmembuat beberapa perubahan. Mari kita lihat perbandingan dari route-base dan route, component-basecode-splitting pada gambar dibawah ini.

Route Based code-splitting

Route and component-based code-splitting

Seperti yang kita lihat, ini adalah peningkatan besar dalalm initial load aplikasi, Sekarang kami telah mengurangi waktu buka awal aplikasi React hingga 70% dengan beberapa penyesuaian dengan menggunakan code-splitting secara efektif di komponen dashboard.

Referensi

• Code Splitting

• First Contentful Paint

• https://dev.to/nilanth/how-to-reduce-react-app-loading-time-by-70-1kmm

Kesimpulan

Menyusun komponen dengan cara yang dioptimalkan dan menggunakan React API secara efektif akan meningkatkan kinerja aplikasi skala besar.

JSX singkatan dari javascript dan XML. Memungkinkan kita untuk menulis tag HTML didalam React element.

Kenapa JSX dibutuhkan?

Berikut adalah contoh code React dengan menggunakan JSX

import React from "react"; 

function App() {
    return (
        <div>
            <h1>Hello World!</h1>
        </div>

    ); 
}

export default App;

Jika kita tidak ingin menggunakan JSX. Mari kita lihat bagaimana kita dapat melakukannya?

import React from "react"; 

function App() {
    return (
        React.createElement('div', null, 
        React.createElement(
            'h1', null, `Hello World!`
        ))

    ); 
}

export default App;

Ini adalah code yang sama yang ditulis tanpa JSX. Jadi, JSX memungkinkan kita untuk menulis HTML elemen didalam javascript tanpa menggunakan method createElement() atau appendChild().

Kita tidak harus menggunakan JSX, tapi JSX membuat jadi lebih mudah dalam membuat aplikasi React. Setiap JSX elemen hanyalah syntactic sugar untuk memanggil React.createElement. Jadi, semua yang kita lakukan dengan JSX dapat juga dilakukan dengan plain javascript.

Rules for coding JSX

Ketika menulis kode JSX kita sebaiknya mengikuti hal-hal berikut:

• Menyisipkan ekspresi javascript. Ekspresi javascript yang valid bisa di sisipkan dalam kode JSX dengan menggunakan curly braces {}.

    import React from "react"; 
  
    function App() {
        return (
            <div>
                <h1>The sum of 6 and 9 is {6+9}</h1>
            </div>
        ); 
    }
  
    export default App;
  

• Semua top level elemen kode HTML didalam JSX harus di bungkus dalam SATU level element. Jadi ketika menulis banyak elemen, kita harus menaruhnya didalam single parent elemen.

    // WRONG WAY
    function App() { 
     return (
       <h1>Hey, React!</h1>
       <h1>I love JSX!</h1>
     ); 
    }
  

    // CORRECT WAY
    function App() { 
       return (
        <div>
          <h1>Hey, React!</h1>
          <h1>I love JSX!</h1>
        </div>
       ); 
    }
  

• Sebuah blok kode HTML untuk menulis potongan HTML dalam beberapa baris, letakan kode HTML didalam sebuah tanda kurung () dan simpan didalam sebuah variable. Variable ini bisa digunakan dimana saja sebagai pengganti HTML.

    const myelem = (
        <div>
            <h1>Hello React!</h1>
            <p>I love JSX!</p>
            <p>This is a block of code. </p>
        </div>
    ); 
  
    function App() {
        return myelem; 
    }
  

• Semua elemen harus ditutup. Semua HTML elemen harus ditutup dengan benar. JSX akan menempar sebuah error jika HTML tidak ditutup dengan benar.

    const myelem = (
        <div>
            <img src="img.png" alt="Yay" />
            <input type="text" />
            <br/>
        </div>
    ); 
  
    function App() {
        return myelem; 
    }
  
    // NOTICE THAT EVEN SELF CLOSING TAGS ARE PROPERLY CLOSED
  

React tidak perlu menggunakan JSX, tapi kebanyakan orang merasa terbantu sebagai bantuan visual saat bekerja dengan UI didalam kode javascript.

JSX juga memungkinkan React untuk menampilkan pesan error dan warning yang lebih berguna.

Sumber:

• https://reactjs.org/docs/introducing-jsx.html

• https://dev.to/rahxuls/what-is-jsx-in-react-4igb

Katakan, kita punya fields data seperti dibawah ini di database:

meetingId,
meetingDate,
noticeDate,
title,
agenda,
venue,
notice,
noticeDistribution,
chairedBy,
participants,
minutes,
minutesPreparedBy,
minutesApprovedBy,
minutesDistribuion,
status,
username,
userid

Tapi kita hanya butuh field minutes dan minutesApprovedBy , kita bisa malakukan cara seperti dibawah ini:

yourDB.find({}, {minutes:true, minutesApprovedBy:true})
.then(data=>res.send(data))
.catch(err=>res.send(err))

fields yang kita butuhkan atau mau kita ambil, disatukan dengan nilai true seperti yang kita lihat diatas. Ini akan mengembalikan fields tersebut dari database. Kita juga bisa melakukan findOne({}, {}) bila perlu.

Sumber:

• https://docs.mongodb.com/manual/tutorial/project-fields-from-query-results/

• https://dev.to/tradecoder/how-to-get-only-required-data-fields-from-mongodb-5b0p

Definisi teknis tentang Git adalah

Git adalah sebuah Version System Control untuk menulusuri kode selama software di develop.

Apa itu VCS?

Sebuah Version System Control singkatnya adalah sebuah manajemen kode, dimana biasanya mengelola versi informasi yang berbeda (i.e source code).

VCS melacak modifikasi yang kita lakukan pada kode dan mencatat perubahan yang kita buat.

Tapi ada perbedaan tipe dari Version Control System.

1. Local Version Control System - ini memiliki sistem database untuk mengelola trek.

2. Centralized Versin Control System - Dimana semua pengguna terhubung ke semuah repo master.

3. Distributed Version Control System - Dimana semua pengguna dapat terhubung ke banyak repo di waktu yang sama.

Terminologi Peting Git

1. Repository

Simpelnya, repo/repositori adalah sebuah jenis wadah tempat kita menyimpan sesuatu. Secara teknis itu adalah sebuah struktur data yang digunakan oleh VCS dimana metadata dari file dan direktori kode yang disimpan.

2. Branch

Anggap ini sebagai cabang pohon sederhana yang menyipang dari akar pohon, demikian pula dengan branch git adalah versi repo yang membagi dari repositori utama. Di repo branch kita dapat mambuat berbagai perubahan seperti: daftar, hapus, ganti nama dan lain-lain.

3. Clone

Clonning di git berarti membuat sebuah salinan dari target repositori dan menduplikasi semua file dari target repo. clone adalah utilitas baris perintah git.

4. Index

Index di git dikenal juga sebagai staging area atau staging index. Sebuah file di direktori Git yang menyimpan informasi tentang apa yang akan masuk ke komit kita selanjutnya. File di staging index siap untuk ditambahkan ke repositori.

5. Push dan Pull request

Git push akan mengambil semua file dari direktori repo lokal dan akan di push ke repo utama misalnya di Github.

Git pull digunakan ketika kita ingin pull perubahan terakhir di repo utama.

Perintah untuk menggunakan Git di Command Line

1. git init - Untuk menginisiasi atau membuat sebuah repositori.

2. git add . - Untuk menambahkan file kode ke repo kita.

3. git status - Untuk melihat file di repositori.

4. git commit -m 'pesan komit' - Untuk menambahkan pesan komit ke file kode kita.

5. git push -u origin master - Untuk push kode kedalam repositori utama atau target repositori.

6. git pull 'nama_remote' 'nama_branch' - Ini akan pull konten dari repositori utama.

7. git fetch - Ini akan mengambil komit terbaru dari repo utama ke lokal repo kita.

8. git merge - ini akan menggabungkan branch dari remote ke repositori lokal.

9. git clone link_repositori - Untuk klone target repositori.

Jadi itu saja untuk Git, berharap artikel ini dapat membantu dalam belajar dan akan menjadi panduan yang mudah dibaca. Kasih tau jika artikel ini membantu.

Lanjutkan dan buat proyek pertama di Github dengan bantuan artikel ini. 🙂

Sumber:

• https://git-scm.com/docs

• https://dev.to/binalmehta/git-for-newbies-jm0

1XX - Informasi

Menunjukan hanya satu informasi:

Contoh:

• 100 - Continue

• 102 - Processing

2XX - Sukses

Menunjukan request yang berhasil.

Contoh:

• 200 - OK

• 201 - Created

• 202 - Accepted

3XX - Pengalihan

Menunjukkan penggilan ulang.

Contoh:

• 301 - Moved permanently

• 308 - Permanent Redirect

4XX - Error Client

Menunjukan error pada sisi client. Sebuah contoh yang kita pernah temui adalah ketika kita memasukan URL yang salah.

Contoh:

• 400 - Bad Request

• 401 - Unautorized

• 403 - Forbidden

• 404 - Not Found

5XX - Error Server

Menunjukan sebuah error pada sisi server.

Contoh:

• 500 - Internal server Error

• 501 - Bad Gateway

• 502 - Service Unavailable

Sumber:

• https://httpstatuses.com/

• https://dev.to/fariasmateuss/http-status-codes-3olc