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

Drum_Machine

- สารบัญ

  • - สารบัญ
  • Drum_Machine
    • - สร้างด้วย
      • เทคสแต็ค
      • คุณสมบัติที่สำคัญ
    • การสาธิตสด
    • เริ่มต้นใช้งาน
      • โครงสร้างโครงการ
      • ตั้งค่า
      • ติดตั้ง
      • การใช้งาน
      • ทำการทดสอบ
    • ผู้เขียน
    • - คุณสมบัติในอนาคต
    • - มีส่วนร่วม
    • ️ แสดงการสนับสนุนของคุณ
    • รับทราบ
    • ใบอนุญาต

Drum_Machine

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

- สร้างด้วย

เทคสแต็ค

ปฏิกิริยารีดักซ์
  • โปรเจ็กต์นี้ใช้ React
HTML
  • โปรเจ็กต์นี้ใช้ HTML
ซีเอสเอส
  • CSS ใช้เพื่อจัดเตรียมการออกแบบทั้งหน้า
ลินเตอร์ส
  • Linters เป็นเครื่องมือที่ช่วยให้เราตรวจสอบและแก้ไขข้อผิดพลาดในโค้ด
    • โครงการนี้มีสอง linters:
    • ซีเอสเอส
    • จาวาสคริปต์

คุณสมบัติที่สำคัญ

  • สปา
  • CRA
  • สไตล์
  • ชุดเครื่องมือ
  • ปฏิกิริยา-Redux
  • การปรับใช้

(กลับไปด้านบน)

การสาธิตสด

คุณสามารถดูการสาธิตได้ที่นี่

(กลับไปด้านบน)

เริ่มต้นใช้งาน

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

-Node.js -npm

- โคลนที่เก็บนี้ไปยังเครื่องของคุณโดยใช้:

โคลนคอมไพล์ https://github.com/ClaudiaRojasSoto/Drum_Machine.git

- นำทางไปยังโฟลเดอร์โครงการ:

ซีดี math_magicians

- ติดตั้งการพึ่งพาโครงการ:

ติดตั้ง npm

หากต้องการเริ่มเซิร์ฟเวอร์การพัฒนา ให้รันคำสั่งต่อไปนี้:

เวลา 13.00 น. เริ่มต้น

โครงสร้างโครงการ

โครงการเป็นไปตามโฟลเดอร์และโครงสร้างไฟล์ต่อไปนี้:

  • /src : ประกอบด้วยไฟล์ต้นฉบับของแอปพลิเคชัน
  • /src/index.js : จุดเริ่มต้นหลักของแอปพลิเคชัน JavaScript
  • /src/App.js : ส่วนประกอบระดับบนสุดของแอปพลิเคชันที่มีการเรนเดอร์ส่วนประกอบ
  • /src/components : ไดเรกทอรีสำหรับส่วนประกอบ React
  • /src/components/Display.js : ส่วนประกอบสำหรับจอแสดงผล
  • /src/components/DrumMachine.js : โฟลเดอร์สำหรับ DrumMachine
  • /src/components/DrumPad.js : โฟลเดอร์สำหรับ Drumpad
  • /src/redux : ไดเร็กทอรีสำหรับการจัดการ Redux
  • /src/redux/store.js : การกำหนดค่าร้านค้า Redux
  • /src/redux/actions : โฟลเดอร์สำหรับการดำเนินการ Redux
  • /src/redux/DrumMachineActions : โฟลเดอร์สำหรับการจัดการการดำเนินการของ DrumMachine
  • /src/redux/reducers : โฟลเดอร์สำหรับตัวลด Redux
  • /src/redux/reducers/DrumMachineReducer.js : ตัวลดสำหรับการจัดการตัวลด DrumMachine
  • /public : ประกอบด้วยไฟล์สาธารณะและทรัพย์สินของแอปพลิเคชัน
  • /public/index.html : ไฟล์ HTML พื้นฐานของแอปพลิเคชัน
  • /build : ประกอบด้วยไฟล์การผลิตที่สร้างขึ้น

ตั้งค่า

โคลนที่เก็บนี้ไปยังโฟลเดอร์ที่คุณต้องการ: https://github.com/ClaudiaRojasSoto/Drum_Machine.git

ติดตั้ง

ติดตั้งโปรเจ็กต์นี้ด้วย: ติดตั้ง Stylelint และ ESLint

การใช้งาน

ในการรันโปรเจ็กต์ ให้รันคำสั่งต่อไปนี้: เพียงแค่ต้องมีเว็บเบราว์เซอร์

ทำการทดสอบ

หากต้องการรันการทดสอบ ให้รันคำสั่งต่อไปนี้: เริ่มต้น npm คุณเพียงแค่ต้องมีเว็บเบราว์เซอร์ธรรมดาเพื่อรันโปรเจ็กต์นี้สำหรับการทดสอบ

ผู้เขียน

- คลอเดีย โรฮาส

  • GitHub: @githubhandle
  • ลิงค์อิน: ลิงค์อิน
  • AngelList: แองเจิลลิสต์

(กลับไปด้านบน)

- คุณสมบัติในอนาคต

  • รหัสผู้ใช้ - เข้าสู่ระบบ

(กลับไปด้านบน)

- มีส่วนร่วม

ยินดีต้อนรับการมีส่วนร่วม ปัญหา และการร้องขอคุณสมบัติ!

อย่าลังเลที่จะตรวจสอบหน้าปัญหา

(กลับไปด้านบน)

️ แสดงการสนับสนุนของคุณ

หากคุณชอบโครงการนี้ แสดงการสนับสนุนโดยติดตามบัญชีนี้

(กลับไปด้านบน)

รับทราบ

  • Microverse ที่ให้โอกาสในการเรียนรู้ Git และ GitHub ในสภาพแวดล้อมการทำงานร่วมกัน
  • เอกสาร GitHub สำหรับให้ข้อมูลมากมายเกี่ยวกับ Git และ GitHub

(กลับไปด้านบน)

ใบอนุญาต

โครงการนี้คือ MIT

(กลับไปด้านบน)

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