강의

멘토링

로드맵

Programming

/

Desktop Application

[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)

Đây là khóa học thực tế giúp bạn tự tay tạo ra một ứng dụng hẹn giờ bằng React, Electron, Zustand và triển khai nó trên đa nền tảng (Windows, macOS, Linux). Bắt đầu với việc phát triển web React quen thuộc, quản lý trạng thái toàn cục thông qua Zustand, và cho đến khi triển khai GUI cuối cùng, bạn có thể học được toàn bộ quy trình phát triển ứng dụng desktop!

(5.0) 1 đánh giá

80 học viên

  • dakgangjung123
실습 중심
토이프로젝트
처음하는배포
electron
cross-platform
React
Electron
GUI
zustand

Dịch cái này sang tiếng Việt

  • Khái niệm cốt lõi của Electron và xây dựng môi trường phát triển

  • Phát triển UI/UX desktop với React

  • Quản lý trạng thái dễ dàng và mạnh mẽ với Zustand

  • Kinh nghiệm toàn bộ quá trình làm ứng dụng, từ phát triển, build, đến triển khai.

  • Sử dụng giao tiếp (IPC) giữa Electron và React

Có thể phát triển GUI bằng JavaScript không?

Vâng, hoàn toàn có thể! Cũng giống như React mà bạn đã từng sử dụng ít nhất một lần khi làm phát triển web vậy.

Tôi nhớ đã tiếp xúc với PyQt khi muốn tạo ra chương trình riêng của mình bằng Python. Chức năng thì hoàn hảo nhưng thiết kế thô sơ luôn khiến tôi tiếc nuối. Sẽ thế nào nếu chúng ta có thể tạo ra ứng dụng desktop giống như những trang web tinh tế mà chúng ta vẫn làm hàng ngày?

Trong khóa học này, bạn không chỉ học lý thuyết đơn thuần. Chúng ta sẽ cùng nhau tạo ra một ứng dụng timer gọn gàng và thực tế mà bạn có thể sử dụng trong cuộc sống hàng ngày từ đầu đến cuối. Bạn sẽ học được toàn bộ quy trình từ việc vẽ UI hiện đại với React và Tailwind CSS, quản lý trạng thái với Zustand, đến việc tạo ra ứng dụng có thể cài đặt thực tế (.exe, .dmg) bằng Electron.

[Phát triển GUI JavaScript #1] Ứng dụng hẹn giờ được tạo bằng Electron + React (Với Zustand)

Khóa học triển khai, học miễn phí ngay!

Bạn chỉ cần quá trình 'triển khai ứng dụng' - bước cuối cùng của dự án React + Electron? Ch 10-4. Firebase Hosting và Ch 11. Đóng gói và triển khai ứng dụng của khóa học này có thể được học miễn phí bởi bất kỳ ai bất kể có mua hay không. Hy vọng điều này sẽ giúp ích cho việc hoàn thiện dự án quý giá của bạn.

Hãy trực tiếp trải nghiệm kết quả của khóa học!

Đây là ứng dụng timer sẽ được hoàn thành thông qua khóa học này. Bạn có thể trải nghiệm ngay phiên bản web hoặc tải xuống file cài đặt để chạy trực tiếp trên máy tính của mình.

Xem trực tiếp trên web (Live Demo)

Cài đặt trên máy tính của tôi (Desktop App)

Tải xuống tệp phù hợp với hệ điều hành (OS) mà bạn đang sử dụng bên dưới.

React: Hoàn thiện giao diện đẹp mắt thông qua sự thành thạo

Khóa học này bắt đầu dựa trên kiến thức React mà các bạn đã biết. Chúng ta sẽ sử dụng phương pháp phát triển dựa trên component và Hooks - những yếu tố cốt lõi của React để trực tiếp tạo ra tất cả các màn hình của ứng dụng timer.

Electron: Biến code của tôi thành 'GUI cài đặt' thực sự

Đây là cốt lõi của khóa học này. Electron đóng vai trò cầu nối giúp biến dự án web được tạo bằng React thành ứng dụng desktop có thể cài đặt và chạy thực tế trên Windows(.exe), macOS(.dmg) và các hệ điều hành khác. Chúng ta sẽ thực hành toàn bộ quá trình từ việc xây dựng môi trường phát triển ứng dụng desktop đến tạo ra sản phẩm cuối cùng, chỉ sử dụng công nghệ web mà không cần đến các ngôn ngữ native phức tạp.

Zustand: Quản lý trạng thái toàn cục thực tế và đơn giản nhất

Thay vì Redux cần cấu hình phức tạp, khóa học này đã chọn Zustand. Bạn sẽ học cách quản lý trạng thái toàn cục một cách ngắn gọn với mã code tối thiểu như trạng thái 'bắt đầu/dừng' của bộ đếm thời gian hay thời gian còn lại.

Xây dựng nền tảng cộng đồng bình chọn với React & FastAPI: Từ phát triển đến kiếm tiền với hệ thống thanh toán!

Từ các tính năng xã hội cốt lõi như bình chọn thời gian thực, bình luận, thích cho đến hệ thống thanh toán tích hợp KakaoPay·TossPay!
Học cách xây dựng nền tảng cộng đồng và chiến lược kiếm tiền một cách toàn diện thông qua thực hành từng bước.

Nếu tôi đã lên tàu Titanic?! Tạo dịch vụ web AI dự đoán xác suất sống sót với PyTorch & Next.js

"Nếu tôi đã lên tàu Titanic thì liệu tôi có thể sống sót không?" - chúng ta sẽ giải đáp câu hỏi thú vị này bằng dữ liệu thực tế.
Tạo mô hình AI với PyTorch, xây dựng server backend với FastAPI, phát triển giao diện web với Next.js, và hoàn thiện một dự án fullstack bao trùm cả AI và phát triển web.

Bạn có thắc mắc gì không?

Q1. Tôi là web developer, có cần thiết phải học Electron không? Chỉ làm web thôi có được không?

A. Tất nhiên rồi! Nhưng khi học Electron, bạn sẽ mở rộng ra ngoài trình duyệt web để tiến vào desktop của người dùng.

Ứng dụng web chỉ hoạt động trong trình duyệt có kết nối internet, nhưng ứng dụng được tạo bằng Electron có thể truy cập trực tiếp vào hệ thống tệp hoặc sử dụng tính năng thông báo của hệ điều hành, v.v., từ đó cung cấp trải nghiệm người dùng mạnh mẽ và tích hợp hơn nhiều.

Trên hết, lợi ích lớn nhất là bạn có thể thực hiện tất cả những điều này bằng cách sử dụng nguyên vẹn kỹ năng React mà bạn tự tin nhất mà không cần phải học các ngôn ngữ mới như C# hay Java.

Q2. Tôi mới tiếp xúc với Electron và Zustand lần đầu, liệu người mới bắt đầu với React có thể theo kịp được không?

Vâng, hoàn toàn có thể! Khóa học này được thiết kế để bất kỳ ai chỉ cần có kiến thức cơ bản về Javascript đều có thể theo kịp.

  • Electron: Bắt đầu từ 'Electron là gì', chúng ta sẽ cùng nhau tiến hành từng bước từ đầu về cách kết nối với dự án React và thiết lập môi trường phát triển. Hoàn toàn không cần kiến thức trước đó cũng không sao.

  • Zustand: Thay vì chọn một thư viện phức tạp và cồng kềnh như Redux, tôi đã cố ý chọn Zustand vì nó trực quan hơn nhiều và có ít code hơn.


Q3. Sau khi học xong khóa học này, tôi có thể tạo ra các chương trình khác ngoài ứng dụng hẹn giờ không?

A. Đúng vậy! Mục tiêu thực sự của khóa học này không chỉ đơn giản là tạo ra một 'ứng dụng hẹn giờ', mà là giúp các bạn làm chủ 'cách tạo ứng dụng desktop bằng React và Electron'.

Ứng dụng hẹn giờ chỉ là ví dụ cơ bản nhất để học công thức đó. Khi bạn hoàn thành khóa học, bạn sẽ có khả năng ứng dụng để trực tiếp thực hiện các ý tưởng đa dạng như dưới đây.

  • Mỗi sáng thông báo giá cổ phiếu trình theo dõi giá cổ phiếu

  • API và tích hợp ứng dụng thông tin thời tiết của riêng tôi

  • Quản lý danh sách công việc cần làm To-do 리스트

Khóa học này sẽ hướng dẫn bạn cách tạo ra mọi ứng dụng desktop mà bạn có thể tưởng tượng.

Những lưu ý trước khi học

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

Khóa học này được thiết kế để có thể học ở bất kỳ đâu trên môi trường desktop với cấu hình thông thường.

Hệ điều hành (OS)

  • Windows: Windows 10 이상

  • macOS: macOS 11 (Big Sur) trở lên

  • Linux: Ubuntu 20.04 LTS và các bản phân phối chính khác


Công cụ sử dụng

Tất cả phần mềm cần thiết cho khóa học đều có thể sử dụng miễn phí nên đừng lo lắng nhé.

  • Trình soạn thảo mã: Visual Studio Code

  • Runtime: Node.js (khuyến nghị phiên bản 18.x LTS trở lên) và npm (tự động cài đặt khi cài đặt Node.js)

  • Khác: Có thể cần máy ảo (VM).

Cấu hình PC được khuyến nghị

Vì các chương trình phát triển web khá nặng, chúng tôi khuyến nghị cấu hình dưới đây. Tuy nhiên, bạn vẫn có thể thực hành với cấu hình tối thiểu.

  • CPU: Intel i3 / AMD Ryzen 3 trở lên

  • Bộ nhớ (RAM): 8GB trở lên (tối thiểu 4GB)

  • Ổ đĩa: Dung lượng trống từ 10GB trở lên để cài đặt công cụ phát triển và dự án (khuyến nghị SSD)

  • Card đồ họa: Card đồ họa tích hợp cũng đủ dùng.

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

Để tất cả quá trình học tập có thể diễn ra một cách có hệ thống trong một không gian duy nhất, chúng tôi cung cấp tất cả tài liệu được tích hợp trong một trang Notion.

Những thứ được cung cấp từ trang Notion

  • Mã nguồn hoàn chỉnh theo từng chương
    Sau khi hoàn thành thực hành của mỗi chương, chúng tôi sẽ cung cấp toàn bộ mã hoàn chỉnh. Hãy so sánh với mã của bạn để kiểm tra những phần bị thiếu hoặc sử dụng làm tài liệu tham khảo khi gặp khó khăn.


  • Tài nguyên và tài sản thực hành
    Chúng tôi cung cấp các biểu tượng, tệp hình ảnh, v.v. cần thiết cho việc thực hành bài giảng để bạn có thể tải xuống và sử dụng ngay lập tức mà không cần phải tự tìm kiếm.


Đặc điểm của tài liệu học tập

  • Quản lý All-in-One: Không cần tải xuống và quản lý các tệp riêng biệt, chỉ cần lưu vào mục yêu thích một liên kết Notion duy nhất là có thể truy cập tất cả tài liệu, rất tiện lợi.

  • Cập nhật liên tục: Khi có thay đổi trong nội dung bài giảng hoặc tài liệu bổ sung, chúng tôi sẽ cập nhật ngay lập tức trên trang Notion để luôn duy trì thông tin mới nhất.

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

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

  • Những ai quen với React nhưng muốn thử tạo ứng dụng desktop riêng, vượt qua trình duyệt web.

  • Từ phát triển đến triển khai, tạo ra ứng dụng 'hoàn chỉnh' của riêng mình, cho những ai muốn xây dựng portfolio khác biệt.

  • Những ai muốn trải nghiệm các thư viện quản lý trạng thái nhẹ và hiện đại như Zustand qua các dự án thực tế, thay cho sự phức tạp của Redux.

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

  • Cú pháp JavaScript (ES6+) cơ bản

  • Hiểu biết cơ bản về HTML, CSS

Xin chào
Đây là

526

Học viên

29

Đánh giá

51

Trả lời

4.8

Xếp hạng

6

Các khóa học

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

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

Tất cả

38 bài giảng ∙ (8giờ 9phút)

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

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

1 đánh giá

5.0

1 đánh giá

  • dkfkqlxm님의 프로필 이미지
    dkfkqlxm

    Đánh giá 14

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • 닭강정
      Giảng viên

      제 강의에 첫 별점을 남겨주셔서 감사합니다! 별점 5점과 함께 끝까지 강의를 들어주신 덕분에 더 큰 힘이 됩니다. 앞으로도 좋은 강의로 보답하겠습니다.

716.101 ₫

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

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!