หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แอปพลิเคชันเว็บ Kitsu

นี่คือที่เก็บลูกค้าของเรา มันมีแอปพลิเคชัน react.js สำหรับ kitsu
ตรวจสอบเครื่องมือที่เก็บเอกสารมือถือมือถือเซิร์ฟเวอร์และ API

การบริจาค

ความจริงที่ว่าคุณกำลังอ่านสิ่งนี้อาจหมายความว่าคุณสนใจที่จะสนับสนุนแอปพลิเคชันเว็บ Kitsu ถ้าเป็นเช่นนั้นยินดีต้อนรับ! มันค่อนข้างง่ายที่จะเริ่มต้นและเราอยู่ที่นี่เพื่อช่วยคุณตลอดทาง หากคุณมีคำถามใด ๆ โปรดอย่าลังเลที่จะถามเราเกี่ยวกับความไม่ลงรอยกันของเราในช่อง #DEV!

ก่อนที่คุณจะทำการร้องขอการดึงโปรดอ่าน StyleGuide และตรวจสอบให้แน่ใจว่าคุณรักษา codebase ให้สะอาดและสอดคล้องกันสำหรับนักพัฒนาในอนาคต

ทำให้มันทำงาน

คุณจะต้องใช้เวอร์ชัน Node.js ที่ค่อนข้างทันสมัย LTS ที่ใช้งานอยู่น่าจะเป็นตัวเลือกที่ดีที่สุดหากคุณไม่แน่ใจ การปรับใช้ของเราจะใช้ LTS ที่ใช้งานอยู่ แต่เราพยายามทำให้แน่ใจว่าทุกอย่างทำงานได้อย่างราบรื่นในเวอร์ชันปัจจุบันเช่นกัน

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

  1. npm install (ติดตั้งการพึ่งพา)
  2. npm run dev (พอร์ตเริ่มต้น 3000)

ตอนนี้เยี่ยมชม http://localhost:3000 และคุณควรดูแอปพลิเคชัน Kitsu!

โดยค่าเริ่มต้นในโหมดการพัฒนาสิ่งนี้จะเชื่อมต่อกับ staging.kitsu.io (สภาพแวดล้อมการผลิตก่อนการผลิตของเรา) สำหรับ API ซึ่งหมายความว่าทุกสิ่งที่คุณทำจะถูกลบออกทุกสัปดาห์ คุณสามารถเปลี่ยนสิ่งนี้เพื่อเชื่อมต่อกับการผลิตหากจำเป็นโดยการตั้งค่า VITE_API_HOST=https://kitsu.io/ ในไฟล์. .env โดยทั่วไปไม่จำเป็น แต่มีบางสิ่งที่ไม่ทำงานอย่างเต็มที่ในการแสดงละคร

ในอนาคตเราวางแผนที่จะรวมสิ่งนี้เข้ากับสภาพแวดล้อม dev kitsu-tools ดีกว่า

นำทาง codebase

ในขณะที่โครงสร้างโครงการพื้นฐานควรคุ้นเคยกับนักพัฒนาส่วนใหญ่ที่เคยใช้ React และ VITE ในอดีต Kitsu เป็นแอปพลิเคชันขนาดใหญ่และมีโครงสร้างมากกว่าที่คุณอาจคุ้นเคย

จุดเข้า

Vite รวบรวมแอปพลิเคชันเริ่มต้นที่ "จุดเข้า" ในกรณีของเราเรามีสี่ "การสร้างเป้าหมาย" สามครั้ง:

  • BUILD_TARGET=client - แอปหลัก kitsu (v4)
    • index.html - จุดเข้าหลักสำหรับแอปพลิเคชันเว็บ Kitsu
    • oauth2-callback.html จุดเข้าใช้สำหรับตัวจัดการการโทรกลับจากผู้ให้บริการ OAuth2 (ส่วนใหญ่เป็นเพียงผู้มอบหมายให้ Nanoauth ของเรา) ห้องสมุด
  • BUILD_TARGET=server -เวอร์ชันที่แสดงในฝั่งเซิร์ฟเวอร์ของแอป Kitsu Web
    • server.js - จุดเข้าหลักสำหรับแอป Kitsu Web
  • BUILD_TARGET=library - ไลบรารีของส่วนประกอบจากแอพเว็บ Kitsu (v4) เพื่อเปิดเผยแอพ V3 Ember ในระหว่างการย้ายถิ่น
    • src/entry-ember.tsx การส่งออกซึ่งจะสามารถเข้าถึงได้จากแอปพลิเคชัน Ember

ซอร์สโค้ดแอปพลิเคชัน

  • src/assets/ - สินทรัพย์คงที่เช่นไอคอนภาพประกอบและภาพเคลื่อนไหวที่นำเข้าโดยแอปพลิเคชัน สิ่งเหล่านี้ไม่เพียงคัดลอกไปยังไดเรกทอรีเอาท์พุทเหล่านี้จะต้องนำเข้าและสามารถประมวลผลได้ในระหว่างการรวบรวมด้วยปลั๊กอินต่างๆ
  • src/components/ - ส่วนประกอบทั่วไปที่ใช้ซ้ำได้
  • src/pages/ - ส่วนประกอบแสดงผลทั้งหน้า
  • src/layouts/ - ส่วนประกอบที่ให้โครงสร้างหน้าใหม่ที่นำกลับมาใช้ใหม่ได้
  • src/contexts/ - ตอบสนองบริบทสำหรับการแบ่งปันสถานะระหว่างส่วนประกอบ
  • src/initializers/ - รหัสที่จำเป็นซึ่งทำงานในระหว่างการบูตแอป (หลีกเลี่ยงสิ่งเหล่านี้ถ้าเป็นไปได้ชอบ hooks ในส่วนประกอบแอป)
  • src/constants/config.ts - เปิดเผยการกำหนดค่าไปยังแอปพลิเคชันที่รันไทม์
  • src/graphql/ - รหัสสนับสนุน GraphQL เช่นประเภทสคีมาที่สร้างขึ้นสการ์และการแลกเปลี่ยน URQL
  • src/hooks/ - hooks ปฏิกิริยาแบบกำหนดเองสำหรับแอปพลิเคชัน
  • src/locales/ -ข้อมูลสำหรับทุกสถานที่ที่เราสนับสนุน (การแปล, สถานที่วันที่ -T-FN ฯลฯ )
  • src/errors/ - คลาสย่อยข้อผิดพลาดทั้งหมดของเรา
  • src/styles/ -สไตล์ทั่วทั้งแอปพลิเคชัน (ไม่เฉพาะเจาะจงกับส่วนประกอบ) ส่วนใหญ่อยู่ในรูปแบบของตัวแปรที่ใช้ในรูปแบบส่วนประกอบ

ห้องสมุดสำคัญ

  • ภาษา: typescript
  • Framework: React (เราอาจเปลี่ยนเป็น preact ในบางจุด)
  • Bundler: Vite
  • การทดสอบ: Vitest
  • การกำหนดเส้นทาง: React Router v6
  • graphql client: urql พร้อม graphcache เปิดใช้งาน
  • สไตล์: โมดูล CSS ที่ประมวลผลโดย postcss
  • ความเป็นสากล/การแปล: React Intl
  • เวลา: Date-FNS

เวิร์กโฟลว์การพัฒนาทั่วไป

เรียกใช้ codegen 

npm run codegen

หากคุณเปลี่ยนไฟล์ .gql หรือเพิ่มคีย์การแปลใหม่คุณจะต้องเรียกใช้ npm run codegen เพื่อให้พวกเขาทำงานได้อย่างถูกต้อง graphql codegen จะสร้างไฟล์ typescript สำหรับทุกแบบสอบถามและ codegen Intl จะแยกคีย์การแปลทั้งหมดออกจากส่วนประกอบของคุณ

หนังสือนิทาน 

npm run storybook

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

การทดสอบกำลังดำเนินการ 

npm run test:unit # Runs unit tests (vitest)
npm run test:unit:watch # Opens vitest in watch mode
npm run test:e2e # Runs e2e tests (cypress)

เรามีชุดทดสอบสองชุด:

  • การทดสอบหน่วย
    • ขับเคลื่อนโดย Vitest กรอบการทดสอบที่เข้ากันได้กับความตลกขบขัน
    • เร็วมาก
    • ทำงานใน DOM ปลอม (ไม่ใช่เบราว์เซอร์จริง)
    • เก็บไว้ติดกับรหัสใน .test.ts(x) ไฟล์
  • การทดสอบแบบ end-to-end
    • ขับเคลื่อนโดย Cypress กรอบการทดสอบเบราว์เซอร์แบบไม่มีหัว
    • ช้าลง
    • ทำงานในเบราว์เซอร์จริง (Chrome, Firefox ฯลฯ )
    • เก็บไว้ใน cypress/

ส่วนใหญ่เราขอแนะนำให้ทดสอบรหัสของคุณด้วย Vitest มันเป็นประสบการณ์ที่ดีกว่ามากและทำงานได้เร็วขึ้น ที่กล่าวว่าบางครั้งคุณต้องทดสอบเวิร์กโฟลว์เต็มรูปแบบจาก end-to-end ซึ่งเป็นสิ่งที่ Cypress อยู่ที่นั่น

การแปล

เราใช้ crowdin เพื่อจัดการการแปลมุ่งหน้าไปที่ crowdin.com/project/kitsu-web เพื่อแนะนำการเปลี่ยนแปลงหรือเพิ่มการแปลใหม่

การแปลใช้รูปแบบไวยากรณ์ข้อความ ICU อ่านเอกสารไวยากรณ์

ปัญหา

ต้องการสร้างปัญหาหรือไม่? เปิดรายงานข้อผิดพลาดหรือคำขอคุณสมบัติใน Kitsu

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