跑步记录服务 | Weegloo Docs

跑步记录服务用手机随时记下跑过的距离、时间、配速、路线，只向登录的人展示他本人的记录。跑完后当天的记录会累积到列表里，其他人的记录彼此都看不到。同一份记录既能在手机应用里看，也能在网页里看。

这个示例只展示一件事：手机应用和网页这两个界面，共用同一套 WEEGLOO 后端。因此本页先讲应用和网页共用的后端，再分成应用和网页两条路，看你对哪一边感兴趣。无论选哪一边，后端都是同一套。这正是要点所在。

要做什么

这次的示例不是服装店或博客，而是一款个人用跑步记录服务。手机应用和网页这两个界面看的是同一份记录。应用界面定为三个。

登录界面： 用 Google 登录。
记录列表： 登录的人查看自己迄今为止留下的跑步记录，按最新顺序排列。
添加记录： 留下跑过的距离、时间、配速、路线、日期。

核心是「各自只看自己的记录」。登录的人只会收到自己留下的记录，看不到别人的记录。这个条件让后面需要会员登录和权限一起配合。

你也可以直接跳到感兴趣的那一边。想做手机应用就看用作应用，想做网页就看用作网页。不过下面那节「界面背后的后端」无论应用还是网页都通用，先浏览一遍能让两条路更好地衔接起来。

界面背后的后端（应用、网页通用）

做好界面并连接好智能体后，只要对它说一句「帮我对接 WEEGLOO」（连接、用一句话完成对接），智能体就会查看界面，把界面背后需要的东西备齐：收纳跑步记录的数据模板（Content Type）、Google 登录（ServiceLogin）、「只看自己记录」的权限（ServiceUserRole），以及按这份权限只向每位会员送出他本人记录的投递。无论从应用界面开始还是从网页界面开始，这套后端都一样，应用和网页照原样共用它。逐块单独处理每一部分的方法，在加上注册和登录、划分权限、保存并取用数据里一一讲解。

下面是这个示例的 Stride Space 里实际做好的资源。这里看的不是如何逐一设置，而是「帮我对接」的结果给这款服务带来了什么。

收纳跑步记录的模板

第一样是收纳跑步记录的模板（Content Type）「Run」。一次跑步收纳的值按项目分成各个栏位。

项目	栏位种类	必填	收纳的值
`Date`	Date	必填	跑步的日期。在列表中也用作指代该记录的标题。
`Distance (km)`	Number	必填	跑过的距离（千米）。可以带小数。
`Duration (seconds)`	Integer	必填	花费的时间（以秒为单位）。界面上会像 `41:05` 这样按分、秒显示。
`Notes`	Long Text	可选	当天跑步的备注。
`Route photo`	Media	可选	路线地图或照片文件一张。

平均配速没有单独保存的栏位。只要有距离和时间就能算出，所以由应用随时计算并显示（添加记录界面里的「auto-calculated」）。

第二样是会员用 Google 登录的通道（ServiceLogin）。这个示例里把名称设为「Stride」，登录方式只开启了 Google 一种。新登录的人默认获得下面的「Runner」权限。登录结束后，其结果会回到界面，而回来的方式在应用和网页上略有不同。这一差异分别在用作应用和用作网页中讲解。

「只看自己记录」的权限

第三样是会员获得的权限（ServiceUserRole）「Runner」。规则如下。

能做的事	适用范围
创建记录	任何登录的会员
读取记录	仅自己创建的
修改记录	仅自己创建的
删除记录	仅自己创建的

「读取」被限定为「仅自己创建的」，所以列表里各自只显示自己的记录。每位会员能读到的记录都只是自己的，那也就是投递给他的那份列表。这条规则在应用和网页上同样适用。

记录与照片

第四样是每一条跑步记录（Content）和路线照片（Media）。这两者不是事先做好的，而是会员留下跑步时，以他的名义一条条生成。下面是实际留下的一条记录。前面「Run」模板里填上了值，并一起附有路线照片。

距离 42.195 是马拉松全程。时间以秒为单位收纳（这里是 3 小时 53 分的记录），界面上会像 3:53:00 这样显示。路线照片作为文件（Media）单独保存，记录里只收纳指向该文件的连接。

用作应用

先看手机应用。做出应用界面，再用上面的界面背后的后端来填满这些界面的背后。

做出应用界面并对接

1. 制作界面设计。 上面「要做什么」里的三个界面，是给 LLM 下达如下提示语得到的。用一行写清要做的是什么应用，加上界面清单、每个界面要放的内容、设计方向即可。

帮我设计一款跑步记录应用的界面。这是竖屏移动应用。

界面：

登录：应用介绍一行，加一个「用 Google 继续」按钮。

记录列表（主页）：总距离、跑步次数的概览，跑步记录卡片列表（日期、距离、时间、配速、路线缩略图），添加记录按钮。

添加记录：日期、距离、时间、配速、备注、路线照片的输入和保存。

风格干净且有活力，让距离、配速这类数值一眼可读。遵循移动 UI 惯例。

这样得出的界面，此时还没有数据也没有登录，只是空有界面的状态。

2. 对接到 WEEGLOO。 把智能体连接到 WEEGLOO，再对它说一句「帮我对接 WEEGLOO」，智能体就会查看这些界面，备齐上面的界面背后的后端。

因为是应用而要留意的两点

后端和用网页做时完全一样。因为是应用，有两点要留意。

分发： 把做好的移动应用送到人们手上（在应用市场上架），是在 WEEGLOO 之外完成的。WEEGLOO 承担的是应用界面背后的数据、会员、权限。（网页没有应用市场，这一点在用作网页中讲解。）
登录回调： 登录结束后把结果接回应用的连接和网页不同。登录结果只能回到网页地址，因此需要一个充当中转桥梁、把结果转交给应用的页面这一步。这个技术步骤在 Auth API 中讲解。

查看是否真的只显示自己的记录

核心条件「各自只看自己的记录」在应用里确实得到遵守。下面是用两个不同账号打开同一款应用的主页。虽是同一款应用，总距离、跑步数、列表里出现的记录都不一样。

一个账号里只有 5km 一件，另一个账号里只有马拉松和 3km 两件。彼此的记录对方都看不到。Stride 里这三件全都收纳着，但每位会员只会收到他自己留下的记录。这是前面「只看自己记录」的权限中把读取限定为「仅自己创建的」的结果。

用作网页

网页和应用照原样共用同一套后端。上面的界面背后的后端由网页读取，展示同一份记录。

做出网页界面并对接

网页也和应用一样是两步。

1. 制作网页界面设计。 和应用一样，给 LLM 下达如下提示语来得出网页界面。要放的内容和应用相同，只是改成适合宽屏的网页布局。

帮我设计一款跑步记录网页界面。这是桌面网页。

界面：

登录：服务介绍一行，加一个「用 Google 继续」按钮。

记录列表（仪表盘）：总距离、跑步次数、平均配速的概览，跑步记录列表（日期、距离、时间、配速、路线缩略图），添加记录按钮。

添加记录：日期、距离、时间、配速、备注、路线照片的输入和保存。

用发挥宽屏优势的布局，让距离、配速这类数值一眼可读。遵循网页 UI 惯例。

2. 对接到 WEEGLOO。 对连接好的智能体说一句「这个网页也帮我对接 WEEGLOO」。如果已经做好了应用，智能体不会重新搭建上面的界面背后的后端，而是照原样接上去。没有需要新建的 WEEGLOO 资源。 网页里新建的只有网页界面。（如果没经过应用而是从网页开始，那么这时那套后端才第一次生成，之后再加上应用也照样共用它。无论从哪边开始，后端都是同一套。）

这个网页界面是把查看是否真的只显示自己的记录里出现的那个账号（本月 45.2km，马拉松 42.20km 和 3km）在网页里打开的样子。总距离、跑步数、记录都和应用主页一模一样。后端只有一套，所以应用展示的那份数据，网页就以桌面界面照样展示出来。

因为是网页而不同的两点

网页也有两点和应用不同，但方向和应用相反，所以这回要留意的反而更少。

分发： 网页不需要应用市场。做好的网页文件用 Web Hosting 直接发布到互联网上（把网站发布到互联网）。
登录回调： 网页的登录结果直接回到网页地址。应用里需要的那个中转桥梁页面，网页里不需要也行。

权限照原样不变，所以网页里也是每位会员只看到自己的记录。前面的「只看自己记录」的权限在网页上同样适用。

接下来要做的事

加上注册和登录：讲解如何单独加上接纳自有会员的登录。
Auth API：讲解把登录结果接回应用的技术步骤。
划分权限：讲解如何设定权限，让会员只能处理自己的东西。
保存并取用数据：讲解如何做数据模板并填入内容。
把网站发布到互联网：讲解如何把网页用 Web Hosting 发布出去。