opencollective frontend

เปิดส่วนหน้า

คำนำ

หากคุณเห็นขั้นตอนด้านล่างที่สามารถปรับปรุงได้ (หรือล้าสมัย) โปรดอัปเดตคำแนะนำ เราไม่ค่อยผ่านกระบวนการนี้ด้วยตัวเองดังนั้นดวงตาคู่ใหม่ของคุณและประสบการณ์ล่าสุดของคุณกับมันทำให้คุณเป็นผู้สมัครที่ดีที่สุดในการปรับปรุงพวกเขาสำหรับผู้ใช้รายอื่น ขอบคุณ!

การพัฒนา

ข้อกำหนดเบื้องต้น

1. ตรวจสอบให้แน่ใจว่าคุณมีเวอร์ชัน node.js เวอร์ชัน 20.x และ NPM> = 9.0.0

• เราขอแนะนำให้ใช้ NVM: nvm install && nvm use

ติดตั้ง

เราขอแนะนำให้โคลนนิ่งที่เก็บในโฟลเดอร์ที่อุทิศให้กับโครงการ opencollective

 git clone [email protected]:opencollective/opencollective-frontend.git opencollective/frontend
cd opencollective/frontend
npm install

ตัวแปรสภาพแวดล้อม

โครงการนี้ต้องการการเข้าถึง API แบบเปิด

โดยค่าเริ่มต้นมันจะพยายามเชื่อมต่อกับ Open Collective Staging API คุณไม่จำเป็นต้องเปลี่ยนแปลงอะไรเลย

ในกรณีที่คุณต้องการเชื่อมต่อกับ Open Collective API ที่ทำงานในเครื่อง:

• โคลนติดตั้งและเริ่ม OpenCollective-API
• ในโครงการนี้คัดลอกเนื้อหาต่อไปนี้ไปยังไฟล์ .env :

 API_URL=http://localhost:3060
API_KEY=dvl-1510egmf4a23d80342403fb599qd

เริ่ม

 npm run dev

การทดสอบ

เพื่อเรียกใช้การทดสอบ:

• สำหรับหน้าและส่วนประกอบใช้ npm test
• สำหรับการทดสอบแบบ end-to-end (E2E) โดยใช้ Cypress ดูคู่มือเฉพาะของเรา

เพื่ออัปเดต:

• Jest Snapshots: เรียกใช้ npm run test:update
• ไฟล์แปล: เรียกใช้ npm run langs:update
• graphql schema สำหรับ eslint: เรียกใช้ npm run graphql:update

สไตล์ไกด์

เราใช้นิทานเพื่อพัฒนาและจัดทำเอกสารส่วนประกอบที่ตอบสนองของเราแยกออกจากองค์ประกอบสไตล์และระบบสไตล์

ข้อมูลเพิ่มเติม: docs/styleguide.md

การแปลเป็นภาษาท้องถิ่น

การแปลอินเทอร์เฟซไม่จำเป็นต้องมีทักษะทางเทคนิคใด ๆ คุณสามารถไปที่ https://crowdin.com/project/opencollective และเริ่มแปลทันที!

ขณะนี้เรากำลังมองหาการมีส่วนร่วมสำหรับภาษาต่อไปนี้:

• ภาษาฝรั่งเศส
• เกี่ยวกับภาษาสเปน
• ญี่ปุ่น

ต้องการเพิ่มภาษาใหม่สำหรับ Open Collective หรือไม่? ติดต่อเราและเรายินดีที่จะช่วยคุณตั้งค่า!

การบริจาค

สไตล์รหัส? ประชุมการประชุม? โปรดตรวจสอบแนวทางการสนับสนุนของเรา

TL; DR: เราใช้ Prettier และ Eslint เราชอบข้อความที่ยอดเยี่ยมและทำความสะอาดประวัติ Git

ความยิ่งใหญ่

repo นี้เป็นส่วนหนึ่งของโปรแกรม Bounty Open Collective รับเงินเพื่อสนับสนุนโอเพนซอร์ส! ทีมงานด้านวิศวกรรมแบบเปิดมีขนาดเล็กและเรามักจะมองหาผู้มีส่วนร่วมใหม่ให้กับฐานข้อมูลโอเพนซอร์สของเรา โปรแกรมเงินรางวัลของเราเป็นโอกาสในการแก้ปัญหาที่อาจถูกทอดทิ้งเป็นอย่างอื่น ผู้มีส่วนร่วมที่แก้ไขปัญหาเหล่านี้จะได้รับรางวัลทางการเงิน โปรดดูเอกสารของเราสำหรับข้อมูลเพิ่มเติม: https://docs.opencollective.com/help/contributing/development/bounties

การปรับใช้

โครงการนี้ถูกนำไปใช้ในการจัดเตรียมและการผลิตกับ Heroku ในการปรับใช้คุณจะต้องเป็นสมาชิกหลักของทีม Open Collective

ข้อมูลเพิ่มเติม: docs/deployment.md

ส่วนประกอบการเผยแพร่

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

1. ตรวจสอบเวอร์ชันที่เผยแพร่ในปัจจุบันด้วย npm view @opencollective/frontend-components version
2. ทริกเกอร์สคริปต์การเผยแพร่โดยเรียกใช้ npm run publish-components {NEW_VERSION} โดยที่ {NEW_VERSION} เป็นหมายเลขเวอร์ชันใหม่ (โปรดติดตาม semver)
3. ตรวจสอบการเปลี่ยนแปลงและยืนยันว่าทุกอย่างสมเหตุสมผลหรือไม่

หากต้องการเพิ่มไฟล์หรือการอ้างอิงใหม่ในแพ็คเกจที่ส่งออกนี้ให้ดูสคริปต์/การเผยแพร่องค์ประกอบ/config.ts

การอภิปราย

หากคุณมีคำถามใด ๆ ให้พาเราไปที่ Discord หรือ Twitter (@opencollect)

ขอบคุณ

ต้องขอบคุณ Lost Pixel สำหรับการจัดหาแพลตฟอร์มการทดสอบภาพที่ช่วยให้เราตรวจสอบการเปลี่ยนแปลง UI และจับการถดถอยด้วยภาพ