หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Apex Legends - การหมุนแผนที่

แอปพลิเคชั่นการหมุนแผนที่ Apex Legends อย่างไม่เป็นทางการ ที่ให้ผู้ใช้สามารถดูแผนที่ปัจจุบันและแผนที่ถัดไปได้ นอกเหนือจากการสมัครรับการแจ้งเตือนการเปลี่ยนแปลงแผนที่

แรงจูงใจ

แม้ว่าสถานะ Apex Legends จะเป็นเว็บไซต์ที่น่าสนใจพร้อมฟีเจอร์การหมุนแผนที่ แต่ก็ไม่มีการแจ้งเตือน ดังนั้นคุณจะต้องตรวจสอบด้วยตนเองทุกครั้งที่ต้องการรู้ว่าแผนที่ปัจจุบันคือแผนที่ใด

การหมุนแผนที่ Apex Legends เกิดขึ้นจากความพยายามในการที่จะรู้ว่าแผนที่ใดที่กำลังจะเกิดขึ้น ดังนั้นคุณจึงไม่ต้องตรวจสอบด้วยตัวเองอีกเลย

คุณสมบัติ

  • การหมุนแผนที่แบบเรียลไทม์
  • การแจ้งเตือนเบื้องหน้า — การแจ้งเตือนเบื้องหลังกำลังมา!
    • แผนที่ที่ปรับแต่งได้
    • เกณฑ์ที่ปรับแต่งได้
  • แอปพลิเคชันที่ติดตั้งได้ (ดูการสนับสนุน)

มีส่วนช่วย

ยินดีต้อนรับและขอขอบคุณที่สนับสนุน Apex Legends - การหมุนเวียนแผนที่!

พื้นที่เก็บข้อมูลโคลน

ก่อนอื่น โคลนพื้นที่เก็บข้อมูลจาก GitHub: 

 # HTTPS
git clone https://github.com/lgaspari/apex-map-rotation.git && cd apex-map-rotation

# SSH
git clone [email protected]:lgaspari/apex-map-rotation.git && cd apex-map-rotation

ติดตั้งแพ็คเกจ

จากนั้นใช้ npm เพื่อติดตั้งการขึ้นต่อกัน: 

npm install

กำหนดค่าตัวแปรสภาพแวดล้อม

ทำสำเนาของไฟล์ .env ลงใน .env.local เติมตัวแปรสภาพแวดล้อมว่างด้วยค่าที่เหมาะสมดังต่อไปนี้:

  • VITE_APEX_LEGENDS_API_SECRET_TOKEN : โทเค็นลับ API ของ Apex Legends อย่างไม่เป็นทางการสำหรับการตรวจสอบสิทธิ์

เริ่มแอปพลิเคชันในโหมดการพัฒนา

โดยส่วนใหญ่ คุณจะใช้คำสั่งนี้เพื่อรันแอปพลิเคชัน: 

npm run start

เริ่มแอปพลิเคชันในโหมดการผลิต

มิฉะนั้น หากคุณต้องการรันแอปพลิเคชันโดยใช้รหัสที่ใช้งานจริง ให้ใช้สิ่งนี้แทน: 

npm run start:production

Linting และการจัดรูปแบบโค้ด

เราใช้ ESLint เพื่อค้นหาและแก้ไขปัญหาในโค้ดของเรา ตรวจสอบรหัสท้องถิ่นของคุณโดยการรันคำสั่งต่อไปนี้: 

npm run lint

นอกจากนี้ คุณอาจติดตั้งส่วนขยาย ESLint และ Prettier สำหรับ Visual Studio Code เพื่อช่วยคุณตรวจจับข้อผิดพลาดและแก้ไขรูปแบบโค้ด

การทดสอบ

เราใช้ Vitest เป็นกรอบการทดสอบสำหรับแอปพลิเคชันของเรา ตรวจสอบการทดสอบในเครื่องของคุณโดยการรันคำสั่งต่อไปนี้: 

npm run test

นอกจากนี้ คุณยังสามารถติดตั้งส่วนขยาย Vitest สำหรับ Visual Studio Code เพื่อรันการทดสอบได้อย่างรวดเร็ว

การบูรณาการอย่างต่อเนื่อง

เวิร์กโฟลว์การรวมอย่างต่อเนื่องจะดำเนินการทุกครั้งที่ส่งไปยังสาขา main เมื่อการเปลี่ยนแปลงของคุณไม่ผ่านขั้นตอน Lint และ Test ขั้นตอนการทำงานจะล้มเหลว โปรดตรวจสอบให้แน่ใจว่าได้แก้ไขปัญหาเหล่านั้นด้วยการคอมมิตแยกต่างหาก

การปรับใช้

ขณะนี้ไม่มีการกำหนดค่าการปรับใช้อย่างต่อเนื่อง คุณจะต้องรันคำสั่งนี้ด้วยตนเอง: 

npm run deploy

โปรดอย่านำไปใช้งานจริงโดยไม่ต้องแจ้งให้ทราบ

แอปพลิเคชันเว็บแบบก้าวหน้า

นี่เป็นคุณลักษณะทดลองและอาจปิดใช้งานได้ตลอดเวลา

เราใช้ Vite เพื่อรันและสร้างแอปพลิเคชัน ดังนั้นในการตั้งค่า Progressive Web Application เราจึงใช้ปลั๊กอิน Vite PWA ซึ่งทำให้การกำหนดค่าราบรื่น

การสร้างสินทรัพย์ กปภ

สำหรับการสร้างสินทรัพย์ PWA ขั้นต่ำที่จำเป็น เราใช้ Vite PWA Assets Generator คำสั่งด้านล่างจะสร้างเนื้อหาตามไฟล์ public/logo.svg โดยใช้การกำหนดค่าจาก pwa-assets.config.ts ตรวจสอบให้แน่ใจว่าได้รับการอัปเดตก่อนใช้งาน: 

npm run generate-pwa-assets

การแก้ไขปัญหา กปภ

การติดตั้ง

หากคุณประสบปัญหาในการติดตั้ง PWA คุณสามารถใช้ Lighthouse จาก Dev Tools เพื่อตรวจสอบสิ่งที่ขาดหายไปเพื่อให้ทำงานได้

ต่อไปนี้เป็นขั้นตอนสำหรับเบราว์เซอร์ที่ใช้ Chromium:

  1. เปิดเครื่องมือ Dev
  2. ไปที่แท็บประภาคาร
  3. ตรวจสอบหมวดหมู่ Progressive Web App
  4. กดปุ่มวิเคราะห์การโหลดหน้า
  5. ตรวจสอบผลลัพธ์

อัปเดตพนักงานบริการ

แอปพลิเคชันควรแจ้งหากมีการอัปเดตใด ๆ กับ Service Worker อย่างไรก็ตาม เพื่อให้สิ่งต่างๆ ง่ายขึ้น คุณสามารถเปิดตัวเลือกจาก Dev Tools เพื่ออัปเดตพนักงานบริการเมื่อโหลดซ้ำได้:

  1. เปิดเครื่องมือ Dev
  2. ไปที่แท็บแอปพลิเคชัน
  3. ตรวจสอบการอัปเดตตัวเลือกการโหลดซ้ำ
  4. โหลดแท็บใหม่โดยใช้ CTRL+SHIFT+R

หากคุณยังคงประสบปัญหา คุณสามารถอัปเดตพนักงานบริการได้ด้วยตัวเองโดยกดปุ่มอัปเดต

อัปเดตเนื้อหา

เมื่ออัปเดตเนื้อหา PWA คุณอาจไม่เห็นเนื้อหาใหม่ที่โหลด หากเป็นเช่นนั้น โปรดตรวจสอบให้แน่ใจว่าได้ติดตั้งแอปพลิเคชันใหม่อีกครั้ง

ความเข้ากันได้ข้ามเบราว์เซอร์ (HTTPS)

การแจ้งเตือน

เราใช้อินเทอร์เฟซการแจ้งเตือนของ API การแจ้งเตือนเพื่อกำหนดค่าและแสดงการแจ้งเตือนบนเดสก์ท็อปแก่ผู้ใช้ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ API การแจ้งเตือนได้ใน MDN Web Docs

API การแจ้งเตือน

ตรวจสอบการสนับสนุน API ผ่าน 'Notification' in window

แพลตฟอร์ม กล้าหาญ โครเมียม ขอบ ไฟร์ฟอกซ์ ซาฟารี ข้อสังเกต
ระบบปฏิบัติการ macOS ใช่ ใช่ ใช่ ใช่ ใช่ -
ไอโอเอส เลขที่ เลขที่ เลขที่ เลขที่ ใช่ ¹ ¹ ต้องเปิดใช้งานคุณลักษณะทดลอง
หุ่นยนต์ ใช่ ใช่ ใช่ ใช่ ไม่มี -

อนุญาตการแจ้งเตือนทันที

การขอสิทธิ์การแจ้งเตือนผ่าน Notification.requestPermission() โดยใช้ Promises

แพลตฟอร์ม กล้าหาญ โครเมียม ขอบ ไฟร์ฟอกซ์ ซาฟารี ข้อสังเกต
ระบบปฏิบัติการ macOS ใช่ ¹ ใช่ ¹ ใช่ ¹ ใช่ ใช่ ¹ อาจต้องมีขั้นตอนด้วยตนเองเพิ่มเติมเพื่อให้สิทธิ์
ไอโอเอส ไม่มี ไม่มี ไม่มี ไม่มี ใช่ ¹ ¹ รองรับ PWA เท่านั้น
หุ่นยนต์ ใช่ ใช่ ใช่ ¹ ใช่ ² ไม่มี ¹ อาจต้องมีขั้นตอนด้วยตนเองเพิ่มเติมเพื่อให้สิทธิ์
² อาจแสดงหน้าที่ไม่ปลอดภัยเนื่องจากใบรับรองที่ลงนามด้วยตนเอง

ส่งการแจ้งเตือน

การสร้างอินสแตนซ์การแจ้งเตือนใหม่โดยใช้ new Notification(title, options);

แพลตฟอร์ม กล้าหาญ โครเมียม ขอบ ไฟร์ฟอกซ์ ซาฟารี ข้อสังเกต
ระบบปฏิบัติการ macOS ใช่ ใช่ ใช่ ใช่ ใช่ -
ไอโอเอส ไม่มี ไม่มี ไม่มี ไม่มี ไม่ ¹ ¹ ไม่ได้มาจากกปภ.
หุ่นยนต์ เลขที่ เลขที่ เลขที่ ใช่ ไม่มี -

พนักงานบริการ (ต้องใช้ HTTPS ยกเว้น localhost)

พนักงานบริการจะทำหน้าที่เป็นพร็อกซีเซิร์ฟเวอร์ที่อยู่ระหว่างเว็บแอปพลิเคชัน เบราว์เซอร์ และเครือข่าย (ถ้ามี) คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Service Worker API ได้ใน MDN Web Docs

แพลตฟอร์ม กล้าหาญ โครเมียม ขอบ ไฟร์ฟอกซ์ ซาฟารี ข้อสังเกต
ระบบปฏิบัติการ macOS ใช่ ใช่ ใช่ ใช่ ใช่ -
ไอโอเอส ใช่ ใช่ ใช่ ใช่ ใช่ -
หุ่นยนต์ ใช่ ใช่ ใช่ ใช่ ไม่มี -

Progressive Web Application (ต้องใช้ HTTPS ยกเว้น localhost)

Progressive Web App (PWA) คือแอปที่สร้างขึ้นโดยใช้เทคโนโลยีแพลตฟอร์มเว็บ แต่ให้ประสบการณ์ผู้ใช้เหมือนกับแอปเฉพาะแพลตฟอร์ม คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ Progressive Web Apps ได้ใน MDN Web Docs

แพลตฟอร์ม กล้าหาญ โครเมียม ขอบ ไฟร์ฟอกซ์ ซาฟารี ข้อสังเกต
ระบบปฏิบัติการ macOS ใช่ ¹ ใช่ ¹ ใช่ ¹ เลขที่ เลขที่ ¹ สามารถติดตั้งได้จากปุ่ม Install PWA ที่ด้านขวาของแถบที่อยู่หรือ Options > Install app
ไอโอเอส เลขที่ เลขที่ เลขที่ เลขที่ ใช่ ¹ ¹ สามารถติดตั้งได้จากปุ่ม Share > Add to Home Screen
หุ่นยนต์ ใช่ ¹ ใช่ ¹ ใช่ ¹ ใช่ ² ไม่มี ¹ สามารถติดตั้งได้จากป๊อปอัป Add to Home Screen หรือ Options > Install app
² สามารถติดตั้งได้จาก Options > Add to Home screen

เครดิต

  • ขอขอบคุณ EA และทีม Respawn ที่ได้พัฒนา Apex Legends
  • ขอขอบคุณทีมงานที่อยู่เบื้องหลัง Unofficial Apex Legends Status API ที่สร้าง API ที่ยอดเยี่ยมเช่นนี้
  • ขอขอบคุณเว็บไซต์สถานะ Apex Legends สำหรับเนื้อหาแผนที่

ข้อสงวนสิทธิ์

รูปภาพ ไอคอน และเครื่องหมายการค้าทั้งหมดเป็นของเจ้าของที่เกี่ยวข้อง Apex Legends เป็นเครื่องหมายการค้าจดทะเบียนของ EA เนื้อหาเกม วัสดุ และไอคอนเป็นของ Electronic Arts โปรดทราบว่า EA และ Respawn ไม่รับรองเนื้อหาของเว็บไซต์นี้หรือรับผิดชอบต่อเนื้อหาของเว็บไซต์นี้

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด