Full Stack Web Application with Go and React

รายละเอียดหลักสูตร

Section 1: การเตรียมเครื่องมือและความพร้อม

• ติดตั้ง Visual Studio Code (Editor) และส่วนเสริม (Extension)
• ติดตั้ง Go
• ติดตั้ง NodeJS
• ติดตั้งฐานข้อมูล PostgreSQL
• ติดตั้ง Git

Section 2: พื้นฐานภาษา Go

• Hello World!
• Go Package
• Variables
• Operators
• Control Flow
• Function
• Loop
• Pointers
• Array and Slice
• Map
• Struct
• Generics
• Channel
• Mutex

Section 3: การวางโครงสร้างโปรเจ็กต์แบบ Clean Architecture

• Clean Architecture คืออะไร ?
• การวาง Project Structure
• การแยก Layers
• Package ที่ใช้
• Entities

Section 4: การสร้าง REST API ในภาษา Go

• Starting the back end API
• Adding handlers and routes to our API
• Installing a routing package
• Adding a route to our handlers
• Returning JSON from our API
• Returning a list of stores as JSON
• Connecting the front end to the back end API
• Enabling CORS middleware
• Enabling React's proxy to the back end API

Section 5: การเชื่อมต่อฐานข้อมูล PostgreSQL

• Getting started connecting our API to Postgres
• Installing a database driver and connecting to Postgres
• Setting up a database repository I
• Setting up a database repository II
• Improving the allstores handler to use our database

Section 6: การทำงานกับ JSON

• Setting up utils.go and a writeJSON helper function
• Adding a readJSON helper function
• Adding an errorJSON helper function
• Using our errorJSON helper function

Section 7: การทำ Authentication ด้วย JWT

• Installing a JWT package
• Generating tokens
• Setting default values for JWT tokens
• Creating a handler to generate a JWT
• Trying out our handler
• Generate refresh token cookie
• Reading a JSON payload in the authenticate handler
• Looking up a user by email
• Validating a password
• Updating the Login component on the front end
• Refresh tokens
• Protecting routes using JWT tokens
• Authentication middleware
• Adding our middleware to routes
• Trying our our protected routes

Section 8: พื้นฐาน React Framework

• How React works
• Hello world with React using Classes
• Hello world with React using functional components
• Styling Components
• Using Bootstrap CSS
• Using props: passing data to components
• React and State
• Intercepting form submissions with onSubmit()
• handleSubmit() continued
• Ref: using references in React
• References with components: forwardRef()
• Class Lifecycle

Section 9: สร้างโปรเจ็กต์ Store ด้วย React Framework

• Setting up the application layout
• Getting started with React Router v6
• Configuring React Router
• Using React Router's Link
• Working on the Store component
• Routing from the Store component to individual Store
• Displaying an individual Store

Section 10: สร้างหน้า Login ใน React Framework

• Working on the Login button
• Creating the login form
• Giving the Login component access to setJWT
• Adding error messages and redirects to the Login component
• Logging out

Section 11: React for Create/Read/Update/Delete Store API

• Starting on the Add/Edit Store component
• Creating a select component
• Creating a checkbox component
• Using our input controls to create the edit store form
• Continuing to work on the Edit store component
• Getting a store and Genres from the database
• Creating handlers to get stores for public and admin
• Displaying a store to the public on the front end
• Getting started with showing genres on the Add/Edit store component
• Adding checkboxes for genres to the front end form
• Enabling checkbox clicks on the Editstore component
• Validation
• Creating a database method to insert a store
• Creating a handler to insert a store
• Getting a store image from a remote API
• Handling genres when inserting a store
• Inserting a store from the front end
• Trying out adding a store
• Writing the handler to update a store
• Trying out editing a store from the front end
• Getting started with deleting a store
• Deleting a store

Section 12: การ Deployed Project Go และ React

• Configuring environment variables with .env
• Preparing the back end for deployment
• Dumping our database for the live server
• Copying files to the server for deployment
• Populating the database on the live server
• Starting our back end with Supervisor
• Trying out our live application

ตัวอย่าง Workshop Full Stack Web Application with Go and React