You need to enable JavaScript to run this app.
Membangun Aplikasi Full-Stack Serverless dengan AWS dan React
65% Off
JagoReact.com
Home
Cover
Copyright
Daftar Isi
Tentang Penulis
Cara Mendapatkan Full Akses Materi
Download Source Code
Pendahuluan
Mengenal Serverless
Mengenal AWS
Mengenal AWS Lambda
Mengenal Amazon DynamoDB
Studi Kasus Aplikasi
Mendesain Data Model DynamoDB
Mendesain HTTP API menggunakan OpenAPI Specification (OAS 3.0)
Membuat Cognito User Pool
Membuat Amazon S3 Bucket
Membuat API Gateway dan Lambda Function dengan Serverless Framework CLI
Menginisiasi Git Repository Untuk HTTP API
Menambahkan Library Yang Dibutuhkan Untuk HTTP API
Implementasi HTTP API untuk Employer
Implementasi HTTP API untuk Admin
Implementasi HTTP API untuk Visitor
Deploy HTTP API
HTTP API Testing
Mendesain Halaman Aplikasi
Menginisiasi Proyek React dengan CRA (Create React App)
Membuat GIT Repository Untuk Proyek React
Menambahkan Library Yang Dibutuhkan Untuk Proyek React
Merencanakan Struktur Direktori dan File untuk Proyek CRA
Implementasi Client-Side Routing dengan React Router DOM
Implementasi Halaman Sign Up
Implementasi Halaman Login
Implementasi Halaman Profil Perusahaan
Implementasi Halaman Buat Loker Baru
Implementasi Halaman Edit Loker
Implementasi Halaman Daftar Loker Employer
Implementasi Halaman Moderasi Loker untuk Admin
Implementasi Halaman Home dan Halaman Loker Berdasarkan Lokasi
Implementasi Halaman Loker Detail
Implementasi Halaman 404 (Not Found)
Deploy Proyek CRA ke Nelitfy
Referensi
Home
/
Daftar Isi
Home
Cover
Copyright
Daftar Isi
Tentang Penulis
Cara Mendapatkan Full Akses Materi
Belum Punya Akun Member JagoReact
Sudah Punya Akun Member JagoReact
Mengakses E-Book dari halaman Download/Akses
Download Source Code
Pendahuluan
Apa Saja Yang Akan Dibahas Dalam E-Book Ini?
Untuk Siapa E-Book Ini?
Apa Saja Yang Harus Disiapkan?
Dimana Saya Bisa Mendapatkan Bantuan Jika Mengalami Kendala?
Mengenal Serverless
Komputasi
Basis Data
Penyimpanan Objek
API Gateway
Keuntungan Serverless
Kelemahan Serverless
Mengenal AWS
Membuat Akun AWS
AWS Management Console
AWS Regions dan Availability Zones
AWS IAM (Identity and Access Management)
Mengenal AWS Lambda
AWS Lambda Runtimes
Keuntungan Menggunakan AWS Lambda
Limitasi AWS Lambda
Harga AWS Lambda
Membuat Handler AWS Lambda dengan Node.js
Mengenal Amazon DynamoDB
Keuntungan DynamoDB
Kelemahan DynamoDB
Konsep Dasar DynamoDB
Harga DynamoDB
DynamoDB CRUD API
Data Modeling di DynamoDB
Mengelola Table DynamoDB
Studi Kasus Aplikasi
Fitur Yang Akan Dikembangkan
Arsitektur Aplikasi
Mendesain Data Model DynamoDB
Identifikasi Pola Akses (Access Pattern)
Desain ERD (Entity Relationship Diagram)
Desain DynamoDB Table
Desain Secondary Indexes
Visualisasi Desain Table
Implementasi Desain Table DynamoDB
Mendesain HTTP API menggunakan OpenAPI Specification (OAS 3.0)
Mendefinisikan Metadata
Mendefinisikan Path dan Operation
Path untuk Visitor
Path untuk Employer
Path untuk Admin
Membuat Dokumentasi API dengan RedDoc
Membuat Cognito User Pool
Nama User Pool
Mengatur Atribut User Pool
Konfigurasi Aturan Password dan Sign Up
Multi Factor Authentication dan Verifikasi Akun
Kostumisasi Email atau Kostumisasi Message
Tag User Pool
Remember Devices
Menambahkan App Client
Trigger Lambda Function
Review Konfigurasi dan Buat User Pool
Menambahkan Nama Domain
Menambahkan User Untuk Test
Role Base Access Control dengan User Group
Generate Access Token untuk Testing
Membuat Amazon S3 Bucket
Membuat Bucket di S3 Management Console
Mengatur CORS untuk S3 Bucket
Membuat API Gateway dan Lambda Function dengan Serverless Framework CLI
Install Serverless Framework CLI dengan npm
Konfigurasi AWS Credentials untuk Serverless Framework CLI
Membuat Service Baru Serverless Framework
Memanggil Fungsi Secara Langsung
Bagaimana Serverless Framework Mendeploy Service ke AWS
Memahami Stage di Serverless Framework
Menambahkan IAM Role Untuk Lambda Function
Menambahkan Environment Variable
Menambahkan JWT Authorizer dan Mengaktifkan CORS untuk HTTP API
Menginisiasi Git Repository Untuk HTTP API
Membuat Repository di GitLab
Menginisiasi Local Repository
Menambahkan Library Yang Dibutuhkan Untuk HTTP API
Install AWS SDK untuk Node.js di Dev Dependencies
Membuat module untuk akses DynamoDB
Membuat module untuk akses S3
Membuat module untuk format respon API Gateway V2
Install UUID (Universal Unique Identifier) Generator
Implementasi HTTP API untuk Employer
Membuat Fungsi Untuk Operasi PUT /profil
Membuat Fungsi Untuk Operasi GET /upload-logo-url
Membuat Fungsi Untuk Operasi POST /loker
Membuat Fungsi Untuk Operasi GET /loker/{LokerId}
Membuat Fungsi Untuk Operasi PUT /loker/{LokerId}
Membuat Fungsi Untuk Operasi DELETE /loker/{LokerId}
Membuat Fungsi Untuk Operasi POST /submit-loker/{LokerId}
Membuat Fungsi Untuk Operasi GET /employer-dashboard
Implementasi HTTP API untuk Admin
Membuat Fungsi Untuk Operasi GET /admin-dashboard
Membuat Fungsi Untuk Operasi POST /admin-loker/{Action}
Implementasi HTTP API untuk Visitor
Membuat Fungsi Untuk Operasi GET /published-loker
Membuat Fungsi Untuk Operasi GET /published-loker/{Lokasi}
Membuat Fungsi Untuk Operasi GET /published-loker-detail/{Username}/{LokerId}
Deploy HTTP API
Deploy Fungsi ke AWS
Test Fungsi di AWS
Optimasi Ukuran Fungsi AWS Lambda dengan Serverless Plugin Optimize
File Lengkap serverless.yml
HTTP API Testing
Buat Akses Token (JWT)
Gunakan Insomnia Core (HTTP Client)
Import Spesifikasi OAS 3.0 ke Insomnia Core
Setup Environments untuk Testing
Testing HTTP API untuk Visitor
Testing HTTP API untuk Employer
Testing HTTP API untuk Admin
Mendesain Halaman Aplikasi
Halaman Sign Up
Halaman Login
Halaman Profil Perusahaan
Halaman Buat Loker Baru
Halaman Edit Loker
Halaman Daftar Loker Employer
Halaman Moderasi Loker Admin
Halaman Home
Halaman Daftar Loker Berdasarkan Lokasi
Halaman Loker Detail
Halaman 404 (Not Found)
Menginisiasi Proyek React dengan CRA (Create React App)
Membuat proyek CRA baru menggunakan npx
Built-in Command Create React App
Membuat GIT Repository Untuk Proyek React
Membuat Repository di GitLab
Menghubungkan Lokal dengan Remote Git Repository
Menambahkan Library Yang Dibutuhkan Untuk Proyek React
Membuat Repository di GitLab
Material-UI
AWS Amplify Authentication
Axios
React Dropzone
Validator
React Draft Wysiwyg
React Helmet
date-fns
Merencanakan Struktur Direktori dan File untuk Proyek CRA
Direktori Untuk Konfigurasi (src/config)
Direktori Services (src/services)
Direktori Services (src/services)
Direktori Utilities (src/utils)
Direktori Data (src/data)
Direktori Komponen Halaman Pages (src/pages)
Direktori Komponen (src/components)
Implementasi Client-Side Routing dengan React Router DOM
Auth Context Provider (src/components/AuthProvider.js)
Komponen Induk atau Root (src/App.js)
Routing Halaman Public
Routing Halaman Private (Employer)
Routing Halaman Private (Admin)
Implementasi Halaman Sign Up
Membuat Komponen Header (src/components/Header.js)
Membuat Komponen Halaman Sign Up (src/pages/signup)
Implementasi Halaman Login
Membuat Styles Hook (src/pages/login/styles.js)
Membuat Komponen Halaman Login (src/pages/login/index.js)
Tambah Routing di Komponen App (src/App.js)
Implementasi Halaman Profil Perusahaan
Membuat EmployerData Context (src/components/EmployerDataProvider.js)
Mengedit Komponen EmployerDashboard (src/pages/employer/index.js)
Membuat Styles Hooks (src/pages/employer/profil/styles)
Membuat komponen halaman Profil Perusahaan (src/pages/employer/profil)
Implementasi Halaman Buat Loker Baru
Membuat Styles Hook (src/pages/employer/loker/styles/form.js)
Membuat Komponen Halaman Buat Loker Baru (src/pages/employer/loker/new.js)
Menambahkan Route di EmployerDashboard (src/pages/employer/index.js)
Implementasi Halaman Edit Loker
Membuat Komponen Halaman Edit Loker (src/pages/employer/loker/edit.js)
Menambahkan Route di EmployerDashboard (src/pages/employer/index.js)
Implementasi Halaman Daftar Loker Employer
Membuat Styles Hook (src/pages/employer/loker/styles/index.js)
Membuat Komponen Halaman Daftar Loker Employer (src/pages/employer/loker/index.js)
Menambahkan Route di EmployerDashboard (src/pages/employer/index.js)
Implementasi Halaman Moderasi Loker untuk Admin
Membuat AdminData Context (src/components/AdminDataProvider.js)
Mengedit Komponen AdminDashboard (src/pages/admin/index.js)
Membuat Styles Hook (src/pages/admin/moderasi/styles.js)
Membuat Komponen Utama Halaman Moderasi Loker Admin (src/pages/admin/moderasi/index.js)
Menambahkan Route di AdminDashboard (src/pages/admin/index.js)
Implementasi Halaman Home dan Halaman Loker Berdasarkan Lokasi
Membuat Komponen LokerSkeleton (src/components/LokerSkeleton.js)
Membuat Styles Hook (src/pages/home/styles.js)
Membuat Komponen Utama Halaman Home dan Loker Berdasarkan Lokasi (src/pages/home/index.js)
Menambahkan Routing di komponen App (src/App.js)
Implementasi Halaman Loker Detail
Membuat Styles Hook (src/pages/detail/styles.js)
Membuat Styles Hook (src/pages/detail/styles.js)
Menambahkan Routing di komponen App (src/App.js)
Implementasi Halaman 404 (Not Found)
Membuat Komponen NotFound (src/pages/404/index.js
Menambahkan Routing di komponen App (src/App.js)
Komponen App (`src/App.js`) Lengkap
Deploy Proyek CRA ke Nelitfy
Menghubungkan GitLab Repo Proyek CRA ke Netlify
Menambahkan Custom Domain
Mengaktifkan Netlify Prerendering
Setup Netlify Redirect untuk Client-Side Routing
Referensi
Materi Sebelumnya
Materi Selanjutnya
Copyright ©
JagoReact.com
2026.