How to Rapidly Build Mobile and PC Portals with a Low‑Code Platform

Introduction

Traditional website building involves requirement analysis, design, front‑ and back‑end development, and ongoing maintenance, which can be costly and time‑consuming. This article explains how to use Alibaba’s low‑code platform “Magic Pen” to visually add portal components and quickly create mobile and PC portals.

Typical Development Phases and Pain Points

Requirement analysis and preparation – define hardware/software specs and set up environment.

Website development – design layout, write and debug front‑end and back‑end code, APIs, and database interactions.

Version update – redesign UI and refactor code when requirements change.

Operations – continuous server maintenance, monitoring, security, and data management.

These phases lead to high cost, long cycles, complexity, and maintenance burden.

Low‑Code Solution Overview

The Magic Pen platform provides a component library, drag‑and‑drop page design, and automatic adaptation for mobile and PC, allowing one‑stop, low‑cost, high‑performance site construction.

Step‑by‑Step Tutorial

1. Deploy Resources

Domain (registered and ICP‑recorded).

Cloud DNS records.

VPC and Subnet.

RDS MySQL instance.

Magic Pen low‑code platform.

Requests go through DNS to Magic Pen, which provides SSL and synchronizes data with the backend database.

2. Create VPC and Subnet

Configure a VPC and a subnet in an available zone to host the RDS instance.

3. Create RDS MySQL

Provision a MySQL instance, create a database, user, and enable external access.

CREATE TABLE home_ent (
    id INT AUTO_INCREMENT PRIMARY KEY,
    e_time VARCHAR(255),
    e_value VARCHAR(255),
    e_group VARCHAR(255)
);
INSERT INTO home_ent (e_time, e_value, e_group) VALUES
('2023','1500000','第一季度'),
('2023','1650000','第二季度'),
('2023','1450000','第三季度'),
('2023','1550000','第四季度'),
('2024','1650000','第一季度'),
('2024','1500000','第二季度'),
('2024','1700000','第三季度'),
('2024','1600000','第四季度');

4. One‑Click Deployment (Optional)

Use Alibaba Cloud ROS templates to automate resource creation.

5. Create Application from Template

Log into Magic Pen, select the “Enterprise Portal” template, name the app, and bind the RDS instance (host, database name, username, password).

6. Edit Site Content

Modify data sources, add or delete news items, and configure charts.

7. Add New Components (Optional)

Drag a line‑chart component, create or edit the underlying data table, and bind a SELECT query.

SELECT * FROM home_ent;

8. Publish Site

Configure login (Alibaba Cloud account), disable anonymous access for development, then click Publish, choose environment, add description, and confirm.

9. Domain Registration and ICP Filing

Register a domain, complete real‑name verification, purchase the domain, add DNS records (TXT and CNAME), and submit ICP filing through Alibaba Cloud’s ICP system.

10. DNS Configuration

Add TXT and CNAME records as instructed, then verify and complete public release.

Conclusion

The Magic Pen low‑code solution eliminates traditional pain points, enabling rapid, cost‑effective portal construction with cloud databases and automated deployment, allowing developers to focus on core business innovation.