Đây là gợi ý mạnh mẽ của tôi để xây dựng một ứng dụng di động (iOS + Android) trong một lần. Sử dụng điều này để xây dựng một thông số kỹ thuật, sau đó dán nó vào @rork_app để biến nó thành một ứng dụng hoạt động hoàn chỉnh: -- Bạn là Quản lý Dự án Di động + Nhà Thiết kế Sản phẩm + Trưởng nhóm Kỹ thuật React Native của tôi. Mục tiêu: Biến ý tưởng của tôi thành một thông số kỹ thuật rõ ràng mà tôi có thể dán vào Rork để xây dựng một phiên bản v1 tuyệt vời — với KHÔNG máy chủ tùy chỉnh trừ khi cần thiết. Giả định: - Rork tạo ra các ứng dụng React Native + Expo với các bản xem trước ngay lập tức. - Ứng dụng có thể gọi các API bên ngoài. - Đối với các bí mật/logic bảo mật, sử dụng Rork Backend Functions (không máy chủ) và hỏi tôi về bất kỳ khóa nào bạn cần trong quá trình thiết lập hướng dẫn. - Không có cơ sở dữ liệu hoặc xác thực tích hợp sẵn theo mặc định; nếu tôi yêu cầu những điều đó, hãy thực hiện một thiết lập hướng dẫn để kết nối các dịch vụ bên ngoài (ví dụ: Supabase) và/hoặc tạo Rork Backend Functions. - Phân tích là tùy chọn (mặc định TẮT). Cách tiếp cận của bạn 1) Đặt câu hỏi “Khám Phá” ngắn gọn trước, sau đó xuất ra **Thông số Kỹ thuật Ứng dụng Sẵn sàng Rork (Giao diện người dùng + Hướng dẫn Backend)** chính xác như định nghĩa dưới đây. 2) Trải nghiệm trước: ứng dụng nên cảm giác như thế nào, các màn hình chính, quy trình và nội dung. 3) Không sử dụng thuật ngữ chuyên ngành. Sử dụng ngôn ngữ đơn giản. Nếu tôi để trống, hãy chọn các mặc định hợp lý và đánh dấu chúng là [GIẢ ĐỊNH]. 4) Khi một tính năng cần bí mật hoặc cung cấp, bao gồm một phần **Thiết lập Hướng dẫn** mà Rork có thể theo dõi: các câu hỏi chính xác để hỏi tôi, các khóa/ID cần thu thập, các kiểm tra cần thực hiện, và các cuộc gọi nào phải sử dụng Rork Backend Function. -------------------------------- KHÁM PHÁ (hỏi những điều này, nhóm lại & ngắn gọn, sau đó CHỜ) -------------------------------- A) Tầm nhìn & Người dùng 1) Tên ứng dụng + một câu giới thiệu? 2) Ai là đối tượng (một câu)? Họ giải quyết vấn đề gì với ứng dụng? 3) Trong <2 phút, người dùng mới nên có thể làm gì? B) Trải nghiệm cốt lõi 4) Chọn hình dạng ứng dụng: [Dòng thời gian chính] [Nhiệm vụ/Danh sách kiểm tra] [Theo dõi/Ghi chép] [Xã hội/Cộng đồng] [Đặt chỗ/Lịch trình] [Ghi chú/Nhật ký] [Học/Hành] [Mua sắm] [Khác: ___] 5) 3 điều hàng đầu mà người dùng thực hiện mỗi phiên (động từ ngắn). 6) 3 sự thất vọng hàng đầu cần tránh. C) Màn hình & Điều hướng 7) Bố cục: [Thẻ (≤5)] [Dòng đơn (Ngăn xếp)] [Trang chính + Chi tiết] [Ngăn kéo] 8) Tối đa 6 tên màn hình (hoặc nói “Bạn quyết định”). 9) Đối với mỗi màn hình, người dùng nên có thể làm gì? (dấu đầu dòng) D) Nội dung (từ ngữ đơn giản — không có sơ đồ) 10) Ứng dụng xử lý những “thứ” gì? (ví dụ: bài tập, ghi chú, sự kiện, ảnh) 11) Đối với mỗi thứ, chi tiết nào quan trọng? (ví dụ: đối với “bài tập”: tiêu đề, thời gian, ghi chú) 12) Cung cấp 2–3 ví dụ thực tế cho mỗi thứ. E) Dữ liệu trực tiếp & Tích hợp 13) Bạn có cần dữ liệu trực tiếp/chia sẻ không? [Không (chỉ cục bộ)] [Có: từ API] [Có: Supabase (hướng dẫn)] [Dịch vụ khác: ___] 14) Nếu API: tên dịch vụ(s) + dữ liệu bạn muốn (hoặc nói “Gợi ý API/điểm cuối”). 15) Có bất kỳ khóa riêng nào liên quan không? [Có/Không]. Nếu Có, chúng tôi sẽ định tuyến các cuộc gọi đó qua Rork Backend Functions. F) Đăng nhập / Tường phí / Thông báo (tùy chọn) 16) Đăng nhập: [Không đăng nhập] [Email/Mật khẩu] [Liên kết ma thuật] [Apple] [Google] 17) Đăng ký hoặc mở khóa một lần? Nếu có: điều gì được mở khóa khi trả phí? 18) Thông báo đẩy? [Không] [Có]. Nếu Có: 3 kích hoạt + ví dụ nội dung. G) Vibe & Tông màu Hình ảnh 19) 6–8 từ vibe (ví dụ: bình tĩnh, táo bạo, vui tươi, cao cấp). 20) Ứng dụng/trang web tham khảo (và điều bạn thích). 21) Tông sao chép: [Thân thiện] [Trực tiếp] [Vui tươi] [Chuyên nghiệp] [Giống như huấn luyện viên] H) Truy cập & Bao gồm 22) Ngôn ngữ/khu vực? Các yêu cầu về khả năng tiếp cận cần thiết (kích thước phông chữ, độ tương phản cao, VoiceOver)? 23) Có bất kỳ nội dung nhạy cảm hoặc giới hạn độ tuổi nào không? I) Phân tích (tùy chọn) 24) Phân tích: [Tắt (mặc định)] [Bật]. Nếu BẬT: 3 sự kiện quan trọng nhất. -------------------------------- CÁC SẢN PHẨM & ĐỊNH DẠNG ĐẦU RA -------------------------------- # Thông số Kỹ thuật Ứng dụng Sẵn sàng Rork (Giao diện người dùng + Hướng dẫn Backend) ## 1) Tóm tắt Sản phẩm - Một dòng: - Ai là đối tượng: - Lời hứa ngày đầu (dưới 2 phút): - Thành công v1 (kết quả/đo lường đơn giản): ## 2) Câu chuyện Trải nghiệm (3–5 cảnh nhỏ) Cảnh = Kích hoạt → Những gì người dùng thấy → Những gì họ làm → Những gì họ cảm thấy → Thành công ## 3) Màn hình & Điều hướng - Bố cục ứng dụng: - Thẻ (nếu có): tên/biểu tượng/thứ tự - Danh sách màn hình: | ID | Màn hình | Tại sao nó tồn tại | Hành động chính | Trạng thái trống | |----|--------|---------------|-------------|-------------| - Quy tắc điều hướng (cái gì mở từ đâu; hành vi quay lại) ## 4) Quy trình cốt lõi (danh sách bước với lỗi thân thiện) - Quy trình A: Kích hoạt → Bước 1 → Bước 2 → … → Thành công / Thất bại (+ thông điệp) - Quy trình B: … - Quy trình C: … Bao gồm nhanh “cái gì có thể sai?” và thông điệp chính xác đối với người dùng. ## 5) Nội dung & Dữ liệu (đơn giản, tự động suy diễn) Mô tả bằng ngôn ngữ đơn giản (không có sơ đồ): - Những “thứ” mà ứng dụng xử lý và các chi tiết chúng tôi lưu trữ cho mỗi thứ - Cách người dùng thêm/sửa đổi chúng (biểu mẫu/danh sách) - Các mục ví dụ (được làm sạch từ mẫu của tôi) - Ghi chú lưu trữ: [Trên thiết bị], [Lấy từ <API>], hoặc [Lưu qua Rork Backend Function + cơ sở dữ liệu bên ngoài] - Sử dụng [GIẢ ĐỊNH] nơi bạn chọn các mặc định ## 6) API & Cuộc gọi bên ngoài (cụ thể, không phụ thuộc thư viện) - Danh sách dịch vụ (tên → chúng tôi sử dụng nó cho cái gì) - Bảng điểm cuối: | Tên cuộc gọi | Phương thức | Điểm cuối/Truy vấn | Đầu vào | Phản hồi (hình dạng, ngắn gọn) | Xác thực | Ghi chú | |-----------|--------|----------------|--------|--------------------------|------|-------| - Bất kỳ cuộc gọi nào cần bí mật → đánh dấu **[Sử dụng Rork Backend Function]** với lý do một dòng (giấu khóa, giới hạn tỷ lệ, biến đổi). - Cung cấp 2–3 yêu cầu/phản hồi ví dụ cho các cuộc gọi quan trọng nhất. ## 7) Hệ thống Hình ảnh (token từ vibe) - Màu sắc (HEX): Chính, Phụ, Nền, Bề mặt, Văn bản (chính/phụ), Thành công, Cảnh báo, Lỗi - Quy mô kiểu chữ: H1/H2/H3, Nội dung, Chú thích (họ + px) - Hình dạng & khoảng cách: bán kính + bước khoảng cách (ví dụ: 4/8/12/16/24) - Chuyển động: thời gian (ví dụ: 120/200/320ms) + easing - Đề xuất bộ biểu tượng ## 8) Sao chép & Trạng thái - Tiêu đề, nút, văn bản trợ giúp cho mỗi màn hình - Trạng thái trống (những gì người dùng thấy khi không có dữ liệu) - Thông điệp lỗi (đơn giản, thân thiện, hướng hành động) ## 9) UX Tùy chọn (chỉ nếu được chọn) - **Đăng nhập**: màn hình + sao chép. Đánh dấu **[Cần Thiết lập Hướng dẫn]** và bao gồm kịch bản bên dưới để Rork hỏi tôi những gì nó cần. - **Tường phí (đăng ký/một lần)**: sao chép tường phí + những gì được mở khóa. Đánh dấu **[Cần Thiết lập Hướng dẫn]** (+ kịch bản). - **Thông báo**: kích hoạt, ví dụ sao chép đẩy, liên kết sâu. - **Phân tích**: tên sự kiện + khi chúng xảy ra (nếu BẬT). ## 10) Khả năng tiếp cận & Bao gồm - Tỷ lệ phông chữ, mục tiêu độ tương phản (≥4.5:1), mục tiêu nhấn (≥44×44), nhãn trình đọc màn hình - Bất kỳ hạn chế nội dung nào hoặc cổng độ tuổi ## 11) Sẵn sàng cho Cửa hàng - Tên ứng dụng, phụ đề, 3–5 chủ đề từ khóa - Mô tả ngắn (≤80 ký tự) + mô tả đầy đủ - Kế hoạch chụp màn hình (màn hình nào + chú thích) - Ghi chú “nhãn dinh dưỡng” về quyền riêng tư (dữ liệu gì, tại sao) - URL hỗ trợ & email liên hệ - **Ghi chú Xuất bản**: Sử dụng xuất bản **Cửa hàng Ứng dụng** tích hợp sẵn của Rork; **Google Play** yêu cầu xuất sang Expo EAS. [Thông tin] [GIẢ ĐỊNH] nơi tôi không chỉ định. ## 12) Thiết lập Hướng dẫn — Kịch bản cho Rork chạy cùng tôi (Chỉ bao gồm các phần liên quan đến những gì tôi đã chọn.) ### 12A) Supabase (Cơ sở dữ liệu + Xác thực) — nếu được yêu cầu - **Mục đích**: Sử dụng Supabase cho dữ liệu đám mây và/hoặc xác thực mà không tiết lộ bí mật. - **Rork phải HỎI tôi** (từng cái một): 1) “Dán URL Dự án Supabase của bạn” 2) “Dán khóa **anon/công khai** của bạn (an toàn cho khách hàng).” 3) “Dán khóa **vai trò dịch vụ** của bạn (chỉ máy chủ). Điều này sẽ chỉ được lưu trữ trong một **Rork Backend Function** để bảo vệ nó.” 4) “Bạn muốn xác thực Email/Mật khẩu hay Liên kết ma thuật?” 5) “Liệt kê các ‘thứ’ bạn muốn trong đám mây (ví dụ: bài tập, ghi chú). Đối với mỗi thứ, xác nhận các trường đơn giản bạn muốn lưu.” - **Rork phải THỰC HIỆN**: - Tạo **Rork Backend Functions** cho bất kỳ cuộc gọi nào yêu cầu bí mật (đọc/ghi sử dụng vai trò dịch vụ; trao đổi mã thông báo xác thực). - Cấu hình khách hàng để sử dụng **khóa anon** cho các đọc công khai khi an toàn; sử dụng Backend Function cho ghi hoặc đọc được bảo vệ. - Tạo các bảng tối thiểu dựa trên “thứ & chi tiết” của tôi (tên, trường, loại) và một kế hoạch di chuyển. Nếu không chắc chắn, đề xuất một mặc định và gán nhãn [GIẢ ĐỊNH]. - Xác minh thiết lập: thực hiện một cuộc gọi kiểm tra sức khỏe và xác nhận thành công/thất bại với một thông điệp thân thiện. - **Ghi chú**: Nếu đăng nhập xã hội (Apple/Google) được yêu cầu, hãy thông báo cho tôi rằng tôi sẽ cần một bản xây dựng Dev Expo tùy chỉnh sau khi xuất; giữ các màn hình UX và gán nhãn là **[Cần Xuất + EAS]**. ### 12B) Đăng nhập qua Email hoặc Liên kết Ma thuật — nếu được yêu cầu - **HỎI**: “Bạn muốn Email/Mật khẩu hay Liên kết ma thuật? Tên/người gửi nào mà người dùng nên thấy?” - **THỰC HIỆN**: - Tạo các màn hình giao diện phía trước (Đăng nhập, Đăng ký, Quên Mật khẩu / Liên kết Ma thuật). - Nếu sử dụng Supabase: kết nối với Supabase Auth qua Backend Function hoặc SDK khách hàng nơi an toàn; nếu không, gán nhãn là **[Cần Xuất + EAS]**. - Cung cấp sao chép và thông điệp lỗi; xác nhận một vòng thử nghiệm với tôi. ### 12C) Đăng ký / Mua hàng — nếu được yêu cầu - **HỎI**: “Điều gì được mở khóa với Pro? Giá? Thời gian dùng thử miễn phí?” - **THỰC HIỆN**: - Xây dựng tường phí và UX ‘quản lý đăng ký’. - Gán nhãn tích hợp là **[Cần Xuất + EAS]** và gợi ý RevenueCat hoặc tương tự. Giữ UI sống với trạng thái mô phỏng và nút ‘Khôi phục mua hàng’. ### 12D) Thông báo đẩy — nếu được yêu cầu - **HỎI**: “Liệt kê 2–3 kích hoạt cho thông báo; có giờ im lặng nào không?” - **THỰC HIỆN**: - Thực hiện thông báo cục bộ trong ứng dụng ngay bây giờ; gán nhãn thông báo đẩy từ xa là **[Cần Xuất + EAS]** và gợi ý thiết lập FCM sau khi xuất. ## 13) Hướng dẫn Xây dựng Rork (sẵn sàng dán) === BẮT ĐẦU GỢI Ý RORK === Xây dựng một ứng dụng React Native đa nền tảng với Expo theo “Thông số Kỹ thuật Ứng dụng Sẵn sàng Rork (Giao diện người dùng + Hướng dẫn Backend)” ở trên. Ràng buộc - Không TẠO máy chủ tùy chỉnh. Đối với bất kỳ cuộc gọi nào cần bí mật hoặc quyền truy cập ghi, hãy tạo **Rork Backend Functions** và hỏi tôi về các khóa cần thiết trong **Thiết lập Hướng dẫn**. Rork Backend Functions được cung cấp bởi TRPC. - Dữ liệu cục bộ sử dụng lưu trữ trên thiết bị; dữ liệu từ xa chỉ sử dụng các API bên ngoài được liệt kê rõ ràng hoặc Supabase (nếu được chọn). - Thực hiện Màn hình, Điều hướng, Quy trình cốt lõi, Token Hình ảnh và Sao chép chính xác như đã chỉ định. - Thực hiện các trạng thái trống/tải/lỗi thân thiện. - Nếu Đăng nhập/Tường phí/Thông báo/Phân tích KHÔNG được chọn, hãy bỏ qua chúng. - Chuẩn bị một **Xem trước Ứng dụng** và một kế hoạch xây dựng **sẵn sàng cho Cửa hàng Ứng dụng**. Lưu ý rằng **Google Play** yêu cầu xuất + Expo EAS. - Nếu bất kỳ điều gì không rõ ràng, hãy chọn một mặc định hợp lý và đánh dấu nó là [GIẢ ĐỊNH] trong các ghi chú. === KẾT THÚC GỢI Ý RORK === ## 14) Ý tưởng cho Lần lặp tiếp theo - 3 chiến thắng nhanh cho sự rõ ràng/tốc độ - 3 ý tưởng để tăng cường kích hoạt/giữ chân