Với việc Trí tuệ nhân tạo tạo sinh ngày càng mạnh hơn trong mọi việc liên quan tới viết lách trong đó có cả lập trình thì CEO của Nvidia đã mạnh dạn tuyên bố “English là ngôn ngữ lập trình mới nhất”. Liệu điều đó có đúng thật không? Tôi đã thử nghiệm dùng ChatGPT để tạo ra 1 ứng dụng nhỏ trong một lĩnh vực mà hiểu biết của tôi gần như là số 0 để kiểm chứng.
Vấn đề cần giải quyết
Hệ thống Bookmark của Chrome cho phép người dùng tổ chức Bookmark theo các folder khá khoa học. Tuy nhiên với một người đọc và bookmark nhiều như tôi thì chừng đó là chưa đủ. Tôi muốn một hệ thống bookmark vừa theo folder vừa có thể tìm kiếm theo tag. Do vậy tôi nảy sinh ý tưởng tạo một Chrome extension cho phép làm điều này. Có điều tôi chưa phát triển Chrome Extension bao giờ. Tuy nhiên theo đúng tinh thần “English là ngôn ngữ lập trình mới nhất”, tôi sẽ bảo ChatGPT làm thay tôi. Let’s do it!
Prompt Engineering
Đầu tiên, tôi hỏi cách làm Chrome Extension xem sao
Do you know how to write a chrome extension?
Tất nhiên là ChatGPT biết cách, đây là câu trả lời
Sau khi nắm được tương đối cách làm và thử nghiệm 1 vài prompt thì đây là prompt tương đối đầy đủ mà tôi bắt đầu dùng để ra lệnh cho ChatGPT code cho mình:
Act as an experienced programmer, help me to write a Chrome extension to save bookmarks. A bookmark will have name, category, tags and added date. Features of the extension:
– bookmark current page with shortcut (by default is cmd+e but can customize in setting). When user presses cmd+e a dialog appears with a textbox contains the name of the bookmark (which is the name of the page, user can edit that), a list of categories which user can choose one to save bookmark into, there is another textbox under the list to type some tags for the bookmark. In tag textbox there is some default tags generated from a function. Each control has a label above.
– browse bookmarks by categories. Click on the extension icon, choose ‘Browse Categories’ will show list of categories, click on each categories will show bookmarks. There is an icon X on the right of the bookmark name that if user clicks on that will delete that bookmark. Same for categories if user want to delete a category (also delete all bookmarks in that category).
– Add new category. Click on the extension icon, choose ‘Add Category’, will show a textbox and a button ‘Add’ allow user to type new category and add to the list. Check duplicate, empty, etc.
– Click on the extension icon, choose ‘Search’ to search bookmarks by tags. there is a textbox to search. When user type a tag in the textbox, a list of bookmarks with that tag will appeared, ordered by added date. user can search multiple tags at a time, tags are separated by space.
– a setting page for the extension where user can set some options (shortcuts for bookmark, browsing, searching)
You will help me write code for this extension file by file. First give the names of files and its purpose. Wait for me to confirm then show me code of each file. Wait for my confirm after each file to continue.
Một số kỹ thuật prompt mà tôi dùng trong prompt trên:
- Giao cho ChatGPT một vai trò cụ thể
- Mô tả chi tiết vấn đề cần giải quyết
- Sử dụng CoT (Chain of Thoughts), không yêu cầu ChatGPT đưa tất cả code mà đưa từng file. Sau khi hài lòng với một file mới tiếp tục sang file tiếp theo.
Sản phẩm
Tất nhiên sản phẩm chưa thể hoàn chỉnh ngay. Sau khi cài đặt extension lên Chrome và chạy thử là một quá trình tiếp tục trò chuyện với ChatGPT để chỉnh sửa. Với cửa số ngữ cảnh lớn và khả năng “nhớ” tạm thời lâu, ChatGPT hiểu toàn bộ quá trình, chỉnh sửa các file tôi cần để đi đến sản phẩm cuối cùng trông như sau:
Cuối cùng tôi bảo ChatGPT viết lại prompt mới từ prompt ban đầu và các chỉnh sửa tôi đã làm. Bạn đọc có thể dùng prompt này tự tạo lại cho mình ứng dụng này:
# Bookmark Manager Chrome Extension### Overview:Create a Chrome extension that allows users to save bookmarks, organize them into categories, and search bookmarks by tags. The extension should be simple, intuitive, and efficient for users to manage their bookmarks.### Features:1. **Bookmark current page with a shortcut:**– By default, users can press a keyboard shortcut (`cmd+e` on Mac or `Ctrl+e` on Windows) to open a dialog that allows them to save the current page as a bookmark.– The dialog should auto-fill the **page title** as the bookmark name, but users can edit it.– Users can select a **category** from a dropdown list to organize the bookmark.– There should be a **tags** field where users can enter tags (separated by semicolons) to make bookmarks easier to find later.– Include default tags based on the page title or URL.– The dialog should have a **Save** button to confirm the bookmark.2. **Browse bookmarks by categories:**– Clicking on the extension icon will show three options:– “Browse Categories”– “Add Category”– “Search”– Under “Browse Categories”, users can see a list of all categories.– When a user selects a category, all bookmarks within that category are displayed.– The **bookmark names** should look like clickable links (hyperlinks).– **Edit** and **Delete** icons should appear next to each bookmark name, allowing users to modify or remove bookmarks without taking too much space.– Hovering over a bookmark should highlight the bookmark row and underline the name for better visibility.3. **Add new category:**– Clicking “Add Category” opens a textbox where users can enter the name of a new category.– The textbox should automatically focus when this section is opened, so users can start typing immediately.– If the category name already exists or is left empty, display an error message.4. **Search bookmarks by tags:**– Clicking “Search” opens a textbox where users can type tags to find bookmarks.– The search should be **case-insensitive** and look for bookmarks that match all entered tags.– The search should be **live**, meaning results should update immediately as the user types.– The bookmarks should be sorted by the date they were added.– The search box should automatically focus when the user clicks on “Search” to avoid unnecessary clicks.5. **Edit bookmarks:**– When the user clicks the **Edit** icon next to a bookmark, a dialog should open, allowing the user to:– Edit the **name** of the bookmark.– Change the **category** the bookmark is saved in (by selecting from a dropdown list).– Update the **tags** of the bookmark.– After editing, the updated bookmark should be saved, and the bookmark list should reflect the changes.6. **Delete bookmarks:**– When the user clicks the **Delete** icon next to a bookmark, the bookmark should be removed.– A confirmation is not required, but the bookmark should be immediately removed from the list.7. **Settings:**– A settings page where users can customize the keyboard shortcuts for bookmarking, browsing, and searching.### User Interface:1. **Main Menu**:– When the user clicks on the extension icon, they should see three simple options:– “Browse Categories”– “Add Category”– “Search”2. **Bookmark List**:– Bookmarks should appear as clickable links (hyperlinks).– Long bookmark names should be shortened with an ellipsis (`…`) to prevent overflow.– The list should be easy to navigate, with **Edit** and **Delete** icons next to each bookmark, displayed in a neat and compact manner.3. **Auto-focus on textboxes**:– The textboxes for adding a category or searching bookmarks should automatically focus when the section is opened, reducing the need for additional clicks.You will help me write code for this extension file by file. First give the names of files and its purpose. Wait for me to confirm then show me code of each file. Wait for my confirm after each file to continue.
