初始化ð

在我们的应用中，我们将Express用作Node.js Web Framework Middleware。

// Initialization
const express = require("express");
const app = express();
// Middleware
app.use(express.json());

CORS标题ð»

我们还设置了交叉原始资源共享（CORS）标题以允许任何来源的请求。

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

静态文件服务和路线ð

使用Express，我们使用静态文件服务。例如，可以通过/js路由访问./public/js目录中的任何文件。

app.use(express.static('app'));
app.use("/js", express.static("./public/js"));
app.use("/css", express.static("./public/css"));
app.use("/img", express.static("./public/img"));

我们还手动为所有页面设置了路线，这有些乏味。一个例子是：

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/app/html/index.html');
});

服务器初始化ð

最后，我们在端口8000上初始化并运行了Express Server。

app.listen(8000, () => {
  console.log('Server started on port 8000');
});

初始化ð

初始化壁垒相对简单。我们要做的就是去firebase.google.com开始一个项目。设置项目后，我们要做的就是将firebase安装为节点软件包（$ npm install firebase）并复制firebase配置。

//----------------------------------------
//  Your web app's Firebase configuration
//----------------------------------------
var firebaseConfig = { //Input firebase API keys
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

//--------------------------------------------
// initialize the Firebase app
// initialize Firestore database if using it
//--------------------------------------------
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const storage = firebase.storage();

身份验证ð

我们还使用Firebase进行身份验证。我们使用Firebase UI小部件进行身份验证和用户日志。您可以检查here中的身份验证和符号。

排行榜ð

首先，建立了一个变量，以检索具有ID“排行榜框架”的DOM元素的引用，该元素涉及排行榜表的tbody元素。

var leaderboardTable = document.getElementById("leaderboard-body");

基于排行榜逻辑，我使用了document.Createelement和附录方法来相应地显示用户。

var user = doc.data();
var points = user.points;

// Increment rank if points are lower than previous user's points
if (points !== previousPoints) {
    rank++;
}

var row = document.createElement("tr");
var rankCell = document.createElement("td");
rankCell.textContent = rank;
row.appendChild(rankCell);

var nameCell = document.createElement("td");
nameCell.appendChild(
    document.createTextNode(user.displayName || user.name)
        );
row.appendChild(nameCell);

var pointsCell = document.createElement("td");
pointsCell.textContent = points;
row.appendChild(pointsCell);

任务ð

对于任务，我使用Firestore数据库的随机种子值随机显示任务。

 const ecoActions = await getEcoActions();
 const randomTasks = [];

 for (let i = 0; i < 3; i++) {
    const randomIndex = Math.floor(Math.random(seed) * ecoActions.length);
    const randomTask = ecoActions[randomIndex];
    randomTasks.push(randomTask);
    ecoActions.splice(randomIndex, 1);
 }

 const taskList = document.getElementById("task-list");
 taskList.innerHTML = "";

基于任务，我实现了函数以选择图像文件上传以调用Google Vision API，以使用标签检测分析图像。

const imageUrl = await fileRef.getDownloadURL();

// Call the Google Vision API to analyze the image
const apiKey = API_KEY;
const url = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
const data = {
      requests: [
         {
           image: {
           source: {
              imageUri: imageUrl,
           },
         },
           features: [
         {
             type: "LABEL_DETECTION",
           },
          ],
         },
      ],
};

const response = await fetch(url, {
      method: "POST",
      headers: {
         "Content-Type": "application/json",
      },
          body: JSON.stringify(data),
});

const json = await response.json();

如果响应返回为有效，则将任务标记为已完成，添加关联点，并删除完成的任务。