Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Master Deno, React, Mongo, NGINX running with Docker-Compose

Thành thạo Deno, React, Mongo, NGINX chạy với Docker-Compose

Thành thạo Deno, React, Mongo, NGINX chạy với Docker-Compose

Deno - công nghệ mới nổi: Cách sử dụng với MongoDB và React hooks trong môi trường dev/prod với container Docker và NGINX

4.4
(40 đánh giá)
544 học viên
Giảng viên
Icaro Lavrador
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
21.5 giờ video
214 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Backend Development #Deno #Docker #Web Development

Bạn sẽ học được gì

Phát triển Backend
Phát triển Frontend
Docker
Docker-Compose
MongoDB
Chạy môi trường phát triển trong container
NGINX

Yêu cầu

Máy tính có kết nối internet
Mong muốn học công nghệ mới
Khát vọng trở thành người dẫn đầu trong lĩnh vực

Đối tượng phù hợp

Lập trình viên muốn mở rộng kiến thức
Lập trình viên muốn khám phá công nghệ mới
Bất kỳ ai có mong muốn học hỏi

Nội dung khóa học

63 phần • 214 bài giảng
1 Tạo file Docker compose
1 Image Docker Deno mới có thể có user khác
2 Tạo Dockerfile cho frontend
3 Tạo Dockerfile cho API
1 Tạo ứng dụng React trong container Docker
2 Hello từ Deno trong Docker
1 Phần đầu hành trình: Backend với Deno
1 Vấn đề khi tạo container Docker Deno trên phiên bản mới
2 Import module Oak đầu tiên
3 Tạo route đầu tiên
4 Export routes
5 Tạo Controller đầu tiên
1 Sửa lỗi trên phiên bản mới của MongoClient
2 Kết nối Deno với Mongo
3 Lưu giá trị đầu tiên vào MongoDB
4 Tái cấu trúc thành Singleton - Design Pattern đầu tiên
5 Sửa lỗi MongoDB trên phiên bản mới
1 Tạo Model và Schema
2 Validate request POST
1 Endpoint GetAll với Mongo
2 Lấy query parameters từ URL và request một item
3 Tạo hàm validateMongoId
4 Trả về 404 khi không tìm thấy to-do
5 Xóa to-do từ Mongo
6 Cập nhật bản ghi trong Mongo
7 Validate khi cập nhật
8 Tạo validator tùy chỉnh với Validasaur
9 Giới hạn của Validasaur: notNull, requiredWhen và Optional
1 Tạo Interface đầu tiên
2 Tạo Mongo Repository đầu tiên
3 Test tất cả endpoints với Postman
1 Cách thêm headers vào endpoint
2 Triển khai middleware đầu tiên
3 Tạo response Content Type Json mà không cần thiết lập headers
1 Tạo middleware not found
1 Dọn dẹp kiểu Any - RouterContext type
2 Dọn dẹp Response type và Import Status Enum để định nghĩa Not Found
3 Dọn dẹp Application type
4 Dọn dẹp Next type
5 Cuối cùng là kiểu chúng ta có thể chọn
1 Tạo router order to-do
2 Tạo URL router chuẩn hơn sử dụng Docker để giữ version API
3 Tái sử dụng router creator để tạo endpoints order to-do mới
1 Cấu trúc dữ liệu trong MongoDB
2 Validate MongoID
1 Tạo Lookups và nhiều Projections hơn trong MongoDB
2 Tạo projections trong MongoDB
3 Triển khai projections trong Deno
4 Lưu order to-do vào MongoDB
1 Hiểu tại sao luôn tôn trọng SIG Family
2 Triển khai listeners Deno cho Docker termination signals
3 Deno đang lắng nghe nhưng không có gì xảy ra, Docker có thực sự gửi signal?
4 Truyền termination signal từ Deno sang Oak
5 Tái cấu trúc code thành hàm Signal Manager
1 Deno, CORS. Là gì và tại sao?
2 Pre-Flight, khi options không phải lúc nào cũng là lựa chọn
1 Chèn ID vào response to-do mới (tin tôi, chúng ta sẽ cần sau này)
1 Chặng thứ hai hành trình: React và frontend
1 Xem xét và dọn dẹp
1 Cài đặt và thiết lập UIkit
1 Tạo Navbar và Logo
2 Thêm thanh tìm kiếm trên Navbar
3 Tái cấu trúc Navbar thành component riêng
4 Cố định Navbar ở đầu trang
1 Tạo card
2 Tái cấu trúc component card
1 Tạo nhóm
1 Triển khai kéo thả
2 Tái cấu trúc nhóm và nhóm các item
1 Tạo floating action button
2 Tái cấu trúc float action button
1 Tạo và kích hoạt modal
2 Tạo nội dung modal
3 Thêm Input field, text area và select area vào modal
4 Thêm footer cho modal
5 Tái cấu trúc modal thành component riêng
1 Tạo Hook useState đầu tiên
2 Tạo useState cho text area và option
3 Đổi tên các nhóm
1 Cài đặt và sử dụng Immer để quản lý state
1 Dọn dẹp code, thêm keys cho components và giá trị mặc định cho options
1 Lặp mảng đa chiều
2 ?? Lặp mảng đa chiều
3 Truyền props cho To-do Card và tạo ID
1 Lắng nghe sự kiện với Hook useEffect
1 Tái cấu trúc Hook Drag'n'drop
2 Tạo custom hook đầu tiên
3 Truyền Parameters và Functions vào custom hooks
1 Tạo custom hook useGroupHook sử dụng hook trước đó
2 Làm cho custom hook dễ tái sử dụng hơn
3 Thêm tên phù hợp cho group containers
1 Bắt đầu sử dụng hooks trên thanh tìm kiếm
2 Khám phá hook mới useRef để so sánh closure values với current values
3 Sử dụng useEffect cleanup để xóa timers
4 Lưu to-dos an toàn trong local storage bằng hooks
5 Xóa phần tử trong mảng đa chiều
6 Truyền props, và truyền lại, và truyền nữa... Phải có cách tốt hơn
7 Truyền values và functions từ bên này sang bên kia bằng useContext
8 Tái cấu trúc useContext thành file riêng
9 Lưu trữ to-do trong local storage
10 Thêm to-do mới vào local storage
11 Đóng modal và dọn dẹp fields cho entry mới
12 Truyền Edit Function bằng useContext
13 Chỉnh sửa danh sách to-dos
14 Điền sẵn modal trước khi mở
15 Tái sử dụng Add modal để Edit
16 Di chuyển to-do đang edit từ nhóm này sang nhóm khác
17 Triển khai chức năng duplicate
18 Tái cấu trúc quản lý to-do thành custom hook lớn
19 Hiểu per value và per reference
20 Cuối cùng sử dụng Reducer
21 Từ export 8 functions và states sang chỉ export state và dispatch
22 Tái cấu trúc to-dos thành useReducer hook
23 Sử dụng dispatch để thay đổi state
24 Sử dụng hook lớn mới
25 Sửa modal để dùng state và dispatch
26 Gọi functions bên trong Reducer
27 Cảm giác chiến thắng
28 Dọn dẹp nhanh
29 Tái cấu trúc thanh tìm kiếm thành custom hook
30 Tạo local storage hook cho to-dos
31 Làm cho useLocalStorage tổng quát hơn bằng callback functions
32 Giới thiệu Drag'n'drop
33 Tìm phần tử cần xóa
34 Dispatch action mới để xóa to-do khỏi nhóm
35 Xóa phần tử khỏi local storage và UI... nhưng rồi...
36 React vs UIkit - ai sẽ thắng trong DOM manipulation?
37 Tìm to-do đúng để thêm
38 Thêm to-do vào local storage, nhưng khoan
39 Hoàn thành Drag'n'Drop giữa các nhóm
40 Xử lý sự kiện di chuyển
41 Triển khai move reducer
42 Nghệ thuật debug
1 Giữ to-dos an toàn trong local storage bằng hooks
2 Xóa phần tử trong mảng đa chiều
1 Truyền props, và truyền lại, và truyền nữa... Phải có cách tốt hơn
2 Truyền values và functions từ bên này sang bên kia bằng useContext
3 Tái cấu trúc useContext thành file riêng
1 Lưu trữ to-do trong local storage
2 Thêm to-do mới vào local storage
1 Đóng modal và dọn dẹp fields cho entry mới
1 Truyền Edit function bằng useContext
2 Chỉnh sửa danh sách to-dos
3 Điền sẵn modal trước khi mở
1 Tái sử dụng modal Thêm để chỉnh sửa
2 Di chuyển công việc cần chỉnh sửa từ nhóm này sang nhóm khác
1 Triển khai tính năng nhân bản
1 Tái cấu trúc quản lý công việc với custom hook mới lớn
2 Hiểu về giá trị và tham chiếu
1 Cuối cùng cũng dùng useReducer
2 Tái cấu trúc công việc với hook useReducer
3 Từ 8 hàm và state xuống chỉ còn state và dispatch
1 Sử dụng custom hook mới lớn của chúng ta
2 Dùng dispatch để thay đổi state
3 Sửa modal để dùng state và dispatch
1 Gọi hàm bên trong Reducer
2 Cảm giác chiến thắng thật thỏa mãn
3 Dọn dẹp nhanh
1 Chuyển thanh tìm kiếm thành custom hook
1 Tạo hook local storage cho công việc
2 Làm cho useLocalStorage tổng quát hơn bằng callback
1 Giới thiệu Drag'n'Drop
1 Tìm phần tử cần xóa
2 Dispatch action mới để xóa công việc khỏi nhóm
3 Xóa phần tử khỏi local storage và UI... nhưng rồi...
1 React vs UIkit: Ai thắng trong thao tác DOM?
1 Tìm công việc đúng để thêm
2 Thêm công việc vào local storage, nhưng khoan
1 Hoàn thiện kéo thả giữa các nhóm
1 Xử lý sự kiện di chuyển
2 Triển khai reducer di chuyển
1 Nghệ thuật debug
1 useCallback - giải quyết cảnh báo với useCallback
2 Dọn dẹp code, xóa cảnh báo và dùng useCallback
1 Cài đặt Axios
2 Dùng Axios để gửi GET request đến endpoint
3 Từ Deno đến Local Storage
4 Tái cấu trúc mảng phẳng thành mảng 3 chiều
5 Sửa lỗi mới khi dùng dữ liệu mới
6 Sửa vấn đề với các loại ID khác nhau
7 Thêm useCallback - như ai đó gọi lại lần nữa (hiểu chứ?)
1 Tạo useReact Middleware httpDispatchMiddleware
2 Làm giàu payload dispatch xóa công việc
3 Xóa dữ liệu không cần thiết trước khi post nhân bản
4 Post đầu tiên lên Deno API
5 Thêm công việc mới vào local storage
1 Hiểu về NGINX
2 Tạo container NGINX
3 Proxy React app bằng NGINX
4 Proxy request đến Backend bằng NGINX
5 Sửa request frontend đến backend
6 Xóa kết nối ngoài và CORS để ứng dụng an toàn hơn
1 Chúc mừng bạn đã đến đây, tiếp theo là gì?
1 Cấu hình VSCode Prettier
2 Emmet và tăng tốc coding
3 Thêm extension tools cho Chrome
4 Cài Docker Extension
5 Kết nối MongoDB trong Docker bằng Compass
6 Dùng MongoDB Compass - Update, Delete, Clone, Drop Collections và Databases
7 Cài VSCode modules
1 Cài Brew trên Mac
2 Cài Docker
3 Cài Deno và Denon trên Mac
4 Cài Node, Chrome, VSCode, Yarn
5 MongoDB Compass
6 Cài Postman
1 Cài Docker
2 Cài Hyper-V cho Docker (tùy chọn)
3 Cài Linux Kernel Update Package (WSL 2) cho Docker (tùy chọn)
4 Cài Node
5 Cài Visual Code Insiders
6 Cài Postman
7 Cài Compass
8 Cài Chrome Canary

Giới thiệu khóa học

You just found the most comprehensive online resource on Deno, React Mongo, Docker, Docker-Compose and NIGNX available to date. This project-based course will introduce you, step by step to all of the modern tools that all top the line Deno and React developer should know in 2020.

We will build together a strong foundation during the course of this project, starting with Docker and Docker-Compose.

We will learn how to Dockerize all the applications we will need, creating no one or two Docker containers but four, we will learn how:

  • Create a Docker Image to host our Deno Application with hot-reload function

  • Create a Docker Image to host our Rect Drag'n'Drop application also with hot-reload

  • Create a Dockerized MongoDB container where we will map the data to a volume on our machine, so we never miss the data.

  • Create an NGINX Docker container to proxy the request between the API requests and the Front-End Requests.

And all that is just the beginning, we will also:

  • Setup Visual Studio to an extra fast development

  • Install all the necessary tools together

  • Learn how to create a Deno server using Oak

  • Learn how to connect Deno with MongoDB

  • Learn how to validate our data using Validasour

  • Make how to make our React application look Amazing with UiKit

  • Learn how to mutate state directly using Immer

  • Take Axios to make HTTP connections to its extreme

  • Learn step by step, the main hooks in react:

    • useState

    • useEffect

    • useReducer

    • useCallback

    • useMemo

    • and many custom hooks we will create

  • All you need to know to set up NGINX in Docker


The curriculum is going to be very hands-on as we walk you from start to finish of releasing a professional-grade Deno and React project from your development machine all the way into production.


We jump directly into the deep end and get our hands dirty, however along the way we will cover all Deno basics and then going into advanced topics so you can make right decisions on architecture and tools on any of your future Deno and React projects.


All code will be provided, and you will get access to the full project code, so signing up for the course will give you a project to put on their portfolio right away, and did I already say it is a full amazing Drag'n'Drop project noting like any other online course ever covered?


The topics covered in this course are:



3 reasons why this course is unlike anything out there:


1. You will build the most significant project you will find out there using Deno.

2. You will have an instructor that consults all over the world, solving the worst problems a company can have and train their employers, teaching you exclusively.

3. This course will always be evolving and updating as the landscape changes


With all that said, all you need to do is to...


Click ENROLL NOW and see you inside the course!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Backend Development
Hiển thị tất cả khoá học Docker
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊