Hook
Kho prompt và source code sẵn dùng cho các dự án Next.js + Supabase — bởi Ông Chú Vibe Coding.
More breakout videos from this creator.
Ok nè. Thì video này thì mình sẽ hướng dẫn cho anh em từ A đến Z để anh em có thể xây dựng ra một cái mini app để quản lý gia phả. Mình nghĩ rằng là đây là một trong những cái ứng dụng mà nó khá là hữu ích. Cũng xuất phát từ cái ý tưởng là bởi vì bên nội bên ngoại mình á thì có rất là nhiều bà con và có rất là nhiều cái ngày quan trọng. Mình cần là giống như là mình cần biết được rằng là ai là người dòng họ của mình rồi là quản lý gia phả thì đời của mình và đời con cháu của mình. Thì cách đây nhiều thế hệ trước thì cái công nghệ nó chưa có phát triển. Thì dựa vào cái ý tưởng đó thì mình sẽ hướng dẫn cho các bạn. Ok thì bây giờ thì đầu tiên thì mình sẽ dùng Cloud để mình thảo luận ý tưởng với nó. Tại vì bản thân mình hay các bạn thì chúng ta cũng sẽ chưa có biết được rằng là cái định hình định hình cái công giống như là những cái page, những cái mà chúng ta sẽ phải làm, hình dung nó như thế nào thì buộc lòng mà chúng ta phải dùng một Agent chatbot. Mình thì mình đang dùng Cloud ha. Rồi, ở đây thì mình sẽ dùng Cloud để mình thảo luận và phát họa ý tưởng. Sau đó mình sẽ dùng Concrete. Concrete này thì mình sẽ dựng ra cái UI và sau đó mình sẽ dùng luôn Cloud để mình code ha các bạn ha. Rồi. Ở đây thì đầu tiên thì mình sẽ chúng ta sẽ nói chuyện với nó rằng là tôi đang muốn phát triển một ứng dụng. Nếu mà làm ứng dụng này thì khả năng mình sẽ dùng ngôn ngữ lập trình là React nha các bạn. NextJS thì nó cũng ok đó nhưng mà nó sẽ không có giống như là nó sẽ không có mượt mà giống như là React đâu. Ứng dụng về gia phả quản lý toàn bộ gia đình, toàn bộ gia phả thôi. Cái này thì mình ví dụ như là tại vì là mình chưa định hình được là ví dụ như là nó có bao nhiêu cái tính năng với lại bao nhiêu cái page đúng không? Thì mình sẽ bắt đầu mình tham khảo nó thôi để bắt đầu nó sẽ trả ngược lại cho mình. Thì dựa vào cái đó thì chúng ta mới giống như là chúng ta mới phân nó ra ha. Rồi, tôi đang muốn phát triển một cái ứng dụng về gia phả. Đó. Ở đây thì nó sẽ cho mình thấy nè, ứng dụng gia phả rất hay rất phù hợp với người Việt quan tâm về văn hóa gia đình cũng như đóng gói sản phẩm mà anh đang theo đuổi. Tư vấn kỹ hơn mô hình sản phẩm. Một cái web app riêng cho từng dòng họ mỗi gia đình tự setup dữ liệu private giống như là kiểu search hay một nền tảng chung, nhiều dòng họ dùng chung có tính liên kết và tìm kiếm chéo. Hay đơn giản chỉ là một source code cộng ebook hướng dẫn bán một lần. Cái này thì tại vì bản chất là mình hay làm việc với nó về cái mô hình sản phẩm. Thì cái này nó gợi ý tức là nó biết hơn mình hay đóng gói sản phẩm. Rồi, cái quan trọng nè. Tính năng cốt lõi mình hình dung thứ nhất là cái cây phả hệ dạng visual, kéo thả zoom, sơ đồ cây. Thông tin thành viên, ngày sinh, mất, tiểu sử, hình ảnh, mộ phần. Ghi chú sự kiện dòng họ, giỗ chạp, nhắc lịch. Chia sẻ cho nhiều thành viên dòng họ đóng góp và chỉnh sửa. Xuất bản in ấn, sách gia phả hay là cái poster cây phả hệ. Đối tượng là cái người lớn tuổi trong dòng họ. Cái UI là cực kỳ đơn giản hay là người trẻ quản lý thay. Anh muốn triển khai 3 cái ở câu 1. Dự tính là vẫn là NextJS, Supabase như mọi dự án khác đúng không? Nếu em nghe toàn bộ sơ đồ ý tưởng anh thì giúp anh phát họa bản kỹ hơn về mô hình kinh doanh. Tức là ở đây thì mình sẽ không có cái này là hai cái này là mình đang hướng dẫn cho các bạn là chúng ta sẽ tự build ra một cái ứng dụng để chúng ta làm. Cho nên ở đây thì write code thì chúng ta có rất là nhiều cách để các bạn có thể write code. Các bạn có thể write bằng AI Studio, các bạn có thể write bằng Cloud, các bạn có thể write bằng Anti Clarity. Thì ở đây thì nếu như mà bạn nào mà các bạn write giống như là các bạn write các bạn có tài khoản của Cloud thì các bạn có thể write bằng Cloud ha. Rồi ok. Thì nó có nhiều cách lắm các bạn. Để xem xíu nữa thì mình sẽ xem ở đâu phù hợp thì mình sẽ hướng dẫn cho các bạn thôi ha. Cũng không nhất thiết phải quan trọng hóa về công cụ đâu. Rồi, bây giờ thì mình sẽ đào sâu hơn về cái tính năng với lại những cái màn hình là các page đó và cái luồng hoạt động của nó. Đó. Bây giờ thì mình muốn hiểu hơn về cái luồng anh muốn hiểu rõ hơn về luồng hoạt động và các page cần thiết. Rồi. Lúc nãy thì nó cũng có nói với chúng ta là cái điều quan trọng là cái này nó cũng dành cho cái người lớn tuổi cho nên là chúng ta phải có những cái tính năng giống như là phóng to tại vì người lớn tuổi là mắt họ mờ rồi đó. Rồi là nó đơn giản chứ không phải là đi theo cái dạng như web tương lai các bạn hình dung không? Đó tại vì là mỗi cái sản phẩm thì chúng ta thiết kế ra nó phải phù hợp cái người sử dụng chứ không phải là mình như thế nào thì mình sẽ làm như vậy. No. Rồi. Ở đây thì mình cũng sẽ hỏi nó đơn giản thôi các bạn. Trong cái việc mà chúng ta làm với AI đặc biệt là những cái bạn mới, các bạn cần có những cái key là ví dụ như về ứng dụng. Thì về bên trong thì ví dụ như các bạn write code thì thực sự là chúng ta write, write ở đây nó có nhiều cái cấp độ write các bạn. Nếu như mà các bạn write mà giống như là write để các bạn sử dụng giống như là mấy cái này mấy cái mini app này nè mình sử dụng chơi cho dòng gia đình dòng họ của mình á thì đôi khi mà bây giờ ví dụ như là chúng ta đào sâu quá thì bản chất chúng ta cũng không có hiểu được. Nhưng mà chúng ta sẽ biết được rằng là cái cách hoạt động của nó như thế nào các bạn ha. Rồi được anh. Em phát thảo luồng hoạt động và cái điều quan trọng nhất là các bạn cần biết là gì? Để các bạn thực sự muốn làm tốt, hiểu rõ thì các bạn ngoài những cái câu hỏi, câu hỏi thì chúng ta cũng cần đó chính là gì? Đó chính là đọc, đọc là một trong những cái mà mình nghĩ rất rất quan trọng. Rồi. Thì ở đây thì nó cho mình nè. Đầu tiên đó chính là cái luồng hoạt động chính nè. Mỗi dòng họ thì có thể là cái này là nó đang gợi ý cho mình là sẽ có nhiều người sử dụng chung á. Nó sẽ phức tạp hơn là chỉ có một mình nhưng mà không sao tại vì bản chất nó cũng giống như nhau à. Rồi luồng hoạt động chính, cái của user là luồng đăng ký tạo dòng họ. Đó, họ tên, nguyên quán. Thêm bản thân làm gốc, mời thành viên khác qua link hoặc số điện thoại. Hoạt động là chúng ta xây dựng cái cây phả hệ. Rồi chọn một thành viên là chúng ta bấm thêm phả hệ. Thì cái việc thì là các bạn thực sự là về cái app hay là những cái web thì mình nghĩ rằng là toàn bộ mọi người không ai còn xa lạ gì nó nữa. Tức là chúng ta đã sử dụng những cái app khác chúng ta quen rồi đó. Thì khi mà các bạn đọc các bạn có thể tự tưởng tượng được ha. Đó. Cái này thì bản chất là xíu nữa mình sẽ vẽ UI lên thì nó số hóa cái mấy cái luồng này thôi, nó số hóa mấy cái page này thôi. Rồi, nhập thông tin thành viên luôn vẽ lại. Đây là vòng lặp chính. Người dùng sẽ lặp lại hàng chục hàng trăm lần để dựng cả dòng họ. Rồi luồng xem và khám phá vào cây zoom, click từng người xem chi tiết tiểu sử con cháu nhảy qua nhánh khác, tìm hiểu theo tên. Luồng cộng tác, rất nhiều người cùng sửa. Admin mời thành viên, thành viên được quyền gán xem chỉnh sửa nhánh của mình. Đề xuất chỉnh sửa, admin duyệt, tránh loạn dữ liệu. Luồng sự kiện, giỗ chạp, tính năng giữ chân người dùng quay lại. Mình nghĩ rằng đây cũng là một trong những cái tính năng nó khá là hay. Tại vì là bản thân của gia đình mình cũng vậy thôi. Từ nội đến ngoại thì mình thấy được rằng là thực sự là gần tới ngày thì là người lớn họ mới thông báo là cái giỗ thì con cháu cũng không có follow được, cũng không có để ý và thậm chí là cũng hơi hợt trong cái chuyện này. Đó. Luồng xuất bản, chọn phạm vi cả nhánh cả dòng họ. Cái này là nó xuất phản ra cây á. Thì trong quá trình phát triển sản phẩm các bạn thì thực ra AI thì nó cũng sẽ gợi ý cho chúng ta là cơ bản thôi các bạn. Còn cái linh hồn của cái sản phẩm nó tùy thuộc vào cái sự cảm nhận của mỗi người và thời điểm hiện tại thì nó sẽ thuận lợi hơn với chúng ta là chúng ta có thể gọi là biến tấu độ chế, nói chung là theo cái cảm nhận của chúng ta, theo cái tâm sinh quan của chúng ta ha. Rồi, ở đây thì danh sách page cần thiết nè. Đây là nhóm page nè, ví dụ như là một cái xẹt này là một cái page đó các bạn. Ví dụ như là login hay là đăng ký nè, rồi nhóm core quan trọng nè. Thì tại vì ở đây là mình là giống như là nó đang tư vấn cho mình là xây dựng cái app để kinh doanh cho nên các bạn sẽ thấy là cái cây thư mục của nó family sexy nè. Ok. Vậy thì bây giờ mình đã có được là một cái bức tranh cơ bản rồi các bạn. Thì bởi vì vốn dĩ nó là write code mà, nó dành cho những cái dành cho những người như chúng ta là không có rành quá nhiều kiến thức và chúng ta sẽ sáng tạo theo cái cách hiểu của chúng ta thôi. Đó cho nên là ở tới đây là nó quá ok rồi. Có thêm nữa thì chúng ta cũng không tưởng tượng ra nổi, cũng không có hiểu được. Chỉ có điều là chúng ta sẽ tiến hành chúng ta bắt đầu thôi. Rồi. Tiếp theo thì bây giờ thì mình cần nó mình cần cái form để vẽ UI ha. Cái con Cloud của mình thì nó cũng vẽ được nhưng mà thực ra Cloud thì cái token nó nó tốn lắm. Nếu như mà xài tức là nếu như các bạn mình hướng dẫn các bạn thì mình sẽ hướng dẫn cho các bạn những cái công cụ nó giống như là nó có sẵn và nó gần như nó free á. Ok. Thì ở đây thì mình sẽ cần là bây giờ mình cần vẽ UX cho toàn bộ. Đó bạn cho mình từng form để mình cho Stitch để vẽ UX. Rồi. Ở đây mình đang nói với nó đó chính là gì? Là cái UI và UX là về giao diện và cái trải nghiệm người dùng á. Page là một cái trang như vậy. Đó. Rồi form là câu lệnh để nó câu lệnh để mình điều khiển để mình làm. Ở đây thì nó sẽ cho mình cái page đầu tiên là thiết kế nè. Thì mình sẽ các bạn vào Concrete cho mình ha. Ở đây thì chúng ta sẽ làm UI, cái này thì chắc sẽ dùng trên ứng dụng nhiều cho nên chúng ta sẽ dùng ứng dụng. Rồi. Thì ở đây thì các bạn bắt đầu các bạn cho Concrete này nó triển khai ha. Rồi ok, ở đây thì mình sẽ cho Concrete nó xuống dưới này, mình sẽ chia ra là hai màn hình nha các bạn. Màu sắc nó là nó cũng khá là cổ điển ha. Rồi, ở đây là cái page đăng ký nè. Đó thì các bạn chỉ cần sao chép dán vào. Cái việc làm này á thì dành cho những bạn mới là nó rất là thuận lợi, nó thuận lợi bởi vì sao? Bởi vì là các bạn sẽ các bạn sẽ giống như là hình dung ra được. Các bạn trước khi mà các bạn làm các bạn hình dung ra được cái bước đi những cái luồng cái ứng dụng. Đó mình nghĩ rằng là nó cũng ấy thôi, nó cũng cũng dễ thôi các bạn. Đó. Cái việc đầu tiên là vô thì mình sẽ đăng ký đăng nhập đó. Rồi. Đây là một trong những cái AI ứng dụng, cái này là ứng dụng vào cuộc sống. Bất kỳ ai cũng có thể tạo ra một cái mini app dành cho dòng họ của mình ha. Nó có nhiều cái tính năng ứng dụng lắm các bạn. Ở đây thì Stitch nó sẽ vẽ ra cho các bạn là một cái file HTML. Sau này chúng ta sẽ dùng cái file HTML này để chúng ta giống như chúng ta sẽ dùng những cái công cụ write, ví dụ như AI Studio hay là Cloud Coach, hoặc là Anti Clarity thì nó sẽ lẹ hơn. Đó. Thông tin của bạn ok là cây gia phả ok. Thực ra thì về cái này á mấy cái này nó cũng là những cái dữ liệu nhạy cảm các bạn. Thì mình nghĩ là mình không làm kinh doanh mấy cái này đâu. Mình nghĩ rằng là ví dụ như mà bạn trẻ nào hoặc anh chị nào mà mình quan tâm tới giống như là mình quan tâm tới dòng họ thì mình sẽ làm cho dòng họ mình một cái. Chúng ta sẽ trực tiếp quản lý. Sau này đời con cháu của mình nó sẽ rất là dễ. Hoặc là về người thân thì chúng ta cũng sẽ rất là dễ để chúng ta quản lý. Thực ra là sao mà mình muốn hướng dẫn cho các bạn cái này á? Tại vì á nếu như mà mình sử dụng cái của người ta các bạn, đầu tiên đó là thông tin nhạy cảm các bạn. Giống như là cả gia tộc nó sẽ nó đi nó đi bán nó lấy tiền luôn. Với lại là mỗi cây mỗi hoa mỗi nhà mỗi cảnh để chúng ta có thể tự do sáng tạo. Chúng ta sẽ tự do sáng tạo cái chúng ta có thể tự do chúng ta sáng tạo. Thấy nó bắt đầu nó định hình rồi đó các bạn thấy chưa? Đó. Thì sau khi mà chúng ta vẽ cái mẫu xong thì là nó sẽ có ra giống như là cơ sở đúng không? Thực ra là không phải là như vậy là xong đâu nha các bạn. Có nghĩa là khi mà các bạn làm á thì các bạn sẽ sửa chữa nó mỗi ngày. Tại vì theo cái cảm nhận theo cái luồng hoạt động thực tế. Các bạn thấy công nghệ giờ nó sướng không? Cái này thì nó giống như là cái kim chỉ nam, nó sẽ cho các bạn thấy được rằng là toàn bộ cái việc làm kim chỉ nam này á thì nó có rất nhiều