通过NUXT.JS中的实时健康数据见解增强用户体验-DEV365 开发者社区

实时数据处理涉及程序执行后几乎瞬时反馈。这种类型的处理在健康领域至关重要，以跟踪和监视用户剂量或患者测试结果等项目以决定患者的健康状况。

在本文中，我们将证明使用Appwrite在NUXT.JS中构建应用程序，该应用程序可以通过利用AppWrite的real-time功能来跟踪和增强用户体验。 AppWrite是一个自托管的后端 - 服务平台，可为开发人员提供构建任何应用程序所需的所有核心API

github

查看完整的源代码here。

先决条件

了解本文需要以下内容：

node.js的安装
JavaScript和Vue.js的基本知识
Docker installation
一个appwrite实例;查看此article关于如何在本地设置实例或通过在DigitalOcean或Gitpod上安装的一键式设置
安装Appwrite CLI

创建一个NUXT项目

使用npx create-nuxt-app <project-name>创建一个新的nuxt.js项目。
脚手架NUXT.JS项目提供了一个选项列表，我们将从中选择最适合我们偏好的选项。

我们可以通过运行以下命令来启动NUXT3应用程序：

cd <project name>
npm run dev

nuxt.js反过来，默认情况下可以在http://localhost:3000中访问一个热填充的开发环境。

创建一个AppWrite项目

要创建一个新项目，我们将在计算机上启动AppWrite实例，并导航到指定的主机名和端口http://localhost:80。接下来，如果没有一个，我们必须登录我们的帐户或创建一个account。

了解有关设置AppWrite here的更多信息。在控制台上，单击创建项目按钮。

项目创建后，项目仪表板在控制台上可见。我们可以从顶部的“设置”选项卡访问内页。

内部页面允许我们复制项目ID 和 API端点为我们的NUXT应用程序。

将AppWrite Web SDK添加到nuxt.js

然后，我们将继续在我们的nuxt.js应用程序的根目录中创建一个init.js文件，以通过添加下面的代码块来初始化AppWrite Web SDK：

import { Client, Account, functions } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
    .setEndpoint('http://localhost/v1') // API Endpoint
    .setProject('***') // project ID
;

export const insightFunction = () => {
  const functions = new Functions(client)
  return functions.createExecution('***') // Function ID
}

创建一个appwrite函数

在AppWrite为创建无服务器函数的支持运行时间之一是Node.js。 AppWrite的无服务器功能为构建和自定义AppWrite服务器功能的空间通过添加和执行我们的自定义代码。

我们将通过导航到我们的项目的控制台并在我们的项目中添加一个函数来开始使用AppWrite函数：

在nuxt.js中集成appwrite函数

我们将使用AppWrite命令行界面（CLI）登录AppWrite的服务器，例如：

appwrite login

运行上面的命令要求我们在终端中使用我们的appwrite凭据。

登录到应用程序后，我们将初始化并将NUXT.JS应用程序链接到先前创建的AppWrite项目。为此，我们将在下面运行命令：

appwrite init project

运行上面的命令将显示一个选项列表，我们将选择适合我们项目的选项。

接下来，让我们在我们的nuxt.js应用程序中创建一个函数。我们将通过在下面运行命令来做到这一点：

appwrite init function

在上述命令的成功执行中，我们将在我们的nuxt.js应用程序中看到一个名为functions/<function-name>的新文件夹。

部署AppWrite功能

要部署AppWrite函数，我们将运行以下命令：

appwrite deploy function

执行上述命令将要求我们选择要部署的适当功能。 Upong成功部署，我们将收到以下终端中的信息。

✓ Success Deployed <function-name> ( functionID)

在我们的appwrite函数控制台中，我们还将具有以下视图的视图：

这表示我们的AppWrite函数的成功部署。

我们还将更新函数的权限，以允许在NUXT.JS应用程序中访问。为此，请导航到设置选项卡，并将any的角色添加到执行访问字段：

创建注册页面

我们将创建一个注册页面，其中将分配角色以执行数据库中的某些操作的人通常可以创建一个帐户。为此，我们将创建一个components/Sign-up.vue并添加以下代码：

<template>
  <div class="ba b--light-blue bg-light-blue bw3 vh-100 pv5 ph2 athelas">
    <form @submit.prevent="signUp" class="white bg-navy br3 mw6 w-40-m w-70 w-20-l center pa3 shadow-5">
      <h2 class="ttc tc">Sign up</h2>
      <label for="name" class="db mb1 white">Name</label>
      <input name="name" id="name" type="text" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="John Doe" v-model="name">
      <label for="email" class="db mb1 white">Email</label>
      <input name="email" id="email" type="email" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="example@email.com" v-model="email">
      <label for="password" class="db mb1 white">Password</label>
      <input name="password" id="password" type="password" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="••••••••" v-model="password">
      <label for="confirm-password" class="db mb1 white">Confirm Password</label>
      <input name="confirm-password" id="confirm-password" type="password" class="db mb3 w-100 br3 pa2 ba bw2" v-model="confirmPassword" placeholder="••••••••">
      <button type="submit" class="center db ph4 pv2 bg-navy ba br3 white pointer">Sign up</button>

      <p>Already have an account? <a href="/signin" class="white b">Sign in</a> </p>
    </form>    
  </div>
</template>

实现上述代码块，我们实现了以下内容：

创建了一个功能表格来处理我们仪表板潜在用户的输入
在VUE脚本中添加了data，以管理将填写表格的人的用户名，电子邮件和密码

添加注册功能

我们的界面将需要连接到AppWrite以验证用户。为此，我们将在components/Sign-up.vue文件的<script>标签中添加以下代码。

<script lang="ts">
import Vue from 'vue'
import {account} from '~/init'
export default Vue.extend({
  data: () => ({
    name: "",
    email: "",
    password: "",
    confirmPassword: ""
  }),
  methods: {
    signUp: async function(){
      if (this.password.length >= 8){
        if(this.password === this.confirmPassword) {
          try{
            await account.create('unique()', this.email, this.password, this.name)
            alert("account created successfully")
            window.location.href = '/signin'
          } catch (e) {
            console.log(e)
          }
        } else {
          alert("password do not match")
        }
      } else {
        alert("password length should be up to 8 characters")
      }
    },

  }

})
</script>

上面的代码块实现了以下内容：

在init.js文件中初始化的AppWrite SDK。
在methods属性中创建signUp函数，该属性执行以下功能：
- 验证密码长度等于或大于八个字符。
- 确认password和confirmPassword中的字符是相同的。
- 使用account.create访问AppWrite的服务，使用用户的电子邮件，密码和名称创建一个新帐户。
  - 要使用AppWrite的创建帐户服务，必须添加userId；在这种情况下，我们使用uniqueId自动生成一个。
  - 添加email和password也是必须的。
  - name选项是可选的；我们可以创建一个没有一个帐户的帐户。
- window.location.href允许我们在成功创建帐户后导航到Insight界面。

接下来，让我们将components/Sign-up.vue导入到pages/index.vue中，就像这样：

<template>
  <div>
    <Signup/>
  </div>
</template>

此时，我们的注册页面应该看起来像以下内容：

在接口中创建符号

我们还需要创建一个符号，该标志允许注册用户登录仪表板。为此，我们将创建一个pages/Signin.vue并添加以下代码：

<template>
  <div class="ba b--light-blue bg-light-blue bw3 vh-100 pv5 ph2 athelas">
    <form @submit.prevent="signIn" class="bg-navy br3 mw6 w-40-m w-70 w-20-l center pa3 shadow-5 white">
      <h2 class="ttc tc">Sign In</h2>
      <label for="email" class="db mb1 white">Email</label>
      <input name="email" id="email" v-model="email" type="email" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="example@email.com">
      <label for="password" class="db mb1 white">Password</label>
      <input name="password" id="password" v-model="password" type="password" class="db mb3 w-100 br3 pa2 ba bw2" placeholder="••••••••">
      <button type="submit" class="center db ph4 pv2 bg-navy ba br3 white pointer">Sign in</button>

    </form>    
  </div>
</template>

上面的代码块实现了以下内容：

创建一个功能表格来处理注册用户的输入
在VUE脚本中添加data来管理电子邮件和密码

添加符号功能

我们的接口必须连接到AppWrite，以验证用户签名。要执行此操作，我们将在Signin.vue中添加代码。

<script lang="ts">
import Vue from 'vue'
import {account} from '~/init'
export default Vue.extend({
  data: () => ({
    email: "",
    password: "",
  }),
  methods: {
    signIn: async function () {
      try{
        let accountDetails = await account.createEmailSession(this.email, this.password)
        alert("user signed in")
        this.$router.push({ path: `/insight/${accountDetails.userId}`})
      } catch (e){
          console.log(e)
      }
    }
  }

})
</script>

上面，我们导入了init.js文件中初始化的AppWrite SDK。我们还创建了一个称为signIn的函数，该功能执行以下操作：

使用account.createEmailSession访问AppWrite的服务，使用用户的电子邮件和密码创建新帐户会话
this.$router.push允许我们在成功的用户登录后导航到Insight接口

此时，我们的界面看起来像这样：

设置AppWrite的数据库

AppWrite提供的服务之一是数据库服务，它使我们可以存储数据并根据需要获取数据。

创建数据库

要在AppWrite中创建数据库，请在菜单选项卡中单击数据库选项，我们可以在其中添加数据库。

创建一个集合

AppWrite的数据库服务还提供收集服务。这些收藏充当文档的容器。要创建一个集合，请选择所需的数据库，我们可以从中添加一个新集合。

创建一个属性

我们的文档将具有一些特定的属性。为了创建它们，我们将导航到属性部分。在我们的情况下，我们将选择 boolean属性。我们可以用名称为“剂量”创建属性ID 。

现在，将设置文档的权限角色。单击设置选项卡，在角色输入字段中，选择最能描述我们访问的角色。在我们的情况下，角色是，我们将允许所有四个动作： create ，读，更新和删除。

创建洞察力页面

我们将创建一个页面，其中我们跟踪用户的剂量。每天只允许用户服用三剂，然后提示他们第二天登录以获取更多剂量。

我们将首先创建一个允许用户记录其剂量的接口。为此，我们将创建一个pages/_insight/insight.vue并添加以下代码：

<template>
  <div class="bg-light-blue vh-100 pa3 tc">
    <h2 class="ttc">Real Time Health Data analytics with Appwrite</h2>
    <div class="br3 bg-navy ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv4 h5">
      <p class="f3">Click on this button to get the dosage</p>
        <button class="link br3 pv2 ph2 mt4 dib black fw6 bg-white ba b--navy pointer inline-flex items-center hover-bg-lightest-blue" @click="getDosage">
          <span class="f4 ml2 pr2">Get dosage</span>
        </button>
    </div>
  </div>
</template>

上面的代码实现了以下内容：

创建一个接口，在其中注册或登录后重定向用户
Insight接口允许用户单击按钮getDosage以跟踪其每天的剂量旅程

添加getDosage（）功能

现在，我们将将接口连接到允许用户记录和跟踪其剂量的工作功能。

<script>
import {client, insightFunction} from '~/init'
import { Databases } from "appwrite";
const databases = new Databases(client);
import moment from "moment";
export default {
  data() {
    return {
      permisssionsArray: [],
    }
  },
  mounted() {
    insightFunction().then((res)=> res).catch((error)=> {
      console.log(error)
    })
    this.checkDosage();
    if(this.$route.params.insight){
      try {
        client.subscribe("documents", (response) => {
          this.checkDosage();
        });
      } catch (error) {
        console.log(error, "error");
      }
    }
  },
  methods: {
    moment,
    async getDosage() {
      await databases.createDocument(
        "63ef7e057f16c9d0b811",
        "63ef7e389fdfbe02d8e9",
        "unique()",
        {
          doses: true,
        }
      );
    },
    async checkDosage() {
      const dosageDetails = await databases.listDocuments(
        "63ef7e057f16c9d0b811",
        "63ef7e389fdfbe02d8e9"
      );
      dosageDetails.documents.filter(obj => {
        if( moment(obj.$createdAt).format("YYYY-MM-DD") === moment().format("YYYY-MM-DD")) {
          obj.$permissions.find(element => {
          if(element.includes(this.$route.params.insight)) {
            this.permisssionsArray.push(element)
            if (this.permisssionsArray.length >= 3){
              this.$swal({icon: 'success', title: 'Wait one day before taking another dose. Take a walk instead', timer: 10000, showConfirmButton: false,});
            }
              return;
            } else {
              return;
            }
          })
        }
      })
    }
  }
}
</script>