Skip to main content

Using CloudBase AI CLI to develop a mini program for recycling idle items in the neighborhood

This article will use an example project of a neighborhood idle item recycling mini program to detail how to use CloudBase AI CLI for full-stack development. From environment preparation to final deployment, it will teach you step by step how to quickly build a complete WeChat mini program using AI programming tools.

🎯 Project Background​

In the fast-paced modern life, we often have idle items: books we've finished reading, seasonal clothes, upgraded digital devices... These items are often forgotten in corners, taking up space and wasting resources. At the same time, we may need certain items but don't want to spend a fortune buying new ones.

Based on this pain point, we designed an example project of a Neighborhood Idle Item Reuse Platform to demonstrate how idle items within the community can be brought back to life—environmentally friendly, economical, and fostering neighborly relationships.

🏗️ Technical Architecture Design​

Overall Architecture​

Core Feature Module​

🚀 Preparing the Development Environment​

1. Setting Up the Basic Environment​

First, we need to prepare the development environment:

Download WeChat Developer Tools

Register Mini Program

2. Install CloudBase AI CLI​

CloudBase AI CLI is a unified AI programming tool management platform developed and launched by Tencent Cloud, supporting multiple AI models, enabling us to perform full-stack development using natural language.

One-Click Install (Recommended)

# For Mac/Linux/Windows WSL
curl https://static.cloudbase.net/cli/install/install.sh -fsS | bash

# Windows PowerShell
irm https://static.cloudbase.net/cli/install/install.ps1 | iex

npm Install (Alternative)

npm install -g @cloudbase/cli

After the installation is complete, verify the installation:

tcb --version

3. Log in to the CloudBase environment​

tcb login

Follow the prompts to complete WeChat QR code login, then select or create a Cloud Development environment.

🎨 Project Development Practice​

Step 1: Create a Project​

  1. Create the Project Directory
mkdir neighborhood-recycling
cd neighborhood-recycling
  1. Start the AI Assistant
tcb ai
  1. Select AI Model and Template In the AI conversation, we select:
  • AI model: Claude Code (or Kimi K2)
  • Project template: Mini Program CloudBase Template
  1. Describe Project Requirements
Please help me create a WeChat mini-program example for recycling idle items in the neighborhood with the following features:

1. Homepage: item browsing, search, category filtering, sorting
2. Item Details: image carousel, detailed information, contact information, favorite
3. Item Release: multiple image uploads, information entry, location choosing
4. User Center: Personal Information, My Posts, My Favorites

Tech Stack: WeChat Mini Program + Cloud Development (Cloud Functions, Database, Cloud Storage)
Design style: simple and modern, with a green environmental theme

Step 2: Project Structure Generation​

AI will automatically generate the project structure based on requirements.

Step 3: Database Design​

AI will design the database structure for the sample project:

// items collection structure
{
  _id: _id: "Automatically generated ID",
  title: title: "Item Title",
  description: description: "Item Description", 
  category: category: "Item Category", // Electronics, Books, Clothing, Home, Sports, Other
  price: price: 0, // Price (0 means free)
  images: images: ["Image URL array"],
  contactWechat: contactWechat: "WeChat ID",
  contactPhone: contactPhone: "Phone Number", 
  location: {
    latitude: latitude: "Latitude",
    longitude: longitude: "Longitude", 
    address: "address: "Address"
  },
  status: "available", // available, sold, removed
  openid: openid: "User openid",
  createTime: createTime: "Creation timestamp",
  updateTime: updateTime: "Update timestamp",
  views: views: "View count",
  favorites: "favorites: "Favorites count"
}

Step 4: Cloud Function Development​

AI will automatically generate the cloud function code for the sample project:

itemManager Cloud Function (Item Management)

// Handle CRUD, search, and other features for items
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  const db = cloud.database()
  const { action, data } = event
  
  switch(action) {
    case 'create':
      return await createItem(db, data)
    case 'query':
      return await queryItems(db, data)
    case 'update':
      return await updateItem(db, data)
    case 'delete':
      return await deleteItem(db, data)
    default:
      return { error: 'Unknown action' }
  }
}

getOpenId Cloud Function (User Identity Retrieval)

const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

Step 5: Frontend Page Development​

AI will generate the complete frontend code for the sample project, including:

Home (index)

  • Responsive Item Grid Layout
  • Real-time search feature
  • Category filtering and sorting
  • Pull-to-refresh and pull-up loading

Item Detail Page (detail)

  • Image Carousel Display
  • Detailed item information
  • Favorites feature
  • Contact information display

Publish Page (publish)

  • Multiple Image Upload
  • Comprehensive form validation
  • Location choosing
  • Smart Classification

User Center (profile)

  • User Information Management
  • Personal statistics
  • My Posts Management
  • My Favorites

Step 6: Develop in WeChat Developer Tools​

  1. Open the Project
# Running in the project directory
tcb ai -- "Use WeChat Developer Tools to open the current project"
  1. Configure the Project
  • Import the project in WeChat Developer Tools
  • Configure AppID
  • Enable the CloudBase feature
  1. Real-time Development
  • My Favorites
tcb ai

This way, you can develop and preview simultaneously, while AI helps optimize your code and resolve issues in real time.

🔧 Core Feature Implementation​

1. Homepage Item Display​

Key Code Implementation:

// pages/index/index.js
Page({
  data: {
    items: [],
    loading: false,
    hasMore: true
  },
  
  onLoad() {
    this.loadItems()
  },
  
  async loadItems() {
    this.setData({ loading: true })
    try {
      const result = await wx.cloud.callFunction({
        name: 'itemManager',
        data: { action: 'query', data: { status: 'available' } }
      })
      this.setData({ 
        items: result.result.data,
        loading: false 
      })
    } catch (error) {
      participant P as Homepage
    }
  }
})

2. Image Upload feature​

Implementation Code:

async uploadImages(tempFilePaths) {
  const uploadTasks = tempFilePaths.map(filePath => {
    return wx.cloud.uploadFile({
      cloudPath: `items/${Date.now()}-${Math.random().toString(36).substr(2, 9)}.jpg`,
      filePath: filePath
    })
  })
  
  const uploadResults = await Promise.all(uploadTasks)
  return uploadResults.map(result => result.fileID)
}

3. Search and Filtering​

🎨 Design Highlights​

Visual Design​

We adopted a green environmental theme, embodying the concept of recycling for environmental protection:

/* Theme color */
:root {
  --primary-color: #4CAF50;    /* Primary color: eco green */
  --secondary-color: #81C784;  /* Secondary color: light green */
  --accent-color: #FF9800;     /* Accent color: orange */
  --text-color: #333333;       /* Text color: dark gray */
  --bg-color: #F5F5F5;         /* Background color: light gray */
}

User Experience Optimization​

  1. Responsive Design: Adapts to different screen sizes
  2. Loading Status: Provides user-friendly loading feedback
  3. Error Handling: Graceful error prompts
  4. Operation Feedback: Real-time operation result feedback

🚀 Deployment and Release​

1. Deploying Cloud Functions​

# Execute in the Project Root Directory
tcb ai -- -p "Deploy all cloud functions to the cloud development environment"

2. Initialize the database​

tcb ai -- -p "Create database collections and indexes"

3. Mini Program Preview​

  1. Click "Preview" in WeChat Developer Tools
  2. Scan the QR code with WeChat to preview on mobile
  3. Test various features for normal operation

4. Submit for Review​

  1. Complete Mini Program information
  2. Upload Mini Program icons and screenshots:
  3. Fill in the feature description
  4. Submit for Review

📊 Project Achievements​

Through the development of CloudBase AI CLI, we have successfully built a feature-complete example of a neighborhood idle item recycling mini program:

Technical Achievements​

  • ✅ Complete WeChat Mini Program Application
  • ✅ Cloud functions backend services
  • ✅ Database Data Storage
  • ✅ Cloud Storage File Management
  • ✅ Responsive User Interface

Business Value​

  • 🌱 Environmental Value: Promoting resource recycling
  • 🤝 Social Value: Enhancing neighborhood interaction
  • 💰 Economic Value: Help users save costs
  • 🏠 Community Value: Building a harmonious community environment

🎯 Development Experience Summary​

Advantages of CloudBase AI CLI​

  1. Unified Management: Manage multiple AI programming tools with a single command
  2. Multi-Model Support: Supports Claude Code, Kimi K2, and other models
  3. Cloud Development Integration: Deep integration with Tencent Cloud Development Platform
  4. Rapid Development: Significantly reduce coding time and enhance development efficiency

Best Practices​

  1. Clear Requirements: Clarify feature requirements and technical specifications before starting
  2. Progressive Development: First implement core features, then gradually improve them.
  3. Real-time Testing: Test while developing to detect issues promptly
  4. Documentation: Document the development process and key decisions

🔗 Related Resources​

🎉 Closing Remarks​

Through CloudBase AI CLI, we have successfully transformed a complex full-stack mini program sample project from concept to reality. This not only demonstrates the powerful capabilities of AI programming tools but also proves the value of cloud development platforms in rapid application development.

In the future, with the continuous advancement of AI technology, we believe more developers will rapidly build valuable products through similar approaches, driving the popularization and application of technology.