Utilize AI to Kick Start Your DANA Mini Program Development

2025-04-29 03:00

Introduction

Imagine accelerating your miniprogram development from days to mere hours by leveraging the power of AI. With AI tools readily available today, repetitive tasks like initial coding, UI design, architecture planning, and even troubleshooting become significantly faster and easier.

This guide will show you exactly how to harness AI tools—such as ChatGPT and Windsurf IDE—to quickly develop practical and robust DANA Miniprograms. Whether you're a seasoned developer or just starting out, this approach reduces complexity and boosts your productivity.

What is a DANA Miniprogram?

DANA Miniprograms leverage a lightweight application model that enables users to access services instantly without the need for installation. While they are built on a similar foundation, DANA Miniprograms feature custom JavaScript APIs (JSAPI) specifically designed to meet the needs of the Indonesian market.

Developers should consider creating miniprograms because they provide quick, convenient, and seamless user experiences without the friction of traditional app installations. Utilizing the DSL (Domain-Specific Language) solution ensures consistency, maintainability, and easier scalability, enabling developers to focus more on business logic rather than intricate platform-specific details.

What Will You Build?

In this tutorial, you'll develop a simple yet highly practical Currency Converter miniprogram, using the free and easy-to-use Fawaz Ahmed's Exchange API . This project will guide you through real-world scenarios involving API integration, UI design, and effective use of AI-assisted development tools.

Why Use AI?

Efficiency: Dramatically reduce time spent on routine tasks.
Precision: AI tools help produce accurate, high-quality code.
Creativity: Spend less time debugging, more time innovating.

Ready to begin your AI-powered development journey? Let's dive in and transform your ideas into reality faster than ever!

Preparation & Tools

Before you start developing, let's gather the essential tools and resources you'll need:

AI Tools

ChatGPT ( Web Link ): An AI-powered assistant that helps you clarify requirements, suggest architectures, generate code snippets, and troubleshoot issues quickly.

Development Tools

Windsurf IDE ( Web Link ) or other AI editor (ex: Trae, Cursor): A powerful, versatile development environment offering extensive features and full capabilities for various types of application development. In this tutorial, we will specifically leverage its DSL-based generation capability to simplify and streamline miniprogram creation.
DANA Miniprogram Editor ( Web Link ): The official editor for creating, testing, and deploying your DANA miniprograms, providing specific tools and emulators to match DANA's unique JSAPI environment.

API Integration

Fawaz Ahmed's Exchange API ( Web Link ): A free, publicly available API for currency conversion that doesn't require registration or an API key, making it ideal for rapid prototyping and tutorials.

With these tools prepared, you're all set for a smooth and effective development process.

Prompting Strategy & ChatGPT Discussion

Effectively using AI tools starts with clearly formulated prompts. A structured prompt ensures AI provides comprehensive and accurate assistance. Here's a strategy you can follow:

Simple Prompt (Concise and Direct)

copy
I want to create a DANA Miniprogram for currency conversion.

- Functionalities:
  - Allow users to select currencies (e.g., USD to IDR).
  - Users input an amount and immediately see the converted amount.

- API:
  - Integrate Fawaz Ahmed's Exchange API for fetching exchange rates.

- UI/UX:
  - Minimal and intuitive design with clear input fields and real-time calculation.
  - Include dropdown menus or selectors for currency choice.

- Architecture:
  - Follow MVVM pattern (Model-View-ViewModel).
  - Clearly separate UI, logic, and data fetching.

- Special notes:
  - Explicitly account for DANA-specific JSAPI variations from standard APIs.

Enhanced Prompt (Detailed and Comprehensive)

copy
<persona>
You are a miniprogram planner named Nana. Your role is to assist users clearly by providing architecture and UI design plans for their miniprogram ideas. You should be friendly, helpful, and ensure clarity. The platform used is a DANA Miniprogram, built within the DANA application (e-wallet).
</persona>

<caveat>
Users may present simple prompts or general ideas. It’s your responsibility to clarify, discuss, explore, and brainstorm until you fully understand their requirements.
</caveat>

<workflow>
1. Clarify and gather all necessary information from the user's prompt.
2. Think carefully and clearly outline the architecture.
3. Create detailed design representations aligned with the architecture.
4. Compile all details into a complete, clear report for easy user implementation.
</workflow>

<architecture task>
Provide clearly:
1. Essential pages and purposes.
2. Clear navigation flow with defined entry points.
3. Layout recommendations (padding, margins, spacing).
4. Preliminary color scheme and styling suitable for currency conversion.
5. Clearly describe integration points for fetching currency data using Fawaz Ahmed’s Exchange API.
6. Explicitly highlight DANA-specific JSAPI constraints.
</architecture task>

<design task>
Clearly include:
1. Component Breakdown (components per page, asset placements).
2. Page Interactions & Navigation Flows.
3. Mock Data Structure (at least 4 clear examples).
4. Required Assets (images and icons clearly detailed).
5. Layout & Spacing Guidelines (padding, margins, typography clearly defined).
</design task>

<IMPORTANT>
- Limit responses to 5500 characters.
- Clarify directly if unsure—no assumptions.
- Focus clearly on essential functionalities for a focused POC and mockup.
</IMPORTANT>

Comparing Simple vs. Enhanced Prompts

The Simple Prompt provides quick, clear guidance suitable for straightforward tasks or rapid prototypes. It yields direct, efficient outcomes focused mainly on the immediate requirements.

In contrast, the Enhanced Prompt guides the AI to generate more comprehensive results, suitable for thorough planning or documentation purposes. This prompt type often produces detailed architecture diagrams, explicit design instructions, navigation comprehensive flows, and structured mock data.

Detailed Explanation of Enhanced Prompt

Persona: Defines the role and behavior of the AI, ensuring responses match user expectations.
Caveat: Ensures the AI proactively engages with users to clarify unclear or incomplete ideas.
Workflow: Clearly outlines the steps AI should follow, promoting structured responses.
Architecture Task: Explicitly instructs AI to deliver detailed structural plans including navigation, layout, color scheme, API integration, and DANA-specific constraints.
Design Task: Details UI and UX elements clearly, from component breakdowns and interactions to mock data structures and layout guidelines.
Important: Highlights critical constraints like response length, avoidance of assumptions, and the focus on core functionalities to streamline development.

In the next section, we'll show an example of the discussion outcome using both prompting strategies, demonstrating clearly how each type affects AI-generated outcomes.

Example: How to Effectively Engage with AI to Define Requirements

To effectively create detailed requirements using ChatGPT, follow these practical steps:

Step 1: Start the Discussion

Open ChatGPT ( ChatGPT Link ) and select GPT-4o for optimal accuracy. Input your enhanced prompt to clearly define your requirements.

Step 2: Verify AI Understanding

Carefully review the AI's response. AI might occasionally misunderstand specific instructions, such as using incorrect API endpoints or misinterpreting your requirements.

For instance, the AI might mistakenly suggest:

Incorrect Endpoint: https://example.com/api/wrong-endpoint

When the correct endpoint should clearly be:

Correct Endpoint: https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies.json

Step 3: Provide Clear Feedback

If the AI makes a mistake, provide clear, immediate feedback to correct misunderstandings. Example:

"The API endpoint you provided is incorrect. Please use the correct API endpoint provided by Fawaz Ahmed's Exchange API: https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies.json."

Step 4: Iterate Until Complete

Continue to engage iteratively with the AI, refining and confirming your requirements until the AI response fully matches your expectations.

Step 5: Finalize the Prompt

Once satisfied, explicitly request a finalized and structured prompt from the AI, clearly formatted for easy use within the Windsurf IDE AI editor.

Example Finalized Prompt Outcome

Here's a clearly structured example prompt ready for use in Windsurf IDE:

https://chatgpt.com/share/67e25b1a-051c-800b-a206-155977739583

copy

Generate a DANA Miniprogram with the following setup:

🛠 **Project Setup**
  - Framework: DANA Miniprogram framework
  - Pages: Home (Currency Converter), Historical Trends
  - Components:
    - Currency Selector (Dropdown)
    - Swap Button (🔄) with fade animation
    - Refresh Button (🔄) for manual updates
    - Historical Trends Table
  - Routing: Smooth slide-in transition between pages
  - Styling: Light & dark mode support, clean modern UI

📱 **UI Features**
  **Home Page (Currency Converter)**
  - Amount input field (Auto-format numbers)
  - Two currency selectors (From & To)
  - Swap button (🔄) with fade animation
  - Real-time conversion updates
  - "View Trends" button → Opens historical trends
  - "Refresh Rates" button → Updates latest exchange rates

  **Historical Trends Page**
  - Displays percentage change for:
    - 1 Year Ago, 6 Months Ago, 1 Month Ago, 1 Week Ago, 1 Day Ago
  - Color-coded table (🔴 Red for negative, 🟢 Green for positive)
  - Slide-in transition for smooth navigation
  - Manual refresh button to fetch new historical rates

🌐 **API Integration (Fawaz Ahmed’s Currency API)**
  - **List all available currencies**
    - Endpoint: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies.json`
    - Returns a JSON object listing all supported currencies.

  - **Get latest exchange rates for a specific base currency**
    - Endpoint: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{base_currency}.json`
    - Example: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/usd.json`
    - Returns latest exchange rates for all currencies with **USD** as the base.

  - **Get historical exchange rates for a specific date**
    - Endpoint: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@{YYYY-MM-DD}/v1/currencies/{base_currency}.json`
    - Example: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@2024-03-25/v1/currencies/usd.json`
    - Returns exchange rates from the specified date.

  - **Get a minified version of currency list**
    - Endpoint: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies.min.json`
    - Same as the currency list but with reduced size for faster loading.

  - **Get exchange rates with a specific currency as the base**
    - Example for EUR: `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur.json`
    - Returns exchange rates with EUR as the base currency.

🔄 **Swap Button Animation**
  - Fade transition when swapping "From" & "To" currencies
  - Maintain the input amount while updating exchange rates
  - Ensure instant conversion update after swapping

📡 **Data Caching & Offline Mode**
  - Store exchange rates **locally** (cache latest for 10 min, historical for 7 days)
  - Allow users to view **last-known exchange rates** when offline
  - Fetch new data **only when needed** (on refresh or expiration)
  - Show warning if using outdated cached data

🛠 **Implementation (Code Examples)**
**Fetch Latest Exchange Rates & Store in Cache**
```js
async function fetchLatestRates(baseCurrency, targetCurrency) {
  const cacheKey = `latestRate_${baseCurrency}_${targetCurrency}`;
  const cachedData = my.getStorageSync({ key: cacheKey }).data;
  if (cachedData && Date.now() - cachedData.timestamp < 600000) return cachedData.rate;

  try {
    const response = await fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${baseCurrency}.json`);
    const data = await response.json();
    const exchangeRate = data[baseCurrency][targetCurrency];

    my.setStorageSync({ key: cacheKey, data: { rate: exchangeRate, timestamp: Date.now() } });
    return exchangeRate;
  } catch (error) {
    console.error("Failed to fetch rates", error);
    return cachedData?.rate || null;
  }
}
```

Following these clear and iterative steps ensures your final requirements are accurate, comprehensive, and ready for direct integration into your development environment.

Moving Prompts from ChatGPT to Windsurf ID

After generating and refining your prompts in ChatGPT, the next step is transferring these finalized prompts to Windsurf IDE's built-in AI editor to produce your DSL-based miniprogram:

Practical Steps:

Copy the finalized prompt from ChatGPT:

Ensure all details, especially functional, architectural, and DANA-specific constraints, are clearly outlined.

Open Windsurf IDE:

Navigate to the AI-assisted editor interface.

Paste your prompt into Windsurf IDE's AI prompt field:

Confirm the formatting remains consistent and clear.

Review and Run the AI Prompt:

Allow Windsurf IDE's AI to generate initial DSL code and project structure based on your prompt.

Evaluate AI Output:

Carefully check the generated code structure, components, and initial layout.
Iteratively refine by adjusting prompts or manually editing as needed.

Best Practices for Optimal Results:

Prompt Clarity: Clearly structured prompts directly impact the quality and accuracy of AI-generated output.
Iterative Approach: Don't hesitate to refine and re-run prompts in Windsurf to achieve desired results.
Incremental Adjustments: Regularly verify output after each iteration to maintain clarity and accuracy.

Once you successfully transfer and verify your prompt within Windsurf IDE, you're ready to fully harness the power of AI-assisted miniprogram development!

AI-Powered Development in Windsurf IDE

With your initial codebase generated, leverage Windsurf IDE's built-in AI capabilities to iteratively refine your miniprogram:

Iterative Development Workflow:

Evaluate Initial Output in DANA Miniprogram Editor:

Run and test the code to identify any issues or improvements needed.

Feedback and Prompt Refinement:

Clearly document issues or unexpected behavior identified during testing. In our example we found that the API not called properly.

Return to Windsurf IDE and input these findings as new AI prompts to refine the codebase.

Continuous Validation:

Maintain a back-and-forth iterative workflow between Windsurf IDE and the DANA Miniprogram Editor.

Regularly validate and confirm compatibility, UI correctness, and functionality.

Optimize UI and Logic:

Utilize Windsurf AI to enhance UI components and refine business logic, continually improving user experience and application reliability.

This iterative loop ensures your miniprogram meets expectations, harnessing AI to streamline development efficiently.

Next Steps

This AI-powered approach to miniprogram development offers substantial flexibility and scalability. While we've demonstrated a structured yet iterative workflow, it is important to recognize this as a foundation—one that remains adaptable to your evolving project needs.

Embracing Open-Ended Development

The iterative process described is intentionally open-ended, allowing continuous improvement and innovation. As you become more comfortable with AI integration, you'll discover new ways to enhance productivity and quality beyond initial expectations.

Suggested Next Steps

Experiment Further: Continue to refine prompts and explore other functionalities.
Expand Project Scope: Gradually introduce more complex features and integrations.
Feedback Loop: Regularly gather user feedback and integrate insights to refine your miniprogram.

Ultimately, embracing this open-ended methodology empowers you to leverage AI fully, positioning your projects for ongoing success and continuous improvement.