inflearn logo

Khám bệnh trực tuyến bằng video theo thời gian thực với NestJS · Next.js — Full-stack nơi bác sĩ, bệnh nhân và người giám hộ gặp nhau trong cùng một phòng khám

Tự tay hoàn thiện toàn bộ quy trình làm việc, từ PostgreSQL đến cuộc gọi video Socket.IO·WebRTC, trò chuyện và bảng trắng chia sẻ, trong một luồng duy nhất

1 học viên đang tham gia khóa học này

Độ khó Nhập môn

Thời gian Không giới hạn

HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
PostgreSQL
PostgreSQL
Socket.io
Socket.io
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
PostgreSQL
PostgreSQL
Socket.io
Socket.io

Bạn sẽ nhận được điều này sau khi học.

  • Đây là khóa học full-stack dành cho những người lần đầu kết nối NestJS và Next.js trong cùng một dự án. Thông qua việc xây dựng trọn vẹn một quy trình nghiệp vụ duy nhất là khám bệnh qua video tại bệnh viện, khóa học kết nối các REST API như truy vấn danh sách và thay đổi trạng thái, giao diện theo từng vai trò, phòng và trò chuyện theo thời gian thực, cuộc gọi video WebRTC cùng bảng viết dùng chung vào một phòng khám.

  • Trước tiên, chuẩn bị pnpm workspace và PostgreSQL, sau đó xây dựng các API cho danh sách bệnh nhân, thay đổi trạng thái và lưu trữ hội thoại. Trên nền tảng đó, triển khai việc tham gia với vai trò bác sĩ·y tá·bệnh nhân, hàng đợi bệnh nhân và phòng khám đáp ứng, rồi tiếp tục với phòng Socket.IO và kết nối WebRTC, camera·micro·chia sẻ màn hình, mời người chăm sóc, trò chuyện thời gian thực và bảng vẽ dùng chung, quyền điều khiển bảng vẽ cùng phụ đề giọng nói. Cuối cùng, kiểm tra kết quả bằng bản ghi hoàn tất, tái khám, lint·test·build.

  • Mọi bài giảng đều giải thích bằng cách làm nổi bật các dòng trong mã nguồn thực tế, đồng thời trình bày nguyên trạng việc chạy trên terminal và thao tác với từ hai tab trình duyệt trở lên. Tất cả thông tin bệnh nhân hiển thị trên màn hình đều là dữ liệu giả lập; các nội dung như xác thực thực tế, máy chủ TURN, mã hóa thông tin cá nhân và triển khai không được đề cập mà được tổng hợp thành các nhiệm vụ mở rộng ở giai đoạn vận hành.

Ứng dụng gọi video, chỉ cần làm theo hướng dẫn là được, nhưng nếu muốn kết nối thành “quy trình dịch vụ thực tế” thì sẽ vướng mắc từ đâu trước tiên nhỉ?🤔

Câu trả lời nằm ở trình tự kết nối. Trạng thái bệnh nhân được lưu vào cơ sở dữ liệu, giao diện đọc dữ liệu đó,

Các trình duyệt vào cùng một phòng khám sẽ trao đổi thông tin kết nối để video, trò chuyện và bảng vẽ

Hoạt động trong cùng một phòng — bạn sẽ theo dõi toàn bộ hành trình này qua mã nguồn thực tế.

Khóa học này xây dựng một dịch vụ khám chữa bệnh qua video dành cho giáo dục bằng NestJS và Next.js từ đầu đến cuối.

Đọc và nhấn mạnh từng dòng mã nguồn, trực tiếp chạy trong terminal và

Mở song song trình duyệt của bác sĩ, bệnh nhân và người giám hộ để kiểm tra hoạt động.

Đừng chỉ dừng lại ở việc làm riêng từng ví dụ về tra cứu danh sách và gọi video; hãy thử kết nối chúng thành một quy trình công việc duy nhất.

Thử sửa, thử phá rồi kiểm tra lại là cách nhanh nhất.

Đặc điểm của khóa học này

📌 Mọi phần giải thích đều làm nổi bật các dòng trong mã nguồn thực tế để trình bày, đồng thời trực tiếp chạy thử các thao tác đã giải thích để kiểm chứng. (Ví dụ: vì sao hai người cùng bật camera một lúc thì không thể kết nối, và cách khắc phục)

📌 Xây dựng máy chủ theo cách tự kiểm tra lại dữ liệu đầu vào và quyền hạn. Qua mã nguồn, chúng ta sẽ thấy lý do máy chủ phải chặn thêm một lần nữa ngay cả những nút đã bị ẩn trên màn hình.

📌 Thay vì gõ theo từng dòng, bạn sẽ mở cấu trúc hoàn chỉnh, đọc, chạy và sửa theo từng chức năng. Cuối khóa học, chúng tôi sẽ cung cấp năm bài tập để bạn tự thực hành cùng các tệp cần chỉnh sửa.

📌 Bao gồm cả kiểm thử đơn vị, lint, bản build để triển khai và thứ tự kiểm tra theo từng triệu chứng, giúp chuyển từ “chạy được” sang “đáng tin cậy”.

💡 NestJS + Next.js + PostgreSQL + Socket.IO + WebRTC + SVG bảng viết + monorepo pnpm

Khóa học này phù hợp với những ai:

Bạn chưa từng kết nối NestJS và Next.js trong cùng một dự án?

Tôi sẽ cho bạn thấy bằng mã ngay từ việc ranh giới giữa module, controller, service, server component và client component nằm ở đâu.



Nhà phát triển web / Nhà phát triển backend

Socket.IOvà WebRTC lần lượt truyền tải gì—bạn có đang bối rối không?

Xác nhận bằng mã rằng thỏa thuận kết nối (signaling) và truyền video là hai con đường khác nhau, đồng thời theo dõi trình tự trao đổi offer, answer và các ứng viên ICE.

Nhà phát triển lần đầu tích hợp tính năng thời gian thực

Bạn cần một portfolio ở cấp độ tiếp theo sau bảng tin?

Bạn sẽ có thể giải thích và trình diễn một dịch vụ liền mạch từ giao diện theo từng vai trò, phòng thời gian thực, video, trò chuyện, bảng viết chung cho đến lịch sử hoàn thành.

Các nhà phát triển đang chuẩn bị tìm việc hoặc chuyển việc


💡Nhà phát triển đang chuyển sang trình độ trung cấp

  • Bạn muốn tìm hiểu liền mạch về các quy tắc phân quyền và đồng bộ hóa theo thời gian thực?

    Chúng ta sẽ xem cách viết quy tắc “chỉ vai trò cao nhất trong phòng mới được điều khiển bảng” một lần trong gói dùng chung để cả giao diện và máy chủ cùng sử dụng.


Sau khi hoàn thành khóa học

  • Bạn có thể cấu hình web, API và các gói dùng chung bằng workspace pnpm.

  • Bạn có thể tạo REST API với các bảng PostgreSQL và tính năng kiểm tra dữ liệu đầu vào.

  • Bạn có thể triển khai phòng Socket.IO, kết nối WebRTC, chia sẻ camera, micrô và màn hình.

  • Bạn có thể triển khai việc khôi phục lịch sử trò chuyện, bảng viết chung dựa trên tọa độ và quyền chủ động theo vai trò.

  • Bạn có thể kiểm tra kết quả bằng lint, kiểm thử và build, đồng thời thu hẹp nguyên nhân của vấn đề dựa trên từng triệu chứng.

Bạn sẽ học những nội dung như thế này.

Phần 0. Giới thiệu khóa học

-.0.1 Trình diễn dự án hoàn chỉnh

-.0.2 Tổng quan cấu trúc và trình tự học tập

Phần 1. Môi trường phát triển và monorepo

-.1.1 Tạo pnpm workspace

-.1.2 Chuẩn bị Next.js và các thành phần UI

-.1.3 Chuẩn bị API NestJS

Phần 2. PostgreSQL và API NestJS

-.2.1 Kết nối PostgreSQL bằng Docker

-.2.2 Thiết kế bảng dữ liệu dành cho đào tạo

-.2.3 API danh sách bệnh nhân và thay đổi trạng thái

-.2.4 API lưu trữ cuộc trò chuyện

Phần 3. Màn hình Next.js theo từng vai trò

-.3.1 Tham gia theo vai trò demo

-.3.2 Hàng đợi bệnh nhân của nhân viên y tế

-.3.3 Chuyển đổi trạng thái khám bệnh

-.3.4 Bố cục phòng khám đáp ứng mọi kích thước màn hình

Mục 4. Phòng khám Socket.IO và WebRTC

-.4.1 Phòng khám và người tham gia

-.4.2 Cấu trúc kết nối WebRTC

-.4.3 Kết nối camera và micro

-.4.4 Xử lý video của đối phương và giới hạn phát lại

-.4.5 Mời người giám hộ và chia sẻ màn hình

Mục 5. Trò chuyện · Bảng viết chung · Phụ đề

-.5.1 Trò chuyện thời gian thực và ghi lại trong DB

-.5.2 Đồng bộ hóa tọa độ bảng viết chung

-.5.3 Bên chủ trì bảng viết và phụ đề

-.5.4 Chủ đề bảng và lưu hình ảnh

-.5.5 Phạm vi và giới hạn của phụ đề giọng nói

Phần 6. Ghi chép hoàn tất và hoàn thiện

-.6.1 Hoàn tất hồ sơ bệnh nhân và tái khám

-.6.2 Kiểm tra lỗi và build

-.6.3 Các bước tiếp theo

Lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Tiến hành theo giao diện Windows 11. Sử dụng trình duyệt Chrome.

  • Cần Node.js 22.22 trở lên, pnpm 10.18 và Docker Desktop (container PostgreSQL). Sử dụng Next.js 16, React 19, NestJS 12 và PostgreSQL 16.

Tài liệu học tập

  • Cung cấp toàn bộ mã nguồn sử dụng trong khóa học dưới dạng tệp nén (c2i_seeu_full.zip, tài liệu bài học 1.1). Hãy tạo một thư mục mới, giải nén vào đó rồi bắt đầu. README có hướng dẫn thứ tự chạy.


Kiến thức nền tảng và lưu ý

  • Bạn cần có kiến thức cơ bản về cú pháp TypeScript và các component React. Không cần có kinh nghiệm về NestJS hay WebRTC.

  • Cảnh camera và micrô được hiển thị dưới dạng video ảo trong môi trường tự động hóa. Khi tự thực hiện theo, bạn cần cho phép quyền truy cập camera và micrô thực tế; camera chỉ mở tại localhost hoặc địa chỉ HTTPS.

  • Tất cả bệnh nhân, phòng bệnh và ghi chú khám bệnh trên màn hình đều là dữ liệu giả lập và không được sử dụng cho các dịch vụ y tế thực tế. Nội dung này không đề cập đến xác thực thực tế, máy chủ TURN, mã hóa thông tin cá nhân và triển khai, mà được tổng hợp thành các nhiệm vụ mở rộng vận hành.

  • Âm thanh bài giảng do giảng viên trực tiếp thu âm.

  • Bản quyền của bài giảng và mã nguồn thuộc về giảng viên. Học viên được phép sử dụng và sửa đổi mã nguồn trong dự án của chính mình (công việc · sản phẩm). Tuy nhiên, không được phép bán · phân phối lại mã nguồn, đăng tải lên kho lưu trữ công khai (Git Public), hoặc sử dụng cho mục đích giáo dục như bài giảng · giáo trình.

  • Vui lòng để lại câu hỏi trên bảng câu hỏi của lớp học, chúng tôi sẽ trả lời trong vòng 3 ngày.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Lập trình viên muốn thử cấu hình NestJS và Next.js trong cùng một dự án

  • Nhà phát triển muốn hiểu sự khác biệt về vai trò giữa Socket.IO và WebRTC thông qua mã nguồn thực tế

  • Lập trình viên muốn xây dựng một portfolio (dịch vụ cộng tác theo thời gian thực) ở cấp độ tiếp theo của diễn đàn.

  • Dành cho những ai muốn học quản lý trạng thái, quy tắc phân quyền và đồng bộ hóa theo thời gian thực trong một luồng thống nhất.

Cần biết trước khi bắt đầu?

  • Cú pháp TypeScript và những kiến thức cơ bản về component React

  • Node.js 22.22 trở lên, pnpm 10, Docker Desktop (dùng cho container PostgreSQL), máy tính có camera và micro, Chrome hoặc Edge

  • Bạn không cần biết NestJS hay WebRTC. Các khái niệm cần thiết sẽ được giải thích ngay khi chúng xuất hiện trong mã.

Xin chào
Đây là GregHan

Xác minh sự nghiệp

Vì đã dành nhiều thời gian thích nghi với những thay đổi của công nghệ trong suốt một thời gian dài, giờ đây tôi muốn chia sẻ những kỹ năng và kinh nghiệm mình đang có với các bạn ở trình độ sơ cấp và trung cấp, dù còn hạn chế, để cùng các bạn phát triển nhanh chóng.

Ngăn xếp công nghệ

-. Mono-Repo (Turbo: "^2.3.4"), FCM (Firebase Cloud Message), WebHook, Redis, MQTT

-. MUI-X, Material-UI và các UI thuộc hệ sinh thái Next & React

-. OCR(Naver), RIMS, Popbill, Đăng nhập mạng xã hội (Google,Naver,Kakao)

-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,

D3, Three (WebGL), C2i: biểu đồ BI cung cấp cho Nhà Xanh, echarts, Vuetify, Quasar, Telerick(Progress)

IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...

-.Leaflet.js, Cesium.js, bản đồ Daum & Naver

-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net

-.Node, Nest, Spring Boot, Docker, Git, pm2

-.AWS, Azure, nCloud(Naver)

-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase

-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,

-.TensorFlow, Keras, ScikitRun, LangChain

Giải pháp

  • IAM-Guardian – nền tảng SGC + ML + AI + Graph

  • IAM-MES – Nền tảng tích hợp full-stack theo từng ngành cho sản xuất đơn chiếc, sản xuất theo lô và sản xuất liên tục

  • IAM-ERP – ERP kế toán AI · Tự động định khoản chứng từ · Sổ cái khóa彩娱乐彩票

  • IAM-FREE-BI – BI trình duyệt miễn phí cho các sàn thương mại điện tử · doanh nghiệp vừa và nhỏ

  • IAM-SPC – SPC phổ quát dựa trên siêu dữ liệu · Edge+Trung tâm · IATF 16949

  • IAM-VeloMap – Giải pháp tự động hóa xử lý hậu kỳ Lidar dựa trên AI (+ hợp nhất Guardian)

-.City-Wow (City-Wow): mô phỏng 3D cho các lĩnh vực địa chính, quốc phòng, công cộng, bệnh viện, doanh nghiệp sản xuất, v.v. và

Dịch vụ giám sát theo thời gian thực ('23.10 ~ hiện tại; Three, Vanila.js)

-.SeeU (SeeU): dịch vụ trò chuyện video theo ngành (bệnh viện, sản xuất..)(Google Meet + phông xanh, STT & TTS Chatting)

('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.Survey-Wow: phân tích đơn giản kết quả khảo sát từ Google Form, MS Form và Naver Form, và

Dịch vụ web phân tích dữ liệu dùng chung ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)

-.Dữ liệu-Wow (Data-Wow): Tự động phân tích và trực quan hóa dữ liệu công cộng như xls, json, csv, tích hợp API, v.v.

('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - Giải thưởng dữ liệu công cộng của Bộ Nội vụ và An toàn
-.DDMV(Data-Dam Multi-Dimensional Vis-): dịch vụ phân tích trực quan khám phá đa chiều dữ liệu-đập

('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - Giải thưởng dữ liệu công cộng của thành phố Incheon
-.Thành phần biểu đồ C2i (C2i: Chart Intelligence Insights): Menu thư viện biểu đồ

Biểu đồ dựa trên BI (with D3.js): '15.04 ~ hiện tại; giải pháp biểu đồ theo mô hình BI dựa trên D3.js (v3.3 ~ v7.9)

(Cung cấp dashboard việc làm cho Nhà Xanh dưới chính phủ Moon Jae-in, cung cấp cho dự án quốc gia về quản lý tài chính của Mông Cổ. Hỗ trợ đa ngôn ngữ.

 

và nhiều ngăn xếp công nghệ đa dạng như Data Mart & Warehouse, ROLAP, BI, trực quan hóa dữ liệu, cơ sở hạ tầng đám mây, v.v.

Có chuyên môn và kinh nghiệm trong lĩnh vực phân tích nghiệp vụ, mô hình hóa & tối ưu hóa Oracle (v6.3 ~).

 

-. CTO của (Công ty) Casual-Insights

-. Cựu nghiên cứu viên KISTI

-.Cựu chuyên gia mô hình hóa Oracle, DBA & nghiên cứu viên cao cấp tại LG-CNS

-.Cựu nhân viên phòng máy tính của nhà máy lọc dầu Geukdong (Hyundai)

**. Trực quan hóa đa chiều đập dữ liệu-.Giới thiệu tổng quan (bắt buộc): https://youtu.be/noZ9H7wftsI

-.Tiêu dùng/khu vực thương mại-I (bắt buộc: dữ liệu POS của cửa hàng bách hóa - doanh nghiệp sản xuất và phân phối thông thường): https://youtu.be/ArL-Pv3U-40 -.Tiêu dùng/khu vực thương mại-II (KDX Hàn Quốc, do Siksin cung cấp dữ liệu): https://youtu.be/Wcpu29gI53Y

-. Y tế và chăm sóc sức khỏe (Dữ liệu do KDX Hàn Quốc, Onnuri H&C cung cấp): https://youtu.be/I8WBqAFp9L4-

. Dữ liệu công (do Dữ liệu công của Tòa thị chính thành phố Hwaseong, tỉnh Gyeonggi cung cấp): https://youtu.be/2QCw_6aeRVE

*.D3 & ThreeJS thư viện biểu đồ:https://gregory-han.github.io/chart/

*.Lịch sử giải thưởng

08.1999 Giành giải chính Venture 21 do Báo Hankyoreh & UTC tổ chức (tiền thưởng 50 triệu won)
2000.10 Nhận giải thưởng Tổng thống tại Công ty SoftDime Co., Ltd. (PowerSi OLAP)
2002.11 Nhận giải thưởng Bộ trưởng Bộ Công nghiệp và Tài nguyên tại Giải thưởng Kinh doanh điện tử Hàn Quốc
2020.08 Giải thưởng dữ liệu công cộng của thành phố Incheon
12.2022 Được trao giải dữ liệu công cộng của Bộ Nội vụ và An toàn
Thêm

Chương trình giảng dạy

Tất cả

26 bài giảng ∙ (2giờ 37phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học khác của GregHan

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Ưu đãi có thời hạn

8.421 ₫

49%

2.726.528 ₫