开发指南

API 文档

填写文档满意度调查问卷,赢取缤纷好礼> HOT

搭建 Todo List 应用

最近更新时间:2022-05-16 11:02:04

本文档介绍如何无需域名、无需服务器快速搭建一个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://upload-dianshi-1255598498.file.myqcloud.com/todo-698d26c543e7f35729c121106f55ef1ffaeca67d.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 应用。

目录