Header image

Mini Apps – Ứng Dụng Công Nghệ Là Chìa Khoá Thành Công Với Doanh Nghiệp Của Bạn (Part 2)

20/05/2022

2.42k

line

Giới thiệu

Ở bài viết trước, chúng ta đã hiểu được Line Mini App là gì, cũng như những ví dụ minh họa cơ bản về những trường hợp nên sử dụng Mini App trên Line. Trong khuôn khổ bài viết này, chúng ta sẽ làm quen với việc tạo một ứng dụng Line Mini App và tích hợp nó vào trong Line.

Trước khi bắt đầu tạo một ứng dụng Line Mini App sẽ cần phải xác định trước những yêu cầu của nền tảng mà bạn đang tính xây dựng, thông thường sẽ liên quan tới luật và chính sách của quốc gia sở tại, vậy nên bạn nên đọc kỹ phần chính sách và điều khoản để đáp ứng được các yêu cầu. Đối với Line, yêu cầu đó có thể bao gồm: thông tin khách hàng, thông tin doanh nghiệp, nội dung chia sẻ và vấn đề liên quan tới bản quyền, … và lưu ý quan trọng, trong quá trình phát triển ứng dụng bạn có thể hoạt động tự do. Tuy nhiên, để ứng dụng được Publish, bạn cần được review và chấp nhận từ công ty Line.

Để tìm hiểu kỹ hơn về điều khoản và chính sách liên quan tới Line Mini App, bạn có thể xem bảng chi tiết tại đây. Lưu ý, với mỗi quốc gia sẽ có chính sách riêng biệt hãy xem kỹ nội dung theo quốc gia bạn đang hướng tới để áp dụng phù hợp với giải pháp định chọn.

Sau khi đã xác định và hiểu rõ, bạn có thể bắt đầu tiến hành tạo một ứng dụng Line Mini App theo các bước trong mục tiếp theo.

Tạo ứng dụng Line Mini App

Để bắt đầu với một ứng dụng, giả sử chúng ta đang xây dựng ứng dụng Line Mini App là một ứng dụng chuyên tích điểm dành cho khách hàng thường xuyên check-in tại cửa hàng, và khi khách hàng đạt ngưỡng một số điểm nhất định, chúng ta sẽ gửi thông báo tới khách hàng và tặng khách hàng mã Voucher giảm giá sản phẩm, với yêu cầu đơn giản này, chúng ta hãy cùng xem ứng dụng mini app có thực sự tiện lợi không nhé.

Dưới đây, là các bước cần chuẩn bị trước khi tạo ứng dụng Mini App.

Chuẩn bị tài khoản Line

  • Việc đầu tiên, bạn cần truy cập tới trang quản trị dành cho nhà phát triển ứng dụng (nhấn tại đây).
Chuẩn bị tài khoản Line

Bạn có thể đăng nhập với tài khoản Line hoặc tài khoản doanh nghiệp trên Line, để tìm hiểu kỹ hơn về tài khoản doanh nghiệp, hãy tham khảo tại đây.

  • Sau khi đã đăng nhập thành công, màn hình quản trị sẽ hiển thị như dưới, bạn cần tạo 1 Provider để thử nghiệm, nhấn vào nút Create
create line
  • Điền tên Provider, ở đây chúng ta đặt tên Test-Mini-App, sau đó nhấn Create
create a new provider
  • Sau khi quá trình tạo Provider hoàn tất, bạn được chuyển tới màn hình mới, với 3 Tabs chính:
  • Channels: đây là tất cả các kênh mà nền tảng Line hỗ trợ để bạn có thể xây dựng các dịch vụ, trong khuôn khổ bài viết này, chúng ta chỉ cần quan tâm tới 2 channel là Line Login ChannelLine Messaging API Channel
  • Roles: đây là nơi bạn có thể thêm thành viên, nhà phát triển và người kiểm thử (Tester) để có quyền kết nối tới các channel bạn đã tạo.
  • Settings: là những cài đặt cơ bản quan tới Provider.
test mini app

Lựa chọn giữa LIFF hoặc Line Mini App

Sau khi khởi tạo tài khoản và tạo Provider ở bước trên, ở bước này chúng ta có thể tiến hành khởi tạo Line Mini App channel để bắt đầu, tuy nhiên, để có thể tạo được 1 Line Mini App channel, bạn sẽ qua bước kiểm tra và xác nhận từ LINE. Việc này sẽ tốn thời gian, vậy nên trong khuôn khổ bài viết này, chúng ta sẽ cùng tìm hiểu tới LIFF (LINE Front-end Framework), là nền tảng tương tự như Line Mini App và không cần phải chờ đợi review từ LINE.

Trước hết, chúng ta sẽ xem qua những điểm khác biệt giữa LIFF và Line Mini App

Điểm chung:

  • Cả 2 đều chạy trên nền tảng Web và chạy bởi trình duyệt LIFF, được nhúng vào trong ứng dụng Line.
  • Cả 2 đều có thể tích hợp nhiều công nghệ web mới nhất để cung cấp nhanh dịch vụ.

Điểm riêng:

LIFF appLINE MINI App
Môi trường– Chạy trên ứng dụng LINE.
– Chạy được trên hầu hết các trình duyệt phổ biến.
– Chỉ chạy được duy nhất trên ứng dụng LINE (điện thoại)
LINE review và chấp nhậnKhông cần, bạn có thể phát hành bất cứ lúc nào.– Phải được review và chấp nhận bởi LINE.
– Sau khi thỏa mãn điều kiện review, ứng dụng Line Mini App sẽ được xuất hiện bằng chức năng tìm kiếm và tại tab Home của ứng dụng LINE.
Service message chat roomKhông có sẵnBạn có thể sử dụng, chức năng có sẵn trên toàn bộ ứng dụng Line Mini Apps.

Tham khảo: tại đây

Trong khuôn khổ seri này, chúng ta sẽ lựa chọn LIFF app, là phương án nhanh nhất để bắt đầu, sau khi phát triển hoàn tất, chúng ta có thể tiến hành chuyển đổi sang Line Mini App channel. Tiếp theo, hãy tạo 2 channels như đã đề cập bên trên, bao gồm:

  • Line Login channel: hãy để mọi thông tin là mặc định, lưu ý vài điểm sau.
  • Region: chọn Japan
  • Company or owner’s country or region: Japan
  • Channel name: DEV-Login channel
  • Channel description: Line Mini App
  • App Type: chọn Web
  • Messaging API channel: hãy để mọi thông tin là mặc định, lưu ý vài điểm sau.
  • Company or owner’s country or region: Japan
  • Channel name: DEV-Messaging API
  • Channel description: Line Mini App
  • Category: Local Business and E-commerce
  • Subcategory: Shopping & retail
test mini app 2

Như vậy, là xong phần chuẩn bị cơ bản liên quan tới quản trị trên nền tảng Line, bạn sẽ cần chuẩn bị thêm về tài liệu để khởi tạo một ứng dụng mini app trên Line, hãy cùng tìm hiểu về LIFF (LINE Front-end Framework), một nền tảng chạy trên web app được cung cấp bởi LINE.

Khởi tạo LIFF apps.

Ở bước bên trên, chúng ta đã khởi tạo thành công 1 Provider có chứa sẵn 2 Channels là Login channelMessaging API channel, ở bước này chúng ta sẽ tiến hành khởi tạo 1 LIFF app và cấu hình LIFF app có thể tương tác với 2 channel này nhé.

Line Mini App là ứng dụng chạy trên nền tảng web và nó chạy trên LINE.

LIFF app (LINE Front-end Framework) là một framework dùng để xây dựng 1 ứng dụng web, được cung cấp bởi LINE, sử dụng LIFF, bạn sẽ giảm rất nhiều thời gian để xây dựng, xử lý, vì mọi thứ đã được LINE định nghĩa và cung cấp bên trong LIFF. Phiên bản mới nhất hiện tại của LIFF là version 2 (LINE Front-end Framework v2)

Bạn có thể sử dụng tính năng thử nghiệm (playground) với LIFF playground để dễ hình dung hơn các tính năng của LIFF.

Bước 01: Truy cập vào Login channel và tạo 1 LIFF app.

Bước 01: Truy cập vào Login channel và tạo 1 LIFF app.

Bước 02: Nhập thông tin, ví dụ như bên dưới

Tên trườngMô tảGiá trị
LIFF app nameTên của ứng dụng.demo-app
SizeLà kích thước của LIFF brower khi bật lênFull
Endpoint URLLà tên miền của ứng dụng, chúng ta sẽ cập nhật lại sauhttps://localhost.com:3000
Scopeskhai báo quyền cần cấp để xin dữ liệu khi chứng thực với LINEprofile, openid
Bot link featureoff
Scan QRon
Module modeoff

Bước 03: Sau khi đã điền đủ thông tin, nhấn vào nút Add, và quá trình tạo 1 LIFF app đã hoàn tất.

Bước 03: Sau khi đã điền đủ thông tin, nhấn vào nút Add, và quá trình tạo 1 LIFF app đã hoàn tất.

Kết thúc

Như vậy, với những bước trên, bạn đã hoàn thành được việc đăng ký tài khoản LINE, khởi tạo 1 ứng dụng LIFF trên LINE console.

Bài tiếp theo, chúng ta sẽ sang một seri mới liên quan tới kỹ thuật, đó là làm thế nào để triển khai ứng dụng LIFF và chạy nó trên nền tảng LINE.

Author: Kiet Vo

Related Blog

Knowledge

Others

+0

    Must-Have Tools for Business Analyst

    In today’s fast-evolving tech world, working smart has become even more crucial than working hard. In IT environments — and in any modern business — managing a growing amount of complex work can’t rely solely on memory, scattered emails, or individual Excel sheets. One of the most effective ways to boost productivity intelligently is through the use of supporting tools.This isn’t just a trend anymore — it’s quickly becoming the standard in many companies. For Business Analysts (BAs), the right tools don’t just make you more efficient — they make you more professional. Let’s explore some essential tools every BA should have in their toolkit 👇 1. Draw.io A free, intuitive diagramming tool to visualize processes, systems, data, or ideas.It’s ideal for modeling workflows and mapping business logic. Key Features: Free and no registration required — just go to diagrams.net.Flexible storage — save files locally or to Google Drive, OneDrive, GitHub, GitLab.Rich icon library — supports UML, BPMN, flowcharts, network diagrams, and more.UML & BPMN ready — perfect for use cases, activity diagrams, and business flows.Easy collaboration when stored on shared drives.Cross-platform — available on web, desktop, and as a VS Code extension. Limitations: Real-time collaboration isn’t as strong as tools like Figma.Performance may drop with very large or complex diagrams. 2. Miro Miro is an online collaborative whiteboard designed for teams to brainstorm, plan, and visualize ideas in real-time. Key Features: Infinite canvas — visualize projects without space limits.Real-time collaboration — comment, vote, and co-edit instantly.Rich templates — includes user story maps, journey maps, mindmaps, Kanban boards, and wireframes.Integrations — connects with Jira, Confluence, Slack, Teams, Google Drive, and more.Great for mapping processes, use cases, roadmaps, or even UI mockups. Limitations: Free plan limits the number of boards.Large boards with many assets may slow down performance. 3. Trello Trello is a Kanban-based task management tool that helps teams visualize and track progress easily. Key Features: Simple drag-and-drop interface.Highly customizable boards, lists, and cards.Each card can include checklists, attachments, labels, due dates, and assignees.Seamless integration with Google Drive, Slack, Jira, GitHub, and others.Real-time updates across all team members.Works on web, desktop, and mobile. Limitations: Free plan limits the number of integrations (Power-Ups). 4. Jira Jira by Atlassian is the industry-standard project management tool for Agile teams. Key Features: Built for Scrum and Kanban teams.Highly customizable workflows, fields, and automation rules.Transparent tracking of tasks, blockers, and progress.Integrates with hundreds of DevOps, CI/CD, and testing tools.Scales from individual tasks to enterprise-level project portfolios. Limitations: Steep learning curve for beginners.Can be costly for large teams.Requires experienced admins for setup and maintenance.May run slower on large, complex projects. 5. Typescale A handy tool for generating consistent typography systems (font size, line height, spacing) for web or app design. Key Features: Automates type scale creation.Multiple presets and flexible customizations.Preview and export CSS directly.Ensures responsive and accessible typography. Limitations: Not suitable for all design systems or content types.Limited control over detailed responsive behavior. 6. Adobe Color An intuitive color palette generator to create harmonious and accessible color schemes. Key Features: Easy-to-use color wheel with real-time updates.Auto-generates color harmonies based on color theory.Supports HEX, RGB, and CMYK formats.Integrates seamlessly with Adobe tools like Photoshop, Illustrator, and XD.Community palette sharing and inspiration gallery. Limitations: Contrast still needs manual checking for accessibility.Some auto-generated palettes may need manual tweaking.Colors can look different on various screens. 7. Contrast Checker A simple but vital tool to ensure readability and accessibility by checking text and background contrast per WCAG standards. Key Features: Simple interface — input colors and get instant feedback.Ensures compliance with accessibility guidelines.Real-time updates as you adjust colors.Bridges design and development — everyone can validate contrast easily. Limitations: Doesn’t reflect results accurately for complex backgrounds.Doesn’t account for font size, spacing, or user testing conditions. Why Use These Tools? Transparency: Everything — from tasks to deadlines — is clearly tracked. For example, Trello helps answer questions like “Who’s doing what?” and “What’s the current status?”Visualization: Tools like Draw.io help transform abstract logic into clear, easy-to-understand diagrams.Collaboration: Integrating tools like Miro, Jira, or Slack ensures everyone stays aligned and reduces miscommunication. Tips for Getting Started Start small: You don’t need every tool at once. Begin with Jira or Trello, then expand.Build shared habits: Tools only work when the whole team uses them consistently.Learn by doing: Explore free trials and tutorials, then apply them directly in your current projects.Stay updated: Tools evolve fast — keeping up helps you stay ahead. Using tools isn’t just about having more software — it’s about changing the way we work.They make our processes more transparent, our teamwork more seamless, and our output more efficient. For Business Analysts, these tools are not just “nice-to-have” — they’re what turn you from a task executor into a strategic enabler for your team. Read more related articles from SupremeTech!

    31/10/2025

    36

    Sang Ngo

    Knowledge

    +1

    • Others

    Must-Have Tools for Business Analyst

    31/10/2025

    36

    Sang Ngo

    Knowledge

    Others

    Our culture

    +0

      How to Step Out of the “Forwarder” Shadow?

      Have you ever, as a Comtor or Business Analyst (BA), felt like… a messenger? Every time the client asks something, you turn to the team, copy their answer, translate it, and send it back — just passing messages instead of actually owning the conversation. At SupremeTech, our BA team jokingly calls this role the “Professional Forwarder.” Through many “lost in translation” moments, we’ve learned valuable lessons on how to step out of that shadow — to become real connectors between the client and the team. Let’s hear from our BA team as they share practical tips to help you move beyond being a “forwarder” drawn directly from real project experience. Signs You Might Be Forwarding Too Much 1. The classic line: “Let me check with the team.”It’s not wrong — but if you’re saying it too often, it might mean you don’t fully understand the issue. 2. Lack of confidence in meetings: Many new BAs struggle with open-ended questions. When you don’t fully understand the product, you can’t confidently answer questions from both the client and your internal team. The PM asks about progress, you look at the Sprint Backlog full of numbers — and still don’t know where to start. 3. Avoiding technical talk: The moment you hear technical terms, you “pass the ball” to the PTL — without really understanding what’s being discussed. 3 Steps to Escape the “Forwarder Manager” Role So, how can you move from being a Forwarder to becoming a true communicator — someone who understands, connects, and leads discussions effectively? Here are three simple but powerful steps you can start practicing right away: 1. Before Forwarding, Ask Yourself: Do I understand at least 70% of this content?Have I tried to reproduce the bug, test the feature in the DEV environment, or explore the possible cause myself?If I were the dev/tester receiving this message, would I have enough context to understand it?Can I classify the issue — is it about UI/UX, logic, data, or business flow?Can I try to answer part of it first, then confirm later? 👉 This habit helps you learn something new every day, instead of just finishing tasks every day. 2. In Every Meeting – Observe and Lead What is the team really discussing? Do I understand the big picture?If the conversation is technical, how does it relate to the overall context?Is anyone confused? Can I help clarify? If you find yourself unsure about all three — take notes, take notes, and take notes.Meeting minutes and your own notes will help you retain details and follow up later for deeper understanding. 3. Build Strong Foundations Whether you’re a Comtor, BA, or PO, a solid foundation in product knowledge, business logic, and basic technical understanding helps you make better decisions — and lead your team effectively. Don’t get stuck thinking “that’s not my task.” Instead, learn actively by: Reading about technical keywords used in your project.Redrawing the business flow yourself to truly understand it.Asking devs, QCs, PTLs, and clients for their perspectives.Finding a technical advisor who can review your understanding and answer your tech-related questions. Every time you’re about to forward a message, pause for a minute — dig a little deeper.Each pause adds to your knowledge and analytical mindset. These small daily efforts will sharpen your skills and confidence — helping you grow not only as a professional BA, but also as a potential Project Leader who truly adds value to the team.

      31/10/2025

      40

      BA Team

      Knowledge

      +2

      • Others
      • Our culture

      How to Step Out of the “Forwarder” Shadow?

      31/10/2025

      40

      BA Team

      Team Người Việc: Winning with AI-Assisted Development at SupremeTech

      AI

      AI-assisted development

      +0

        How Team Người Việc Won SupremeTech’s AI Hackathon 2025 with AI-Assisted Development and Agile Thinking

        24 hours. 10 teams. Countless lines of code. One team claimed the spotlight and took half of the 100 million VND prize pool. SupremeTech’s first-ever AI Hackathon was more than just a competition, it was a test of endurance, creativity, and teamwork. For one intense day and night, our participants pushed the limits of AI-assisted development, turning raw ideas into functioning prototypes under extreme time pressure. Among them, three teams rose above the rest. Their solutions not only showcased strong technical execution but also revealed how AI hackathon use cases can bring real business value in areas such as customer experience, automation, and data-driven decision-making. These top three use cases highlight the future potential of AI and the passion of SupremeTech’s people to turn vision into reality. Brought home the Top Prize - Team Người Việc stood out for their sharp strategy and teamwork. Their winning project solved a familiar yet complex issue in the tourism industry: managing group travel efficiently while ensuring every participant enjoys a seamless experience. Presented in clear business logic, executed with agile methodology, and powered by AI-assisted development, their solution proved that innovation thrives when technology meets human insight. Introducing the Team: Small but Strong Team Người Việc brought together a crew of four: Hung Dinh, Huy Nguyen, and Dung Nguyen as front-end engineers, and Khanh Nguyen as the business analyst. While other teams had five members, this smaller team turned their size into strength. With Khanh shaping the business logic and user journey, and the three engineers transforming those ideas into a functional product, they created a strong link between business insight and technical execution. Each member brought a distinct perspective: one focused on monetization and business value, another on operational flow, and others on technical quality and user experience. Together, they created a strong team that has both business insight and technical execution. Khanh shared that: “Everyone respected each other’s opinions. We weren’t chasing perfection, we were building something real, something that worked”. The Challenge: Turning Hot and Heavy Topic into Opportunity When the AI Hackathon began, the participating teams didn’t get to choose their challenge. Each team drew a topic randomly from a pool of three, and fate handed team Người Việc a challenge that was both broad and complex: Destination and Experience Management System for Tourism. Instead of seeing it as an obstacle, the team saw great potential in this topic: “It’s actually very close to what SupremeTech does,” one member shared. “Tourism and service coordination are among the industries where our clients face similar pain points. If developed further, this could even become a real product for the company”. For most teams, tackling something this wide in just 24 hours would be overwhelming. But for Người Việc, it became the perfect opportunity to combine business logic, agile thinking, and AI-assisted development into a single solution. Dũng, one of the front-end engineers shared: “We didn’t see it as just a travel problem. It’s a coordination problem that every company faces because of too many people, too little time, and too many things to track.” The Idea: Transforming Tourism Coordination with AI Manual planning and coordination often create time-consuming processes, lack of feedback, and fragmented communication across travel agencies, corporate HR departments, and trip participants. To solve this, Người Việc envisioned an end-to-end platform that connects all stakeholders, from travel agencies and corporate planners to event organizers and trip participants.The system enables users to: Create and customize travel itinerariesConnect directly with travel agencies through a marketplace modelTrack schedules via QR codeProvide instant feedback during the trip. In short, it bridges the gap between demand and supply in hospitality, creating a more transparent, interactive, and seamless travel experience. The Process: From Brainstorming to AI-Assisted Development What set Người Việc apart was their strategic mindset before touching a single line of code. Instead of rushing to use AI tools right-away, the team began with a face-to-face brainstorming session, mapping out what a real group trip looks like from start to finish: from planning and agency communication to real-time updates and user feedback. To validate their ideas, they even called friends working in hospitality to understand pain points from the field such as: how agencies handle client requests, where information gets lost, and what travelers actually expect. Only after this discovery phase, the team moved into design and development. They first created clear user stories and workflows on their own, then applied story-based prompting by feeding those stories into ChatGPT and Copilot to generate database schemas, API endpoints, and code snippets. This structured use of AI helped them align technical output with business logic and speed up development. Their approach became a model of how AI-assisted development and agile methodology can complement each other, keeping logic clear while boosting speed. Their mantra throughout the process was simple yet powerful: Think first, then use AI smartly. This mindset kept their workflow focused, turning AI into a productivity multiplier instead of a shortcut, and became a highlight in their AI hackathon journey.Without a QC member, the team stayed flexible and shared responsibilities across roles. Each member could take on multiple tasks when needed, but they still kept a clear structure in how they worked. The PTL and BA stepped in as real users, testing features and giving feedback from a user’s point of view. After defining their user roles and business logic, Team Người Việc translated their ideas into a working prototype. Their platform acts as a bridge between corporate planners and travel agencies, creating a space where requests, itineraries, and feedback flow seamlessly in real time. The system’s core features included: Trip creation and customization: HR or operation teams can build itineraries, adjust timelines, and submit requests tailored to their needs.Agency collaboration: Travel agencies receive those requests, update details, and negotiate directly through the platform, no more back-and-forth emails or lost messages.Participant tracking: Each trip generates a public QR code, allowing members to follow updates, view schedules, and send instant feedback during the journey.Transparency and engagement: The platform closes the communication loop, giving every stakeholder a clearer view of the process. With these key flows completed, the team delivered a functional MVP, a product with clean logic, smooth handoffs between roles, and enough structure to be reused or scaled for other industries. Modern Tech Stack Built for AI-Driven Innovation To bring their concept to life within 24 hours, Team Người Việc designed a tech stack that was modern, lightweight, and AI-friendly. Every layer from frontend to deployment was chosen to balance speed, scalability, and maintainability. Frontend Layer: Fast and Built for Clarity The team developed the user interface using Next.js 15 to handle both page rendering and API routes. Combined with TypeScript, it provided type safety and consistency across all modules, reducing human errors in the rush of development. For styling and components, they used Tailwind CSS and shadcn/ui, which allowed them to quickly create a clean, responsive design without spending time reinventing basic UI elements. Despite the tight schedule, the frontend still delivered a cohesive experience from trip creation to QR-based tracking, proving that with the right stack, agility doesn’t mean sacrificing structure. Backend Layer: Structured Logic and Data Flow Behind the interface, the team used Prisma ORM to manage the database layer. Its schema-first approach, paired with TypeScript integration, helped them maintain data consistency while iterating rapidly. The backend services were also written in Next.js, utilizing server functions to keep everything unified and easy to deploy. This setup gave the team clear control over their data models and allowed them to focus on the business logic, ensuring that trip creation, feedback collection, and participant interactions all flowed smoothly without manual handling. Infrastructure & Deployment: Stability under Pressure To keep their development-to-demo pipeline fast and reliable, Người Việc deployed their system on AWS using Dokploy - a self-hosted CI/CD solution that automates Docker-based deployments. This environment allowed them to push code, test changes, and release updates seamlessly without dependency conflicts. By using Docker containers, they replicated production conditions from the start, ensuring that the MVP remained stable and demo-ready throughout the hackathon. The setup was simple enough for rapid iteration yet robust enough to be scaled for real client use. AI Tools: A Smarter, Not Faster, Way to Build AI played a key role in the team’s workflow but only after the foundation was set.ChatGPT acted as their assistant for ideation and logic design, helping refine user stories, define acceptance criteria, and clarify user flows. Meanwhile, GitHub Copilot served as their pair programmer, generating clean snippets, suggesting improvements, and handling repetitive coding tasks. Instead of using AI as a shortcut, Người Việc used it as an accelerator by integrating it at the right moments to enhance productivity while keeping control of direction and logic. >>> Read more related articles: AI-Assisted Ecommerce Solution Wins Third Place at SupremeTech AI Hackathon 2025How Human Intelligence and AI Capabilities Can Redefine Software Development | Featuring The 1st Runner-Up of SupremeTech AI Hackathon 2025 Judges’ Feedbacks Business Perspective From a business perspective, the judges saw Team Người Việc as a perfect example of practicality and vision. Their solution showed how AI-driven development can address real client needs, especially in industries like travel and hospitality. However, the judges also provided constructive feedback for future improvement. While the idea covered a broad scope from sales to operations, they suggested narrowing the focus to one specific stage in the travel management cycle. By doing so, the solution could achieve higher feasibility and faster adoption in real-world scenarios. The judges also encouraged documenting the team’s AI-assisted project management workflow as a reference for future AI hackathon journeys within SupremeTech. The final presentation showcased all the best qualities of their teamwork. The judges highlighted Người Việc’s clear storytelling, strong time management, and smooth demo delivery that effectively illustrated how their system worked. The team’s confident, structured presentation left a lasting impression and perfectly captured the spirit of SupremeTech’s AI Hackathon. Technical and Engineering Perspective From a technical point of view, the judges recognized Người Việc as a team that combined strong engineering skill with thoughtful use of modern tools. They developed their product on a well-defined code base with clear development standards, following a structured flow from analysis and design to implementation, which is remarkable under the time pressure of a 24-hour hackathon. The highlight of their approach was the story-based prompting technique, which kept the project’s logic coherent from start to finish. By crafting prompts around user stories rather than isolated tasks, the team ensured that every AI-generated piece of code served a real business purpose. This balance between automation and human reasoning became one of the defining features of their success. Teamwork: Staying Calm When Things Went Wrong No hackathon story is complete without chaos and Người Việc had their moment too. Just before the final presentation, disaster happened: the team’s slide suddenly became inaccessible because their shared drive was locked by the judges. With only minutes left, they borrowed a laptop, rebuilt the slides from scratch, and walked onto the stage calm and composed delivering a confident demo that looked effortless to the audience. The team recalled “After 22 hours of coding, what stayed with us wasn’t exhaustion. It was that moment when everyone looked at each other and said: We'll make it work, no matter what.” Voices from the Winners For Team Người Việc, winning the hackathon was not just about the prize, it was about learning how humans and AI can truly collaborate. Reflecting on the experience, Dũng shared: “We realized that AI isn’t just a tool, it’s a real teammate, if you know how to ‘talk’ to it. Each team used AI differently: some for brainstorming, some for UI design, others for presentation. But the prompts we gave were never the same, and that’s why the results were so different. AI only shows its real power when people know how to guide it.” As winners, the team also offered advice for those who will join future hackathons: “Prepare everything you can beforehand: boilerplate code, deployment setup, tools, and your fighting spirit. Once the event starts, every minute counts. And above all, trust your team” Conclusion Team Người Việc proved that real innovation is not only about technology, but about people working together with purpose. By combining business insight, teamwork, and the smart use of AI, they turned a difficult 24-hour challenge into a real achievement. For SupremeTech, this victory is more than just a competition result. It’s a reminder that the future of development starts with clear thinking, strong teamwork, and the courage to explore new ways of building with AI. Appendix: 1. How the Team Applied AI Throughout the Project StageApproachAI Application/ Tools UsedAnalysis & DesignThe whole team brainstormed together, role-playing as real users to map out workflows and features.No AI used — this was the most human-driven stage focused on critical thinking.User Story writingConverted rough ideas into logical workflows, defined goals, and acceptance criteria.ChatGPT acted as a virtual BA, turning brainstorm notes into professional User Stories and Acceptance Criteria.Coding (User Story Based)Developers implemented each User Story while communicating directly with the AI assistant for suggestions and refactoring.GitHub Copilot served as a coding partner, reading stories, suggesting code, refining syntax, and accelerating implementation.Testing & ReleaseThe PTL and BA acted as real users to test the product, identify bugs, and refine the UX before release.No AI used — manual testing for real-user validation. 2. Team Tech Stack LayerTech StackFrontend & Backend (Fullstack)Next.js 15 (App Router)UI Libraryshadcn/ui + TailwindCSSAI AssistantChatGPT + GitHub CopilotInfra / DeployAWS + Dokploy 📩 Read more articles about us here: SupremeTech’s Blog

        22/10/2025

        177

        Quy Huynh

        AI

        +1

        • AI-assisted development

        How Team Người Việc Won SupremeTech’s AI Hackathon 2025 with AI-Assisted Development and Agile Thinking

        22/10/2025

        177

        Quy Huynh

        nguoi lao wins third place AI hackathon ecommerce AI

        AI

        AI-assisted development

        +0

          AI-Assisted Ecommerce Solution Wins Third Place at SupremeTech AI Hackathon 2025

          SupremeTech’s first-ever AI Hackathon was more than just a competition. It was a thrilling test of creativity, focus, and endurance. For 22 hours, teams of passionate innovators raced against time to turn bold ideas into working prototypes that could bring real business value through AI. Among them was team Người Lào, whose project tackled one of the most relevant challenges in modern retail: building an omnichannel e-commerce and loyalty platform supported by AI. The goal was to create a system that connects online shopping, personalized loyalty programs, and in-store interactions into one seamless customer journey.What made Người Lào stand out was their business-driven mindset. Instead of treating the task as a purely technical challenge, they saw it as an opportunity to transform how Vietnamese cosmetic retailers connect with their customers. Their answer was ViEC Beauty, an innovative AI-powered e-commerce solution built on Zalo Mini App, turning a familiar local platform into a powerful tool for digital commerce. Meet The Team Team Người Lào was formed with the simple spirit of having fun, staying friendly, and learning together. Everyone joined with an open mind, ready to give their best once the challenge began. The team brought together members from different backgrounds, covering all key roles in a real project from infrastructure and front-end to back-end, business analysis, and quality control.Phuoc Pham, the team leader, believed great teamwork mattered more than perfect technical skills. What he looked for were people who knew their strengths and were willing to give their all. With that mindset, Người Lào grew into a team built on trust, respect, and laughter, values that ultimately became their greatest strength. When a Familiar Task Became the Toughest Challenge At first, the assignment sounded simple: create a multi-channel e-commerce and loyalty platform for retail stores. Building e-commerce systems was something most members already did in their daily work. But soon they realized that creating a typical shopping app would not stand out. To impress the judges, they needed something fresh, a solution with clear business impact and technical creativity. In just 22 hours, with five members and the support of AI tools, Người Lào had to deliver a product that was practical, scalable, and market-ready. Finding a Small Idea with Big Impact After a few brainstorming sessions, they decided to focus on a small but meaningful niche: the Vietnamese cosmetic retail market. This idea came from observing how many small cosmetic shops in Vietnam were struggling to keep up with the digital shift. While big players like Shopee and TikTok Shop dominate online sales, a large number of small cosmetic stores still lack proper digital tools to compete. These stores serve a loyal base of middle-aged customers who have strong purchasing power but are often left behind in the rush of digital transformation. They do not need complex apps or flashy platforms. What they need is something simple, familiar, and trustworthy. Người Lào identified three major problems these small retailers face: Losing connection with middle-aged customers who prefer personal interaction but no longer visit the store as often.Lack of customer insights makes it hard for shop owners to understand shopping habits or preferences.Being overshadowed by large e-commerce platforms, which are slowly taking over their loyal customer base. With those challenges in mind, Người Lào saw an opportunity to make a real difference. Instead of competing with big platforms, they wanted to empower small retailers with a digital tool that feels local, personal, and easy to use.That was when the idea of building an AI-powered e-commerce solution on Zalo Mini App, namely ViEC Beauty, was born. ViEC Beauty is a platform that could bring e-commerce and loyalty features right into the ecosystem that Vietnamese users already trust and use every day. It was a smart move that combined business empathy, technical creativity, and a clear understanding of the local market. From Idea to Prototype in 24 Hours Once the idea was clear, the real race began. With only 24 hours to bring ViEC Beauty to life, Người Lào jumped straight into action. The plan was simple: divide roles clearly, trust each other’s strengths, and move fast. Hieu Vo, the dev lead, took charge of integrations and overall coordination. Anh Duong focused on building the back end with Laravel and setting up the admin site. Hieu Cao worked on the front end of the Zalo Mini App. At the same time, Huong Nguyen took on both the Business Analyst and Quality Control roles to ensure everything aligned with the initial vision. Meanwhile, Phuoc Pham, the team leader, acted as the bridge connecting everyone - reviewing ideas, making key decisions, and preparing the final presentation slides. With all the key roles covered, the team had a 360-degree view of the project, from technical implementation to business logic and user experience. They spent the first ten hours coding with AI Copilot and documenting the workflow. It was intense but exciting until the team hit a wall. The AI started producing conflicting UI components due to unclear process design in the initial prompts. What was supposed to save time ended up creating bugs that needed hours to fix. But instead of getting frustrated, the team stayed calm, laughed it off, and worked together to debug and refine the product until everything clicked into place. When the final hour arrived, they had a fully working Zalo Mini App—not perfect, but functional, meaningful, and proudly built within a single sleepless day. The Product: Core Features That Matter ViEC Beauty, an AI-powered e-commerce solution built within the Zalo ecosystem, offered small beauty retailers an accessible and familiar way to sell online and engage customers. Core App Features Product Catalog: An easy-to-browse collection of beauty products directly inside Zalo.Basic Loyalty Point System: Customers earn and redeem points to encourage repeat purchases.Admin Dashboard Prototype: A simple dashboard for store owners to manage products, orders, and sales.Zalo Integration Setup: Allows stores to send personalized notifications, skincare reminders, and promotions through the Zalo Official Account. Super Admin System A more advanced panel included: Real-time data analytics for instant business insightsInventory management to track stock levelsCRM tools to maintain relationships and engagementCampaign and promotion management to run and measure marketing activities Even though some features like Group Orders and AI Skin Analysis were still in ideation, ViEC Beauty already demonstrated how a simple, focused solution could bring AI-powered value to small businesses. Tech Stack The team built ViEC Beauty with React and Zalo SDK for the front end, Laravel for the back end, MySQL for the database, and EC2 cloud infrastructure for hosting. They chose familiar and reliable technologies to move fast and deliver results within 24 hours, prioritizing execution over complexity. >>> Read more related articles: SupremeTech’s AI Hackathon 2025: A blend of Product-Focused Spirit and AI-assisted DevelopmentHow Human Intelligence and AI Capabilities Can Redefine Software Development | Featuring The 1st Runner-Up of SupremeTech AI Hackathon 2025 Judges’ Feedback The judges praised Người Lào’s strategic focus on a niche market and their decision to build on the Zalo Mini App, calling it a practical and high-potential approach. They noted that while the product targeted small beauty retailers, a limited market segment, it had strong potential for real-world implementation. They recommended expanding ViEC Beauty into a multi-store SaaS platform, adding community-driven features, and integrating AI more deeply for personalization and competitiveness. On the technical side, the judges commended the team’s clear planning, fast execution, and AI integration. They encouraged the team to make AI applications more visible and explore scalability for larger projects. Overall, Người Lào left a strong impression with a well-executed prototype and a clear vision for future growth. Teamwork Memorable Moments For Phuoc Pham, the leader, the biggest lesson was simple: strong determination makes anything possible. He learned to stay focused, manage effort wisely, and balance ambition with practicality so the team could deliver on time. To him, the real strength of Người Lào came from teamwork, from every member understanding their own strengths and supporting one another toward a shared goal. Huong Nguyen shared that the hackathon was an unforgettable experience, a test of creativity, patience, and collaboration. From ideation to final delivery, every member gave their best and learned how to manage time, communicate, and step outside their comfort zones. Winning third place was a proud moment, but for the team, the valid reward was the experience itself, learning, laughing, and building something meaningful together. Conclusion For Người Lào, the SupremeTech AI Hackathon 2025 was more than a contest. It was a journey of teamwork, creativity, and discovery. In just 24 hours, they turned an idea into a working Zalo Mini App that blended business insight, AI innovation, and human collaboration. Their story proved that success is not just about winning but about learning how to move fast, stay focused, and create with purpose. ViEC Beauty started as a hackathon project, but it carries the potential to grow into something much bigger for Vietnam’s beauty retail industry. Team Phuoc Pham T. - Senior Infra EngineerHieu Vo H. - Senior BE EngineerDuong Nguyen V. A. - BE EngineerHieu Cao K. - FE EngineerHuong Nguyen T.T. - Quality Control Engineer  Tech Stack Frontend: React, Zalo SDKBackend: LaravelDatabase: MySQLInfrastructure: EC2, Cloud 📩 Read more articles about us here: SupremeTech’s Blog

          21/10/2025

          171

          Ngan Phan

          AI

          +1

          • AI-assisted development

          AI-Assisted Ecommerce Solution Wins Third Place at SupremeTech AI Hackathon 2025

          21/10/2025

          171

          Ngan Phan

          Customize software background

          Want to customize a software for your business?

          Meet with us! Schedule a meeting with us!