PokemonEverywhere

โปเกมอนทุกที่ด้วย. NET

รหัสตัวอย่างเพื่อแสดงให้เห็นว่ารหัสสามารถแชร์ได้อย่างไรจากส่วนหน้าไปยังแบ็กเอนด์ด้วย C# และ. NET

โครงการนี้รวมถึง:

โครงการ	คำอธิบาย
pokemoneverywhere.blazor	แอป Blazor Web ที่แสดงข้อมูลโปเกมอนที่ดึงมาจากโครงการ Web API
pokemoneverywhere.blazor.shared	Razor Class Library (RCL) ที่แชร์ระหว่างโครงการที่เปิดใช้งาน BLAZOR ทั้งหมด (Blazor, Blazor Hybrid กับ. NET MAUI, WPF และ WinForms)
Pokemoneverywhere.blazorhybrid	โครงการ Blazor Hybrid ที่สร้างขึ้นบน. NET MAUI ที่คุณสามารถทำงานบน Android, iOS, Windows และ MacOS
pokemoneverywhere.console	แอปพลิเคชันคอนโซล NET ที่แสดงข้อมูลโปเกมอนที่มาจากโครงการเว็บ API ในตาราง
pokemoneverywhere.maui	แอปพลิเคชั่น. NET MAUI "Native" ที่แสดงข้อมูลPokémonที่มาจากโครงการ Web API ในแอพ Android, iOS, Windows และ MacOS แบบดั้งเดิม
pokemoneverywhere. shared	ห้องสมุดชั้นเรียนที่แชร์กับ โครงการอื่น ๆ ทั้งหมด รวมโมเดลPokémonและบริการเพื่อดึงข้อมูล
PokEmonEverywhere.Vue (ไม่ใช่ในการแก้ปัญหา)	โครงการ Vue Web ที่โฮสต์ในโครงการ Vuehybrid
pokemoneverywhere.vuehybrid	.NET MAUI Client Project ที่ใช้ HybridWebView เพื่อโหลดแอพ Vue ที่แสดงข้อมูลโปเกมอนที่มาจากโครงการ Web API
pokemoneverywhere.webapi	Backend Web API Project ที่ดึงข้อมูลจากแหล่งภายนอกและให้บริการกับลูกค้า
pokemoneverywhere.wpf	โครงการไคลเอนต์ WPF ที่แสดงวิธีการดึงข้อมูลในทั้ง WPF DataGrid และการใช้ Blazor Hybrid
pokemoneverywhere.winforms	โครงการไคลเอนต์ Winforms ที่แสดงวิธีการดึงข้อมูลในทั้ง Winforms DataGridView และใช้ Blazor Hybrid

ดำเนินโครงการ

1. ตรวจสอบให้แน่ใจว่าโครงการ WebAPI กำลังทำงานเพื่อให้บริการข้อมูล

   คุณสามารถทำได้โดยเรียกใช้ dotnet run --project PokemonEverywhere.WebApi/PokemonEverywhere.WebApi.csproj --launch-profile "https"

   หากการเชื่อมต่อกับจุดสิ้นสุด HTTPS ให้ข้อผิดพลาดเกี่ยวกับใบรับรองที่ไม่ถูกต้องให้หยุดเซิร์ฟเวอร์และเรียกใช้ dotnet dev-certs https --trust สิ่งนี้อาจแจ้งให้คุณทราบรหัสผ่านของคุณ จากนั้นเรียกใช้คำสั่งด้านบนอีกครั้งเพื่อเรียกใช้เซิร์ฟเวอร์

2. ทางเลือกคุณสามารถตั้งค่า devtunnel เพื่อเชื่อมต่อกับเซิร์ฟเวอร์จากตัวจำลอง/เครื่องจำลอง

   ในการทำเช่นนี้ให้ติดตั้ง devtunnels และเรียกใช้ devtunnel host -a -p 7055 พอร์ต 7055 เป็นค่าเริ่มต้นในโครงการนี้หากคุณเลือกใช้อย่างอื่นให้อัปเดตพอร์ต นำทางไปยัง URL ที่สร้างขึ้นหนึ่งครั้งจากเบราว์เซอร์เพื่อรับทราบข้อความเตือนจากนั้นคุณสามารถเชื่อมต่อกับ URL จากโครงการแอปไคลเอนต์

โครงการทั้งหมดควรจะสามารถเรียกใช้ผ่าน IDE หรือ Editor Code หรือบรรทัดคำสั่งใด ๆ

ตัวอย่างเช่นการเรียกใช้โครงการไคลเอนต์ Blazor จากการใช้บรรทัดคำสั่ง

dotnet run --project PokemonEverywhere.Blazor/PokemonEverywhere.Blazor.csproj --launch-profile " https "

หรือเรียกใช้. net maui บน windows จากการใช้บรรทัดคำสั่ง

dotnet build PokemonEverywhere.Maui/PokemonEverywhere.Maui.csproj -t:Run -f net8.0-windows10.0.19041.0

ใน Visual Studio ตั้งค่าโครงการที่คุณชื่นชอบเป็นโครงการเริ่มต้นและเริ่มรัน!

เรียกใช้โครงการ Vuehybrid

ก่อนที่จะเรียกใช้โครงการ Vuehybrid ตรวจสอบให้แน่ใจว่าได้ติดตั้ง NPM และจาก PokEmonEverywhere.Vue Folder Run

npm i
npm run build