Cách xây dựng ứng dụng web với ChatGPT
Một trong những tuyên bố lớn nhất về sự cường điệu xung quanh ChatGPT là nó có thể là một công cụ lập trình hiệu quả. Ý tưởng diễn ra như sau: bạn mô tả những gì bạn muốn bằng ngôn ngữ tự nhiên; chatbot tạo mã thực hiện điều đó. Nhưng ChatGPT thực sự tốt như thế nào khi làm điều này?
Còn cách nào tốt hơn để tìm hiểu hơn là đưa nó vào thử nghiệm? Chúng tôi đã yêu cầu ChatGPT xây dựng một ứng dụng web đơn giản từ đầu. Đây là kết quả thử nghiệm của chúng tôi và các bước bạn có thể sử dụng để xây dựng trang web từ đầu bằng ChatGPT.
Mục Lục
Bước 1: Tạo Kế hoạch chi tiết cho Ứng dụng web của bạn
Giống như cách bạn làm khi xây dựng ứng dụng web bằng bất kỳ công cụ nào, bạn cần vạch ra kế hoạch chi tiết về giao diện mà bạn muốn ứng dụng của mình trông như thế nào và các bước bạn cần xây dựng ứng dụng đó trước khi cho phép ChatGPT chạy chương trình.
Đối với nhiệm vụ đầu tiên của chúng tôi, chúng tôi đã yêu cầu ChatGPT phát triển một kế hoạch chi tiết cho một ứng dụng trò chuyện đơn giản. Để làm điều này, chúng tôi đã mô tả các yêu cầu đối với ứng dụng web của mình và sau đó yêu cầu chatbot nêu chi tiết kế hoạch phát triển ứng dụng.
Sau khi sử dụng lời nhắc ở trên, đây là kết quả chúng tôi nhận được:
Bạn cần bật plugin “Hiển thị cho tôi” trên tài khoản ChatGPT của mình để tạo sơ đồ như sơ đồ của chúng tôi ở trên. Bạn có thể cài đặt và sử dụng plugin ChatGPT chỉ trong vài bước, mặc dù bạn sẽ cần đăng ký trả phí.
Nếu không có plugin, bạn sẽ nhận được bản thiết kế dựa trên văn bản hoặc sơ đồ nghệ thuật ASCII. Điều đó vẫn ổn. Ngay cả khi không có plugin, ChatGPT vẫn phải cung cấp bản thiết kế rõ ràng của ứng dụng như ví dụ bên dưới.
Bước 2: Chia Kế hoạch chi tiết thành các Mô-đun nhỏ hơn
Bây giờ chúng tôi đã có bức tranh toàn cảnh, chúng tôi đã yêu cầu ChatGPT trợ giúp trong việc chia ứng dụng thành các thành phần nhỏ hơn mà chúng tôi có thể phát triển riêng biệt rồi tích hợp để tạo thành ứng dụng web hoàn chỉnh. ChatGPT đề xuất chia nó thành ba thành phần:
- mô-đun đăng ký
- mô-đun đăng nhập
- mô-đun trò chuyện
Chúng tôi có những ý tưởng khác, nhưng mục tiêu ở đây là để ChatGPT quyết định.
1. Xây dựng Hợp phần Đăng ký
Chúng tôi đã bắt tay ngay vào việc xây dựng thành phần đăng ký. Chúng tôi đã yêu cầu ChatGPT đưa ra một thuật toán phù hợp. Ở đây, chúng tôi đã can thiệp bằng cách chỉ định rằng chúng tôi chỉ cần tên người dùng, email và hình đại diện của người dùng để đăng ký. Đây là lời nhắc:
Và đây là kết quả:
Tiếp theo, chúng tôi đã nhắc ChatGPT xây dựng thành phần đăng ký.
Mặc dù chúng tôi không bao gồm trường mật khẩu như một phần của quy trình đăng ký, ChatGPT đã thực hiện đúng cuộc gọi bằng cách đưa nó vào mã HTML được tạo. Chúng tôi đã sao chép mã mà không có bất kỳ sửa đổi nào và đây là giao diện của mã trên trình duyệt.
Tiếp theo, chúng tôi đã nhắc ChatGPT tạo tập lệnh đăng ký PHP. Lúc đầu, chúng tôi đã nhắc “Viết mã PHP cho logic phía máy chủ để xử lý việc gửi biểu mẫu.” Mặc dù tập lệnh được tạo hoạt động tốt, nhưng nó có rất nhiều lỗ hổng.
Không có hàm băm mật khẩu, không có xử lý lỗi và dễ bị tấn công SQL—ChatGPT chỉ làm được ở mức tối thiểu. Khắc phục điều này tương đối dễ dàng. Chúng tôi chỉ yêu cầu ChatGPT “xác định mọi điểm sai với mã bạn vừa tạo, sau đó sử dụng các điểm đã xác định để tối ưu hóa mã.” Cùng với đó, tập lệnh đăng ký PHP của chúng tôi đã sẵn sàng hoạt động.
Các từ ngữ của các vấn đề nhanh chóng của bạn. Bạn cần phải rất rõ ràng và cụ thể về những gì bạn cần ChatGPT thực hiện. Khi chúng tôi chỉ yêu cầu nó “khắc phục sự cố với mã này”, nó đã không khắc phục được hầu hết những gì chúng tôi hy vọng nó sẽ khắc phục. Để được hướng dẫn thêm về cách viết lời nhắc ChatGPT, đây là một số nơi để tìm hiểu cách viết lời nhắc hiệu quả.
Tiếp theo, chúng tôi đã yêu cầu ChatGPT “Viết mã SQL để tạo cơ sở dữ liệu cho dữ liệu được thu thập trong tập lệnh PHP.” Đây là mã SQL kết quả:
Và đây là bảng được tạo bằng cách thực thi SQL:
Với cơ sở dữ liệu được thiết lập, chúng tôi đã thử đăng ký lần đầu và nó hoạt động mà không có bất kỳ lỗi nào.
2. Xây dựng Thành phần Đăng nhập
Với thành phần đăng ký không hoạt động, chúng tôi đã đảm nhận thành phần Đăng nhập. Đáng ngạc nhiên, đó là cách dễ nhất để xây dựng bất chấp logic bổ sung của quản lý phiên.
Đây là trang đăng nhập được tạo. Điểm nổi bật chính là nó sử dụng các tùy chọn màu giống như trang đăng ký.
Sau khi tạo tệp “server.login.php” theo hướng dẫn của ChatGPT và thêm tập lệnh PHP đã tạo, chúng tôi đã đăng nhập thành công lần đầu tiên mà không có bất kỳ sửa đổi hoặc gỡ lỗi nào.
3. Xây dựng thành phần trò chuyện
Xây dựng thành phần trò chuyện là phần cuối cùng—và có lẽ là phần khó nhất—trong thử nghiệm nhỏ của chúng tôi. Lúc đầu, chúng tôi chỉ yêu cầu ChatGPT viết mã cho thành phần trò chuyện. Không cần phải nói, đó là một thất bại to lớn. Đối với các thành phần phức tạp hơn của bất kỳ thứ gì bạn muốn tạo, bạn sẽ cần chia nó thành các thành phần nhỏ hơn và xử lý chúng lần lượt.
Chúng tôi đã hỏi ChatGPT về các đề xuất về việc chia nhỏ thành phần trò chuyện và đề xuất chúng tôi tạo ba trang:
- Trò chuyện.php
- Gửi-tin nhắn.php
- Fetch-messages.php
Khi ChatGPT đề xuất một tên tệp, việc sử dụng một tên khác trong dự án của bạn có thể vô tình gây ra sự cố vì chatbot sẽ tham chiếu cùng một tên trong tất cả mã mà nó tạo trong suốt dự án. Chúng tôi phát hiện ra một cách khó khăn. Đừng phạm sai lầm tương tự.
Tạo trang Chat.php
Để bắt đầu, chúng tôi đã cung cấp cho ChatGPT hướng dẫn chi tiết về cách chúng tôi muốn giao diện trò chuyện trông như thế nào.
Sau khi chạy mã HTML được tạo, chúng tôi có giao diện trò chuyện không có hộp nhập tin nhắn. Để khắc phục điều này, chúng tôi chỉ cần nhắc ChatGPT “viết lại mã để bao gồm hộp nhập tin nhắn và nút gửi.” Đây là giao diện của mã được tạo trên trình duyệt trong lần dùng thử thứ hai.
Bất cứ khi nào mã được tạo không mang lại kết quả mong muốn hoặc bỏ qua một thành phần quan trọng, chỉ cần nhắc ChatGPT viết lại mã cuối cùng. Yêu cầu nó bao gồm thành phần hoặc làm bất cứ điều gì chưa được thực hiện trong mã ban đầu. Dưới đây là một số mẹo về cách sử dụng ChatGPT để lập trình.
Tạo trang “send-messages.php” và “Fetch-messages”
Hài lòng với giao diện, chúng tôi tiến hành xây dựng kịch bản để xử lý logic trò chuyện. Để có thể gửi và tìm nạp tin nhắn từ cơ sở dữ liệu, ChatGPT đã nhấn mạnh một cách chính xác rằng chúng ta sẽ cần một bảng “tin nhắn”. Chúng tôi đã yêu cầu chatbot tạo SQL cho bảng tin nhắn.
Sau khi tạo mã SQL, chúng tôi đã yêu cầu chatbot tạo tập lệnh PHP để xử lý logic nhắn tin.
ChatGPT đã tạo tập lệnh cho cả trang “send-messages.php” và “fetch-messages.php”. Khi chạy cả hai tập lệnh, cuối cùng chúng tôi đã gặp lỗi đầu tiên (điều này khiến chúng tôi hài lòng một cách kỳ lạ). Đưa được điều này vào dự án mà không cần gỡ lỗi một dòng mã nào có vẻ hơi quá tốt để trở thành sự thật, mặc dù tính đơn giản tương đối của nó.
Hóa ra lỗi là do ChatGPT giới thiệu kiểm tra biến phiên không được khai báo ($_SESSION[‘user_id’]) vào kịch bản của chúng tôi. Chúng tôi nghi ngờ đây là kết quả của việc tạm dừng dự án khá lâu, dẫn đến ChatGPT quên một số bối cảnh và tên của các biến được sử dụng trong dự án.
Khi sử dụng ChatGPT để tạo ứng dụng, hãy đảm bảo sử dụng cùng một chuỗi trò chuyện và cố gắng hoàn thành các thành phần liên quan càng sớm càng tốt. Sử dụng chuỗi trò chuyện mới hoặc nghỉ ngơi lâu có thể gây ra sự không nhất quán. ChatGPT có xu hướng quên một số chi tiết của dự án hiện tại (ví dụ: bảng màu) nếu bạn nghỉ giải lao lâu giữa các phiên viết mã.
Điều đó nói rằng, chúng tôi đã sửa lỗi và triển khai mã. Chúng tôi đã đăng ký, đăng nhập và dùng thử tính năng trò chuyện. Mặc dù chúng tôi có thể gửi tin nhắn từ người dùng đã đăng ký này sang người dùng khác, nhưng màu sắc và cách sắp xếp của bong bóng tin nhắn hơi khác. Tuy nhiên, đối với một ứng dụng mất 1 giờ 23 phút để hoàn thành, chúng tôi sẽ không đánh giá quá khắt khe.
ChatGPT: Trợ lý mã hóa tuyệt vời
ChatGPT rõ ràng là một trợ lý mã hóa mạnh mẽ. Việc chatbot có thể tạo ra mã ấn tượng từ các hướng dẫn đơn giản và đôi khi không rõ ràng là một minh chứng cho năng lực viết mã của nó.
Chắc chắn, nó vẫn còn rất nhiều sai sót. Vấn đề với cửa sổ ngữ cảnh hạn chế và khả năng liên kết logic từ nhiều thành phần được xây dựng độc lập với nhau là một vấn đề lớn. Tuy nhiên, chatbot có thể giúp bạn xây dựng các ứng dụng web khá phức tạp một cách nhanh chóng nếu bạn biết cách sử dụng.