Chuyển đổi Zalo Mini App từ Web App đang là một trong những xu hướng hiện nay trong chiến lược kinh doanh của các doanh nghiệp vì sẽ mang lại nhiều lợi ích to lớn đối với bối cảnh nền tảng ứng dụng di động phát triển mạnh mẽ như hiện nay. Cùng DigiBird tìm hiểu cách chuyển đổi ngay sau đây nhé.
1. Zalo Mini App là gì?
Zalo Mini App là những “chương trình nhỏ” chạy trực tiếp trên nền tảng Zalo. Với Mini app Zalo, người dùng sẽ được trải nghiệm một cách dễ dàng nhiều ứng dụng khác nhau. Mà không cần phải tải xuống hoặc là cài đặt bất kỳ ứng dụng nào khác trên điện thoại. Chỉ với thao tác đơn giản là truy cập vào Super App là có thể sử dụng được ứng dụng mình muốn. Hay nói một cách dễ hiểu, Mini App Zalo là một tập hợp con của Zalo, với hình thức hoạt động tương tự như các ứng dụng trên điện thoại nhưng không cần phải tải ứng dụng về máy.
Với giao diện thân thiện, trình chăm sóc khách hàng hiệu quả. Đặc biệt là việc thừa hưởng được hệ sinh thái gần 74 triệu người dùng và hệ sinh thái công nghệ. Giúp cho doanh nghiệp tiết kiệm thời gian, chi phí phát triển và hoạt động. Zalo Mini App chính là công cụ bán hàng hiệu quả giúp tăng doanh số cho doanh nghiệp
Bên cạnh đó, có những lý do mà doanh nghiệp như bạn nên chọn Zalo Mini App.
Xem thêm: 7 Lý Do Vì Sao Các Doanh Nghiệp Nên Phát Triển Zalo Mini App Thay Vì Mobile App và Website.
2. Web App là gì? (Khác gì với website)
Web App (Web Application) là một loại chương trình máy tính được chạy với sự hỗ trợ của trình duyệt web và công nghệ web để thực hiện các tác vụ khác nhau trên internet. Web App thường được lưu trữ trên một máy chủ từ xa và được phân phối qua Internet thông qua giao diện trình duyệt.
Web App có thể được thiết kế để sử dụng cho nhiều mục đích khác nhau và có thể được sử dụng bởi một tổ chức, một cá nhân hay bất kỳ ai. Các Web App thường sử dụng để thực hiện Webmail, máy tính trực tuyến hoặc bán hàng online. Hầu hết các trình duyệt đều có thể truy cập được. Một số Web App chỉ có thể được truy cập bằng một trình duyệt cụ thể.
Vậy Web App và Website có sự khác nhau như thế nào?
Web App là một phần của ứng dụng có thể được truy cập bởi trình duyệt thông qua Internet. Ví dụ: Google Apps
Website là một tập hợp các trang web cung cấp những nội dung có liên quan chứa hình ảnh, văn bản, âm thanh, video, …Ví dụ: Youtube, Amazon
| Web Application | Website |
| Được thiết kế để tương tác với người dùng cuối. | Chỉ chứa nội dung tĩnh. (Cơ bản) |
| Người dùng đọc nội dung và thao tác dữ liệu. | Người dùng chỉ có thể đọc nội dung nhưng không được thao tác. |
| Phải được biên dịch trước khi triển khai. | Không cần phải biên dịch. |
| Chủ yếu là yêu cầu xác thực. | Không cần thiết phải xác thực. |
| Được tạo bởi HTML và code ở back end (PHP, C#, Java,…) | Được tạo thành từ các trang HTML tĩnh và một số tài nguyên (hình ảnh, âm thanh, video) |
| Thực hiện các chức năng của một ứng dụng | Được dùng để lưu trữ, hiển thị thông tin |
3. Hướng dẫn cách chuyển đổi Zalo Mini App
3.1. Chuẩn bị
Đầu tiên, để chuyển đổi Zalo Mini App, bạn cần có một project web app đã đảm bảo trải nghiệm tốt cho người dùng trên mobile và tablet.
Tiếp đó cần là đến lượt tạo một Zalo Mini App, đặt tên ấn tượng, logo và ảnh bìa chỉn chu để được tiếp cận đến nhiều người dùng hơn trên Zalo Mini App Store. Chuẩn bị xong rồi thì cùng tìm hiểu một số vấn đề thường gặp và lưu ý cần chú ý khi chuyển đổi web app thành Mini App thôi.
Bạn cần xem xét 3 phía sau đây!
3.2. Phía Client
3.2.1. Khởi tạo Zalo Mini App trên project có sẵn
Để khởi tạo Zalo Mini App trên project Web App đã có sẵn. Đầu tiên bạn cần bộ dev tool: zmp-cli
Sau khi đã cài đặt dev tools cần chuyển đến root folder của project, chạy lệnh:
Ví dụ cần chuyển project my-app đặt tại ~/miniapp/my-app thành Mini App:
Sau khi đăng nhập thành công chọn Using ZMP to deploy only:
Giao diện sau khi deploy thành công:
Lúc này project của bạn sẽ được tạo thêm file .env và app-config.json tại root folder
File .env: chứa các biến môi trường cần thiết phục vụ cho việc deploy
File app-config.json: được dùng để cấu hình chung cho Zalo Mini App.
Trong đó file app-config.json có cấu trúc như sau:
Trong đó, trường app chứa các trường title, headerColor, textColor, statusBarColor, leftButton được đùng để cấu hình navigation bar, title của Zalo Mini App. Với Project có sẵn thì không cần quan tâm trường pages, ngoài ra các trường listCSS, listSyncJS, listAsyncJS sẽ được đề cập bên dưới.
3.2.2. Cập nhật root element selector
Sau khi deploy, Mini App của bạn sẽ sử dụng index do Zalo Mini App tạo ra thay vì index file của project build ra. Tại đây root element mặc định sẽ có id là “app”, nên nếu project của bạn có root element id khác, cần đổi lại root element selector ứng với id là “app”
3.2.3. Cấu hình module bundler
Một số vấn đề thường gặp đối với project tự build và deploy lên Zalo Mini App. Chính là không tải được các static files hay các module khi sử dụng code splitting. Nguyên nhân có thể do public path chưa đúng. Bởi lẽ source code sau khi build sẽ được đưa lên cdn của Zalo, đặt trong folder tương ứng với Mini App Id, version. Khi build bằng dev tools của Zalo Mini App, public path đã được config sẵn tương ứng với từng version của app. Vậy đối với các project tự cấu hình build thì giải quyết thế nào?
– Đối với project sử dụng Vite module bundler, đơn giản chỉ cần set base=”./” trong file config
– Đối với Project đóng gói bằng webpack thì có chút khác biệt, cần chỉ rõ version của Mini App để chỉ đúng thư mục chứa các assets ứng với version. Có thể sử dụng global variable __webpack_public_path__ của webpack để giải quyết vấn đề này, lấy version của Mini App đang chạy tại window.APP_VERSION, xem ví dụ sau:
3.2.4. Vấn đề không tải được module khi sử dụng dynamic import khi đóng gói bằng Vite trên iOS
Khi gặp lỗi không tải được trang khi sử dụng dynamic import trên iOS với project đóng gói bằng Vite. Có thể tắt option polyfillModulePreload tại file config để khắc phục, như sau:
3.2.5. Vấn đề về Router
Đối với project tự xử lý vấn đề routing của app, có thể gặp lỗi không tải được trang chủ hay khi navigate không tải được trang. Nguyên nhân có thể do base URL mặc định không đúng, cần điều chỉnh lại thành /zapps/[APP_ID]
Ví dụ sử dụng react-router:
Ví dụ sử dụng Reach-router:
<Router basepath=”/zapps/[ZALO_MINI_APP_ID]” />
Tương tự với project Angular có thể config lại APP_BASE_HREF
3.2.6. Lưu ý về xác thực thông tin người dùng khi gọi API
Đổi với một số Mini App cần xác thực thông tin người dùng sau khi lấy được thông tin người dùng thông qua API của Zalo, bạn có thể định danh user khi request tới API bằng 1 trong những cách sau:
– Sử dụng trực tiếp Access Token.
– Tạo ra Authentication Token riêng cho hệ thống của bạn, chúng tôi khuyến nghị bạn nên sử dụng JWT – JSON Web Token.
Với tất cả ứng dụng Zalo Mini App, các API mặc định của trình duyệt sau sẽ không được hỗ trợ:
– LocalStorage
– SessionStorage
– Cookie
Vì vậy vui lòng sử dụng Header thay cho Cookie để truyền thông tin xác thực người dùng lên Server của bạn.
3.2.7. Khai báo các assets cần thiết khi tải trang tại app-config.json
Như đã đề cập ở trên, sau khi deploy, Mini App sẽ sử dụng file index do hệ thống của Zalo Mini App tạo ra. Nên cần liệt kê các files cần thiết để khởi tạo app, như css, js module,… Bạn có thể xem các file cần thiết được khai báo tại file index.html được build ra trong chính project của bạn và liệt kê trong app-config tại các trường: listCSS, listSyncJS, listAsyncJS, như dưới đây
Ví dụ sau khi build hoàn tất, build folder (ở trong trường hợp này là dist) có cấu trúc như sau:
File index.html có nội dung như sau:
Quan sát file index.html sau khi build phía trên, nhận thấy index cần tải script
./assets/index.cafa2549.module.js và css file ./assets/index.3fce1f81.css.
Vậy ta cần khai báo đường dẫn tới 2 file này vào các trường tương ứng trong app-config.json như sau:
3.3. Phía server
Do ứng dụng của bạn chạy trên hệ thống domain của hệ thống Zalo. Vì vậy để gọi được API, yêu cầu Server của bạn trả thêm Header Access-Control-Allow-Origin như sau (Ví dụ với Nodejs):
3.4. Deploy
Sau kiểm tra lại các lưu ý nêu trên và tiến hành buid. Bạn đã thể deploy Mini App của mình, rất đơn giản với lệnh
zmp deploy
Chọn Deploy your existing project, điền build folder tương ứng
Chờ quá trình deploy diễn ra xong, bạn đã có thể scan QR code hiện lên và trải nghiệm thử Mini App của mình rồi.
4. Kết luận
Bằng cách sử dụng Mini App, bạn không chỉ tạo ra những tiện ích đối với người dùng. Mà còn giúp tăng cường sự tương tác và kết nối giữa người dùng và doanh nghiệp. Điều này mang lại lợi ích lớn cho sự phát triển kinh doanh và tiếp thị của doanh nghiệp. Vậy còn chần chờ gì nữa hãy chuyển đổi Web App của bạn thành Mini App Zalo. Khám phá tiềm năng và cơ hội không ngờ mà nó mang lại. Nếu bạn còn những thắc mắc hay khó khăn trong việc chuyển đổi. Đừng ngần ngại mà đặt câu hỏi và Liên hệ DigiBird Co.
Xem thêm: Zalo Mini App? – Nên Tự Phát Triển Hay Thuê Đơn Vị Trung Gian?
