thanhdigi
20-12-2023, 04:38 PM
Zalo Mini App (https://digibird.co/zalo-mini-app/) là một nền tảng mới mẻ và tiềm năng cho các ứng dụng web. Nếu bạn đã quen với Next.js, một framework phổ biến cho React, bạn sẽ thấy rất dễ dàng để chuyển đổi các dự án của bạn sang Zalo Mini App. Bạn sẽ được hưởng các ưu điểm của Next.js và Zalo Mini App mà không cần phải học lại từ đầu.
1. Next.js là gì?
Next.js là một framework cho React, một thư viện JavaScript để xây dựng giao diện người dùng. Next.js cho phép bạn tạo các ứng dụng web front-end mạnh mẽ và linh hoạt. Next.js là một dự án mã nguồn mở với nhiều tính năng đặc biệt như render trên server (SSR) và tạo các trang web tĩnh. Next.js không làm thay đổi React, mà chỉ bổ sung thêm các chức năng cho nó. Khi bạn sử dụng SSR, máy chủ có thể truy xuất và xử lý dữ liệu cần thiết, cũng như JavaScript, để tạo ra trang web. Trang web sau đó được gửi về trình duyệt và hiển thị ngay tức thì. SSR giúp các trang web tải nhanh hơn và cải thiện trải nghiệm người dùng với khả năng phản hồi cao hơn.
Ngoài ra, SSR cũng có ích cho SEO. Giúp trang web của bạn có thứ hạng cao hơn trên các công cụ tìm kiếm. SSR làm cho các trang web dễ dàng được quét bởi các SEO trackers do chúng có tốc độ tải nhanh và nhiều nội dung có thể được phân tích.
2. Cách chuyển đổi từ dự án Next.js thành Zalo Mini App
Đầu tiên, xin nhắc bạn rằng:
Khi bạn muốn chuyển web app hiện tại bằng Next.js sang Zalo Mini App, bạn phải chú ý rằng các tính năng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG) sẽ không áp dụng được.
2.1. Tổng quan
Bạn cần làm theo các bước sau đây để chuyển ứng dụng Next.js sang Zalo Mini App:
Xuất ứng dụng Next.js ra static site
Tạo Zalo Mini App và kết nối với App ID của bạn.
Cài đặt app-config.json
Chuyển hình ảnh và các resources nặng lên CDN
Deploy và Publish
2.2. Xuất ứng dụng Next.js ra static site
Khi bạn xuất Next.js thành static site, bạn sẽ có nhiều file *.html, mỗi file chứa HTML + CSS và JS cần thiết để render 1 page hoàn chỉnh, theo tính năng SSG đặc biệt của Next.js.
Việc chuyển đổi Next.js sang Mini App có nhiều thách thức. Bởi vì Zalo Mini App có kiến trúc giống với các thư viện/framework SPA như React/Vue.js hơn: một root element được Zalo Mini App cấp sẵn trong index.html mà Zalo Mini App tự tạo ra cho mỗi ứng dụng. Nhà phát triển sẽ render app của mình vào root element đó bằng cách khai báo các resources trong app-config.json, bao gồm các array listSyncJS, listAsyncJS và listCSS. Zalo Mini App không sử dụng các file *.html mà Next.js tạo ra khi xuất.
https://lh3.googleusercontent.com/R6cJRjeLWLiN9Rvz BFBrUtQ2-thM6GilpnM7GszZnxrmMeDN_4M0LD6E7o4TvSUuEUWCeUpvEx6 OB3TWRsPsjLcP_AlHkYNdyGMc_ucGSJunwRYTNz-5ACq_Ij_rDprgXu7AqxdTLKHL1VR_MBzZcEE
Trước khi xây dựng và xuất web app Next.js của bạn, bạn cần thiết lập basepath trong next.config.js. Bạn có thể tham khảo ví dụ sau:
https://digibird.io/wp-content/uploads/2023/09/image-39.png
Sau đó, bạn chỉ cần chạy next build là xong.
2.3. Tạo Zalo Mini App và kết nối với App ID của bạn.
Đây là bước dễ dàng nhất vì bạn chỉ cần sử dụng ZMP CLI và nhập một số lệnh: app idhttps://digibird.io/wp-content/uploads/2023/09/image-40.png
Tiếp theo, bạn nhập Zalo Mini App ID của bạn và quét QR để đăng nhập bằng ứng dụng Zalo.
2.4. Cấu hình app-config.json
Đây là bước quan trọng nhất trong quá trình chuyển đổi. Bạn cần chuyển đổi các file CSS/JS trong index.html (kết quả của Next.js khi xuất ra static sites) sang app-config.json (được sử dụng bởi index.html của Zalo Mini App khi chạy trên Zalo).https://lh6.googleusercontent.com/C9kF5DsM9b 1BtE7Yc4DumoPj0im2ahHBefugkqmM-8B-Y5HPcwVz_h9rmtW7L8lc9H3XGTk7w44PTO-bESRfMVjAB1piiaNplrZYvQYLXF8JvSbG_jia7Ohji5L6Cduw0 doiB1k6u-nNhoUCTLanQgk=w651-h175
Bạn cũng có thể dùng lệnh zmp sync-config để tự động ánh xạ các resources từ index.html sang app-config.json. Ví dụ:https://digibird.io/wp-content/uploads/2023/09/image-42.pnghttps://digibird.io/wp-content/uploads/2023/09/image-43.png
Bên cạnh các resource trên, Next.js còn thêm vào trang một thẻ script đặc biệt
<script id="__NEXT_DATA__" type="application/json">
Bạn cần tạo một file .js riêng, đặt ở đầu listSyncJS và chức năng của script này là để chèn đoạn script trên vào trước các script khác của Next.js. Vì app-config.json không hỗ trợ định dạng này.
zmp sync-config sẽ tự động tạo file js này để có thể chèn <script id="__NEXT_DATA__"> và tạo phần tử gốc <div id="__next"> cho bạn. Nội dung file script nằm trong inline.js
2.5. Đưa hình ảnh và các resources nặng lên CDN
File app-config.json hợp lệ là yếu tố then chốt của việc triển khai. Nhưng bạn cần lưu ý rằng Zalo Mini App chỉ cho phép app có dung lượng tối đa 10Mb, và mỗi file không quá 3Mb. Nếu web app của bạn có nhiều hình ảnh hay static resources nặng, bạn phải đưa chúng lên CDN.
Bạn cũng có thể áp dụng các cách khác như sử dụng component next/image và cài đặt custom loader.
2.6. Triển khai và Phát hành
Đây là bước cuối cùng là đẩy app của bạn lên nền tảng Zalo Mini App và gửi yêu cầu duyệt. Với ZMP CLI, việc này khá đơn giản:https://digibird.io/wp-content/uploads/2023/09/image-38.png
Sau khi kiểm tra các chức năng của web app của bạn đã hoạt động tốt trên Mini App mới, bạn có thể gửi đi để được duyệt và phát hành cho người dùng. Bạn có thể xem demo kết quả của việc chuyển Next.js sang Zalo Mini App tại đây:https://lh3.googleusercontent.com/bXdKbb6LKh nj9f5rw9TFFtYHOtxsUDYGQkwk5dtcl_jOkb8DVx9cDh4BfvTQ 9V9idfPPqSYfWfUhBy0Dyabucj-KtAxFu-eGeqYBd80obr2131Kp_RorCv-lbzK5RTXKpeuC5kW2RqHCBoY-eiF88j0
3. Kết luận
Đó là những bước hướng dẫn chuyển đổi Next.js thành Zalo Mini App. Qua đó, hy vọng bạn có thêm hiểu biết về quá trình chuyển đổi ứng dụng web có sẵn sang Zalo Mini App, cũng như có cái nhìn sâu hơn về cách mà một Mini App Zalo (https://digibird.co/zalo-mini-app/) hoạt động.
----
DigiBird-Công ty chuyên cung cấp giải pháp chuyển đổi số cho doanh nghiệp Zalo Mini App
Website: https://digibird.co/ (https://digibird.co/)
Hotline: 0979-954-554
1. Next.js là gì?
Next.js là một framework cho React, một thư viện JavaScript để xây dựng giao diện người dùng. Next.js cho phép bạn tạo các ứng dụng web front-end mạnh mẽ và linh hoạt. Next.js là một dự án mã nguồn mở với nhiều tính năng đặc biệt như render trên server (SSR) và tạo các trang web tĩnh. Next.js không làm thay đổi React, mà chỉ bổ sung thêm các chức năng cho nó. Khi bạn sử dụng SSR, máy chủ có thể truy xuất và xử lý dữ liệu cần thiết, cũng như JavaScript, để tạo ra trang web. Trang web sau đó được gửi về trình duyệt và hiển thị ngay tức thì. SSR giúp các trang web tải nhanh hơn và cải thiện trải nghiệm người dùng với khả năng phản hồi cao hơn.
Ngoài ra, SSR cũng có ích cho SEO. Giúp trang web của bạn có thứ hạng cao hơn trên các công cụ tìm kiếm. SSR làm cho các trang web dễ dàng được quét bởi các SEO trackers do chúng có tốc độ tải nhanh và nhiều nội dung có thể được phân tích.
2. Cách chuyển đổi từ dự án Next.js thành Zalo Mini App
Đầu tiên, xin nhắc bạn rằng:
Khi bạn muốn chuyển web app hiện tại bằng Next.js sang Zalo Mini App, bạn phải chú ý rằng các tính năng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG) sẽ không áp dụng được.
2.1. Tổng quan
Bạn cần làm theo các bước sau đây để chuyển ứng dụng Next.js sang Zalo Mini App:
Xuất ứng dụng Next.js ra static site
Tạo Zalo Mini App và kết nối với App ID của bạn.
Cài đặt app-config.json
Chuyển hình ảnh và các resources nặng lên CDN
Deploy và Publish
2.2. Xuất ứng dụng Next.js ra static site
Khi bạn xuất Next.js thành static site, bạn sẽ có nhiều file *.html, mỗi file chứa HTML + CSS và JS cần thiết để render 1 page hoàn chỉnh, theo tính năng SSG đặc biệt của Next.js.
Việc chuyển đổi Next.js sang Mini App có nhiều thách thức. Bởi vì Zalo Mini App có kiến trúc giống với các thư viện/framework SPA như React/Vue.js hơn: một root element được Zalo Mini App cấp sẵn trong index.html mà Zalo Mini App tự tạo ra cho mỗi ứng dụng. Nhà phát triển sẽ render app của mình vào root element đó bằng cách khai báo các resources trong app-config.json, bao gồm các array listSyncJS, listAsyncJS và listCSS. Zalo Mini App không sử dụng các file *.html mà Next.js tạo ra khi xuất.
https://lh3.googleusercontent.com/R6cJRjeLWLiN9Rvz BFBrUtQ2-thM6GilpnM7GszZnxrmMeDN_4M0LD6E7o4TvSUuEUWCeUpvEx6 OB3TWRsPsjLcP_AlHkYNdyGMc_ucGSJunwRYTNz-5ACq_Ij_rDprgXu7AqxdTLKHL1VR_MBzZcEE
Trước khi xây dựng và xuất web app Next.js của bạn, bạn cần thiết lập basepath trong next.config.js. Bạn có thể tham khảo ví dụ sau:
https://digibird.io/wp-content/uploads/2023/09/image-39.png
Sau đó, bạn chỉ cần chạy next build là xong.
2.3. Tạo Zalo Mini App và kết nối với App ID của bạn.
Đây là bước dễ dàng nhất vì bạn chỉ cần sử dụng ZMP CLI và nhập một số lệnh: app idhttps://digibird.io/wp-content/uploads/2023/09/image-40.png
Tiếp theo, bạn nhập Zalo Mini App ID của bạn và quét QR để đăng nhập bằng ứng dụng Zalo.
2.4. Cấu hình app-config.json
Đây là bước quan trọng nhất trong quá trình chuyển đổi. Bạn cần chuyển đổi các file CSS/JS trong index.html (kết quả của Next.js khi xuất ra static sites) sang app-config.json (được sử dụng bởi index.html của Zalo Mini App khi chạy trên Zalo).https://lh6.googleusercontent.com/C9kF5DsM9b 1BtE7Yc4DumoPj0im2ahHBefugkqmM-8B-Y5HPcwVz_h9rmtW7L8lc9H3XGTk7w44PTO-bESRfMVjAB1piiaNplrZYvQYLXF8JvSbG_jia7Ohji5L6Cduw0 doiB1k6u-nNhoUCTLanQgk=w651-h175
Bạn cũng có thể dùng lệnh zmp sync-config để tự động ánh xạ các resources từ index.html sang app-config.json. Ví dụ:https://digibird.io/wp-content/uploads/2023/09/image-42.pnghttps://digibird.io/wp-content/uploads/2023/09/image-43.png
Bên cạnh các resource trên, Next.js còn thêm vào trang một thẻ script đặc biệt
<script id="__NEXT_DATA__" type="application/json">
Bạn cần tạo một file .js riêng, đặt ở đầu listSyncJS và chức năng của script này là để chèn đoạn script trên vào trước các script khác của Next.js. Vì app-config.json không hỗ trợ định dạng này.
zmp sync-config sẽ tự động tạo file js này để có thể chèn <script id="__NEXT_DATA__"> và tạo phần tử gốc <div id="__next"> cho bạn. Nội dung file script nằm trong inline.js
2.5. Đưa hình ảnh và các resources nặng lên CDN
File app-config.json hợp lệ là yếu tố then chốt của việc triển khai. Nhưng bạn cần lưu ý rằng Zalo Mini App chỉ cho phép app có dung lượng tối đa 10Mb, và mỗi file không quá 3Mb. Nếu web app của bạn có nhiều hình ảnh hay static resources nặng, bạn phải đưa chúng lên CDN.
Bạn cũng có thể áp dụng các cách khác như sử dụng component next/image và cài đặt custom loader.
2.6. Triển khai và Phát hành
Đây là bước cuối cùng là đẩy app của bạn lên nền tảng Zalo Mini App và gửi yêu cầu duyệt. Với ZMP CLI, việc này khá đơn giản:https://digibird.io/wp-content/uploads/2023/09/image-38.png
Sau khi kiểm tra các chức năng của web app của bạn đã hoạt động tốt trên Mini App mới, bạn có thể gửi đi để được duyệt và phát hành cho người dùng. Bạn có thể xem demo kết quả của việc chuyển Next.js sang Zalo Mini App tại đây:https://lh3.googleusercontent.com/bXdKbb6LKh nj9f5rw9TFFtYHOtxsUDYGQkwk5dtcl_jOkb8DVx9cDh4BfvTQ 9V9idfPPqSYfWfUhBy0Dyabucj-KtAxFu-eGeqYBd80obr2131Kp_RorCv-lbzK5RTXKpeuC5kW2RqHCBoY-eiF88j0
3. Kết luận
Đó là những bước hướng dẫn chuyển đổi Next.js thành Zalo Mini App. Qua đó, hy vọng bạn có thêm hiểu biết về quá trình chuyển đổi ứng dụng web có sẵn sang Zalo Mini App, cũng như có cái nhìn sâu hơn về cách mà một Mini App Zalo (https://digibird.co/zalo-mini-app/) hoạt động.
----
DigiBird-Công ty chuyên cung cấp giải pháp chuyển đổi số cho doanh nghiệp Zalo Mini App
Website: https://digibird.co/ (https://digibird.co/)
Hotline: 0979-954-554