Dành cho những ai còn bối rối không biết bắt đầu xây dựng màn hình dữ liệu thiết bị từ đâu, nội dung này sẽ giải thích các khái niệm thông qua việc đọc mã nguồn của sản phẩm thực tế. Bạn sẽ học mọi thứ trong một dự án duy nhất: trực quan hóa nhiệt độ lò mạ, ưu tiên cảnh báo và chuyển đổi giữa tiếng Hàn và tiếng Anh. Đọc từng dòng mã nguồn thực chiến C2I v7.9, build và học cách áp dụng, biến đổi để sử dụng trong dự án của mình.
3 học viên đang tham gia khóa học này
Độ khó Cơ bản
Thời gian Không giới hạn
Cách đọc và thiết kế hợp đồng kiểu cho dữ liệu thiết bị (lò mạ, các vùng và tiêu chí cảnh báo) bằng TypeScript
Khả năng lần theo trong mã nguồn quy trình tạo SVG bằng D3 và cập nhật các phần tử hiện có bằng setData
Cách kiểm chứng bằng mã nguồn và thực thi các quy tắc xác định thông báo và thứ tự ưu tiên (TẮT toàn bộ, khẩn cấp, cảnh báo, độ lệch)
Cách xử lý có cấu trúc đa ngôn ngữ Hàn–Anh và thông báo bằng giọng nói trên trình duyệt
Quy trình phát triển: tự thêm kịch bản mới và xác minh bằng cách kiểm tra kiểu, build rồi chạy.
Tạo component có thể dùng chung cho React, Vue, Svelt, Html và tiếp thu kỹ thuật.
Phân biệt nơi sửa mã nguồn (c2i_util_src) và nơi sử dụng (dist), sau khi sửa thì xác minh theo thứ tự build → verify → kiểm tra trên giao diện.
Tạo ánh xạ dữ liệu để chuyển đổi các giá trị thiết bị của tôi thành IDynamicData.
Nắm được các tùy chọn và cạm bẫy thực sự có thể đọc được trong bản đồ tùy chọn, đồng thời hiểu những giới hạn của cấu trúc kết xuất.
Theo dõi bằng mã luồng cập nhật setData cùng quá trình xác định, hợp nhất và hủy lặp thông báo, rồi thay đổi các quy tắc.
Thêm ngôn ngữ và giọng nói mới bằng cấu trúc từ điển dịch thuật
Thay đổi tiêu chuẩn và màu sắc của nhiệt kế, đèn tín hiệu và đèn cảnh báo.
Giải thích ranh giới nơi thông báo được gửi ra bên ngoài và trách nhiệm của máy chủ (quyền hạn, tính idempotent, việc thử lại)
Tự thêm tùy chọn thư viện, sau đó xác nhận bằng cách build, kiểm thử và kiểm tra xác thực.
Câu trả lời nằm ở trình tự đọc mã nguồn. Từ khi dữ liệu đi vào, màn hình được hiển thị, đến khi cảnh báo được xác định rồi phát ra bằng đèn báo và giọng nói — nếu lần theo quá trình này bằng mã nguồn thực tế, bạn sẽ thấy cần sửa ở đâu thì điều gì sẽ thay đổi.
Khóa học này sử dụng thành phần trực quan hóa lò mạ (c2i_util_src) của C2I v7.9 cùng các ví dụ HTML · React · Vue · Svelte, vừa đọc mã nguồn bằng cách lần lượt đánh dấu từng dòng, vừa trực tiếp build trong terminal và kiểm tra hoạt động trên trình duyệt. Cuối cùng, bạn sẽ tự thêm một tùy chọn mới vào mã nguồn thư viện và thực hiện đầy đủ các bước build · kiểm thử · xác minh toàn diện.
Đừng chỉ xem giảng viên lập trình, hãy trực tiếp làm theo đúng trình tự như trong bài giảng. Tự sửa, tự làm hỏng rồi kiểm tra lại là cách nhanh nhất để biến mã nguồn thành của mình.
Những người nên học khóa học này (1)
Nhà phát triển muốn lấy mã nguồn component lò mạ C2I, tùy chỉnh cho phù hợp với quy trình của mình rồi sử dụng.
Những người nên tham gia khóa học này (2)
Nhà phát triển muốn tìm hiểu D3 qua các component thực tế dùng trong vận hành thay vì các ví dụ biểu đồ.
Những người nên tham gia khóa học này (3)
Những ai muốn học về ngưỡng nhiệt độ, thông báo trạng thái, hướng dẫn đa ngôn ngữ và bằng giọng nói trong cùng một dự án
Phân biệt nơi chỉnh sửa mã nguồn (c2i_util_src) và nơi được sử dụng (dist), sau khi chỉnh sửa hãy kiểm tra theo thứ tự build → verify → xác nhận trên màn hình
Tạo ánh xạ dữ liệu để chuyển đổi giá trị thiết bị của tôi thành IDynamicData.
Biết các tùy chọn thực sự được đọc và những cạm bẫy trong bản đồ tùy chọn, đồng thời hiểu những hạn chế của cấu trúc kết xuất.
Theo dõi bằng mã nguồn luồng cập nhật setData cùng quá trình xác định, hợp nhất và giải trừ lặp lại các cảnh báo, rồi thay đổi các quy tắc.
Thêm ngôn ngữ và giọng nói mới bằng cấu trúc từ điển dịch thuật
Thay đổi tiêu chuẩn và màu sắc của nhiệt kế, đèn giao thông và đèn cảnh báo.
Giải thích ranh giới nơi thông báo được gửi ra bên ngoài và trách nhiệm của máy chủ (quyền hạn, tính bất biến khi lặp, cơ chế thử lại)
Trực tiếp thêm tùy chọn cho thư viện và xác nhận bằng cách build, kiểm thử, kiểm chứng
📌 Những đoạn mã được giải thích sẽ được hiển thị bằng cách nhấn mạnh các dòng trong mã nguồn thực tế. Các thao tác chạy trong terminal và hoạt động trên trình duyệt cũng được trình bày nguyên trạng.
📌 Phân biệt nơi chỉnh sửa mã nguồn (c2i_util_src) với sản phẩm đầu ra (dist), đồng thời làm quen với quy trình làm việc kiểm tra theo thứ tự: chỉnh sửa → build → xác minh → kiểm tra trên màn hình.
📌 Trực tiếp chạy thử và kiểm tra những điểm dễ bị vướng khi tùy biến, chẳng hạn như bản đồ tùy chọn, cấu trúc kết xuất và quy tắc thông báo. (Ví dụ: lý do thông báo khẩn cấp không xuất hiện nếu không chỉ định tùy chọn, lý do xảy ra lỗi khi tăng số lượng lò mạ lên hơn mười)
📌 Trình bày cách hỗ trợ đa ngôn ngữ tiếng Hàn · tiếng Anh và hướng dẫn bằng giọng nói trên trình duyệt hoạt động như thế nào, cũng như cần chỉnh sửa ở đâu để thêm ngôn ngữ mới.
📌 Giải thích chính xác vị trí (callback) nơi thông báo được gửi ra ngoài hệ thống và việc phân chia trách nhiệm để không lưu thông tin bí mật trong trình duyệt.
💡 TypeScript + D3(SVG) + Vite + HTML/React/Vue/Svelte + công cụ thông báo + đa ngôn ngữ/giọng nói + ranh giới kết nối MES
Hãy hiển thị theo thời gian thực dữ liệu phát sinh từ PLC, v.v. Hầu hết các doanh nghiệp, chẳng hạn như nhà máy thông minh, đều được hoan nghênh.
Giải thích dựa trên Windows (11). Việc phát triển đã được kiểm thử trên cả macOS và Windows 11.
Cursor: 3.24.18 (hầu hết IDE ngoài vscode)
D3.js v: v7.9.0
Node.js: v22 trở lên, khuyến nghị V24
Định dạng tài liệu học tập được cung cấp (MD, văn bản, mã nguồn, tài sản, chương trình, v.v.)
Đặc điểm và các lưu ý về dung lượng, khối lượng cũng như các tài liệu học tập khác, v.v.
Hiểu cú pháp cơ bản của JavaScript·TypeScript và DOM
Kinh nghiệm chạy npm install, npm run build (Node.js 20.19 trở lên, trình duyệt hiện đại như Chrome)
Biết kiến thức cơ bản về D3 (lựa chọn và liên kết dữ liệu) sẽ thuận tiện hơn.
Khóa học này dành cho ai?
Nhà phát triển muốn lấy mã nguồn component của lò mạ C2I, chỉnh sửa cho phù hợp với quy trình của mình rồi sử dụng.
Nhà phát triển muốn tìm hiểu D3 như một component dùng trong môi trường thực tế thay vì chỉ là ví dụ biểu đồ
Lập trình viên frontend lần đầu kết nối phát triển màn hình sản xuất và MES
Dành cho những ai muốn tìm hiểu ngưỡng nhiệt độ, thông báo trạng thái và hướng dẫn đa ngôn ngữ bằng giọng nói trong một dự án duy nhất.
Cần biết trước khi bắt đầu?
Nếu có thể nắm vững các công nghệ framework như HTML, CSS, React thì càng tốt.
Kinh nghiệm thực thi npm install, npm run build (Node.js 20.19 trở lên, trình duyệt hiện đại như Chrome)
Biết những kiến thức cơ bản về D3 (selection・data binding) sẽ giúp bạn dễ dàng hơn.
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.
-. 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
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ữ.
-. 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/
Tất cả
13 bài giảng ∙ (2giờ 6phút)
Tài liệu khóa học:
Hãy khám phá các khóa học khác của giảng viên!
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
43 ₫
49%
2.259.062 ₫
![[React Phần 1] Học React thông qua việc tạo ra và so sánhHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?w=420)
![# [Electron #1] Ứng dụng Timer với Electron + React (Sử dụng Zustand)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?w=420)
![[Code Factory] [Cơ bản] Khóa học hoàn chỉnh Typescript của Code Factory chỉ trong 8 giờHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?w=420)
![[Renewal] Tạo NodeBird SNS bằng ReactHình thu nhỏ khóa học](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?w=420)
![[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)
![[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS CoreHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?w=420)
