Bắt đầu sử dụng Firebase Studio

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ thực hành sử dụng tác nhân Tạo mẫu ứng dụng trong Firebase Studio để tạo một ứng dụng được thiết kế nhằm giúp bạn học một ngôn ngữ mới. Sau đó, bạn sẽ tinh chỉnh và cải thiện ứng dụng, đồng thời có thể xuất bản ứng dụng lên dịch vụ Lưu trữ ứng dụng Firebase.

Kiến thức bạn sẽ học được

• Các phương pháp hay nhất để đưa ra lời nhắc trong Firebase Studio
• Lặp lại trên một ứng dụng để thêm chức năng và sửa lỗi
• Xuất bản ứng dụng lên dịch vụ Lưu trữ ứng dụng Firebase và chia sẻ với người khác
• Theo dõi các chỉ số chính thông qua bảng tổng quan về ứng dụng App Hosting

Bạn cần có

• Một trình duyệt mà bạn chọn, chẳng hạn như Google Chrome
• Một Tài khoản Google để tạo và quản lý dự án Firebase

2. Tạo ứng dụng bằng tác nhân Tạo mẫu ứng dụng

Tác nhân Tạo mẫu ứng dụng sử dụng Gemini trong Firebase để tạo ứng dụng của bạn. Ngay cả khi sử dụng câu lệnh giống hệt nhau, kết quả của bạn có thể không giống hệt với kết quả trong lớp học lập trình này. Nếu gặp khó khăn, bạn có thể thêm một bộ tệp vào không gian làm việc để tiếp tục thực hiện lớp học lập trình này tại một số điểm kiểm tra.

1. Đăng nhập vào Tài khoản Google của bạn rồi mở Firebase Studio.
2. Trong trường Tạo nguyên mẫu cho ứng dụng bằng AI, hãy nhập nội dung mô tả về ứng dụng bạn muốn tạo. Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng giúp bạn học một ngôn ngữ mới thông qua các câu chuyện, thẻ ghi nhớ và một gia sư AI. Nhập một câu lệnh, chẳng hạn như:

   An app to help someone learn a new language. The app should include
   AI-generated stories in the target language, where users can click vocab
   words or the entire story to see it in English. A different section
   includes flashcards, where the user is shown a word in the chosen language
   and can click it to flip the card and see the word in English. The final
   section includes an AI chatbot that allows the user to have simple
   conversations in the chosen language or ask questions in English about
   what a word means or how to form a sentence in the chosen language. All
   content should be beginner-friendly, focusing on basic greetings, common
   questions/answers, and vocabulary relevant to the lessons or stories.
   To start, the app should teach the user French, although we might add
   additional languages in the future.
   

3. Nhấp vào Tạo nguyên mẫu bằng AI.
4. Xem xét Bản thiết kế ứng dụng được đề xuất. Nhấp vào Tuỳ chỉnh để chỉnh sửa bản thiết kế:
   1. Đổi tên ứng dụng thành Speak Easy.
   2. Thay đổi bảng phối màu thành như sau:

   Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
   Secondary color: Light parchment (#F5EBCD) to complement the primary color.
   Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
   

   Nếu bạn muốn gửi bảng phối màu hoặc bố cục dưới dạng hình ảnh, hãy nhấp vào lựa chọn Tệp đính kèm để tải hình ảnh lên trong quá trình đưa ra câu lệnh hoặc bản thiết kế. Hình ảnh phải nhỏ hơn 3 MiB.
5. Nhấp vào Lưu.
6. Khi bản thiết kế hoàn tất việc kết hợp các nội dung cập nhật của bạn, hãy nhấp vào Tạo mẫu cho ứng dụng này.
7. Vì ứng dụng này có các phần tử AI, nên tác nhân sẽ nhắc bạn nhập khoá Gemini. Thêm khoá Gemini API của riêng bạn hoặc nhấp vào Tạo tự động để tạo khoá Gemini API. Nếu bạn nhấp vào Tự động tạo, Firebase Studio sẽ tạo một dự án Firebase và tạo khoá Gemini API cho bạn.
8. Tác nhân Tạo mẫu ứng dụng sử dụng Bản thiết kế ứng dụng để tạo phiên bản đầu tiên của ứng dụng. Khi hoàn tất, bản xem trước ứng dụng sẽ xuất hiện cùng với giao diện trò chuyện của Gemini. Dành chút thời gian để kiểm thử ứng dụng. Ngay cả khi ứng dụng không giống hệt như bạn hình dung, phần tiếp theo sẽ mô tả cách thêm chức năng mới và tinh chỉnh thiết kế.

3. (Không bắt buộc) Lấy mã

Nếu bạn gặp khó khăn hoặc muốn theo dõi chặt chẽ hơn ứng dụng mẫu, hãy sử dụng các tệp mẫu được cung cấp tại một số điểm kiểm tra trong suốt lớp học lập trình.

1. Tải các tệp trong thư mục xuống.
2. Trong Firebase Studio, hãy nhấp vào Switch to Code (Chuyển sang mã) để mở chế độ xem Code (Mã).
3. Kéo các tệp bạn đã tải xuống vào ngăn Explorer của Firebase Studio. Cho phép các tệp thay thế mọi tệp hiện có.
4. Nhấp vào Chuyển sang Prototyper để tiếp tục lớp học lập trình này bằng phiên bản mẫu của ứng dụng.

4. Kiểm thử, lặp lại và gỡ lỗi chức năng của ứng dụng

Khi xem trước ứng dụng, bạn có thể nhận thấy các lỗi hoặc chức năng không mong muốn. Trong phiên bản ví dụ của ứng dụng, chúng ta sẽ thêm các thay đổi và bản sửa lỗi sau:

• Trong trình tạo truyện bằng AI, người dùng có thể nhấp vào các từ vựng để xem định nghĩa bằng tiếng Anh.
• Thẻ ghi nhớ sẽ xuất hiện bằng tiếng Pháp, sau đó chuyển sang tiếng Anh khi bạn nhấp vào.
• Người dùng có thể chuyển đến trang cài đặt và chuyển sang học tiếng Nhật thay vì tiếng Pháp.

Mục tiêu 1: Thêm từ vựng vào AI Story Generator

Không bắt buộc: Để sử dụng phiên bản ví dụ của ứng dụng từ thời điểm này, hãy tải các tệp này xuống rồi kéo vào ngăn Explorer (Trình khám phá) của Firebase Studio ở chế độ xem Code (Mã).

1. Trong giao diện trò chuyện, hãy mô tả tính năng mà bạn muốn thêm:

   In the AI Story Generator, users should be able to click vocab words or
   phrases to get the definition in English. Words or phrases should be
   underlined to indicate they can be clicked.
   

2. Kiểm thử ứng dụng trong cửa sổ xem trước. Bạn sẽ cập nhật giao diện của ứng dụng sau, vì vậy, hãy cố gắng chỉ tập trung vào chức năng ở thời điểm hiện tại.
3. Nếu ứng dụng của bạn không hoạt động như mong đợi, hãy tiếp tục yêu cầu tác nhân Tạo mẫu ứng dụng điều chỉnh. Ví dụ:

   IMPORTANT: Be sure to underline and provide a definition for most words
   and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
   story appears multiple times, only underline and define the first instance.
   

4. Nhấp vào Chuyển sang chế độ xem mã để mở Chế độ xem mã. Tại đây, bạn có thể xem tất cả các tệp của ứng dụng và sửa đổi mã trực tiếp. Nếu có lỗi mà Gemini không thể giải quyết, thì đôi khi bạn nên chỉnh sửa tệp theo cách thủ công. Khi bạn đã sẵn sàng, hãy Chuyển sang chế độ Prototyper để tiếp tục sử dụng tác nhân Tạo mẫu ứng dụng.

Mục tiêu 2: Thêm bản dịch vào thẻ ghi nhớ

Không bắt buộc: Để sử dụng phiên bản ví dụ của ứng dụng từ thời điểm này, hãy tải các tệp này xuống rồi kéo vào ngăn Explorer (Trình khám phá) của Firebase Studio ở chế độ xem Code (Mã).

Làm theo quy trình tương tự như trên, sử dụng giao diện trò chuyện để mô tả tính năng, kiểm thử tính năng đó trong cửa sổ xem trước, sau đó sử dụng thêm câu lệnh hoặc chế độ xem Mã để thêm bản dịch vào thẻ ghi nhớ. Hãy thử một câu lệnh như:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

Đôi khi, tác nhân Tạo mẫu ứng dụng không nhận ra khi có lỗi. Việc mô tả những gì bạn thấy và những gì cần được khắc phục có thể hiệu quả hơn, chẳng hạn như:

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

Mục tiêu 3: Thêm ngôn ngữ mới

Không bắt buộc: Để sử dụng phiên bản ví dụ của ứng dụng từ thời điểm này, hãy tải các tệp này xuống rồi kéo vào ngăn Explorer (Trình khám phá) của Firebase Studio ở chế độ xem Code (Mã).

Hãy thử một câu lệnh như:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

5. Lặp lại thiết kế của ứng dụng

Không bắt buộc: Để sử dụng phiên bản ví dụ của ứng dụng từ thời điểm này, hãy tải các tệp này xuống rồi kéo vào ngăn Explorer (Trình khám phá) của Firebase Studio ở chế độ xem Code (Mã).

Giờ đây, ứng dụng của bạn đã có tất cả chức năng mà bạn muốn, đã đến lúc bạn cần xử lý phần kiểu.

Thay đổi bảng phối màu của ứng dụng

Bạn có thể nêu rõ những màu mà bạn muốn sử dụng hoặc để tác nhân Tạo mẫu ứng dụng dẫn dắt. Trong giao diện trò chuyện, bạn cũng có thể nhấp vào lựa chọn Tệp đính kèm để tải hình ảnh về màu sắc hoặc kiểu dáng mà bạn muốn sử dụng lên. Nếu bạn muốn sử dụng câu lệnh, hãy thử:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

Cập nhật văn bản được dùng trong ứng dụng

Ví dụ: thay vì "AI Chatbot Tutor" (Trợ lý Chatbot AI), bạn có thể muốn chatbot chỉ nói "Chat":

 Change the text "AI Chatbot Tutor" to "Chat".

Điều chỉnh giao diện người dùng của ứng dụng để giúp người dùng thao tác trực quan hơn

Ví dụ: thay vì yêu cầu người dùng nhấn một nút để gửi văn bản, bạn có thể muốn cho phép người dùng nhấn Return trên bàn phím:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

Thêm lựa chọn để người dùng chọn giữa chế độ sáng và tối

Nhiều người dùng có thể muốn chọn giữa giao diện sáng hoặc tối cho ứng dụng. Hãy cân nhắc vị trí hợp lý để đặt nút chuyển đổi này:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

Mẹo về câu lệnh và gỡ lỗi

• Nhận trợ giúp về câu lệnh: Nếu bạn gặp khó khăn khi giải thích cho tác nhân Tạo mẫu ứng dụng về điều bạn muốn, hãy thử yêu cầu Gemini cho Google giúp tinh chỉnh câu lệnh. Tìm hiểu thêm về cách đưa ra câu lệnh hiệu quả.
• Kiểm thử trên các thiết bị khác: Ở chế độ Nguyên mẫu, hãy nhấp vào Chia sẻ đường liên kết xem trước để kiểm thử ứng dụng trên các thiết bị khác.
• Sử dụng các công cụ tích hợp: Trong chế độ xem Mã, hãy sử dụng các tính năng gỡ lỗi và báo cáo tích hợp của Firebase Studio để kiểm tra, gỡ lỗi và kiểm tra ứng dụng của bạn.
• Bắt đầu từ những điều đơn giản: Làm việc trên từng tính năng một. Hãy cân nhắc việc bắt đầu với một bộ tính năng cơ bản trong nguyên mẫu, sau đó mở rộng khi những tính năng đó hoạt động như mong đợi.
• Mô tả lỗi: Nếu có nội dung không hoạt động, hãy mô tả hành vi hiện tại cho tác nhân Tạo mẫu ứng dụng, sau đó mô tả hành vi mà bạn muốn.
• Khôi phục khi cần: Khi tác nhân Tạo mẫu ứng dụng hiểu sai một câu lệnh hoặc gặp phải một vấn đề khó giải quyết, hãy nhấp vào nút Khôi phục để khôi phục về phiên bản trước đó của ứng dụng và thử lại bằng một câu lệnh khác.

6. (Không bắt buộc) Xuất bản ứng dụng

Không bắt buộc: Để sử dụng phiên bản ví dụ của ứng dụng từ thời điểm này, hãy tải các tệp này xuống rồi kéo vào ngăn Explorer (Trình khám phá) của Firebase Studio ở chế độ xem Code (Mã).

Sau khi thử nghiệm và hài lòng với ứng dụng, bạn có thể xuất bản ứng dụng lên web bằng Dịch vụ lưu trữ ứng dụng Firebase.

1. Nhấp vào Xuất bản để tạo một dự án Firebase mới và bắt đầu thiết lập tính năng Lưu trữ ứng dụng. Ngăn Phát hành ứng dụng sẽ xuất hiện.
2. Ở bước Dự án Firebase, hãy ghi lại tên của dự án Firebase đã được tạo cho bạn, sau đó nhấp vào Tiếp theo.
3. Trong bước Liên kết tài khoản thanh toán trên Cloud, hãy chọn một trong những cách sau:
   1. Chọn tài khoản thanh toán trên đám mây mà bạn muốn liên kết với dự án Firebase.
   2. Nếu bạn chưa có Tài khoản thanh toán trên Cloud hoặc muốn tạo một tài khoản mới, hãy nhấp vào Tạo Tài khoản thanh toán trên Cloud. Thao tác này sẽ mở văn bản Google Cloud, nơi bạn có thể tạo một tài khoản Cloud Billing tự thiết lập mới. Sau khi bạn tạo tài khoản, hãy quay lại Firebase Studio rồi chọn tài khoản đó trong danh sách Liên kết tài khoản thanh toán trên đám mây.
4. Nhấp vào Tiếp theo. Firebase Studio liên kết tài khoản thanh toán với dự án được liên kết với không gian làm việc của bạn, được tạo khi bạn tự động tạo khoá API Gemini hoặc khi bạn nhấp vào Xuất bản. Sau đó, Dịch vụ lưu trữ ứng dụng sẽ thiết lập một môi trường được quản lý hoàn toàn cho ứng dụng của bạn trong Google Cloud.
5. Nhấp vào Tạo bản phát hành đầu tiên. Firebase Studio ra mắt tính năng Lưu trữ ứng dụng. Quá trình này có thể mất tối đa 10 phút. Để tìm hiểu thêm về những gì diễn ra ở chế độ nền, hãy xem bài viết Quy trình tạo của Dịch vụ lưu trữ ứng dụng.
6. Khi quá trình phát hành hoàn tất, trang Tổng quan về ứng dụng sẽ xuất hiện cùng với một URL và thông tin chi tiết về ứng dụng dựa trên khả năng quan sát của Dịch vụ lưu trữ ứng dụng. Để sử dụng miền tuỳ chỉnh (chẳng hạn như example.com hoặc app.example.com) thay vì miền do Firebase tạo, bạn có thể thêm miền tuỳ chỉnh vào văn bản Firebase.

Để biết thêm thông tin về Dịch vụ lưu trữ ứng dụng, hãy xem bài viết Tìm hiểu về Dịch vụ lưu trữ ứng dụng và cách hoạt động của dịch vụ này.

7. (Không bắt buộc) Giám sát ứng dụng

Bảng điều khiển Tổng quan về ứng dụng của dịch vụ Lưu trữ ứng dụng cung cấp các chỉ số và thông tin chính về ứng dụng của bạn, cho phép bạn theo dõi hiệu suất của ứng dụng web bằng các công cụ giám sát tích hợp của dịch vụ Lưu trữ ứng dụng. Sau khi trang web của bạn ra mắt, bạn có thể truy cập vào trang tổng quan bằng cách nhấp vào Xuất bản. Trên bảng điều khiển này, bạn có thể:

• Nhấp vào Tạo bản phát hành công khai để phát hành một phiên bản mới của ứng dụng.
• Chia sẻ đường liên kết đến ứng dụng của bạn hoặc mở ứng dụng của bạn ngay trong phần Truy cập vào ứng dụng của bạn.
• Xem thông tin tóm tắt về hiệu suất của ứng dụng trong 7 ngày qua, bao gồm tổng số yêu cầu và trạng thái của đợt phát hành gần đây nhất. Nhấp vào Xem chi tiết để truy cập vào nhiều thông tin hơn nữa trong văn bản Firebase.
• Xem biểu đồ về số lượng yêu cầu mà ứng dụng của bạn đã nhận được trong 24 giờ qua, được chia theo mã trạng thái HTTP.

Nếu đóng bảng điều khiển Tổng quan về ứng dụng, bạn có thể mở lại bảng này bất cứ lúc nào bằng cách nhấp vào Xuất bản.

Tìm hiểu thêm về cách quản lý và giám sát việc triển khai Dịch vụ lưu trữ ứng dụng tại phần Quản lý việc triển khai và phát hành.

8. Kết luận

Xin chúc mừng! Bạn đã tạo thành công một ứng dụng bằng Firebase Studio. Bạn có thể thêm nhiều nội dung khác vào ứng dụng, chẳng hạn như từ điển mở rộng, nhiều ngôn ngữ hơn, âm thanh, ảnh động hoặc lựa chọn độ khó. Bạn có thể tiếp tục chơi với ứng dụng của mình hoặc tạo nội dung mới.

Tìm hiểu thêm:

• Phát triển, xuất bản và giám sát một ứng dụng web toàn diện bằng tác nhân Tạo mẫu ứng dụng
• Bắt đầu tạo mẫu cho ứng dụng mới bằng Firebase Studio
• Tìm hiểu thêm về không gian làm việc Firebase Studio