|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5301875c55bb305e6046bed3a4fd06d2",
|
|
|
"translation_date": "2025-08-26T23:19:54+00:00",
|
|
|
"source_file": "quiz-app/README.md",
|
|
|
"language_code": "th"
|
|
|
}
|
|
|
-->
|
|
|
# แอปแบบทดสอบ
|
|
|
|
|
|
แบบทดสอบเหล่านี้เป็นแบบทดสอบก่อนและหลังการบรรยายสำหรับหลักสูตรวิทยาศาสตร์ข้อมูลที่ https://aka.ms/webdev-beginners
|
|
|
|
|
|
## การเพิ่มชุดแบบทดสอบที่แปลแล้ว
|
|
|
|
|
|
เพิ่มการแปลแบบทดสอบโดยการสร้างโครงสร้างแบบทดสอบที่ตรงกันในโฟลเดอร์ `assets/translations` แบบทดสอบต้นฉบับอยู่ใน `assets/translations/en` แบบทดสอบถูกแบ่งออกเป็นหลายกลุ่ม อย่าลือตรวจสอบให้แน่ใจว่าการจัดลำดับตัวเลขตรงกับส่วนของแบบทดสอบที่เหมาะสม หลักสูตรนี้มีแบบทดสอบทั้งหมด 40 ชุด โดยเริ่มนับจาก 0
|
|
|
|
|
|
<details>
|
|
|
<summary>นี่คือตัวอย่างโครงสร้างไฟล์การแปล:</summary>
|
|
|
|
|
|
```
|
|
|
[
|
|
|
{
|
|
|
"title": "A title",
|
|
|
"complete": "A complete button title",
|
|
|
"error": "An error message upon selecting the wrong answer",
|
|
|
"quizzes": [
|
|
|
{
|
|
|
"id": 1,
|
|
|
"title": "Title",
|
|
|
"quiz": [
|
|
|
{
|
|
|
"questionText": "The question asked",
|
|
|
"answerOptions": [
|
|
|
{
|
|
|
"answerText": "Option 1 title",
|
|
|
"isCorrect": true
|
|
|
},
|
|
|
{
|
|
|
"answerText": "Option 2 title",
|
|
|
"isCorrect": false
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
```
|
|
|
</details>
|
|
|
|
|
|
หลังจากแก้ไขการแปลแล้ว ให้แก้ไขไฟล์ index.js ในโฟลเดอร์การแปลเพื่อ import ไฟล์ทั้งหมดตามรูปแบบใน `en`
|
|
|
|
|
|
แก้ไขไฟล์ `index.js` ใน `assets/translations` เพื่อ import ไฟล์แปลใหม่
|
|
|
|
|
|
ตัวอย่างเช่น หาก JSON การแปลของคุณอยู่ใน `ex.json` ให้ตั้งค่า 'ex' เป็นคีย์ localization จากนั้นเพิ่มเข้าไปตามตัวอย่างด้านล่างเพื่อ import
|
|
|
|
|
|
<details>
|
|
|
<summary>index.js</summary>
|
|
|
|
|
|
```
|
|
|
import ex from "./ex.json";
|
|
|
|
|
|
// if 'ex' is localization key then enter it like so in `messages` to expose it
|
|
|
|
|
|
const messages = {
|
|
|
ex: ex[0],
|
|
|
};
|
|
|
|
|
|
export default messages;
|
|
|
```
|
|
|
|
|
|
</details>
|
|
|
|
|
|
## รันแอปแบบทดสอบในเครื่อง
|
|
|
|
|
|
### สิ่งที่ต้องมี
|
|
|
|
|
|
- บัญชี GitHub
|
|
|
- [Node.js และ Git](https://nodejs.org/)
|
|
|
|
|
|
### การติดตั้งและตั้งค่า
|
|
|
|
|
|
1. สร้าง repository จาก [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft)
|
|
|
|
|
|
1. Clone repository ใหม่ของคุณ และไปที่โฟลเดอร์ quiz-app
|
|
|
|
|
|
```bash
|
|
|
git clone https://github.com/your-github-organization/repo-name
|
|
|
cd repo-name/quiz-app
|
|
|
```
|
|
|
|
|
|
1. ติดตั้ง npm packages และ dependencies
|
|
|
|
|
|
```bash
|
|
|
npm install
|
|
|
```
|
|
|
|
|
|
### สร้างแอป
|
|
|
|
|
|
1. เพื่อสร้างโซลูชัน ให้รันคำสั่ง:
|
|
|
|
|
|
```bash
|
|
|
npm run build
|
|
|
```
|
|
|
|
|
|
### เริ่มต้นแอป
|
|
|
|
|
|
1. เพื่อรันโซลูชัน ให้รันคำสั่ง:
|
|
|
|
|
|
```bash
|
|
|
npm run dev
|
|
|
```
|
|
|
|
|
|
### [ตัวเลือก] การตรวจสอบโค้ด (Linting)
|
|
|
|
|
|
1. เพื่อให้แน่ใจว่าโค้ดได้รับการตรวจสอบ ให้รันคำสั่ง:
|
|
|
|
|
|
```bash
|
|
|
npm run lint
|
|
|
```
|
|
|
|
|
|
## การปรับใช้แอปแบบทดสอบไปยัง Azure
|
|
|
|
|
|
### สิ่งที่ต้องมี
|
|
|
- การสมัครสมาชิก Azure สามารถสมัครได้ฟรี [ที่นี่](https://aka.ms/azure-free)
|
|
|
|
|
|
_ประมาณการค่าใช้จ่ายในการปรับใช้แอปแบบทดสอบนี้: ฟรี_
|
|
|
|
|
|
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
|
|
|
|
|
เมื่อคุณลงชื่อเข้าใช้ Azure ผ่านลิงก์ด้านบนแล้ว ให้เลือก subscription และ resource group จากนั้น:
|
|
|
|
|
|
- รายละเอียด Static Web App: ระบุชื่อและเลือกแผนการโฮสต์
|
|
|
- การเข้าสู่ระบบ GitHub: ตั้งค่าแหล่งที่มาของการปรับใช้เป็น GitHub จากนั้นเข้าสู่ระบบและกรอกข้อมูลที่จำเป็นในฟอร์ม:
|
|
|
- *Organization* – เลือกองค์กรของคุณ
|
|
|
- *Repository* – เลือก repository หลักสูตร Web Dev for Beginners
|
|
|
- *Branch* - เลือก branch (main)
|
|
|
- Build Presets: Azure Static Web Apps ใช้อัลกอริทึมเพื่อตรวจจับ framework ที่ใช้ในแอปพลิเคชันของคุณ
|
|
|
- *App location* - ./quiz-app
|
|
|
- *Api location* -
|
|
|
- *Output location* - dist
|
|
|
- การปรับใช้: คลิก 'Review + Create' จากนั้นคลิก 'Create'
|
|
|
|
|
|
เมื่อการปรับใช้เสร็จสิ้น ไฟล์ workflow จะถูกสร้างในไดเรกทอรี *.github* ของ repository ของคุณ ไฟล์ workflow นี้มีคำแนะนำเกี่ยวกับเหตุการณ์ที่จะกระตุ้นการปรับใช้แอปใหม่ไปยัง Azure เช่น _การ **push** บน branch **main**_ เป็นต้น
|
|
|
|
|
|
<details>
|
|
|
<summary>ตัวอย่างไฟล์ Workflow</summary>
|
|
|
นี่คือตัวอย่างไฟล์ workflow ของ GitHub Actions:
|
|
|
name: Azure Static Web Apps CI/CD
|
|
|
|
|
|
```
|
|
|
on:
|
|
|
push:
|
|
|
branches:
|
|
|
- main
|
|
|
pull_request:
|
|
|
types: [opened, synchronize, reopened, closed]
|
|
|
branches:
|
|
|
- main
|
|
|
|
|
|
jobs:
|
|
|
build_and_deploy_job:
|
|
|
runs-on: ubuntu-latest
|
|
|
name: Build and Deploy Job
|
|
|
steps:
|
|
|
- uses: actions/checkout@v2
|
|
|
- name: Build And Deploy
|
|
|
id: builddeploy
|
|
|
uses: Azure/static-web-apps-deploy@v1
|
|
|
with:
|
|
|
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
|
|
|
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
|
|
action: "upload"
|
|
|
app_location: "quiz-app" # App source code path
|
|
|
api_location: ""API source code path optional
|
|
|
output_location: "dist" #Built app content directory - optional
|
|
|
```
|
|
|
|
|
|
</details>
|
|
|
|
|
|
- หลังการปรับใช้: หลังจากการปรับใช้เสร็จสิ้น คลิก 'Go to Deployment' จากนั้นคลิก 'View app in browser'
|
|
|
|
|
|
เมื่อ GitHub Action (workflow) ของคุณทำงานสำเร็จ ให้รีเฟรชหน้าเว็บสดเพื่อดูแอปพลิเคชันของคุณ
|
|
|
|
|
|
---
|
|
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้องมากที่สุด แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษาจากผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้ |
