{"id":20903765,"url":"https://github.com/qlishell/the-shell-coffee","last_synced_at":"2026-03-07T08:31:25.628Z","repository":{"id":254439262,"uuid":"846338876","full_name":"qlishell/The-Shell-Coffee","owner":"qlishell","description":"\"The SHELL Coffee Shop\" Zalo Mini App. Deploy Development [QR below]","archived":false,"fork":false,"pushed_at":"2024-08-28T06:29:00.000Z","size":1180,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-18T13:28:29.168Z","etag":null,"topics":["coffee-shop-app","mini-project","mock","typescript","zalo","zmp"],"latest_commit_sha":null,"homepage":"https://zalo.me/s/2424552472169605658/?env=DEVELOPMENT\u0026version=zdev-ffa5ec27","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qlishell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-23T02:09:11.000Z","updated_at":"2024-10-30T16:36:07.000Z","dependencies_parsed_at":"2024-08-25T15:26:48.657Z","dependency_job_id":"1bfdd90e-09bf-4f2f-8c0d-137e2bf4c2f3","html_url":"https://github.com/qlishell/The-Shell-Coffee","commit_stats":null,"previous_names":["qlishell/the-coffee-shop","qlishell/the-shell-coffee"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qlishell%2FThe-Shell-Coffee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qlishell%2FThe-Shell-Coffee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qlishell%2FThe-Shell-Coffee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qlishell%2FThe-Shell-Coffee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qlishell","download_url":"https://codeload.github.com/qlishell/The-Shell-Coffee/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234646267,"owners_count":18865544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coffee-shop-app","mini-project","mock","typescript","zalo","zmp"],"created_at":"2024-11-18T13:14:53.501Z","updated_at":"2025-09-29T18:30:53.470Z","avatar_url":"https://github.com/qlishell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zalo-Mini-App-The-Practical-Guid\n\n![image](https://stc-developers.zdn.vn/static/v3/images/1b8571ac1a07f3a74e.png)\n\n## Bắt đầu với Zalo Mini App\n\nTrước khi phát triển 1 ứng dụng Zalo Mini App , bạn cần đăng kí và cấu hình ứng dụng Zalo Mini App của bạn. Hướng dẫn này sẽ giúp bạn khởi tạo và phát hành 1 ứng dụng Zalo Mini App một cách nhanh nhất.\n\n![image](https://stc-zmp.zadn.vn/zmp-docs/v2.11.17/assets/images/MiniAppiLus02-02-cfa647f0d563938549cca00879b690f6.png)\n\n## Môi trường phát triển\n\nĐể xây dựng ứng dụng Zalo Mini App, môi trường phát triển cần có:\n\nNode.js: phiên bản \u003e= 12.13.0 (có thể kiểm tra bằng lệnh node -v). Có thể dùng nvm để quản lý nhiều phiên bản Node.\n\n## Khởi tạo Zalo App\n\nZalo App (không phải Zalo Mini App) là ứng dụng trên nền tảng Zalo, ứng dụng giúp tương tác với API OAuth và những API về dữ liệu khác trên nền tảng Zalo. Một Zalo App có thể chứa nhiều Zalo Mini App bên trong.\n\n**Nếu bạn đã có Zalo App sẵn trong tài khoản của mình có thể bỏ qua bước này**\n\n1. Tạo Zalo App: Truy cập [Zalo for Developer](https://developers.zalo.me/) và đăng nhập tài khoản Zalo của bạn. Sau đó tạo ứng dụng trên nền tảng Zalo Platform hoặc sử dụng 1 ứng dụng có sẵn.\n2. Trong phần Cài đặt chọn Kích hoạt ứng dụng để người dùng bên ngoài có thể sử dụng ứng dụng của bạn.\n\n## Khởi tạo Zalo Mini App\n\nĐể tạo Zalo Mini App mới, bạn vào [trang quản lý ứng dụng Zalo Mini App](https://mini.zalo.me/developers/), chọn Zalo App vừa tạo ở bước trên, nhấn Tạo Zalo Mini App và nhập các thông tin cần thiết.\n\n![image](https://stc-zmp.zadn.vn/zmp-docs/v2.11.17/assets/images/create-mini-app-ae566e79ddf2a2fe534caa95e59ed80d.png)\n\nSau khi đã có Zalo Mini App trên hệ thống, bạn có thể bắt đầu phát triển Mini App bằng 2 cách sau:\n\n1. Sử dụng Zalo Mini App Studio\n2. Sử dụng Command line\n\n## Tạo project bằng Studio\n\nĐể tạo Mini App bằng Zalo Mini App Studio, bạn chỉ cần tải phiên bản mới nhất của Studio tại đây. Sau đó, làm theo những hướng dẫn sau để tạo project và chạy Mini App ngay trên Zalo Mini App Studio:\n\n1. [Tạo project mới](https://mini.zalo.me/devtools/ide/create-project/)\n2. [Khởi động project](https://mini.zalo.me/devtools/ide/run-project/)\n3. [Xuất bản project](https://mini.zalo.me/devtools/ide/deploy-project/)\n\n## Tạo project bằng Command Line\n\nĐể bắt đầu phát triển ứng dụng Zalo Mini App, bạn có thể chạy lệnh sau:\n\n```bash\nnpx create-zalo-mini-app my-app\ncd my-app\nnpm start\n```\n\nSau khi lệnh được thực thi, bộ [Zalo Mini App Cli](https://mini.zalo.me/devtools/cli/intro/) sẽ được tự động cài đặt hoặc cập nhật version mới nhất (nếu đã cài trước đó) và project my-app sẽ được khởi tạo.\n\nHoặc bạn cũng có thể tự cài đặt Zalo Mini App Cli và làm theo hướng dẫn bên dưới:\n\n```base\nnpm install -g zmp-cli\n```\n\n### Với những dự án có sẵn muốn tích hợp Zalo Mini App\n\nĐể chuyển dự án có sẵn thành Zalo Mini App và phát hành trên Zalo, vui làm theo hướng dẫn:\n\n1. Di chuyển terminal tới thư mục dự án của bạn và chạy lệnh:\n\n```base\nzmp init\n```\n\n2. Nhập Zalo Mini App ID (ID của MiniApp ứng dụng bạn vừa tạo).\n3. Chọn phương thức đăng nhập để xác thực tài khoản.\n4. Sau khi đăng nhập thành công chọn Using ZMP to deploy only, sau đó nhập tên ứng dụng của bạn để hoàn thành.\n\nHệ thống sẽ tự động tạo file app-config.json chứa thông tin cấu hình ứng dụng bạn.\n\n### Với dự án xây dựng Zalo Mini App từ đầu\n\nĐể tạo mới dự án và tích hợp sẵn [ZaUI Component](https://mini.zalo.me/docs/zaui/), vui lòng làm theo hướng dẫn:\n\n1. Tạo thư mục dự án và chạy lệnh:\n\n```base\nzmp init\n```\n\n2. Nhập Zalo Mini App ID (ID ứng dụng bạn vừa tạo).\n3. Chọn phương thức đăng nhập để xác thực tài khoản.\n4. Sau khi đăng nhập thành công chọn Create a new ZMP project, sau đó làm theo hướng dẫn để cấu hình dự án.\n\n## Cấu Hình Zalo Mini App\n\n[Read more](https://mini.zalo.me/intro/getting-started/app-config/)\n\n## Chuyển đổi nhanh Web App có sẵn thành Zalo Mini App\n\n[Read more](https://mini.zalo.me/intro/convert-web-app-to-zalo-mini-app/)\n\n## Deploy Zalo Mini App Development\n\nỨng dụng đã được khởi động trên Zalo App, cho phép bạn xem trước trên thiết bị di động bằng cách quét mã QR.\n\n![image](assets/images/QRZaloMiniApp.png)\n\n---\n\n**Hình ảnh từ Zalo Mini App**\n\n\u003cdiv style=\"display: flex; justify-content: space-between;\"\u003e\n  \u003cimg src=\"assets/images/BannerScreen.jpg\" alt=\"BannerScreen\" style=\"flex: 1; width: 200px; margin-right: 10px;\"/\u003e\n  \u003cimg src=\"assets/images/HomeScreen.jpg\" alt=\"HomeScreen\" style=\"flex: 1; width: 200px; margin-right: 10px;\"/\u003e\n  \u003cimg src=\"assets/images/CartScreen.jpg\" alt=\"CartScreen\" style=\"flex: 1; width: 200px;\"/\u003e\n\u003c/div\u003e\n\n---\n\nTrong quá trình phát triển ứng dụng, việc triển khai phiên bản Development là bước quan trọng giúp bạn kiểm tra, thử nghiệm và đảm bảo rằng mọi tính năng hoạt động như mong đợi trước khi phát hành chính thức. Dưới đây là các bước để triển khai phiên bản Development của ứng dụng.\n\n-   **Bước 1: Chuẩn bị Môi trường Development**\n\n    Trước khi triển khai, hãy đảm bảo rằng bạn đã thiết lập đầy đủ môi trường development trên máy tính của mình, bao gồm các công cụ cần thiết như Node.js, zmp-cli, và Zalo App.\n\n-   **Bước 2: Cài đặt Dependencies**\n\n    Chạy lệnh dưới đây để cài đặt tất cả các dependencies cần thiết:\n\n    ```bash\n    npm install\n    ```\n\n-   **Bước 3: Khởi chạy Ứng dụng**\n\n    ```bash\n    npm run start\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqlishell%2Fthe-shell-coffee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqlishell%2Fthe-shell-coffee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqlishell%2Fthe-shell-coffee/lists"}