逐梦造物记 2025-09-23 20:06 采纳率: 100%
浏览 8
已结题

我现在想要写一个可以与MIT appinventor的cloudDB共享数据的HTML

我现在想要写一个可以与MIT appinventor的cloudDB共享数据的HTML，请问我怎么做

  • 写回答

4条回答 默认 最新

  • 宝码香车 优质创作者: JavaScript技术领域 2025-09-23 20:09
    关注

    让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

    如果答案让您满意，请采纳、点赞、关注，非常感谢！
    .
    每日一句正能量，让它带给您好心情：努力不是为了超越别人，而是为了成为更好的自己。
    .

    MIT App Inventor CloudDB 数据共享 HTML 实现

    我将为您创建一个可以与 MIT App Inventor 的 CloudDB 共享数据的 HTML 页面。这个页面将允许您从 CloudDB 读取数据、向 CloudDB 写入数据，并实时监听数据变化。

    实现思路

    1. 使用 JavaScript 的 Fetch API 与 CloudDB 的 Web API 进行通信
    2. 实现数据读取、写入和监听功能
    3. 创建用户友好的界面来展示和操作数据

    完整代码实现

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MIT App Inventor CloudDB 数据共享</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            overflow: hidden;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        h1 {
            color: #2575fc;
            margin-bottom: 10px;
            font-size: 2.2rem;
        }
        
        .description {
            color: #666;
            font-size: 1.1rem;
        }
        
        .config-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #444;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            border-color: #2575fc;
            outline: none;
            box-shadow: 0 0 0 2px rgba(37, 117, 252, 0.2);
        }
        
        .btn {
            display: inline-block;
            background: #2575fc;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .btn:hover {
            background: #1a68e8;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        .btn-success {
            background: #28a745;
        }
        
        .btn-success:hover {
            background: #218838;
        }
        
        .actions {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 25px;
        }
        
        .data-section {
            margin-top: 25px;
        }
        
        .data-display {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
            min-height: 100px;
            max-height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
            font-family: monospace;
        }
        
        .status {
            padding: 10px;
            border-radius: 5px;
            margin-top: 15px;
            text-align: center;
            font-weight: 600;
        }
        
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .instructions {
            background: #e7f3ff;
            border-left: 4px solid #2575fc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: #666;
            font-size: 0.9rem;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .btn {
                width: 100%;
                margin-right: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>MIT App Inventor CloudDB 数据共享</h1>
            <p class="description">通过此页面与您的 MIT App Inventor 应用共享数据</p>
        </header>
        
        <div class="instructions">
            <h3>使用说明：</h3>
            <p>1. 在 MIT App Inventor 项目中启用 CloudDB 组件并获取项目ID和令牌</p>
            <p>2. 在下方配置区域填写您的项目信息</p>
            <p>3. 使用操作按钮与 CloudDB 进行数据交互</p>
        </div>
        
        <div class="config-section">
            <h2>CloudDB 配置</h2>
            <div class="form-group">
                <label for="projectId">项目ID (Project ID):</label>
                <input type="text" id="projectId" placeholder="输入您的项目ID">
            </div>
            <div class="form-group">
                <label for="token">访问令牌 (Token):</label>
                <input type="text" id="token" placeholder="输入您的访问令牌">
            </div>
            <div class="form-group">
                <label for="tag">标签 (Tag):</label>
                <input type="text" id="tag" placeholder="输入数据标签" value="sharedData">
            </div>
        </div>
        
        <div class="actions">
            <button class="btn" id="getDataBtn">获取数据</button>
            <button class="btn btn-success" id="setDataBtn">设置数据</button>
            <button class="btn btn-secondary" id="clearDataBtn">清除数据</button>
            <button class="btn" id="startListeningBtn">开始监听</button>
            <button class="btn btn-secondary" id="stopListeningBtn">停止监听</button>
        </div>
        
        <div class="form-group">
            <label for="dataInput">要存储的数据:</label>
            <textarea id="dataInput" placeholder='输入要存储的数据，例如: {"name": "张三", "score": 95}' rows="4"></textarea>
        </div>
        
        <div class="data-section">
            <h2>数据展示</h2>
            <div class="data-display" id="dataDisplay">
                数据将在这里显示...
            </div>
        </div>
        
        <div id="statusMessage" class="status"></div>
        
        <footer>
            <p>MIT App Inventor CloudDB 数据共享界面 | 使用 CloudDB Web API</p>
        </footer>
    </div>


    <script>
        // CloudDB API 基础URL
        const CLOUDDB_BASE_URL = 'https://clouddb.appinventor.mit.edu';
        
        // 获取DOM元素
        const projectIdInput = document.getElementById('projectId');
        const tokenInput = document.getElementById('token');
        const tagInput = document.getElementById('tag');
        const dataInput = document.getElementById('dataInput');
        const dataDisplay = document.getElementById('dataDisplay');
        const statusMessage = document.getElementById('statusMessage');
        
        // 获取操作按钮
        const getDataBtn = document.getElementById('getDataBtn');
        const setDataBtn = document.getElementById('setDataBtn');
        const clearDataBtn = document.getElementById('clearDataBtn');
        const startListeningBtn = document.getElementById('startListeningBtn');
        const stopListeningBtn = document.getElementById('stopListeningBtn');
        
        // 监听器相关变量
        let listeningInterval = null;
        
        // 显示状态消息
        function showStatus(message, isError = false) {
            statusMessage.textContent = message;
            statusMessage.className = 'status ' + (isError ? 'error' : 'success');
            
            // 3秒后清除状态消息
            setTimeout(() => {
                statusMessage.textContent = '';
                statusMessage.className = 'status';
            }, 3000);
        }
        
        // 验证配置
        function validateConfig() {
            const projectId = projectIdInput.value.trim();
            const token = tokenInput.value.trim();
            const tag = tagInput.value.trim();
            
            if (!projectId) {
                showStatus('错误: 请输入项目ID', true);
                return false;
            }
            
            if (!token) {
                showStatus('错误: 请输入访问令牌', true);
                return false;
            }
            
            if (!tag) {
                showStatus('错误: 请输入标签', true);
                return false;
            }
            
            return { projectId, token, tag };
        }
        
        // 从CloudDB获取数据
        async function getData() {
            const config = validateConfig();
            if (!config) return;
            
            try {
                const response = await fetch(
                    `${CLOUDDB_BASE_URL}/api/v1/${config.projectId}/data/${config.tag}`,
                    {
                        headers: {
                            'Authorization': `Bearer ${config.token}`
                        }
                    }
                );
                
                if (response.ok) {
                    const data = await response.json();
                    dataDisplay.textContent = JSON.stringify(data, null, 2);
                    showStatus('数据获取成功');
                } else {
                    dataDisplay.textContent = '错误: 无法获取数据';
                    showStatus('错误: 无法获取数据', true);
                }
            } catch (error) {
                dataDisplay.textContent = '错误: ' + error.message;
                showStatus('错误: ' + error.message, true);
            }
        }
        
        // 向CloudDB存储数据
        async function setData() {
            const config = validateConfig();
            if (!config) return;
            
            const data = dataInput.value.trim();
            if (!data) {
                showStatus('错误: 请输入要存储的数据', true);
                return;
            }
            
            try {
                // 尝试解析JSON数据
                const parsedData = JSON.parse(data);
                
                const response = await fetch(
                    `${CLOUDDB_BASE_URL}/api/v1/${config.projectId}/data/${config.tag}`,
                    {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${config.token}`,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(parsedData)
                    }
                );
                
                if (response.ok) {
                    showStatus('数据存储成功');
                    // 存储成功后获取最新数据
                    getData();
                } else {
                    showStatus('错误: 无法存储数据', true);
                }
            } catch (error) {
                showStatus('错误: 数据格式不正确，请使用有效的JSON格式', true);
            }
        }
        
        // 清除CloudDB中的数据
        async function clearData() {
            const config = validateConfig();
            if (!config) return;
            
            if (!confirm('确定要清除数据吗？此操作不可撤销。')) {
                return;
            }
            
            try {
                const response = await fetch(
                    `${CLOUDDB_BASE_URL}/api/v1/${config.projectId}/data/${config.tag}`,
                    {
                        method: 'DELETE',
                        headers: {
                            'Authorization': `Bearer ${config.token}`
                        }
                    }
                );
                
                if (response.ok) {
                    showStatus('数据清除成功');
                    dataDisplay.textContent = '数据已清除';
                } else {
                    showStatus('错误: 无法清除数据', true);
                }
            } catch (error) {
                showStatus('错误: ' + error.message, true);
            }
        }
        
        // 开始监听数据变化
        function startListening() {
            const config = validateConfig();
            if (!config) return;
            
            if (listeningInterval) {
                showStatus('已经在监听数据变化');
                return;
            }
            
            showStatus('开始监听数据变化...');
            listeningInterval = setInterval(getData, 3000); // 每3秒获取一次数据
        }
        
        // 停止监听数据变化
        function stopListening() {
            if (listeningInterval) {
                clearInterval(listeningInterval);
                listeningInterval = null;
                showStatus('已停止监听数据变化');
            } else {
                showStatus('当前没有在监听数据变化');
            }
        }
        
        // 添加事件监听器
        getDataBtn.addEventListener('click', getData);
        setDataBtn.addEventListener('click', setData);
        clearDataBtn.addEventListener('click', clearData);
        startListeningBtn.addEventListener('click', startListening);
        stopListeningBtn.addEventListener('click', stopListening);
        
        // 页面加载时显示示例数据
        window.addEventListener('load', () => {
            dataInput.value = JSON.stringify({
                message: "Hello from HTML!",
                timestamp: new Date().toISOString(),
                user: "Web User"
            }, null, 2);
        });
    </script>
</body>
</html>

    使用说明

    1. 获取 CloudDB 配置信息：
    • 在 MIT App Inventor 项目中启用 CloudDB 组件
    • 获取项目ID (Project ID) 和访问令牌 (Token)
    1. 配置页面：
    • 在页面上方的配置区域填写项目ID、访问令牌和标签
    • 标签是用于标识数据的键名
    1. 操作数据：
    • 获取数据：从 CloudDB 读取当前存储的数据
    • 设置数据：将输入框中的数据存储到 CloudDB
    • 清除数据：删除 CloudDB 中对应标签的数据
    • 开始监听：每3秒自动获取一次数据（实现实时更新）
    • 停止监听：停止自动获取数据
    1. 数据格式：
    • 数据应以 JSON 格式输入，例如：{"name": "张三", "score": 95}

    注意事项

    • 确保您的 MIT App Inventor 项目已正确配置 CloudDB 组件
    • 确保项目ID和访问令牌正确无误
    • 数据监听功能会每3秒请求一次数据，请勿过于频繁使用以免超过 API 限制

    这个 HTML 页面提供了完整的数据交互功能，您可以直接使用它来与 MIT App Inventor 的 CloudDB 进行数据共享。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

  • 如何将MIT App Inventor与Arduino Cloud结合使用-项目开发
    2021-03-31 03:15
    MIT App Inventor是一个强大的、基于拖放的编程环境，适合初学者和专业人士用于创建Android应用程序。而Arduino Cloud是Arduino公司提供的一个物联网平台，它允许用户远程控制和监控连接到互联网的Arduino设备。 ...
  • MIT APP Inventor MQTT 插件
    2022-12-20 06:14
    4. 教育与学习：对于想要学习物联网和移动应用开发的学生，MIT APP Inventor结合MQTT插件是一个极好的实践平台，可以帮助他们快速理解并掌握物联网通信的基本概念。 总结，MIT APP Inventor的MQTT插件为开发者提供...
  • MIT App Inventor 计算器 两个计算器页面可进行切换，分别实现混合计算与普通计算.zip
    2024-06-17 10:17
    MIT App Inventor是一款由麻省理工学院（MIT）开发的可视化编程工具，旨在让初学者也能轻松地创建自己的应用程序，包括手机应用。这个压缩包文件包含的项目是一个计算器应用，它具有两个不同的页面，可以切换以执行...
  • MIT App Inventor 计算器
    2018-03-20 18:46
    本篇文章将详细解析如何使用MIT App Inventor构建一个具备混合计算与普通计算功能的计算器应用。 首先，让我们理解MIT App Inventor的工作原理。它采用积木块编程方式，用户可以通过拖拽和拼接不同功能的积木块来...
  • MIT App Inventor 最简单蓝牙连接.docx
    2020-06-07 16:57
    MIT App Inventor 是一个基于 Blocks 编程语言的可视化开发平台，能够帮助用户快速开发移动应用程序。下面是使用 MIT App Inventor 实现蓝牙连接的详细教程。 一、硬件准备 在本教程中，我们将使用蓝牙从机模块 HC...
  • MIT App Inventor 2.47 原版
    2019-08-20 22:59
    MIT App Inventor 2.47 原版。从http://www.appinventor.mit.edu上下载太慢。
  • MIT-App-Inventor-2:一些使用MIT App Inventor 2的示例项目
    2021-04-04 16:58
    MIT App Inventor 2MIT App Inventor 2 以下是在MIT App Inventor上进行的一些示例项目，这些项目可能会帮助您启动它的旅程！ 目录项目清单这些项目是在一百万年前用有限的资源制作的，所以不要介意这些项目中的图形...
  • 用App Inventor玩转创意编程
    2025-12-26 07:06
    本书引导读者通过可视化编程工具App Inventor，零基础打造个性化安卓应用。从Hello Purr到智能机器人控制，融合事件驱动、传感器、Web API等核心技术，结合游戏、测验、位置服务等丰富案例，让学习编程变得直观有趣...
  • 基于App Inventor积木式编程API调用的设计与实现——以天气预报APP为例.pdf
    2021-08-26 20:15
    基于App Inventor积木式编程API调用的设计与实现——以天气预报APP为例 本文主要介绍了基于App Inventor积木式编程的设计与实现，以天气预报APP为例，旨在提高青少年学习积木式编程的兴趣。App Inventor积木式编程...
  • appinventor中难度案例源码5个（3）.zip
    2021-12-30 15:54
    在本压缩包“appinventor中难度案例源码5个（3）.zip”中，包含了一系列使用App Inventor开发的安卓应用示例。App Inventor是Google推出的一款可视化的编程工具，专为初学者设计，使得不懂编程的人也能通过拖拽组件...
  • App Inventor扩展组件开发中文翻译版，基于MIT发布的App Inventor扩展文档，适用于Java的App Inventor扩展组件开发：Android平台不可见功能模块的设计与共享等
    2025-12-11 18:49
    中文内容概要：本文详细介绍了App Inventor扩展组件的功能、使用方法及开发流程。App Inventor扩展允许开发者创建自定义组件（以aix文件形式），通过动态导入方式增强App Inventor平台的功能，尤其适用于教育领域中...
  • MIT__AppInventor_让移动应用开发更接地气_郑祥1
    2022-08-04 17:04
    MIT AppInventor 是一个由麻省理工学院（MIT）开发的移动应用开发工具，最初由谷歌公司发起并命名为Google AppInventor。这个工具的特点在于它的在线开发功能和可视化设计界面，使得编程变得更加直观和易于理解。...
  • App Inventor创意编程：指南针App制作.pdf
    2021-08-26 22:42
    App Inventor是一个基于块编程的可视化编程环境，非常适合初学者学习编程。通过本文，我们将学习如何使用App Inventor制作一个简单的指南针App。指南针App能够实时显示手机当前的方向信息，可以帮助用户确定当前的...
  • edu.mit.appinventor.ble (1).aix
    2021-09-10 17:13
    appinventor bluetoothLE蓝牙开发
  • appinventor2 你画我猜小游戏
    2020-12-18 09:40
    appinventor2 你画我猜小游戏
  • APPinventor 2022 离线安装版
    2022-11-19 12:55
    APP Inventor 是由麻省理工学院（MIT）开发的一款基于图形化编程的手机应用开发工具，它专为初学者设计，使得非专业程序员也能轻松创建自己的应用程序。2022年版本的APP Inventor在原有基础上进行了更新和优化，提供...
  • MitAppInventor
    2021-03-30 09:00
    MIT App Inventor 是一个强大的可视化编程工具，由麻省理工学院（MIT）的终身幼儿园团队开发，旨在让初学者，特别是青少年，能够轻松地创建自己的移动应用程序。这个平台基于Google App Inventor的理念，但后来由于...
  • appinventor37个案例源码.zip
    2021-12-24 22:59
    37个都是appinventor案例源码，都是aia格式文件，亲测全部都能正常运行 2048小游戏，求和，背得快，，魔术，猜数字，猜字谜，出题机，打地鼠，弹球，点名工具，电影墙，调色板，飞机大战，鸡兔同笼，记事本，甲骨文...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 10月3日
  • 已采纳回答 9月25日
  • 创建了问题 9月23日