Buzz
Lâu lắm rồi mới chia sẻ về việc lập trình. Hôm nay mình muốn kể lại quá trình viết ứng dụng Web dạy tiếng Anh bằng chatGPT. Mình sử dụng ReactJS + GraphQL làm ngôn ngữ chính. Lập trình bằng trí tuệ nhân tạo thực sự thú vị và tiết kiệm thời gian. Sản phẩm cuối cùng đã mang lại nhiều giá trị cho công việc giảng dạy của mình.
Tóm tắt về dự án Web-app
Để giúp học viên thuận tiện trong việc ôn tập từ vựng và các kỹ năng như nghe và nói, 2 năm trước mình đã phát triển một ứng dụng Flashcard bằng Swift. Mình chỉ tham gia vào phần Front-end (giao diện), còn phần Back-end (xử lý dữ liệu, API) đã phải thuê một lập trình viên Freelance khác để thực hiện.
Ngoài ra, mình cũng tự làm hệ thống Quiz để học viên làm bài và thu thập dữ liệu (mình sử dụng Google Sheet và Google Form).
Tuy nhiên, hiện tại những hệ thống này không còn đáp ứng đủ nhu cầu của học viên nữa, vì vậy mình muốn nâng cấp lên một hệ thống tốt hơn. Điều đặc biệt là lần này có sự xuất hiện của chatGPT, nên mình muốn thử sức tự làm cả Front-end, Back-end và cả API cho hệ thống mới, dù đó chỉ là việc phụ, nguyên nhân chính khiến mình muốn tự mình làm hết cả hệ thống là vì... thiếu tiền, không có ngân sách để thuê lập trình viên làm Back-end như lần trước nữa.Quy trình thực hiện
1. Lựa chọn ngôn ngữ
Ban đầu, mình định viết Web-app bằng HTML, CSS, và Javascript, nhưng khi số lượng tính năng tăng lên, mình gặp phải các vấn đề như: mã nguồn quá dài, khó bảo trì và nâng cấp, và tốc độ ứng dụng rất chậm (đặc biệt trên điện thoại). Vì vậy, mình quyết định chuyển sang sử dụng ReactJS (Javascript), một thư viện được Meta phát triển và sử dụng cho ứng dụng Facebook. Cả bạn bè cũng đã khuyên mình rằng mã nguồn của ReactJS rất sáng sủa, tối ưu về tốc độ và dễ bảo trì, nâng cấp sau này. Vậy là quyết định được đưa ra!2. Lựa chọn nguồn học
Với Swift, mình đã chọn cách học bằng cách đọc tài liệu → tham gia khoá học trên Udemy (với giá 250k trong khuyến mãi) → viết ứng dụng.Lần này, mình quyết định tiếp cận một cách khác bằng cách xem video trên Youtube về lập trình một Web-app hoàn chỉnh với React → viết Web-app với chatGPT.
Khi tìm kiếm trên Youtube, mình tình cờ phát hiện kênh của anh Tùng Minh - một lập trình viên người Việt, các video của anh được trình bày hoàn toàn bằng tiếng Việt, rất chi tiết và dễ hiểu. Anh ấy cung cấp nhiều video về việc lập trình một dự án hoàn chỉnh, mỗi video có thời lượng từ 4-5 tiếng.
Video mà mình đã chọn để học là về việc Xây dựng và Triển khai ứng dụng ghi chú Fullstack (thời lượng gần 5 tiếng). Mình đã xem qua toàn bộ video một lần để hiểu cơ bản, cách thiết lập ban đầu và các lưu ý quan trọng trong quá trình thực hiện. Sau đó, mình tiến hành viết mã nguồn theo từng phần. Mình đã mất 3 ngày để hoàn thành bài học từ video này. Tất nhiên, trước khi xem video này, các bạn cần phải có kiến thức cơ bản về lập trình, đặc biệt là phải hiểu về Javascript.
3. Lập trình với chatGPT
ChatGPT là một công cụ hỗ trợ lập trình tuyệt vời, vì vậy lần này mình quyết định sử dụng nó để tối ưu hóa quá trình viết mã nguồn.
Cách mà mình thực hiện là cung cấp cho chatGPT các yêu cầu chi tiết và cho phép nó viết mã nguồn. Sau đó, mình chỉ cần sao chép phần mã nguồn được tạo ra và dán vào Visual Studio Code, sau đó sửa lại theo ý mình. Trong hình dưới đây, mình đã yêu cầu chatGPT tạo ra một thành phần có khả năng chuyển đổi văn bản thành file âm thanh bằng Google API, và nó đã cung cấp mã nguồn đầy đủ cho mình.
Sau khi sao chép và dán vào Visual Studio Code, tất nhiên là mình phải chỉnh sửa lại mã nguồn để phù hợp với ý tưởng của mình.
Một điều mà mọi lập trình viên đều quen thuộc là khi viết mã → lỗi (bug) sẽ xuất hiện liên tục và càng nhiều trong quá trình thực hiện (như những dòng màu đỏ trong hình dưới), nhưng lúc này mình có thể sao chép những dòng lỗi vào chatGPT và nó sẽ đưa ra giải pháp cho mình.
Trước đây, mất tới 3 ngày để khắc phục một lỗi khó chịu, nhưng giờ chỉ cần một ngày thôi, rất là căng thẳng, đôi khi vì một lỗi khó mà mình phải thức cả đêm để tìm ra giải pháp.
Code nhanh là chính là có thật đấy mọi người =))
Kết quả sau một tháng cống hiến không mệt mỏi
Mình đã bị cuốn hút vào quá trình học và thực hiện dự án này, dành rất nhiều thời gian và tập trung vào đó. Có lúc bị vợ giận vì quá nghiện code, mặc dù mới hoàn thành được 60% so với kế hoạch ban đầu nhưng hiện tại nó đã hoạt động khá ổn định và được sử dụng trong các lớp học của mình.Ưu điểm của ReactJS là giao diện có sẵn nhiều tùy chọn (như màu sắc nút, hiệu ứng), giúp tiết kiệm thời gian trong việc thiết kế giao diện. Khả năng thích ứng của giao diện với thiết bị di động cũng rất tốt, hình dưới là giao diện menu mình thiết kế, mỗi nút tương ứng với một chức năng.
Để học viên thuận tiện tra cứu từ điển, ý tưởng cho việc nói, viết,... mình đã tạo ra tính năng Hỏi AI. Nó tương tự như phần chat trong GPT nhưng đã được điều chỉnh để phù hợp hơn. Dưới đây là một ví dụ minh họa, mình gõ một phần câu trả lời cho việc nói và để trống một phần, AI sẽ hoàn thiện câu trả lời đó 😁
Tính năng thứ hai là tạo Flashcard, mình đã tích hợp nút Tạo Ý tưởng để sáng tạo nội dung nhanh chóng và thuận tiện hơn, phần âm thanh sẽ được tạo ra từ văn bản sử dụng Google Text-To-Speech API, mình đã cài đặt 2 giọng nam và nữ để bài học trở nên sinh động hơn.
Chức năng thứ ba là tạo Quiz, mình sẽ sử dụng tính năng này để thay thế tất cả các bài Quiz được tạo từ Google Form để quản lý dữ liệu làm bài thuận tiện hơn.
Sau khi học viên hoàn thành bài tập, kết quả sẽ được lưu vào Cơ sở dữ liệu, dữ liệu này sẽ được hiển thị trên trang Hồ sơ cá nhân của từng học viên dưới dạng biểu đồ (tính năng này đang trong quá trình phát triển).
Phần xử lý và lưu trữ dữ liệu này rất phức tạp và mới mẻ với mình, nhờ nhiều cuộc trò chuyện với GPT mà cuối cùng mình đã vượt qua được, khoảnh khắc dữ liệu được lưu thành công thật sự là một niềm vui lớn. :D (Mình đang sử dụng Google Cloud - gói free cho Cơ sở dữ liệu)
Giao diện quản lý Người dùng, có thể cấp quyền xem bài học, phân loại theo lớp học
Ứng dụng Web-app trong việc dạy học
Chưa phải là phiên bản hoàn thiện nhất, nhưng các tính năng chính đã hoạt động ổn định nên mình đã đưa vào sử dụng cho các lớp học online và offline luôn, Web-app được thiết kế theo phương pháp giảng dạy cá nhân của mình để mang lại sự thuận tiện cho người học trong việc ôn luyện các kỹ năng của IELTS. Sau khi lớp học kết thúc, học viên có thể trở lại Web-app để ôn tập ngay lập tức.Để nói về hiệu quả trong giảng dạy cần thêm thời gian để tích luỹ dữ liệu và thống kê, tuy nhiên hiện tại mình cảm thấy khá hài lòng với những gì Web-app mang lại.
Lập trình đang trải qua những thay đổi đáng kể, hãy khám phá sức mạnh của Trí tuệ Nhân tạo
Trước khi chatGPT xuất hiện, mình tự học lập trình và phát triển thành phẩm đầu tiên sau 3 tháng (chỉ làm Front-end), nhưng sau khi có chatGPT, thời gian được rút ngắn đáng kể chỉ còn 1 tháng cho sản phẩm các bạn vừa xem (bao gồm cả Front-end và Back-end, độ phức tạp cao hơn). Trí tuệ Nhân tạo đã hỗ trợ mình một cách hiệu quả tuyệt vời, đặc biệt là trong việc giải quyết vấn đề và xử lý bug. Tất nhiên, vẫn cực kỳ căng thẳng khi thực hiện, nhưng so với lần đầu tiên, mọi thứ đã dễ dàng hơn rất nhiều.
Công việc lập trình đang trải qua những biến đổi cực kỳ nhanh chóng, tính bằng ngày luôn. Sau khi chatGPT xuất hiện, hiện tại đã có Google Bard và nhiều Trí tuệ Nhân tạo khác, việc nắm bắt và sử dụng Trí tuệ Nhân tạo trong công việc là vô cùng cần thiết vì nó giúp tăng tốc độ và hiệu suất làm việc lên rất nhiều lần. Mình hy vọng bài viết này sẽ giúp mọi người nhận ra sức mạnh và tiềm năng lớn lao của Trí tuệ Nhân tạo trong việc học lập trình, từ đó tự tạo ra những sản phẩm phục vụ cho nhu cầu cá nhân, bạn bè và hơn thế nữa là cho công ty của bạn.
Mặc dù không phải là lập trình viên, mình vẫn là giáo viên dạy tiếng Anh. Tuy nhiên, hiện tại mình đã có khả năng biến ý tưởng thành sản phẩm thực tế để cải thiện quá trình học tập. Hy vọng sẽ có cơ hội đọc những chia sẻ thú vị của mọi người về những sản phẩm cá nhân trong tương lai.
Link Web-app: Ứng dụng IELTS Vuive App (vuive-app.netlify.app) - Các bạn hãy sao chép đường link và mở trên trình duyệt trên điện thoại nhé
*Chức năng tạo Card và Quiz chỉ được giới hạn dành cho quản trị viên
