Apps - Deployment & Recap

Agenda

Apa saja yang akan dibahas?

• Intro
• Deployment - What Is?
• Deployment - Where?
• Deployment - How To? (Initialize)
• Deployment - How To? (Protect)
• Deployment - How To? (Deploy)
• Recap
• AMA
• Announcement
• Closing - Lecture

Intro

Ketika kita membuat aplikasi, harapan kita akhirnya pasti adalah: Aplikasi ingin dilihat / digunakan orang lain bukan?

Kondisi ketika aplikasi yang dikembangkan siap dipakai oleh orang lain = tahap Production

Ketika sudah masuk tahap Production, artinya aplikasi siap release atau istilahnya siap di-Deploy

Nah pertanyaannya adalah: Deploy itu apaan sih?

Deployment - What Is?

Deploy(ment) adalah suatu tahapan untuk membuat aplikasi kita menjadi Live, biasanya di-serve via internet, sehingga menjadi jaringan global yang bisa dibuka oleh siapa saja, di mana saja.

Kode aplikasinya AWALNYA dibuat di komputernya si developer (atau bahasa keren-nya adalah workstation), dan dijalankan di tempat lain yang bernama Production server (atau disebut juga dengan istilah Live Environment)

Nah sekarang pertanyaannya adalah: Production server bisa di mana saja?

Deployment - Where?

Kita bisa menaruh kode production kita di:

• Komputer kita sendiri, asalkan kita memiliki ip public yang statis dari ISP (Internet Service Provider), beserta dengan komputer yang siap nyala 24 jam. (istilah kerennya adalah on-premise)
• Menyewa komputer di komputasi awan, atau istilahnya adalah Virtual Private Server (VPS)
• Dengan menggunakan Web Hosting, seperti Niagahoster, ataupun Dewaweb, dll.
• Dengan menggunakan suatu Platform yang sudah didesain untuk menyediakan server dan manajemennya secara otomatis, sehingga kita hanya perlu membawa kode dan aplikasi bisa berjalan, (atau istilah kerennya adalah Platform-as-a-service (PaaS)), seperti Heroku, Netlify, dan Vercel

Pada pembelajaran ini, kita akan mendeploy aplikasi kita dengan PaaS bernama Netlify

Deployment - Where?

Netlify, yang bisa dibuka pada tautan ini, merupakan suatu platform yang dapat mendeploy aplikasi kita ke dalam jaringan global, HANYA dengan bermodalkan akses git ke source code aplikasi yang ingin dideploy saja !

Dan tentunya, teman-teman sudah pasti tau bukan kenapa kita memilih untuk menggunakan Netlify?

Ya, karena pada Netlify ini, pricing-nya sangat bersahabat sekali !

Bisa membuat banyak project (Unlimited Project) + bandwidth 100GB per month untuk aplikasi (shared untuk seluruh project)

Deployment - How To? (Initialize)

Yuk, sudah sudah kita ngobrolnya, mari kita mencoba untuk deploy yah !

Kita akan mulai dulu dari inisialisasi project yah

Untuk itu kita harus memiliki 2 hal: akun netlify dan akun github (sampai di titik ini harusnya sudah punya akun github kan?)

Langkah inisialisasi projectnya adalah sebagai berikut

1. Membuat Akun Netlify (dengan menggunakan akun Github)
2. Membuat project baru dan memilih repo Github
3. Memilih branch yang digunakan sebagai deployment (default: main atau master)
4. Dan 🪄 deployment selesai 🪄

Hah !? Gitu doank khaque?

Ya, hanya begitu saja, tapi sekarang kita akan mencoba untuk menaikkan tingkat kesulitannya yah, dengan melindungi beberapa kode yang ingin dicoba untuk dilindungi

Deployment - How To? (Protect)

Bagaimana bila kita memiliki tulisan (key) yang ingin kita lindungi?

Sebenarnya kita harus memegang satu prinsip ketika kita sedang membuat aplikasi sisi client (Client Side Rendering):

Seluruh kode yang ada di client, artinya kodenya dapat dilihat, sekalipun sudah diutak-atik !

Oke oke, mari kita akan coba untuk melindungi key sebisa kita yah, supaya lebih susah dicarinya:

1. Membuka dashboard Netlify
2. Membuka Settings - Build & Deploy - environment variables
3. Menambahkan key (environment variable) yang dibutuhkan di dalam aplikasi kita
4. (Untuk Create React App, selalu awali dengan prefix REACT_APP, sehingga menjadi (REACT_APP_NAMA_VAR)
5. Ganti pada kode yang dibuat untuk menggunakan process.env.REACT_APP_NAMA_VAR instead of key yang digunakan

Voila, aplikasi sudah menggunakan key yang disembunyikan !

Deployment - How To? (Deploy)

Sekarang bagaimana bila kita kurang suka dengan nama yang ingin digunakan?

Netlify (dan provider lainnya) umumnya juga menyediakan cara untuk mengganti nama dari site yang digunakan.

Pada netlify caranya adalah sebagai berikut:

1. Membuka halaman dashboard dan pilih project yang ingin diganti namanya
2. Membuka tab Site Overview
3. Memilih Site Settings
4. Memilih change site name

Voila, aplikasi sudah menggunakan nama site yang baru !

Recap

Sebelum kita menutup materi kita, mari kita coba lihat, apa saja yang sudah kita pelajari selama ini?

(dan mari kita highlight, apa saja yang lumayan penting untuk menjadi Developer React)

• Git
  • Init Project
  • Create Branch
  • Commit and Push to Git Provider (Github)
• Javascript
  • Callback, Promise, Async / Await
• HTML
  • DOM

Recap

• React
  • Initialize - CRA
  • JSX
  • Functional Component
  • Props and State
  • Hooks - useState, useEffect, useContext, useReducer
  • Fetching Data External
  • Routing (React Router)
  • State Management
    • Redux (Toolkit + RTK Query)
    • Zustand
• Authentication
  • Concept
  • Firebase Authentication

What's Next?

AMA

Announcement

Closing