Skip to content

bazsup/open-online-testing-web

Repository files navigation

Open Online Testing Web (Intro)

โปรเจ็คนี้จัดทำขึ้นมาเพื่อเป็นตัวอย่างของหน้าเว็บไซต์ที่เป็นส่วนของ Presentation Layer ถูกพัฒนาด้วย React.js

ตัวอย่าง

https://depa.opencloudnative.online/

ระบบนี้ประกอบด้วย 2 ส่วนใหญ่ ๆ คือ

  1. Backend Service - ให้บริการตาม function ของระบบ depa testing ทั้งหมด แต่จะไม่มีส่วนของ User Interface (UI) จะขอเรียกส่วนนี้ว่า Open Online Testing Service - API
  2. Frontend Service - เป็น User Interface ของระบบซึ่งเรียกใช้ Backend Service เพื่อให้บริการแก่ User จะขอเรียกส่วนนี้ว่า Open Online Testing Service - Web

การใช้งาน

  • สามารถสมัครสมาชิก / เข้าสู่ระบบ ได้ผ่านช่องทาง username, password / login with google / login with facebook
  • สามารถสร้างคำถามและสร้างหมวดหมู่ของคำถามได้
  • สามารถสร้างชุดข้อสอบได้ โดยทำการเลือกคำถามที่สร้างมารวมกันเป็นชุดข้อสอบ
  • ระบบการสอบ
    • สามารถเข้าทำชุดข้อสอบได้
    • สามารถส่งคำตอบเข้าสู่ระบบได้
    • สามารถปฏิเสธการเข้าถึงห้องสอบได้หากผิดเงื่อนไข
      1. ผู้เข้าสอบเข้าห้องสอบก่อนเวลาทำข้อสอบจะเริ่ม
      2. ผู้เข้าสอบเข้าห้องสอบหลังเวลาสิ้นสุดการทำข้อสอบ
      3. ผู้เข้าสอบเคยส่งคำตอบของชุดข้อสอบนี้ไปแล้ว

หรือสามารถดูวิธีการใช้งานระบบได้ที่ User Manual.pdf

โครงสร้างระบบ

  • 1 Backend รองรับหลาย ๆ Frontend ได้
  • 1 Frontend รองรับหลาย ๆ หน่วยงานได้
  • Frontend กับ Backend อยู่ Server เดียวกันหรือต่างกันก็ได้

Overview Testing System  - ServiceType

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

  1. ทำการ Clone Project
$ git clone https://github.com/bazsup/open-online-testing-web.git

หรือทำการ Download as zip ก็ได้เช่นกัน

  1. เข้าไปยัง Directory ของ Project จากนั้นทำการลง Dependency ที่โปรเจ็คใช้งาน ในขั้นตอนนี้จำเป็นต้องทำการติดตั้ง Package Management ของภาษา Javascript ก่อน เช่น npm, yarn
$ yarn

หรือ

$ npm install

*หากไม่มี npm สามารถดาวโหลด nodejs มาติดตั้ง โดยทำการดาวโหลดได้ที่ https://nodejs.org/en/download/

  1. ทำการสร้างไฟล์ file .env ใน root project และทำการ COPY ค่าจาก .env.example มาไว้ที่ไฟล์ .env หรือใช้คำสั่งด้านล่าง
$ cp .env.example .env
  1. ทำการตั้งค่า REACT_APP_BASE_API_URL ในไฟล์ .env เพื่อบ่งบอก Project ว่าจะต้องคุยกับ Backend ที่ URL อะไร เช่น https://api.opencloudnative.online/

  2. ทำการตั้งค่า REACT_APP_BASE_APP_URL ในไฟล์ .env เพื่อบ่งบอก Frontend Project URL

  3. เปิดโปรเจ็คขึ้นมาด้วยคำสั่ง

$ yarn start

หรือ

$ npm start

เมื่อโปรเจ็คถูกรันขึ้นมาแล้ว สามารถเข้าได้ผ่าน http://localhost:3000/

Roadmap

พวกเราคาดหวังที่จะมี Feature ที่เพิ่มเติมขึ้นใน Presentation Layer นี้ ได้แก่

  • การพัฒนา Feature ในส่วนที่มีอยู่ก่อนแล้วให้สามารถใช้งานได้สมบูรณ์ เช่น การพัฒนาให้คำถามที่ถูกสร้างมาแล้ว สามารถ แก้ไข, ลบ ได้ หรือการอัพเดทรายละเอียดห้องสอบ
  • การนำประโยชน์ของหมวดหมู่ของคำถาม/ชุดข้อสอบ มาพัฒนาในส่วนของ Presentation Layer ให้สามารถคัดเลือกให้โชว์ตามหมวดหมู่ที่ต้องการได้
  • การรองรับการทำข้อสอบในรูปแบบ Adaptive Testing
  • การรองรับการตรวจข้อสอบบน Presentation Layer
  • การมี Dashboard ที่ทำการ Analyze ตัวคะแนนของผู้เข้าสอบที่ผ่าน ๆ มา เพื่อบ่งบอกถึงจุดที่ผู้เข้าสอบนั้นบกพร่อง เพื่อเป็นจุดที่ทำให้บอกผู้เข้าสอบนั้นว่าต้องพัฒนาตนเองในส่วนนี้ต่อไป
  • รองรับการออก Report ผ่านทาง Presentation Layer

License

สัญญาการอนุญาตของซอฟต์แวร์อยู่ภายใต้เงื่อนไขของ MIT license

Contributing

พวกเรายินดีที่จะมีคนเข้ามาร่วมพัฒนาด้วย ทุกคนสามารถเปิด Pull request เข้ามาได้ พวกเราจะช่วยกัน Review Code แล้วทำการ Merge Code ของคุณ เพื่อเข้ามาเป็นส่วนหนึ่งของโปรเจ็คนี้

คุณสามารถดูวิธีการ Contribute เพิ่มเติมได้ที่ CONTRIBUTING.md จากนั้นทำการเพิ่มชื่อของคุณเข้ามาเป็นส่วนหนึ่งกับพวกเราด้านล่างนี้

Infrastructure

Deployment นั้นจะมี Component สำหรับใช้ในการดึง ConfigMap มาใช้เป็น Environment หรือการทำ ReverseProxy ให้ เวลาเรา Build ใน environmnet ของ Jenkins Pipeline จะได้ ENV ไปดว้ยเช่นกันดังนั้นเราจึงสามารถใช้ควบคุ๋กับ process.env ได้เลยเมือนว่ากำลัง Build อยู่บนคอมเราจริงๆอีกด้วย


ImagineRabbits
💻

Supawit
💻

Naomi Lin
💻

Biggie
💻

Phachara Kamthong
💻

ผลงานนี้เป็นส่วนหนึ่งของ “ทุนเพชรพระจอมเกล้าเพื่อพัฒนาเทคโนโลยีและนวัตกรรมดิจิทัล (KMUTT-depa)” สำนักงานส่งเสริมเศรษฐกิจดิจิทัล (depa) และ คณะเทคโนโลยีสารสนเทศ มจธ. (SIT)