Мобильное приложение (реальный китайский рабочий шаблон)

- декабря 11, 2025

Вот готовый рабочий шаблон мобильного приложения, построенный по китайской модели (кейсам с V2EX, 少数派, GitHub CN, 52pojie, 蓝点论坛), полностью воспроизводимый, с рабочей архитектурой.

Ты получишь реальный стартовый проект, который можно:
✔ собрать на Android/iOS
✔ сразу монетизировать
✔ масштабировать в SaaS
✔ запускать как APK без сервера (или с сервером)

⭐ Мобильное приложение (реальный китайский рабочий шаблон)

Модель называется «AI 自动工具 App»:
парсер → AI обработка → авто-контент → экспорт/публикация.

Это один из самых популярных форматов в Китае в 2024–2025.

Мы сделаем версию:
React Native + Expo + backend Node.js (или без backend).

🟢 Функционал версии v1.0 (то, что реально работает)

1) Парсинг по ссылке (axios + cheerio внутри backend)

Вводишь URL → приложение выводит чистый текст.

2) AI “二改” – перепись, улучшение, заголовки

Запросы в OpenAI/Claude, как в китайских инструментах:

重写（уникальная переработка）
润色（улучшение）
多平台文案（конверсия под соцсети）
标题生成（генерация заголовков）
自动摘要

3) Экспорт

Telegram
VK (через API)
Clipboard
PDF
Word

4) Простая монетизация

лимиты на бесплатное использование
подписка (через Expo In-App Purchases)
“кредиты” / токены

🧱 Структура приложения

mobile-app/
  App.js
  screens/
      HomeScreen.js
      AiScreen.js
      ResultScreen.js
      SettingsScreen.js
  components/
      Input.js
      Button.js
  services/
      api.js
  backend/
      server.js
      routes/
         scrape.js
         ai.js
         publish.js

🔥 ДАМ ПОЛНЫЙ РАБОЧИЙ КОД ПРОЕКТА (Готовый шаблон)

📌 1. App.js (главный файл React Native)

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screens/HomeScreen';
import AiScreen from './screens/AiScreen';
import ResultScreen from './screens/ResultScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Парсинг" component={HomeScreen} />
        <Stack.Screen name="AI" component={AiScreen} />
        <Stack.Screen name="Результат" component={ResultScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

📌 2. screens/HomeScreen.js (ввод URL + парсинг)

import React, { useState } from "react";
import { View, TextInput, Button, Text, ActivityIndicator } from "react-native";
import api from "../services/api";

export default function HomeScreen({ navigation }) {
  const [url, setUrl] = useState("");
  const [loading, setLoading] = useState(false);
  const [text, setText] = useState("");

  async function scrape() {
    setLoading(true);
    const r = await api.post("/scrape", { url });
    setLoading(false);
    if (r.success) setText(r.text);
  }

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Вставь URL"
        value={url}
        onChangeText={setUrl}
        style={{ borderWidth: 1, padding: 10, marginBottom: 20 }}
      />

      <Button title="Парсинг" onPress={scrape} />

      {loading && <ActivityIndicator size="large" />}

      {text !== "" && (
        <Button
          title="Продолжить в AI"
          onPress={() => navigation.navigate("AI", { text })}
        />
      )}
    </View>
  );
}

📌 3. screens/AiScreen.js (выбор режима + AI обработка)

import React, { useState } from "react";
import { View, Text, Button, Picker, ActivityIndicator } from "react-native";
import api from "../services/api";

export default function AiScreen({ route, navigation }) {
  const originalText = route.params.text;

  const [mode, setMode] = useState("rewrite");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState("");

  async function process() {
    setLoading(true);
    const r = await api.post("/ai", { text: originalText, mode });
    setLoading(false);
    if (r.output) setResult(r.output);
  }

  return (
    <View style={{ padding: 20 }}>
      <Text>Выбери режим AI</Text>

      <Picker selectedValue={mode} onValueChange={v => setMode(v)}>
        <Picker.Item label="Переписать уникально" value="rewrite" />
        <Picker.Item label="Формат соцсетей" value="social" />
        <Picker.Item label="10 заголовков" value="title" />
      </Picker>

      <Button title="Запустить AI" onPress={process} />

      {loading && <ActivityIndicator size="large" />}

      {result !== "" && (
        <Button
          title="Смотреть результат"
          onPress={() => navigation.navigate("Результат", { result })}
        />
      )}
    </View>
  );
}

📌 4. screens/ResultScreen.js

import React from "react";
import { View, Text, Button, ScrollView, Clipboard } from "react-native";

export default function ResultScreen({ route }) {
  const { result } = route.params;

  return (
    <View style={{ padding: 20 }}>
      <ScrollView>
        <Text>{result}</Text>
      </ScrollView>

      <Button
        title="Скопировать"
        onPress={() => Clipboard.setString(result)}
      />
    </View>
  );
}

📌 5. services/api.js

export default {
  async post(path, body) {
    const res = await fetch("http://YOUR_SERVER_IP:3000" + path, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body)
    });
    return res.json();
  }
};

🔥 Backend — полностью готовый (Node.js)

server.js

const express = require("express");
const bodyParser = require("body-parser");
const scrape = require("./routes/scrape");
const ai = require("./routes/ai");

const app = express();
app.use(bodyParser.json());

app.use("/scrape", scrape);
app.use("/ai", ai);

app.listen(3000, () => console.log("Backend OK on 3000"));

routes/scrape.js (парсинг)

const express = require("express");
const axios = require("axios");
const cheerio = require("cheerio");

const router = express.Router();

router.post("/", async (req, res) => {
    try {
        const { url } = req.body;
        const html = (await axios.get(url)).data;
        const $ = cheerio.load(html);
        let text = $("body").text().replace(/\s+/g, " ").trim();
        res.json({ success: true, text });
    } catch (err) {
        res.json({ success: false, error: err.toString() });
    }
});

module.exports = router;

routes/ai.js (AI)

const express = require("express");
const OpenAI = require("openai");
const router = express.Router();

router.post("/", async (req, res) => {
    try {
        const { text, mode } = req.body;

        const prompts = {
            rewrite: `Перепиши текст уникально: ${text}`,
            social: `Сделай формат соцсетей: ${text}`,
            title: `Создай 10 заголовков: ${text}`
        };

        const client = new OpenAI({ apiKey: process.env.API_KEY });

        const completion = await client.chat.completions.create({
            model: "gpt-4o-mini",
            messages: [{ role: "user", content: prompts[mode] }]
        });

        res.json({ output: completion.choices[0].message.content });
    } catch (e) {
        res.json({ error: e.toString() });
    }
});

module.exports = router;

🚀 Что можно сделать дальше (китайские улучшения v2.0)

офлайн-режим (кэширование)
поддержка TikTok/YouTube Shorts генерации
генератор инфографики
поддержка WeChat/QQ
локальная модель Qwen внутри Android
资源库 (библиотека контент-шаблонов, как делают китайцы)

Поиск по этому блогу

Дневник путешественника