lens up

LensUp

1. ผู้เยี่ยมชมจะเห็น Gallery UI พร้อมกับภาพถ่ายของแขกคนอื่นๆ เขายังเห็นรหัส QR ที่มุมแอปพลิเคชันด้วย

2. แขกสแกนรหัส QR ซึ่งเปลี่ยนเส้นทางเขาไปที่ Photo Collector UI และที่นั่นเขาสามารถอัปโหลดรูปภาพและความปรารถนาได้

3. Photo Collector UI ส่งข้อมูลไปยัง Photo Collector Service

4. Photo Collector Service อัพโหลดภาพถ่ายของแขกไปยังที่เก็บข้อมูลหยด

5. Photo Collector Service เพิ่มข้อมูลแขกลงในฐานข้อมูล

6. Photo Collector Service เผยแพร่กิจกรรมไปยังคิว

7. Gallery Service รับงานและดำเนินการ

8. การแจ้งเตือนแบบพุช Gallery Service เกี่ยวกับรูปภาพใหม่ในแกลเลอรีสำหรับ Gallery UI จากนั้น Gallery UI จะเพิ่มรูปภาพของผู้เยี่ยมชมใหม่ในคอลเลกชันแกลเลอรี

ภาพใหญ่ของ LensUp:

คำอธิบาย:

• บริการแบ็กเอนด์:

  • บริการรวบรวมภาพถ่าย (.NET Web API)
  • บริการแกลเลอรี (.NET Web API)
  • บริการ BackOffice (.NET เว็บ API)
  • เครื่องจำลองทริกเกอร์ Webhooks (ฟังก์ชัน Azure)

• แอปพลิเคชัน UI:

  • UI ตัวสะสมภาพถ่าย (React.js)
  • UI แกลเลอรี (React.js)
  • UI ของ Back Office (React.js)

• บริการของอาซัวร์:

  • ที่เก็บของบนโต๊ะ
  • การจัดเก็บคิว
  • ที่เก็บข้อมูลหยด

- วิธีเรียกใช้ LensUp ในเครื่อง

คุณสามารถรันโปรเจ็กต์ในเครื่องของคุณโดยใช้ Docker ทำตามขั้นตอนด้านล่างเพื่อเรียกใช้แอปพลิเคชันในเครื่อง:

1. ก่อนที่เราจะเริ่ม คุณควรสร้าง dev-certs สำหรับ LensUp บนเครื่องของคุณ การดำเนินการนี้จำเป็นสำหรับการโฮสต์อิมเมจ ASP.NET Core ด้วย Docker บน HTTPS ดังนั้นสร้างใบรับรองโดยใช้คำสั่งเหล่านี้:

   dotnet dev-certs https -ep " %USERPROFILE%.aspnethttpslens-up.pfx " -p localCertPassword
   dotnet dev-certs https --trust

   แทนที่ %USERPROFILE% ด้วยชื่อคอมพิวเตอร์ของคุณ ตัวอย่าง "C:UsersDell Precision 7520.aspnethttpslens-up.pfx"

   เพื่อวัตถุประสงค์ในการพัฒนาท้องถิ่น เราจะใช้รหัสผ่าน localCertPassword อย่าเปลี่ยนสิ่งนี้ เนื่องจากมีการใช้รหัสผ่านเดียวกันในไฟล์ docker-compose.yml

   คำสั่งข้างต้นควรสร้างใบรับรอง lens-up.pfx และควรวางไว้ในไดเร็กทอรีตามที่แสดงในภาพหน้าจอด้านล่าง

   

   นี่เป็นขั้นตอนที่จำเป็น เนื่องจากนักเทียบท่าเขียนอ้างถึงใบรับรองนั้น!

2. ติดตั้ง docker desktop บนเครื่องของคุณ (ข้ามไปหากคุณทำไปแล้ว)

3. เรียกใช้แอปพลิ docker desktop ของคุณ

4. ในไดเร็กทอรีโปรเจ็กต์หลัก ( lens-up ) ซึ่งเป็นที่ตั้งของไฟล์ docker-compose.yml ให้รันคำสั่ง docker-compose build สิ่งนี้จะสร้างภาพ LensUp ที่จำเป็น 7 ภาพ การสร้างครั้งแรกอาจใช้เวลาไม่กี่นาที (สูงสุด 10 นาที) หลังจากทำตามขั้นตอนเหล่านี้แล้ว คุณจะเห็นรูปภาพใหม่ในแอปพลิเคชัน Docker Desktop

   

5. หลังจากคำสั่ง build ให้รัน docker-compose up เพื่อเริ่มต้นโครงสร้างพื้นฐานทั้งหมด คุณควรเห็นใน Docker Desktop ว่าได้เริ่มต้นคอนเทนเนอร์ 7 รายการที่เกี่ยวข้องกับ LensUp แล้ว

   

6. ขณะนี้แอปพลิเคชันทั้งหมดกำลังทำงานบนเครื่องของคุณ คุณสามารถใช้ที่อยู่ต่อไปนี้:

   • บริการแบ็กเอนด์:

     • LensUp.BackOfficeService.API ผยอง - https://localhost:8085/swagger/index.html
     • LensUp.GalleryService.API กรีด - https://localhost:8083/swagger/index.html
     • LensUp.GalleryService.WebhookTriggerSimulator - http://localhost:8086/
     • LensUp.PhotoCollectorService.API ผยอง - https://localhost:8081/swagger/index.html

   • แอปพลิเคชัน UI:

     • LensUp.GalleryService.UI - http://localhost:5001/

     • LensUp.PhotoCollectorService.UI - http://localhost:5002/

       บน LensUp.PhotoCollectorService.UI คุณจะเห็นหน้าข้อผิดพลาด เนื่องจากคุณจำเป็นต้องนำทางไปยังมุมมองที่เกี่ยวข้องกับแกลเลอรีเฉพาะ ซึ่งคุณยังไม่ได้สร้าง

จะสร้างแกลเลอรีแรกของคุณและสนุกไปกับ LensUp ได้อย่างไร?

1. ไปที่ LensUp.BackOfficeService.API - https://localhost:8085/swagger/index.html

2. ใช้ Create จุดสิ้นสุดเพื่อสร้างแกลเลอรีของคุณ จุดสิ้นสุดส่งคืนตัวระบุแกลเลอรีหลังจากที่ถูกสร้างขึ้น (1)

   

3. ก่อนที่จะใช้แกลเลอรี เราต้องเปิดใช้งานก่อน ในกรณีดังกล่าว ให้ใช้ Activate endpoint และส่งผ่าน galleryId และ endDate ในเนื้อหาคำขอ โปรดจำไว้ว่า endDate ได้รับการตรวจสอบแล้ว และต้องมากกว่าเวลาปัจจุบัน มิฉะนั้น แกลเลอรีของคุณจะถือว่าหมดอายุแล้ว จุดสิ้นสุดส่งคืน enterCode แกลเลอรีหลังจากเปิดใช้งาน (1)

   

4. ด้วย enterCode แกลเลอรีของคุณ คุณสามารถเปิดแกลเลอรีของคุณโดยใช้ LensUp.GalleryService.UI - http://localhost:5001/

   เข้าสู่ระบบแกลเลอรีของคุณโดยใช้ enterCode

   

5. ตอนนี้คุณสามารถสแกนโค้ด QR ของแกลเลอรีและอัปโหลดรูปภาพลงไปได้ รหัสเปลี่ยนเส้นทางไปยังแบบฟอร์มสำหรับเพิ่มรูปภาพลงในแกลเลอรี คุณสามารถใช้เครื่องมือเบราว์เซอร์เพื่อสแกนโค้ด QR หรือหากไม่ได้ผล ก็สามารถไปที่ http://localhost:5002/upload-photo/{enterCode}

   

6. QR Code จะนำคุณไปเพิ่มรูปภาพและแบบฟอร์มความปรารถนา ตอนนี้คุณสามารถอัปโหลดข้อมูลของคุณไปยังแกลเลอรีได้แล้ว

   

7. หลังจากกรอกแบบฟอร์มเรียบร้อยแล้ว เราควรเห็นการแจ้งเตือนว่าสำเร็จและรูปภาพควรปรากฏในแกลเลอรี

   

- รายการสิ่งที่ต้องทำ 100 วัน

ลักษณะทั่วไป:

• ตั้งค่าโครงสร้างพื้นฐาน monorepo สำหรับแบ็กเอนด์
• ตั้งค่าโครงสร้างพื้นฐาน monorepo สำหรับฟรอนต์เอนด์
• สร้างสคริปต์ที่รัน LensUp
• สร้างเอกสารวิธีการเรียกใช้ LensUp ในเครื่อง
• สร้างบทช่วยสอนภาพยนตร์ "วิธีเรียกใช้ LensUp ในเครื่อง"
• สร้างเอกสารวิธีการเรียกใช้ LensUp ภายในเครือข่าย WLAN

ด้านแบ็กเอนด์:

• สร้างโครงการแบ็กเอนด์ทั่วไปที่ใช้ร่วมกัน
• สร้างชุดกฎการเขียนโค้ดสำหรับบริการแบ็กเอนด์
• สร้างแพ็คเกจคิวในโครงการที่ใช้ร่วมกัน
• สร้างแพ็คเกจ Table Storage ในโปรเจ็กต์ทั่วไปที่ใช้ร่วมกัน
• Crate Blob Package ในโครงการที่ใช้ร่วมกัน

บริการหลังบ้าน:

• สร้างโครงสร้างโครงการ
• สร้างปลายทางเพิ่มผู้ใช้
• สร้างจุดสิ้นสุดเพิ่มแกลเลอรี
• สร้างจุดสิ้นสุดของแกลเลอรีที่เปิดใช้งาน

บริการแกลเลอรี:

• สร้างโครงสร้างโครงการ
• สร้างจุดรับข้อมูลแกลเลอรี
• สร้างศูนย์กลางการแจ้งเตือนแกลเลอรี

บริการสะสมภาพถ่าย:

• สร้างโครงสร้างโครงการ
• สร้างจุดเพิ่มรูปภาพและความปรารถนา
• สร้างตัวปรับขนาดรูปภาพ

แง่มุมส่วนหน้า:

• สร้างโครงการส่วนหน้าที่ใช้ร่วมกัน
• สร้างชุดกฎการเขียนโค้ดสำหรับแอปพลิเคชันส่วนหน้า
• สร้างส่วนประกอบที่ใช้ร่วมกันในโครงการส่วนหน้าที่ใช้ร่วมกัน

UI แบ็คออฟฟิศ:

• สร้างแผงผู้ดูแลระบบ (ไม่บังคับ)

UI แกลเลอรี:

• สร้างการเข้าสู่ระบบไปยังหน้าแกลเลอรี่
• สร้างหน้าหลักพร้อมแกลเลอรี
• จัดการการแจ้งเตือนจากแบ็กเอนด์
• เพิ่มภาพเคลื่อนไหวในแกลเลอรี่
• เพิ่มภาพหมุนสำหรับภาพถ่าย

UI ของนักสะสมภาพถ่าย:

• สร้างหน้าเดียวพร้อมเพิ่มรูปภาพและแบบฟอร์มความปรารถนา