Premium Edition

Web Development Microservice: Website Kelas Online

Learn how to build a real project from scratch

Member

2,291 enrolled

Tingkatan
Sertifikat
Konsultasi

Develop Your Skills

Microservice adalah salah satu arsitektur pada Website Development yang digunakan oleh banyak Developer dan perusahaan IT dalam mengembangkan suatu Website. Tujuannya adalah agar Website tersebut lebih stabil dan mudah diperbaiki pada setiap service-nya jika adanya suatu bug pada service tersebut.

Projek yang dibangun adalah website untuk belajar online (kelas digital) untuk siapa saja yang ingin upgrade skill dalam dunia IT atau juga self-improvement. Dimulai dari slicing design website dari Figma menggunakan React JavaScript Framework dan dibantu juga dengan Tailwind CSS. Setelah itu kita akan coba menggunakan API (per service) yang telah kita buat menggunakan Laravel dan Express JS.

Jika kamu tertarik untuk belajar web development lebih dalam silakan bergabung di kelas ini dan kami akan mengarahkan dengan secara terstruktur dan rapih. Silakan bergabung dan kami tunggu di kelas.

Demo Project

Key Points

Menerapkan Arsitektur Microservices Pada Aplikasi

Belajar Membuat API dengan Nodejs & Laravel

Belajar Men-Deploy Aplikasi ke VPS

Belajar Menggunakan JSON WEB TOKEN

Belajar Menggunakan Nextjs untuk Server Side Rendering (SSR)

Belajar Mengunakan TailwindCss

Belajar Menggunakan Library Reactjs

Belajar membuat reusable component react from scratch

Designed For

Cocok untuk yang ingin membangun website pencarian tempat berlibur

Diperuntukkan bagi yang ingin menjadi fullstack developer pada bahasa pemrograman javascript

Learn With Expert

Widada

Back-End Developer

Profile Mentor

Angga Risky

Full-Stack Developer

Profile Mentor

Yein Narayana

Full-Stack Developer

Profile Mentor

Course Prerequisite

Kami rekomendasikan untuk mempelajari kelas di bawah

Happy Learning

Materi kelas yang bermanfaat untuk karir kita

1

Persiapan

lock

Persiapan dan Perkenalan

4 mins

play_circle

Penjelasan Arsitektur

3 mins

lock

Set Up API Gateway part 1

3 mins

lock

Set Up API Gateway part 2

11 mins

2

Develop Service Media

lock

Penjelasan Service Media

3 mins

lock

Set Up Service Media

4 mins

lock

Set Up Sequelize

5 mins

lock

Membuat Migration dan Model

8 mins

lock

Membuat API POST - Upload Image

13 mins

lock

Membuat API GET - List Image

4 mins

lock

Membuat API Delete Image

5 mins

lock

Integrasi dengan API Gateway Part 1

10 mins

lock

Integrasi dengan API Gateway Part 2

2 mins

lock

Integrasi dengan API Gateway Part 3

3 mins

3

Develop Service User

play_circle

Penjelasan Service User & Implement JWT

5 mins

lock

Set Up Service User

3 mins

lock

Set Up Sequelize

3 mins

lock

Membuat Migration Table Users

9 mins

lock

Membuat Migration Table Refresh Tokens

5 mins

lock

Membuat Seeder di Table Users

6 mins

lock

Membuat Model User

5 mins

lock

Membuat Model Refresh Token

4 mins

lock

Membuat API Register

13 mins

lock

Membuat API Login

10 mins

lock

Membuat API Update Profile

13 mins

lock

Membuat API Get User

5 mins

lock

Membuat API Get List Users

6 mins

lock

Membuat API untuk Save Refresh Token

10 mins

lock

Membuat API Get Refresh Token

4 mins

lock

Membuat API Logout

6 mins

4

Implementasi JWT dan Integrasi API Gateway

lock

Perkenalan Singkat Dengan JWT

5 mins

lock

Belajar Menggunakan Library JWT

12 mins

lock

Integrasi API Register

5 mins

play_circle

Integrasi API Login dan Implementasi JWT

9 mins

lock

Membuat Middleware Verify Token

6 mins

lock

Membuat API Refresh Token

12 mins

lock

Integrasi API Update

6 mins

lock

API Get Profile

4 mins

lock

Integrasi API Logout

5 mins

5

Develop Service Course

lock

Penjelasan Service Course

4 mins

lock

Set Up Service Course

5 mins

lock

Migration Mentors

4 mins

lock

Migration Courses

6 mins

lock

Migration Chapters & Lessons

5 mins

lock

Migration My Courses

3 mins

lock

Migration Image Courses

2 mins

lock

Migration Reviews

4 mins

lock

Model Course

4 mins

lock

Model Chapter & Lesson

3 mins

lock

Model ImageCourse & Mentor

2 mins

lock

Model MyCourse & Review

3 mins

lock

[Mentor] - API Create

8 mins

lock

[Mentor] - API Update

4 mins

lock

[Mentor] - API Get List & Detail

4 mins

lock

[Mentor] - API Delete

3 mins

lock

[Course] - API Create

10 mins

lock

[Course] - API Update

6 mins

lock

[Course] - API Get List

3 mins

lock

[Course] - Add Filter List

4 mins

lock

[Course] - API Delete

3 mins

lock

[Chapter] - API Create

7 mins

lock

[Chapter] - API Update

5 mins

lock

[Chapter] - API Get

4 mins

lock

[Chapter] - Get Detail & Delete

5 mins

lock

[Lesson] - API Create

8 mins

lock

[Lesson] - API Update

6 mins

lock

[Lesson] - API Get List & Detail

6 mins

lock

[Lesson] - API Delete

3 mins

lock

[Image Course] - API Create

7 mins

lock

[Image Course] - API Delete

3 mins

lock

Membuat File Helpers

3 mins

lock

Membuat Function Helpers

8 mins

lock

[MyCourse] - API Create

13 mins

lock

[MyCourse] - API Get

5 mins

lock

[Review] - API Create

11 mins

lock

[Review] - API Update

6 mins

lock

[Review] - API Delete

2 mins

lock

Detail Course Part 1

5 mins

lock

Detail Course Part 2

4 mins

lock

Detail Course Part 3

12 mins

6

Integrasi Service Course dengan API Gateway

lock

API Mentor Part 1

9 mins

lock

API Mentor Part 2

7 mins

lock

API Course Part 1

8 mins

lock

API Course Part 2

9 mins

lock

API Course Part 3

4 mins

lock

API Chapter Part 1

9 mins

lock

API Chapter Part 2

5 mins

lock

API Lesson Part 1

8 mins

lock

API Lesson Part 2

5 mins

lock

API Image Course

9 mins

lock

API My Course

9 mins

lock

API Review

11 mins

7

Persiapan Payment Gateway

lock

Apa itu Payment Gateway?

5 mins

lock

Webhook

6 mins

lock

Ngrok

5 mins

lock

Midtrans

12 mins

lock

Latihan Snap Part 1

8 mins

lock

Latihan Snap Part 2

4 mins

8

Develop Service Order & Payment

lock

Penjelasan Flow

6 mins

lock

Set Up Service Order Payment

2 mins

lock

Migration Orders

6 mins

lock

Migration Payment Logs

4 mins

lock

Model Order & Payment Log

4 mins

lock

API Create Orders Part 1

9 mins

lock

API Create Orders Part 2

14 mins

lock

API Create Orders Part 3

6 mins

lock

API Get Orders

4 mins

lock

Signature Key

4 mins

lock

Webhook Handler Part 1

9 mins

lock

Webhook Handler Part 2

18 mins

lock

Webhook Handler Part 3

8 mins

lock

API Create Premium Access

6 mins

lock

Ubah Flow API MyCourse

12 mins

lock

Troubleshoot API MyCourse

5 mins

lock

Integrasi Webhook ke API Gateway

6 mins

lock

Integrasi API Orders ke API Gateway

6 mins

lock

Testing Webhook Part 1

8 mins

lock

Testing Webhook Part 2

4 mins

lock

Role & Permission

11 mins

9

Deploy Service

lock

Penjelasan Deployment

5 mins

lock

[Github] - API Gateway

5 mins

lock

[Github] - Service User

3 mins

lock

[Github] - Service Media

5 mins

lock

[Github] - Service Course

3 mins

lock

[Github] - Service Order Payment

2 mins

lock

Membuat Server

6 mins

lock

Install NVM & PM2

5 mins

lock

Install Nginx & MySQL

5 mins

lock

Install PHP & Composer

4 mins

lock

Melakukan Snapshot

2 mins

lock

Deploy API Gateway

10 mins

lock

Deploy Service User

15 mins

lock

Edit Variable ENV - Service Media

4 mins

lock

Deploy Service Media

10 mins

lock

Deploy Service Course

12 mins

lock

Deploy Service Order Payment

10 mins

lock

Integrasi Antar Service

6 mins

lock

Beli Domain

3 mins

lock

Set Up Domain

6 mins

lock

Final Test!

13 mins

lock

Penutup

1 mins

10

Persiapan frontend

lock

Sneak peek project

7 mins

lock

Bedah mockup

7 mins

lock

Instalasi tools

4 mins

lock

Vscode extension

4 mins

lock

Setup frontpage

6 mins

lock

Setup frontpage part 2

9 mins

lock

Setup frontpage part 3

6 mins

lock

Setup memberpage

7 mins

lock

Setup memberpage part 2

10 mins

11

[frontpage] Nextjs

play_circle

CSR? SSR? SSG?

9 mins

lock

Kenalan Singkat

7 mins

lock

Kenalan Singkat part 2

5 mins

lock

Dynamic Routing

5 mins

lock

Dynamic Routing part 2

5 mins

12

[frontpage] Setup Axios

lock

Axios instance

8 mins

lock

Error handler

10 mins

13

[Frontpage] Homepage

lock

Header

9 mins

lock

Header part 2

10 mins

lock

Header part 3

13 mins

lock

Hero

8 mins

lock

Hero part 2

8 mins

lock

Clients

6 mins

lock

Courses

10 mins

lock

Courses part 2

8 mins

lock

Courses part 3

9 mins

lock

Courses part 4

8 mins

lock

Categories

9 mins

lock

Categories part 2

8 mins

lock

Categories part 3

8 mins

lock

Footer

12 mins

lock

Hero email registration

4 mins

14

[Frontpage] Details Course

lock

Details page

10 mins

lock

Video background

8 mins

lock

Courses title

5 mins

lock

Feature Item

11 mins

lock

Completing Feature item

7 mins

lock

sticky price

9 mins

lock

sticky price part 2

11 mins

lock

sticky price part 3

9 mins

lock

Reusable comps Modal

11 mins

lock

Reusable comps Modal part 2

8 mins

lock

Implement Modal comps

9 mins

lock

Complete Image Preview

11 mins

lock

Video Preview

8 mins

lock

Video Preview part 2

7 mins

lock

Video Preview part 3

8 mins

lock

Video Preview part 4

8 mins

lock

Video Preview part 5

5 mins

lock

Instructor

4 mins

lock

Happy students

8 mins

lock

Reusable comps Star

7 mins

lock

Reusable comps Star part 2

8 mins

lock

Troubleshoot comps Star

5 mins

15

[Frontpage] Library page

lock

Search course

8 mins

lock

Search course part 2

9 mins

lock

Search course part 3

10 mins

lock

Search course part 4

8 mins

lock

Complete Library Page

2 mins

16

[memberpage] Login Page

lock

Setup memberpage

12 mins

lock

Guest Route

13 mins

lock

Member Route

6 mins

lock

Login Routing

6 mins

lock

Slicing Login

9 mins

lock

Slicing Login part 2

9 mins

lock

Slicing Login part 3

6 mins

lock

Integrasi API Login

8 mins

lock

Integrasi API Login part 2

8 mins

lock

Integrasi API Login part 3

8 mins

lock

Integrasi API Login part 4

8 mins

lock

Integrasi API Login part 5

7 mins

lock

Redux Store

7 mins

lock

Redux Store part 2

6 mins

lock

Custom hooks

8 mins

17

[memberpage] Register Page

lock

Setup Register form

8 mins

lock

Slicing Register form

4 mins

lock

Comps Form Select

8 mins

lock

Comps Form Select part 2

8 mins

lock

Comps Form Select part 3

8 mins

lock

Slicing Register Form part 2

6 mins

lock

Slicing Register Form part 3

4 mins

lock

Break + helpers error message

3 mins

lock

Comps Form Input

11 mins

18

[memberpage] My Class

lock

Prepare application state page

14 mins

lock

My Class

4 mins

lock

Sidebar global

7 mins

lock

Sidebar global part 2

8 mins

lock

My Class part 2

11 mins

lock

My Class part 3

10 mins

lock

My Class part 4

9 mins

lock

Rehydrate token when init apps

4 mins

lock

Refresh Token

11 mins

lock

My Class part 5

4 mins

lock

Join Class

10 mins

lock

Watch Class

11 mins

lock

Watch Class Part 2

10 mins

lock

Watch Class Part 3

13 mins

19

[memberpage] Settings Page

lock

Settings page

10 mins

lock

Settings page Part 2

10 mins

lock

Settings page Part 3

10 mins

lock

Settings page Part 4

10 mins

20

[memberpage] Transactions

lock

Slicing Transactions

9 mins

lock

Transactions part 2

9 mins

21

[frontend] deployment

lock

[memberpage] Netlify

9 mins

lock

[frontpage] Vercel

10 mins

22

[frontend] Orders & Payment

lock

Join dan Order Courses

7 mins

lock

Join dan Order Courses part 2

4 mins

lock

Orders Transaction

8 mins

lock

Orders Transaction part 2

9 mins

lock

Orders Transaction part 3

9 mins

lock

Orders Transaction part 4

10 mins

23

[frontend] Responsive!

lock

[frontpage] Homepage

10 mins

lock

[frontpage] Homepage part 2

10 mins

lock

[frontpage] Homepage part 3

14 mins

lock

[frontpage] Library

3 mins

lock

[frontpage] Details Course

12 mins

lock

[memberpage] Login

10 mins

lock

[memberpage] Login part 2

7 mins

lock

[memberpage] Register

3 mins

lock

[memberpage] My Course

13 mins

lock

[memberpage] Watch Course

5 mins

lock

[memberpage] Transaction

7 mins

lock

[memberpage] Settings

4 mins

lock

[memberpage] Errors page & Thankyou

4 mins

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

Visual Studio Code

Software Gratis

Download Now

Laravel

Software Gratis

Download Now

React JS

Software Gratis

Download Now

Node JS

Software Gratis

Download Now

Postman API

Software Gratis

Download Now

GitHub

Software Gratis

Download Now

Figma

Software Gratis

Download Now

Express JS

Software Gratis

Download Now

Tailwind CSS

Software Gratis

Download Now

2,291 Happy Members

Review setelah bergabung di kelas Web Development Microservice: Website Kelas Online

ROBBY HERNOWO

Lifetime Learner

Terimakasih Ilmunya Mentor Widada & Mentor Yein, Saya tunggu Kelas Berikutnya dari kedua Mentor ini di tahun 2021 :Cheers:

achmad maskuri

Back-End Developer

mantap penjelasaannya.

Ajiwahyugi Mobile

Full-Stack Developer

Terbaik

Hasbi Musaddad

Full-Stack Developer

Mantap

Yoga Yulanda

Full-Stack Developer

Penjelasannya Detail dan Mudah di Mengerti

Muhammad Kusnadi

Full-Stack Developer

Materi yang sangat bermanfaat, terima kasih atas ilmunya untuk BWA Team. Sangat berguna bagi saya :)

dimas pradipto

Full-Stack Developer

Video mudah di pahami, sangat recomended

Andikha Dian Nugra

Full-Stack Developer

Keren mas widada penjelasannya

Rizqi Khoirurrohma

Full-Stack Developer

keren..

Raka Maheka Auramu

Full-Stack Developer

Mantap Alhamdulillah saya sudah bisa mengerjakan materi web development microservice dari pembuatan backend dan servicenya hingga ke tahap frontend menggunakan reactjs

Arif Muhamad Irnaw

Full-Stack Developer

Penjelasannya rapih terstruktur mudah diikuti

Anggih Septiawan

Full-Stack Developer

Materi lengkap dan detail

Muhamad Husin

Full-Stack Developer

mantap pak haji

Azola Zubizarreta

Full-Stack Developer

Pesanan sesuai aplikasi, pembawaan materi handal dan terpercaya

Ahmad Zaky

Full-Stack Developer

Mantaps

Andiko Mahendra

Full-Stack Developer

penjelasanya keren dan mudah dipahami

Nurdiansyah

Full-Stack Developer

Mantap

Emha Ahdan Fahmi E

Full-Stack Developer

keren bangeet materinyaaa

Rival Dwi Rexy

Full-Stack Developer

artistektur nya mantap

Tegar Satya Negara

Full-Stack Developer

Mantab

Sony Mellifriady

Full-Stack Developer

terima kasih mantap.

Denny Octavian

Back-End Developer

Mentor yang fast respone dan enak diajak diskusi. pengalaman kedua mentor ini sangat baik dan bisa banyak kita ambil ilmunya.

Farihul Rouf

Full-Stack Developer

jelas singkat padat keren

Andreas Ardi Nur P

Back-End Developer

Materi sangat bagus, manteb banget pokoknya, ditunggu kelas selanjutnya dari mas widada & mas yein. Sukses terus dan terus berbagi ilmu !

Mochammad Husni

Full-Stack Developer

mantapss

RadesPratama

Front-End Developer

Materi dari pak widada dan kak yein udah bagus banget jadi cepet ngerti sama codenya. Dan saran jelasin dong cara deploy semua app nya dari service hingga App Next, karena saya baru pertama kali memulai deploy jadi agak bingung setting nya. Terima Kasih

Fathurrahman

Full-Stack Developer

alhamdulillah saya cukup paham dengan materinya, semoga kedepannya bisa membuat kelas yg banyak dan bermanfaat buat semua orang, aamiin

lukman harun

Back-End Developer

Wow mantap video daging banget 😍😍😍

Ariadi Ahmad

Back-End Developer

Giod

Luki Dwianto

Lifetime Learner

Sejauh ini course ini sangat bagus semua road map coursenya bagus, namun perlu di tambahkan detail versi dari requiretment tool agar kami para student bisa ngikutin course dengan lancar kak

Ahmad Nasirin

Full-Stack Developer

kekurangan di bagian frontend, playlist acakadul. pada awal2 sesi.

Kelvin Ding

Product Designer

Backend bagus, front end ga complete, kurang login admin role

Rino Satya Putra

Full-Stack JavaScript Develope...

Good

ADI SYAHADI

Front-End Developer

sampe saat ini saya masih bingung ka bagaimana cara deploy reatc ke Cpanel. nanggung banget ka karna realnya ka di dunia kerja kita akan menggunakan hosting,

Fajar Cahyadi putr

Full-Stack Developer

Gila

Featured Projects

0 Hasil karya terbaik di kelas Web Development Microservice: Website Kelas Online

Belum ada hasil karya.

Are You The Next?

Lihat hasil karya member lainnya

View All Portfolio
#BeyondPremium

Start to Invest 100%

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

Selamanya

Rp 99,999

Miliki kelas Premium secara permanen
dan bangun sebuah projek nyata

Akses kelas selamanya

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Beli Kelas Lihat Benefit Lainnya

Berlangganan

Rp 0

Mengikuti kelas dengan waktu yang
terbatas dan biaya lebih hemat

Akses kelas terbatas

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Subscribe Kelas Lihat Benefit Lainnya

Pertanyaan Umum

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

WhatsApp Admin

Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels yang memberartikan bahwa cocok untuk seluruh tingkatan. Kami juga menyarankan calon member untuk mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.

Kami telah menyediakan kelas yang terstruktur dan well-designed oleh mentor yang berpengalaman sehingga akan sangat mudah untuk dipahami oleh siapa saja.

Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan untuk mendapatkannya, para member diwajibkan untuk menyelesaikan seluruh materi kelas dan juga Quiz yang telah disediakan oleh mentor.

Salah satu benefit unggulan kami adalah group konsultasi yang diberikan sebagai bonus untuk member yang telah mengikuti kelas Premium di platform BuildWith Angga. Silahkan menghubungi Admin untk mendapatkan akses pada group tersebut.

Kami mengizinkan member yang telah mengikuti kelas Premium untuk menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat utamanya adalah dengan memodifikasi sedikitnya yaitu 30% dari original project buatan mentor kelas tersebut.

Kami melarang member menjual atau membagikan hak akses kelas Premium kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari kita support creators Indonesia dengan cara membeli kelas secara resmi dan satu akun hanya untuk satu pengguna saja.

Kami tidak memperbolehkan member menjual kembali materi kelas di BuildWith Angga. Kami siap melanjutkan kepada proses hukum apabila Anda terbukti benar memperjualbelikan kelas kami secara ilegal.

Rp 99,999

Rp 390,000

Beli Kelas