Adakah anda bersedia untuk merevolusikan pengurusan tempat kerja anda? Dalam tutorial komprehensif ini, kami menyelami lebih dalam untuk mencipta papan pemuka pekerja terkini yang memanfaatkan pengesahan muka. Kami akan menggunakan beberapa alatan paling hangat dalam pembangunan web: Next.js, FACEIO dan Shadcn UI. Pada penghujung panduan ini, anda akan mempunyai papan pemuka yang kemas dan selamat yang akan membuatkan pekerja anda berasa seperti mereka akan hidup pada masa hadapan!
Sebelum kami menyelam, mari pastikan anda mempunyai semua itik anda berturut-turut:
Dapatkan semua itu? Hebat! Jom tayangkan persembahan ini di jalan raya.
Perkara pertama dahulu, mari buat projek Next.js kami. Buka terminal anda dan taip perkataan ajaib ini:
npx create-next-app@latest faceio-app cd faceio-app
Anda akan ditanya beberapa soalan. Begini cara menjawabnya:
Sekarang, jom dapatkan semua barang yang kami perlukan. Jalankan arahan ini untuk memasang kebergantungan kami:
npm install @faceio/fiojs @shadcn/ui class-variance-authority clsx tailwind-merge
Buat fail bernama .env.local dalam akar projek anda. Di sinilah kami akan menyimpan ID apl FACEIO rahsia kami:
NEXT_PUBLIC_FACEIO_APP_ID=your-super-secret-faceio-app-id
Ingat untuk menggantikan 'id-faceio-app-id-super-rahsia anda' dengan ID aplikasi FACEIO anda yang sebenar. Pastikan ia selamat!
Struktur projek anda sepatutnya kelihatan seperti ini:
faceio-app/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── components/ │ ├── FaceAuth.tsx │ └── EmployeeDashboard.tsx ├── public/ ├── .env.local ├── next.config.js ├── package.json ├── tsconfig.json └── tailwind.config.js
Masa untuk memberi Tailwind ubah suai. Kemas kini fail tailwind.config.js anda dengan konfigurasi mewah ini:
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./app/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
Mari kita cipta bintang rancangan kami - komponen FaceAuth. Buat apl/komponen/FaceAuth.tsx fail baharu dan tampal dalam kod ini:
import { useEffect } from 'react';
import faceIO from '@faceio/fiojs';
import { Button, Card, CardHeader, CardTitle, CardContent } from '@shadcn/ui';
import { useToast } from '@shadcn/ui';
interface FaceAuthProps {
onSuccessfulAuth: (data: any) => void;
}
const FaceAuth: React.FC<FaceAuthProps> = ({ onSuccessfulAuth }) => {
const { toast } = useToast();
useEffect(() => {
const faceio = new faceIO(process.env.NEXT_PUBLIC_FACEIO_APP_ID);
const enrollNewUser = async () => {
try {
const userInfo = await faceio.enroll({
locale: 'auto',
payload: {
email: 'employee@example.com',
pin: '12345',
},
});
toast({
title: "Success!",
description: "You're now enrolled in the facial recognition system!",
});
console.log('User Enrolled!', userInfo);
} catch (errCode) {
toast({
title: "Oops!",
description: "Enrollment failed. Please try again.",
variant: "destructive",
});
console.error('Enrollment Failed', errCode);
}
};
const authenticateUser = async () => {
try {
const userData = await faceio.authenticate();
toast({
title: "Welcome back!",
description: "Authentication successful.",
});
console.log('User Authenticated!', userData);
onSuccessfulAuth({
name: 'John Doe',
position: 'Software Developer',
department: 'Engineering',
photoUrl: 'https://example.com/john-doe.jpg',
});
} catch (errCode) {
toast({
title: "Authentication failed",
description: "Please try again or enroll.",
variant: "destructive",
});
console.error('Authentication Failed', errCode);
}
};
const enrollBtn = document.getElementById('enroll-btn');
const authBtn = document.getElementById('auth-btn');
if (enrollBtn) enrollBtn.onclick = enrollNewUser;
if (authBtn) authBtn.onclick = authenticateUser;
return () => {
if (enrollBtn) enrollBtn.onclick = null;
if (authBtn) authBtn.onclick = null;
};
}, [toast, onSuccessfulAuth]);
return (
<Card className="w-full max-w-md mx-auto">
<CardHeader>
<CardTitle>Facial Authentication</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Button id="enroll-btn" variant="outline" className="w-full">
Enroll New Employee
</Button>
<Button id="auth-btn" variant="default" className="w-full">
Authenticate
</Button>
</CardContent>
</Card>
);
};
export default FaceAuth;
Sekarang, mari buat papan pemuka yang akan dilihat oleh pekerja kami. Buat apl/komponen/EmployeeDashboard.tsx:
import { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@shadcn/ui';
import { Button, Avatar, Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@shadcn/ui';
import FaceAuth from './FaceAuth';
interface EmployeeData {
name: string;
position: string;
department: string;
photoUrl: string;
}
const EmployeeDashboard: React.FC = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [employeeData, setEmployeeData] = useState<EmployeeData | null>(null);
const handleSuccessfulAuth = (data: EmployeeData) => {
setIsAuthenticated(true);
setEmployeeData(data);
};
const mockAttendanceData = [
{ date: '2024-07-14', timeIn: '09:00 AM', timeOut: '05:30 PM' },
{ date: '2024-07-13', timeIn: '08:55 AM', timeOut: '05:25 PM' },
{ date: '2024-07-12', timeIn: '09:05 AM', timeOut: '05:35 PM' },
];
return (
<div className="space-y-6">
{!isAuthenticated ? (
<FaceAuth onSuccessfulAuth={handleSuccessfulAuth} />
) : (
<>
<Card>
<CardHeader>
<CardTitle>Employee Profile</CardTitle>
</CardHeader>
<CardContent className="flex items-center space-x-4">
<Avatar className="h-20 w-20" src={employeeData?.photoUrl} alt={employeeData?.name} />
<div>
<h2 className="text-2xl font-bold">{employeeData?.name}</h2>
<p className="text-gray-500">{employeeData?.position}</p>
<Badge variant="outline">{employeeData?.department}</Badge>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Quick Actions</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Button className="w-full">Check-in</Button>
<Button className="w-full" variant="secondary">Request Leave</Button>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Attendance Records</CardTitle>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Date</TableHead>
<TableHead>Time In</TableHead>
<TableHead>Time Out</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mockAttendanceData.map((record, index) => (
<TableRow key={index}>
<TableCell>{record.date}</TableCell>
<TableCell>{record.timeIn}</TableCell>
<TableCell>{record.timeOut}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</>
)}
</div>
);
};
export default EmployeeDashboard;
Akhir sekali, mari kemas kini halaman utama kami untuk menunjukkan kerja keras kami. Kemas kini apl/page.tsx:
import EmployeeDashboard from './components/EmployeeDashboard';
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-4">
<EmployeeDashboard />
</main>
);
}
Sekarang, mari kita sediakan reka letak yang akan membungkus keseluruhan apl kita. Tambahkan kod ini: app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Employee Dashboard with Facial Authentication',
description: 'A cutting-edge employee dashboard featuring facial recognition for secure authentication and efficient workplace management.',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<header className="bg-primary text-white p-4">
<h1 className="text-2xl font-bold">Faceio Solutions</h1>
</header>
<main className="container mx-auto p-4">
{children}
</main>
<footer className="bg-gray-100 text-center p-4 mt-8">
<p>© 2024 Faceio . All rights reserved.</p>
</footer>
</body>
</html>
)
}
Reka letak ini seperti bingkai rumah - ia menyediakan struktur untuk keseluruhan apl anda. Ia termasuk pengepala dengan nama syarikat anda, kawasan kandungan utama tempat papan pemuka anda akan dipaparkan dan pengaki. Selain itu, ia menyediakan beberapa keajaiban SEO dengan metadata!
Untuk butiran lanjut, rujuk Amalan Terbaik FACEIO.
Tolak PIN Lemah
Halang Pendaftaran Pendua
Lindungi Terhadap Pemalsuan Dalam
Haramkan Pendaftaran Kecil
Memerlukan PIN untuk Pengesahan
Kuatkuasakan PIN Unik
Abaikan Wajah Kabur
Tolak Pengepala Hilang
Hadkan Semerta
Dayakan Webhooks
Untuk butiran lanjut, rujuk Amalan Terbaik Keselamatan FACEIO.
Memandangkan kami telah membina papan pemuka yang hebat ini, anda mungkin tertanya-tanya, "Di manakah saya boleh menggunakan ini di dunia nyata?" Baiklah, saya beritahu anda, kemungkinannya tidak berkesudahan! Berikut ialah beberapa idea:
Pengurusan Pejabat: Ucapkan selamat tinggal kepada kad tebuk sekolah lama! Sistem ini boleh merevolusikan cara anda menjejaki kehadiran, mengawal akses ke kawasan berlainan di pejabat anda dan mengurus maklumat pekerja.
Sistem Keselamatan: Bayangkan dunia di mana pejabat anda adalah Fort Knox, tetapi tanpa kerumitan. Sistem pengecaman muka ini boleh menjadi asas kepada protokol keselamatan yang teguh.
Kiosk Perkhidmatan Pelanggan: Bayangkan ini - pelanggan berjalan ke kios, ia mengenali mereka serta-merta dan menyediakan perkhidmatan yang diperibadikan. Ia bukan fiksyen sains lagi!
Tahniah, ahli sihir teknologi! Anda baru sahaja membina papan pemuka pekerja yang canggih dengan pengesahan muka. Tetapi mengapa berhenti di sini? Keindahan sistem ini ialah fleksibilitinya. Berikut ialah beberapa idea untuk membawanya ke peringkat seterusnya:
Ingat, dalam dunia teknologi, satu-satunya had adalah imaginasi anda (dan mungkin pengambilan kafein anda).
Jadi, apa pendapat anda? Adakah anda bersedia untuk membawa tempat kerja anda ke masa hadapan? Cuba projek ini dan beritahu saya bagaimana ia berjalan. Saya ingin mendengar tentang pengalaman anda, sebarang ciri hebat yang anda tambahkan atau sebarang cabaran yang anda hadapi sepanjang perjalanan.
Selamat pengekodan, dan semoga pengecaman wajah anda tidak pernah salah mengira anda sebagai kilang pejabat anda!
Atas ialah kandungan terperinci Membina Papan Pemuka Pekerja Selamat dengan Pengesahan Muka: Tutorial Komprehensif Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
