# Instruction 人臉辨識點名及專注力評分輔助系統

## 系統架構圖

## 系統介紹

### Web Client

Create by [Next.js](https://nextjs.org/)


├─.vscode
├─public
│  └─models
└─src
    ├─app
    │  ├─@readme
    │  ├─api
    │  │  └─auth
    │  │      └─[...nextauth]
    │  ├─capture
    │  ├─courses
    │  │  └─[courseID]
    │  ├─scan
    │  ├─test
    │  └─todo
    ├─assets
    ├─components
    │  ├─courses
    │  │  ├─attendance
    │  │  └─scoring-assistant
    │  └─layouts
    ├─context
    ├─lib
    ├─services
    ├─styles
    ├─types
    └─__test__


**Demo**

install:

$ npx create-next-app@latest 

"use client";

export default function Home() {
  return (
    <main>
      <button
        onClick={async () => {
          const response = await fetch("http://127.0.0.1:8000/login", {
            method: "POST",
            body: JSON.stringify({ username: "gclee", password: "123456" }),
            headers: { "Content-Type": "application/json" },
          });
          const json = await response.json();
          console.log(json);
        }}
      >
        登入
      </button>
    </main>
  );
}

with inputs and styles

"use client";

import { useState } from "react";

export default function Home() {
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");

	const submitHandler = async () => {
		const response = await fetch("http://127.0.0.1:8000/login", {
			method: "POST",
			body: JSON.stringify({ username, password }),
			headers: { "Content-Type": "application/json" },
		});
		const json = await response.json();
		console.log(json);
	};

	return (
		<main className="flex items-center justify-center h-[100vh]">
			<div className="gap-2 p-10 rounded-2xl flex justify-center items-center bg-slate-700 flex-col">
				<input
					className="p-2 rounded-lg text-slate-800"
					type="text"
					value={username}
					onChange={(e) => setUsername(e.target.value)}
				/>
				<input
					className="p-2 rounded-lg text-slate-800"
					type="password"
					value={password}
					onChange={(e) => setPassword(e.target.value)}
				/>
				<button className="bg-slate-200/30 p-2 rounded-lg" onClick={submitHandler}>
					登入
				</button>
			</div>
		</main>
	);
}

### Mobile Client (手機app ios+android)
Create by [React Native](https://reactnative.dev/) and [Expo](https://expo.dev/)

---
### Server

Files Struction

├─data
├─private
│  ├─attendance-records
│  │  ├─121IEA0052
│  │  │  ├─...
│  │  │  └─65773261c0779b26f76cb193
│  │  └─DEMO000000
│  │      ├─...
│  │      └─65769b3084ba52b48030fca6
│  ├─courses
│  │  ├─121IEA0024
│  │  ├─121IEA0052
│  │  ├─DEMO000000
│  │  └─DEMO000008
│  └─users_face
│      ├─656dece2e311d9396736e3bc
│      ├─656dece2e311d9396736e3bf
│      ├─656dece2e311d9396736e3c2
│      ├─656dece3e311d9396736e3c5
│      ├─656dece3e311d9396736e3c8
│      ├─656dece3e311d9396736e3cb
│      ├─656dece3e311d9396736e3dd
│      ├─656f90fe4c3b1b713000c29e
│      ├─656f90fe4c3b1b713000c2a1
│      └─656f90fe4c3b1b713000c2a4
├─public
│  ├─assets
│  └─static
│      ├─attendance_records
│      └─roll_call_original
└─src
    ├─configs
    ├─controllers
    ├─libs
    ├─middleware
    ├─models
    ├─routes
    ├─scripts
    ├─services
    └─types

#### RESTful API with Express Demo

install:

$ npm install express cors --save

base code:

const express = require('express')
const app = express()
const port = 8000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`)
})

ohter http methods

const cors = require('cors')

app.use(cors())
app.use(express.urlencoded({ extended: true }))

app.post('/login', (req, res) => {
    const {username,password} = req.body
    if(username === 'gclee' && password === '123456'){
        return res.json({success: true, message: 'login successful.'})
    }else{
        return res.status(403).json({success: false, message: 'username or password incorrect.'})
    }
})

#### Authentication whit JWT

#### Run python script (face detection model)

#### MongoDB (NoSQL database)

NoSQL Database
[Mongoose](https://www.npmjs.com/package/mongoose)

## Resources

**Express tutorial:** [[Youtube] Express JS Full Course](https://www.youtube.com/watch?v=nH9E25nkk3I)

**Next.js tutorial:** [[Youtube] Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework](https://www.youtube.com/watch?v=wm5gMKuwSYk)