Nana MiniApp Integration Guide for Third-Party Developers

Nana is a leading e-grocery delivery platform that aims to provide an enriched user experience by allowing third-party miniapps to be seamlessly integrated into its ecosystem. This guide is designed for developers and technical teams from third-party businesses looking to integrate their miniapps with Nana, enabling their services to be offered directly to Nana users.

Getting Started

Prerequisites

To successfully integrate your miniapp with Nana, ensure that you have:

• JavaScript Proficiency: Experience with JavaScript and at least one of the supported frameworks.
• Familiarity with Ionic Capacitor Plugins: Understanding of how to use Ionic Capacitor plugins to access native device features.
• Access to the Nana MiniApps SDK: You will receive access to the SDK, which is essential for integration.
• Code Hosting Repository: A repository for your miniapp code (e.g., GitHub, GitLab).

Supported Frameworks

You can develop your miniapp using any of the following JavaScript frameworks:

• Angular
• React
• Vue.js
• Svelte
• Vanilla JavaScript

Integration Steps

1. Develop Your MiniApp

• Choose a Framework: Select one of the supported frameworks based on your project requirements and expertise.
• Design Your MiniApp: Develop the user interface and core functionalities of your miniapp, keeping in mind the features you plan to offer.

2. Integrate Ionic Capacitor Plugins

To access native features such as location services, camera, and notifications, you must integrate Ionic Capacitor plugins into your miniapp. Permissions to these plugins must be explicitly requested by the third-party service provider.

• Reference: Capacitor Plugins Documentation
• Common Plugins:
  • Contacts: Access the user's contacts.
  • Geolocation: Access the device's location services.
  • Camera: Use the device's camera.
  • Notifications: Send local notifications to the user.

3. Integrate with Nana MiniApps SDK

The Nana MiniApps SDK allows you to interact with Nana App services, enabling seamless integration and enriching the user experience.

• User Information Access:

  • User Name: Retrieve the name of the logged-in user.
  • User ID: Access the unique ID assigned to the user.
  • User Address: Retrieve the user's delivery address.
  • User Balance: Access the user's balance within the Nana ecosystem.

• Available Services:

  • Promotion Handling: Integrate promotions and discounts.
  • Checkout & Payment: Facilitate secure payment transactions.
  • SMS Integration: Use SMS for notifications or updates.
  • Push Notifications: Send important updates directly to users.
  • Event Sharing: Share key events or updates within the Nana ecosystem.

Steps for Integration:

1. Install the SDK: Begin by adding the Nana MiniApps SDK to your project. The Nana team will provide package installation instructions.

2. Initialize the SDK: Configure the SDK with your miniapp credentials, which will be provided by Nana. This step is critical for authenticating your miniapp with the Nana platform.

3. Implement Features: Utilize SDK methods to access Nana’s services and integrate functionalities like user authentication, rewards, checkout, and more.

4. Submit for Approval:

   • Code Review: Ensure that your miniapp meets Nana's quality standards. Best practices should be adhered to throughout your code.
   • Repository Access: Add the Nana development team to your repository for review.
   • Submission: Notify the Nana team when your miniapp is ready for a final review.

5. Deploy Your MiniApp: Deployment procedures depend on the phase of the workflow, outlined below.

Deployment Workflow

1. Documentation & Resources: Nana will provide comprehensive documentation, including details on Ionic Capacitor and an example repository to get started. You will also receive the Nana MiniApps SDK package.

2. Development:

   • Use the provided resources to develop your miniapp.
   • Integrate the SDK and Capacitor plugins to extend the functionality of your miniapp.

3. Repository Collaboration:

   • Add the Nana development team to your repository to facilitate review and ensure compatibility.
   • The Nana team will add necessary configuration files to streamline integration.

4. Building & Deployment:

   • Nana will build the miniapp and deploy it to Capgo, a live update service for Capacitor apps.
   • A miniapp entry will also be created in Strapi, a headless CMS used by Nana to manage content.

5. Testing:

   • Nana will provide a deep link for testing your miniapp within the Nana App to verify its behavior and compatibility.

Summary

By integrating your miniapp with the Nana platform, you can tap into a vast user base and offer seamless services directly to Nana customers. Following the integration steps outlined above will help you create a smooth, fully-functional miniapp that meets the Nana quality standards.

If you have any questions or run into challenges during the integration process, feel free to reach out to the Nana development team for assistance and support.