API 文档

搭建 Todo List 应用

最近更新时间:2020-12-15 16:12:46

本文档介绍如何无需域名、无需服务器快速搭建一个Todo List 应用,该应用可记录您的待办事项并可为待办事项添加附件。最终成型的应用展示如下:

准备工作

  1. 注册腾讯云账号,注册成功后即可使用腾讯云服务,已注册可忽略此步骤。
  2. 登录腾讯云 云开发控制台,您在填写环境名称之后,单击【下一步】,直接提交授权并使用云开发服务。

    如果您之前创建过环境,可以继续使用已创建的【按量计费环境】,或者再次【新建环境】。
  3. 开通成功之后,单击环境名称,进入 环境总览 页面,如下所示:
    注意:

    请记住您的环境 ID,这个 ID 在后续步骤将被使用。您可单击环境Id右侧的【】图标进行复制。

步骤1:开启匿名登录

搭建 Todo List 应用,需开启匿名登录功能,请前往 登录授权 控制台,打开【匿名登录】开关,如下图所示:

步骤2:建立本地 Todo List 文件

  1. 在本地新建文本文件(Mac 用户推荐使用无格式文本编辑),在文件中填入如下内容,并将第17行代码中的${envId}替换为 准备工作 中复制的环境Id

    <html>
    <head>
    <meta charset="UTF-8">
    <script src="https://acc.cloudbase.vip/todo/src/todo.js" charset="utf-8"></script>
    <script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.8/tcb.js"></script>
    </head>
    <body>
    <div id="model">
    <input id="text-in" type="text" placeholder="写下你的待办事项…">
    <label id="file-in" for="file-input">上传附件</label>
    <input id="file-input" type="file" onchange="TODO.filechange(this)">
    <ul id="todo-list"></ul>
    </div>
    <script>
    let uid = null;
    const app = tcb.init({
      env: "${envId}"
    })
    const auth = app.auth({
      persistence: "local"
    });
    const db = app.database();
    window.onload = function () {
      sign();
      TODO.init();
    }
    function sign() {
      auth.anonymousAuthProvider().signIn().then(() => {
        uid = auth.hasLoginState().user.uid;
        db.collection('todo').doc(uid).get().then(res => {
          if (res.data.length == 0) {
            db.collection('todo').add({
              _id: uid,
              list: TODO.todo,
              time: new Date()
            }).then(res => {
              console.log(res);
              watchtodo();
            })
          }
          else {
            console.log(res);
            TODO.todo = res.data[0].list;
            TODO.todoinit();
            watchtodo();
          }
        });
        app.callFunction({
          name:'todo_getNumber'
        }).then(res=>{
          document.getElementById('model').innerHTML+=`<p class='bottom-des'>共${res.result}人使用云开发TODO</p>`
        })
      })
    }
    TODO.itemChange = function (id, type, des) {
      if (type === 'add') {
        if (des != null) {
          app.uploadFile({
            cloudPath: `todo/${uid}/${TODO.todo[id].file}`,
            filePath: des
          }).then((result) => {
            console.log(result)
            TODO.todo[id].file = result.fileID
            updatetodo()
          });
        } else {
          updatetodo()
        }
      } else if (type === 'delete') {
        if (TODO.todo[id].file != null) {
          app.deleteFile({
            fileList: [TODO.todo[id].file]
          }).then((result) => {
            delete TODO.todo[id]
            console.log(result)
            updatetodo()
          });
        } else {
          delete TODO.todo[id]
          updatetodo()
        }
      } else {
        updatetodo()
      }
    }
    TODO.downLoadfile = function (file) {
      app.downloadFile({
        fileID: file
      })
    }
    function updatetodo() {
      db.collection('todo').doc(uid).update({
        list: db.command.set(TODO.todo),
        time: new Date()
      }).then(res => {
      }).catch(e => {
        console.log(e);
      })
    }
    function watchtodo() {
      db.collection('todo').where({ _id: uid }).watch({
        onChange: (snapshot) => {
          if (snapshot.msgType != "INIT_EVENT") {
            TODO.todo = snapshot.docs[0].list;
            TODO.todoinit();
          }
        },
        onError: (error) => {
          alert('远端数据库监听失败!');
        }
      });
    }
    </script>
    </body>
    </html>
  2. 保存文本文件,并将后缀改为 html,命名为 index.html

步骤3:托管静态文件

该步骤中您将使用云开发静态网站托管功能。为了让更多人可以访问 Todo List 应用,云开发提供默认域名,可通过公网访问应用。

  1. 登录 云开发控制台,进入在 准备工作 中已经创建好的按量计费环境。
  2. 进入云开发控制台的 静态网站托管,单击【上传文件】,上传 步骤2 中的 index.html 文件。
  3. 上传完毕后,单击【配置信息】中的【默认域名】,在浏览器中打开该链接,即可在公网环境下访问 Todo List 网站。
    说明:

    默认域名可供您快速验证业务,如您需要对外正式提供网站服务,请前往【基础配置】绑定您已备案的自定义域名。

步骤4:创建数据库

该步骤中您将使用云开发的数据库功能,将 Todo List 应用内的数据存储在云数据库中。

进入云开发控制台的 数据库 中,单击【新建集合】,新建一个名称为todo的集合,如下图所示:

之后 Todo List 内的数据便会存储在这个集合中。

步骤5:创建云函数

该步骤中您将使用云开发的云函数功能,以统计共有多少名用户在使用 Todo List 应用。

  1. 进入云开发控制台的 云函数,单击【新建云函数】,开始创建云函数
    1. 在基础信息中,将函数名命名为todo_getNumber
    2. 在函数配置中,均选择默认配置。
    3. 单击【确定】,即可创建云函数。
  2. 上传云函数代码包。
    1. 单击下载 云函数代码 ZIP 包(需要注册 Gitee 才可进行下载)。
    2. 进入创建好的 todo_getNumber 函数,单击【函数代码】页签,进入函数代码页面。
    3. 在【提交方法】选项中,选择【本地上传ZIP包】,并单击【上传】,将下载的云函数代码包 ZIP上传至云开发中。
    4. 单击【保存】,即可完成上传云函数代码包。

步骤6:开始使用

至此,您已经成功创建了一个 Todo List 网页应用,打开 静态网站托管 中的默认域名链接即可访问应用:

总结

该版本的 Todo List 应用为入门教学案例,通过使用云开发中的登录授权、云函数、数据库、云存储、静态托管等功能,快速搭建了一个简易 Todo List 应用并开放给用户使用。

目前应用内使用匿名登录方式,不支持多端设备共享 Todo List 记录。云开发团队提供了一个支持邮件登录方式的 Todo List 应用实战项目,支持多设备共享记录。您可以在此基础上开发更多功能,打造一个您的专属 Todo List 应用。

目录