spa30

โครงการตลาดนัด

เรากำลังจะสร้างเว็บแอปพลิเคชันง่ายๆ ที่ผู้คนสามารถจัดการผลิตภัณฑ์ที่พวกเขาต้องการขายได้

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

เราจะสร้าง 3 โครงการ โปรเจ็กต์ FrontEnd จะเป็น Progressive Web Application ที่สร้างขึ้นโดยใช้ Vuejs, Vue Router และ Vuetify ในขณะที่ฝั่งเซิร์ฟเวอร์เรากำลังจะสร้างแอปพลิเคชันเว็บ .NET Core 3.0 สองรายการโดยใช้ Visual Studio 2019 โดยรายการหนึ่งจะแสดง REST API ในขณะที่รายการที่สองจะดูแล ของการรับรองความถูกต้องโดยใช้ Identity Server 4

1. ลูกค้าส่วนหน้า
   • จาวาสคริปต์ (ECMAScript 2015+)
   • HTML5
   • ซีเอสเอส 3
   • vue.js 2
   • เราเตอร์ Vue
   • วูเอทิฟาย
   • เปิดไคลเอนต์เชื่อมต่อ Id
   • ดึงข้อมูล API
   • API กล้องเนทิฟ

โปรเจ็กต์นี้จะโต้ตอบกับผู้ใช้ผ่านเบราว์เซอร์โดยการสร้างอินเทอร์เฟซผู้ใช้ HTML แบบไดนามิก และจะพูดคุยกับเซิร์ฟเวอร์โดยใช้ javascript และ json

2. เรสท์ เซอร์วิส
   • ตัวควบคุม API เว็บ .NET Core 3.0
   • เอนทิตีเฟรมเวิร์กคอร์ 3.0
   • ฐานข้อมูลเซิร์ฟเวอร์ SQL
   • การตรวจสอบสิทธิ์ไคลเอ็นต์เซิร์ฟเวอร์ข้อมูลประจำตัว

โครงการนี้จะรับผิดชอบในการจัดเก็บข้อมูลบนเซิร์ฟเวอร์และตอบสนองต่อคำขอของลูกค้าผ่าน http และ json

3. เซิร์ฟเวอร์การรับรองความถูกต้อง
   • เซิร์ฟเวอร์ประจำตัว 4
   • แกนกรอบเอนทิตี

โปรเจ็กต์นี้จะดูแลส่วนการตรวจสอบสิทธิ์ มันจะออกโทเค็น JWT ที่จะใช้โดยแอปพลิเคชันไคลเอนต์เพื่อเข้าถึงเซิร์ฟเวอร์

สิ่งที่คุณต้องรู้อยู่แล้ว:

• ค#
• จาวาสคริปต์ (ECMAScript 2015+)
• HTML5
• ซีเอสเอส 3

สิ่งที่คุณจะได้เรียนรู้:

• ส่วนที่เหลือคืออะไร
• .NET Core คืออะไร
• ASP.NET คอร์
• ตัวควบคุม Web API คืออะไร
• ชวา
• มิดเดิลแวร์
• ตัวแปรสภาพแวดล้อม
• การกำหนดค่าหลัก ASP.NET
• การฉีดพึ่งพา
• แกนกรอบเอนทิตี
• บุรุษไปรษณีย์
• คอร์ส
• Vue.js
• วิวเราท์เตอร์
• ดึงข้อมูล API
• เว็บแพ็ค
• วูเอทิฟาย
• การรับรองความถูกต้องและการอนุญาต
• OAuth 2 และ Open Id Connect
• เซิร์ฟเวอร์ประจำตัว 4
• การอนุญาตเจ้าของทรัพยากร

ก่อนที่คุณจะเริ่มคุณต้องมี

• Visual Studio 2019 (Community Edition ก็เพียงพอแล้ว)

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งปริมาณงาน "การพัฒนาข้ามแพลตฟอร์ม .NET Core" คุณสามารถตรวจสอบและติดตั้งปริมาณงานได้โดยการเปิดตัว Visual Studio Installer

• รหัสวิชวลสตูดิโอ
• โหนด

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้ง .NET Core

โปรดดูhttps://www.microsoft.com/net/download/windows

---

ขั้นตอนการทำงานของเรา

เราจะแบ่งโครงการของเราออกเป็นขั้นตอนง่ายๆ แต่ละขั้นตอนจะมุ่งเน้นไปที่งานเดียวและจะสร้างต่อยอดจากขั้นตอนก่อนหน้า เราจะเริ่มต้นด้วยโปรเจ็กต์ง่ายๆ ที่จะมีความซับซ้อนมากขึ้นเรื่อยๆ ตัวอย่างเช่น เราจะไม่เน้นไปที่การตรวจสอบสิทธิ์และการอนุญาตในตอนแรก เราจะเพิ่มในขั้นตอนต่อไป

โฟลเดอร์นี้มีโฟลเดอร์ย่อยที่แตกต่างกัน แต่ละโฟลเดอร์ย่อยแสดงถึงระยะในโครงการของเรา โฟลเดอร์ "Start" คือจุดเริ่มต้นของแต่ละขั้นตอน โฟลเดอร์ "โซลูชัน" เป็นเวอร์ชันสุดท้ายของแต่ละขั้นตอน ซึ่งมอบให้แก่คุณในกรณีที่คุณต้องการตรวจสอบว่าโปรเจ็กต์ของคุณควรจะเป็นอย่างไรเมื่อสิ้นสุดแต่ละแล็บ สิ่งที่คุณต้องทำคือเปิดโฟลเดอร์เริ่มต้นที่ตรงกับห้องปฏิบัติการที่คุณต้องการลอง (เช่น Lab01/Start เพื่อเริ่มต้น) และทำตามคำแนะนำที่คุณพบในไฟล์ readme.md เมื่อเสร็จแล้ว คุณสามารถเปรียบเทียบงานของคุณกับโซลูชันที่ให้ไว้ในโฟลเดอร์โซลูชันได้ตามสบาย

เพื่อเริ่มต้น

1. เปิดโฟลเดอร์แล็บ
2. นำทางไปยังโฟลเดอร์ย่อย Lab01
3. นำทางไปยังโฟลเดอร์ย่อยเริ่มต้น
4. ทำตามคำแนะนำที่อยู่ในไฟล์ readme.md เพื่อดำเนินการต่อ

หากต้องการดูใบสมัครขั้นสุดท้าย

กำหนดค่าและเริ่มแอปพลิเคชัน Identity Server

• เปิด Lab08SolutionMarketPlaceIdentityServerIdentityServer.sln ใน Visual Studio
• สร้างโครงการ แต่อย่าเริ่มจาก Visual Studio
• เปิดพร้อมท์คำสั่งภายใต้โฟลเดอร์ Lab08SolutionMarketPlaceIdentityServer
• พิมพ์ dotnet run /seed
• ไปที่ http://localhost:5002 และตรวจสอบให้แน่ใจว่าโปรเจ็กต์เริ่มทำงานแล้ว

กำหนดค่าและเริ่มบริการ REST

• เปิด Lab08SolutionMarketPlaceMarketplaceMarketPlace.sln ใน Visual Studio
• สร้างโครงการและเริ่มต้นจาก Visual Studio

กำหนดค่าและเริ่มไคลเอนต์ Javascript

• เปิด Lab08SolutionMarketPlacespaclient ใน Visual Studio Code
• เปิดหน้าต่างเทอร์มินัล
• พิมพ์ npm install
• พิมพ์ npm run serve

เพื่อเข้าสู่ระบบ

• ชื่อผู้ใช้: อลิซ
• รหัสผ่าน: Pass123$