inflearn logo

[PROKIT] Vibe Coding/Bộ bài tập thực hành Frontend: Tạo ứng dụng hẹn giờ

Đây là nội dung nhiệm vụ dành cho dự án phát triển. Chúng tôi cung cấp tài liệu kế hoạch PRD, thiết kế Figma và các điểm cuối API (API endpoints) để bạn có thể thực hành dự án bằng cách tự mình triển khai ứng dụng hẹn giờ có tên là DevTime. Hãy biến những kiến thức đã học thành của riêng mình một cách hoàn hảo thông qua việc thực hiện một dự án có cấp độ tương đương với dịch vụ thực tế nhé 🚀

21 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

React
React
React
React

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

  • Kinh nghiệm gián tiếp trong việc triển khai dự án dịch vụ thực tế với độ hoàn thiện khá cao.

  • Lý do tại sao dự án lại thực sự cần thiết trong việc học lập trình

  • Tư duy để phát triển thành một nhà phát triển Front-end đáp ứng yêu cầu của thời đại AI

  • Tâm thế và phương pháp luận để bắt đầu dự án một cách thành công

  • Cách sử dụng AI tạo sinh để thực hiện dự án thành công và tiếp thu những kiến thức cần thiết

Xin giới thiệu PROKIT 🔥

Khi lần đầu tiên cố gắng thực hiện một dự án phát triển, bạn sẽ cảm thấy rất mông lung không biết nên bắt đầu từ đâu.

Từ chuẩn bị ý tưởng, sắp xếp kế hoạch, bản thảo thiết kế, cho đến phát triển backend tương ứng với client,

Việc tiến hành dự án trong khi phải cân nhắc nhiều yếu tố khác nhau quả thực không phải là điều dễ dàng.

Đặc biệt, việc thực hành phát triển một cách ổn định, đáp ứng đúng các yêu cầu dựa trên bản kế hoạch chi tiết là một trải nghiệm không hề dễ dàng.

Vì vậy, chúng tôi đã chuẩn bị PROKIT 💻 .

Chúng tôi cung cấp đầy đủ từ bối cảnh kinh doanh, yêu cầu thiết kế, bản vẽ Figma cho đến các điểm cuối API để thực hiện dự án, nên

Những ai muốn học chuyên sâu thông qua trải nghiệm dự án gián tiếp, hãy chú ý vào đây nhé 👀


Giới thiệu dự án ⏰

💡 Đây là nhiệm vụ dự án cấp độ [Nâng cao], bao gồm các thách thức như quản lý quyền hạn phức tạp và xử lý trạng thái Client-Server.

Chủ đề dự án đã chuẩn bị là [DevTime: Triển khai bộ hẹn giờ ghi lại thời gian học lập trình].

Chúng ta sẽ thiết lập một mục tiêu kinh doanh giả định và trực tiếp triển khai sản phẩm có tên là DevTime để đạt được mục tiêu đó.

Hãy sử dụng những tài liệu được cung cấp, tập trung vào việc triển khai các tính năng frontend để hoàn thiện ứng dụng DevTime nhé!

Dưới đây là ví dụ về các chức năng chính của dự án sẽ được tiến hành.

Đăng nhập

Đăng ký

Bộ hẹn giờ

Quản lý việc cần làm

Bảng điều khiển

Bảng xếp hạng


Ngoài ra, còn có nhiều chức năng khác bao gồm các nhiệm vụ triển khai frontend thiết yếu như thiết lập hồ sơ, Trang của tôi, v.v.

Hãy tự mình triển khai ứng dụng DevTime để học hỏi chuyên sâu các kỹ năng triển khai phía client đa dạng.


Hướng dẫn cấu trúc Prokit 🛠

Chúng tôi chuẩn bị và cung cấp các yếu tố cần thiết để tiến hành dự án frontend.


Tài liệu yêu cầu sản phẩm (PRD; Product Requirement Document)

Tôi đã tổng hợp các yêu cầu chi tiết về các chức năng chính của DevTime.

Hãy tham khảo nội dung trong tài liệu yêu cầu thiết kế (PRD) đã được cung cấp để triển khai ứng dụng hẹn giờ của riêng bạn.

(* Tài liệu PRD sẽ được cung cấp dưới dạng liên kết có quyền truy cập Google Docs Viewer. Nội dung sẽ liên tục được cập nhật phiên bản mới nhất khi có sự thay đổi).

Ví dụ về tài liệu PRD được cung cấp


Bản thiết kế Figma

Cung cấp bản thiết kế UI cần triển khai ở phía Front-end.

Hãy tạo ra một dự án có độ hoàn thiện cao về mặt thị giác dựa trên bản thiết kế Figma đã được áp dụng hệ thống thiết kế (design system).

(* Đối với bản thiết kế Figma, chúng tôi cung cấp liên kết để bạn có thể trực tiếp kiểm tra bản thiết kế với quyền Viewer. Nội dung sẽ liên tục được cập nhật lên phiên bản mới nhất khi tài liệu có sự thay đổi).

Bản thiết kế Figma

Hệ thống thiết kế DevTime


Tài liệu API (Swagger UI)

Chúng tôi đã triển khai sẵn một máy chủ bằng cách định nghĩa trước các chức năng cần thiết để một ứng dụng web có thể hoạt động bình thường.

Chúng tôi cung cấp toàn bộ mã nguồn máy chủ đang vận hành ổn định, hãy thử thực hành gửi yêu cầu một cách tự do bằng cách khởi chạy máy chủ trên máy tính cá nhân của bạn!

Bạn có thể tạo ra một sản phẩm hoàn chỉnh bằng cách gửi các yêu cầu và nhận phản hồi dựa trên thông tin các điểm cuối (endpoint) của API.

Tài liệu API để triển khai tính năng DevTime

Đề xuất cho những người sau đây 👍

Prokit tuy không hoàn hảo, nhưng sẽ giúp bạn tạo ra những kết quả dự án khá tốt và có được trải nghiệm giải quyết vấn đề.

Nếu bạn đang ở trong những tình huống dưới đây, hãy tích cực cân nhắc việc mua nhé!

  • Sinh viên mới tốt nghiệp đang chuẩn bị tìm việc trong lĩnh vực Front-end


  • Người học muốn thực hiện dự án bằng cách vận dụng những nội dung đã tự học qua các bài giảng trực tuyến

  • Những người muốn tạo ra trải nghiệm dự án chuyên sâu hơn trong khi đang tham gia khóa học Bootcamp

  • Người muốn tạo ra một bản hồ sơ năng lực (portfolio) chất lượng cao với những tài liệu hữu ích.


  • Người học Front-end muốn thực hiện thành công dự án đầu tay của riêng mình


Đặc biệt, vì đây là bộ tài liệu phục vụ cho việc thực hiện dự án, tôi khuyên chỉ những ai đã có kiến thức cơ bản về các nội dung dưới đây mới nên cân nhắc mua.

  • Kiến thức cơ bản và cách vận dụng ngôn ngữ HTML, CSS, JavaScript

  • Thao tác với DOM và xử lý sự kiện phía client

  • Hiểu biết về xử lý bất đồng bộ (Promise, async/await, v.v.)

  • Giao tiếp API (sử dụng fetch API, thư viện axios, v.v.)

  • Kinh nghiệm học tập ít nhất một thư viện/framework client (React, Next, Vue, v.v.)


  • Kinh nghiệm quản lý phiên bản sử dụng Git/Github


Ngoài ra, để tiến hành dự án, bạn cần học các nội dung dưới đây. Ngay cả đối với những người đã hoàn thành các bước học tập tiên quyết bắt buộc, đây vẫn là những nội dung có thể cần phải học thêm trong quá trình thực hiện dự án, vì vậy hãy tham khảo nhé!

  • Hiểu về quản lý trạng thái toàn cục và sử dụng các thư viện quản lý trạng thái

  • Triển khai logic xác thực/phân quyền dựa trên mã thông báo JWT

  • Xử lý tải lên hình ảnh từ phía client sử dụng Presigned URL

  • Hiểu biết về xây dựng môi trường dự án, build và đóng gói (bundling)

  • Hiểu và sử dụng bộ nhớ trình duyệt (Local Storage, Cookie, v.v.)

  • Xử lý logic định tuyến trang (page routing)

Lưu ý trước khi mua ⚠️

Prokit là bộ tài liệu dự án được chuẩn bị cho mục đích học tập.

Vì không dựa trên tiền đề là một dịch vụ thực tế, vui lòng nhất định tham khảo các lưu ý dưới đây trước khi bắt đầu.

  • Prokit là tài liệu nhằm hỗ trợ cho dự án, không cung cấp bài giảng hay đào tạo về quá trình thực hiện dự án thực tế.

  • Kiến thức nền tảng là bắt buộc, và đối với những phần gặp khó khăn trong quá trình thực hiện dự án, chúng tôi khuyến khích bạn nên tự giải quyết vấn đề bằng cách sử dụng AI, Google hoặc cộng đồng học tập (dự kiến sẽ mở nhóm chat Kakao mở).


  • Tài liệu PRD và thiết kế Figma sẽ được chia sẻ quyền truy cập dưới dạng liên kết Viewer để phản ánh các nội dung cập nhật liên tục. Rất mong quý vị đặc biệt lưu ý về bảo mật tài liệu và tránh chia sẻ trái phép.

  • Về phần máy chủ, chúng tôi cung cấp riêng toàn bộ mã nguồn backend và hướng dẫn thiết lập môi trường máy chủ sử dụng Docker để bạn có thể cài đặt và sử dụng trên từng máy tính cá nhân.

  • Nghiêm cấm tái sử dụng tất cả các tài liệu được cung cấp cho mục đích thương mại.


  • Các hướng dẫn khác và chi tiết về việc sử dụng tài liệu được ghi rõ trong tài liệu PDF được bán. Rất mong bạn hãy đọc kỹ trước khi bắt đầu dự án.


Nếu bạn có thêm bất kỳ thắc mắc nào về Prokit, vui lòng để lại câu hỏi tại nybs.contact@gmail.com.

Hãy cùng bắt đầu dự án nào 🏃🏻🏃‍♀️

Hãy sử dụng Prokit để tạo ra những sản phẩm dự án chất lượng cao một cách thành công nhé!

Chào mừng các bạn một lần nữa đến với thế giới của những dự án 🐵

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

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

  • Người đang tự học phát triển web

  • Người đang chuẩn bị xin việc vị trí Web Front-end

  • Những người đang muốn bắt đầu dự án đầu tiên của riêng mình

  • Những người đang trăn trở về cách phát triển để trở thành nhà phát triển cần thiết trong kỷ nguyên AI

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

  • Những người đã có kiến thức cơ bản về cách sử dụng các công cụ như React

  • Những người đã sẵn sàng tự mình thực hiện dự án cơ bản

  • Người có khả năng thực hiện dự án phát triển dịch vụ thông qua Vibe Coding

Xin chào
Đây là nybs

933

Học viên

63

Đánh giá

1

Trả lời

4.8

Xếp hạng

6

Các khóa học

Tôi luôn suy nghĩ và tạo ra những nội dung giúp mọi người có thể phát triển một cách thú vị.

Tôi tin rằng nếu đưa ra những vấn đề (nhiệm vụ) hay cần giải quyết cho một ai đó có lòng nhiệt huyết, họ sẽ có thể trưởng thành, và

Tôi chủ yếu trăn trở về việc làm thế nào để đưa ra những vấn đề và nhiệm vụ sát với thực tế nhằm giúp ích nhiều hơn cho việc học tập.

Not Yet, But Soon

Chúng tôi đồng hành cùng tất cả những ai cảm thấy mình vẫn chưa sẵn sàng, nhưng sẽ sớm đạt được điều đó.

 

nybs.contact@gmail.com

Thêm

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

Tất cả

6 bài giảng ∙ (2giờ 20phú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 tương tự

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

Giảm 25% cho thành viên mới

442.890 ₫

25%

590.520 ₫