import { useState, useEffect } from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth'; import { getFirestore, collection, addDoc, getDocs, onSnapshot, query } from 'firebase/firestore'; import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage'; // คำอธิบาย: ส่วนนี้คือรหัสสำหรับแอปพลิเคชัน React // ที่ใช้ในการจัดการโครงการของนักเรียน // App นี้เชื่อมต่อกับ Firebase เพื่อจัดเก็บข้อมูลและรูปภาพ // และมีหน้าตาที่ดูทันสมัยและใช้งานง่าย function App() { // ตัวแปร global สำหรับ Firebase ที่ถูกกำหนดโดยระบบ const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'; const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {}; const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null; const [db, setDb] = useState(null); const [auth, setAuth] = useState(null); const [storage, setStorage] = useState(null); const [userId, setUserId] = useState(null); const [isAuthReady, setIsAuthReady] = useState(false); const [currentPage, setCurrentPage] = useState('home'); const [submissions, setSubmissions] = useState([]); const [formData, setFormData] = useState({ groupName: '', members: '', problem: '', technologyName: '', sketchFile: null, materials: '', analysis: '', }); const [submissionStatus, setSubmissionStatus] = useState(''); const [isLoading, setIsLoading] = useState(true); // useEffect สำหรับการเริ่มต้น Firebase และการตรวจสอบสิทธิ์ useEffect(() => { // ฟังก์ชัน async เพื่อจัดการการเริ่มต้น Firebase const initializeFirebase = async () => { try { const app = initializeApp(firebaseConfig); const firestore = getFirestore(app); const userAuth = getAuth(app); const appStorage = getStorage(app); setDb(firestore); setAuth(userAuth); setStorage(appStorage); // รอจนกว่าการตรวจสอบสิทธิ์จะเสร็จสิ้น onAuthStateChanged(userAuth, async (user) => { if (user) { setUserId(user.uid); } else { // หากไม่มีผู้ใช้ ให้ลงชื่อเข้าใช้แบบไม่ระบุชื่อ await signInAnonymously(userAuth); setUserId(userAuth.currentUser.uid); } setIsAuthReady(true); }); } catch (error) { console.error("Error initializing Firebase:", error); setIsLoading(false); } }; if (!db) { initializeFirebase(); } }, [firebaseConfig, db]); // useEffect สำหรับการโหลดข้อมูลการส่งงาน useEffect(() => { // ดึงข้อมูลเมื่อ Firebase พร้อมและผู้ใช้เข้าสู่ระบบแล้ว if (isAuthReady && db) { const q = query(collection(db, `/artifacts/${appId}/public/data/projects`)); const unsubscribe = onSnapshot(q, (querySnapshot) => { const projects = []; querySnapshot.forEach((doc) => { projects.push({ id: doc.id, ...doc.data() }); }); // เรียงลำดับจากใหม่ไปเก่า setSubmissions(projects.sort((a, b) => b.timestamp - a.timestamp)); setIsLoading(false); }, (error) => { console.error("Error getting submissions:", error); setIsLoading(false); }); // ยกเลิกการติดตามเมื่อคอมโพเนนต์ถูกถอดออก return () => unsubscribe(); } }, [isAuthReady, db, appId]); const handleInputChange = (e) => { const { name, value, files } = e.target; if (name === 'sketchFile') { setFormData({ ...formData, [name]: files[0] }); } else { setFormData({ ...formData, [name]: value }); } }; const handleFormSubmit = async (e) => { e.preventDefault(); if (!formData.sketchFile || !db || !storage) { setSubmissionStatus('กรุณาเลือกรูปภาพและตรวจสอบการเชื่อมต่อ'); return; } setSubmissionStatus('กำลังอัปโหลด...'); setIsLoading(true); try { // อัปโหลดไฟล์รูปภาพไปยัง Firebase Storage const file = formData.sketchFile; const storageRef = ref(storage, `/artifacts/${appId}/public/images/${file.name}_${Date.now()}`); const snapshot = await uploadBytes(storageRef, file); const imageUrl = await getDownloadURL(snapshot.ref); // บันทึกข้อมูลไปยัง Firestore const docRef = await addDoc(collection(db, `/artifacts/${appId}/public/data/projects`), { groupName: formData.groupName, members: formData.members, problem: formData.problem, technologyName: formData.technologyName, imageUrl: imageUrl, materials: formData.materials, analysis: formData.analysis, timestamp: Date.now(), userId: userId, }); setSubmissionStatus('ส่งงานสำเร็จ!'); setFormData({ groupName: '', members: '', problem: '', technologyName: '', sketchFile: null, materials: '', analysis: '', }); console.log("Document written with ID: ", docRef.id); } catch (error) { console.error("Error adding document or uploading image: ", error); setSubmissionStatus(`เกิดข้อผิดพลาด: ${error.message}`); } finally { setIsLoading(false); } }; const Page = () => { switch (currentPage) { case 'form': return (
{submissionStatus}
}กำลังโหลด...
) : (กลุ่ม: {item.groupName}
สมาชิก: {item.members}
ปัญหาที่สนใจ: {item.problem}
Submitted by User: {item.userId}
ยังไม่มีการส่งงาน
)}สร้างนวัตกรรมเพื่อชุมชนของเรา
โครงการนี้เป็นส่วนหนึ่งของวิชาการออกแบบและเทคโนโลยี ที่ให้นักเรียนได้เรียนรู้และฝึกปฏิบัติการใช้กระบวนการออกแบบเชิงวิศวกรรมเพื่อแก้ไขปัญหา และพัฒนาเทคโนโลยีจากสิ่งที่อยู่ใกล้ตัว