9.7 KiB
ਕਵਿਜ ਐਪ
ਇਹ ਕਵਿਜ ਡਾਟਾ ਸਾਇੰਸ ਕਰੀਕੁਲਮ ਲਈ ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ ਬਾਅਦ ਦੇ ਕਵਿਜ ਹਨ, ਜੋ https://aka.ms/webdev-beginners 'ਤੇ ਉਪਲਬਧ ਹਨ।
ਅਨੁਵਾਦਿਤ ਕਵਿਜ ਸੈੱਟ ਸ਼ਾਮਲ ਕਰਨਾ
ਅਨੁਵਾਦਿਤ ਕਵਿਜ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, assets/translations
ਫੋਲਡਰ ਵਿੱਚ ਮਿਲਦੇ ਜੁਲਦੇ ਕਵਿਜ ਸਟ੍ਰਕਚਰ ਬਣਾਓ। ਮੂਲ ਕਵਿਜ assets/translations/en
ਵਿੱਚ ਹਨ। ਕਵਿਜ ਕਈ ਸਮੂਹਾਂ ਵਿੱਚ ਵੰਡੇ ਹੋਏ ਹਨ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਗਿਣਤੀ ਸਹੀ ਕਵਿਜ ਸੈਕਸ਼ਨ ਨਾਲ ਮਿਲਦੀ ਹੋਵੇ। ਇਸ ਕਰੀਕੁਲਮ ਵਿੱਚ ਕੁੱਲ 40 ਕਵਿਜ ਹਨ, ਜੋ 0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ।
ਇੱਥੇ ਅਨੁਵਾਦ ਫਾਈਲ ਦਾ ਫਾਰਮੈਟ ਦਿੱਤਾ ਗਿਆ ਹੈ:
[
{
"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
}
]
}
]
}
]
}
]
ਅਨੁਵਾਦਾਂ ਨੂੰ ਸੋਧਣ ਤੋਂ ਬਾਅਦ, translation ਫੋਲਡਰ ਵਿੱਚ index.js ਫਾਈਲ ਨੂੰ ਸੋਧੋ ਅਤੇ en
ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹੋਏ ਸਾਰੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਇੰਪੋਰਟ ਕਰੋ।
assets/translations
ਵਿੱਚ index.js
ਫਾਈਲ ਨੂੰ ਸੋਧੋ ਅਤੇ ਨਵੇਂ ਅਨੁਵਾਦਿਤ ਫਾਈਲਾਂ ਨੂੰ ਇੰਪੋਰਟ ਕਰੋ।
ਉਦਾਹਰਣ ਲਈ, ਜੇ ਤੁਹਾਡੀ ਅਨੁਵਾਦ JSON ਫਾਈਲ ex.json
ਵਿੱਚ ਹੈ, ਤਾਂ 'ex' ਨੂੰ ਲੋਕਲਾਈਜ਼ੇਸ਼ਨ ਕੀ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਤਰੀਕੇ ਨਾਲ ਇੰਪੋਰਟ ਕਰੋ:
index.js
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;
ਕਵਿਜ ਐਪ ਨੂੰ ਲੋਕਲ ਚਲਾਓ
ਪੂਰਵ ਸ਼ਰਤਾਂ
- ਇੱਕ GitHub ਖਾਤਾ
- Node.js ਅਤੇ Git
ਇੰਸਟਾਲ ਅਤੇ ਸੈਟਅੱਪ
-
ਇਸ ਟੈਂਪਲੇਟ ਤੋਂ ਇੱਕ ਰਿਪੋਜ਼ਟਰੀ ਬਣਾਓ।
-
ਆਪਣੀ ਨਵੀਂ ਰਿਪੋਜ਼ਟਰੀ ਕਲੋਨ ਕਰੋ ਅਤੇ ਕਵਿਜ-ਐਪ ਵਿੱਚ ਜਾਓ:
git clone https://github.com/your-github-organization/repo-name cd repo-name/quiz-app
-
npm ਪੈਕੇਜ ਅਤੇ ਡਿਪੈਂਡੈਂਸੀਜ਼ ਇੰਸਟਾਲ ਕਰੋ:
npm install
ਐਪ ਬਣਾਓ
-
ਹੱਲ ਬਣਾਉਣ ਲਈ, ਇਹ ਚਲਾਓ:
npm run build
ਐਪ ਸ਼ੁਰੂ ਕਰੋ
-
ਹੱਲ ਚਲਾਉਣ ਲਈ, ਇਹ ਚਲਾਓ:
npm run dev
[ਵਿਕਲਪਿਕ] ਲਿੰਟਿੰਗ
-
ਕੋਡ ਨੂੰ ਲਿੰਟ ਕਰਨ ਲਈ, ਇਹ ਚਲਾਓ:
npm run lint
ਕਵਿਜ ਐਪ ਨੂੰ Azure 'ਤੇ ਡਿਪਲੌਇ ਕਰੋ
ਪੂਰਵ ਸ਼ਰਤਾਂ
-
ਇੱਕ Azure ਸਬਸਕ੍ਰਿਪਸ਼ਨ। ਇੱਕ ਮੁਫ਼ਤ ਖਾਤਾ ਬਣਾਓ ਇੱਥੇ।
ਇਸ ਕਵਿਜ ਐਪ ਨੂੰ ਡਿਪਲੌਇ ਕਰਨ ਦੀ ਲਾਗਤ: ਮੁਫ਼ਤ
ਉਪਰ ਦਿੱਤੇ ਲਿੰਕ ਰਾਹੀਂ Azure 'ਤੇ ਸਾਈਨ ਇਨ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਇੱਕ ਸਬਸਕ੍ਰਿਪਸ਼ਨ ਅਤੇ ਰਿਸੋਰਸ ਗਰੁੱਪ ਚੁਣੋ, ਫਿਰ:
-
ਸਟੈਟਿਕ ਵੈੱਬ ਐਪ ਵੇਰਵੇ: ਇੱਕ ਨਾਮ ਦਿਓ ਅਤੇ ਹੋਸਟਿੰਗ ਪਲਾਨ ਚੁਣੋ।
-
GitHub ਲੌਗਇਨ: ਆਪਣਾ ਡਿਪਲੌਇਮੈਂਟ ਸਰੋਤ GitHub ਸੈੱਟ ਕਰੋ, ਫਿਰ ਲੌਗ ਇਨ ਕਰੋ ਅਤੇ ਫਾਰਮ ਵਿੱਚ ਲੋੜੀਂਦੇ ਖੇਤਰ ਭਰੋ:
- ਸੰਗਠਨ – ਆਪਣੀ ਸੰਗਠਨ ਚੁਣੋ।
- ਰਿਪੋਜ਼ਟਰੀ – Web Dev for Beginners ਕਰੀਕੁਲਮ ਰਿਪੋਜ਼ਟਰੀ ਚੁਣੋ।
- ਸ਼ਾਖਾ - ਇੱਕ ਸ਼ਾਖਾ ਚੁਣੋ (ਮੁੱਖ)
-
ਬਿਲਡ ਪ੍ਰੀਸੈਟਸ: Azure Static Web Apps ਤੁਹਾਡੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਰਤੀ ਗਈ ਫਰੇਮਵਰਕ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਇੱਕ ਡਿਟੈਕਸ਼ਨ ਐਲਗੋਰਿਦਮ ਵਰਤਦਾ ਹੈ।
- ਐਪ ਸਥਾਨ - ./quiz-app
- Api ਸਥਾਨ -
- ਆਉਟਪੁੱਟ ਸਥਾਨ - dist
-
ਡਿਪਲੌਇਮੈਂਟ: 'Review + Create' ਤੇ ਕਲਿੱਕ ਕਰੋ, ਫਿਰ 'Create' ਤੇ ਕਲਿੱਕ ਕਰੋ।
ਜਦੋਂ ਡਿਪਲੌਇਮੈਂਟ ਪੂਰਾ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇੱਕ ਵਰਕਫਲੋ ਫਾਈਲ ਤੁਹਾਡੀ ਰਿਪੋਜ਼ਟਰੀ ਦੇ .github ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਬਣਾਈ ਜਾਵੇਗੀ। ਇਹ ਵਰਕਫਲੋ ਫਾਈਲ ਉਹ ਹਦਾਇਤਾਂ ਰੱਖਦੀ ਹੈ ਜੋ ਐਪ ਨੂੰ Azure 'ਤੇ ਮੁੜ ਡਿਪਲੌਇ ਕਰਨ ਵਾਲੇ ਇਵੈਂਟਸ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ, ਸ਼ਾਖਾ ਮੁੱਖ 'ਤੇ ਪੁਸ਼ ਆਦਿ।
ਵਰਕਫਲੋ ਫਾਈਲ ਦਾ ਉਦਾਹਰਣ
ਇੱਥੇ GitHub Actions ਵਰਕਫਲੋ ਫਾਈਲ ਦਾ ਉਦਾਹਰਣ ਦਿੱਤਾ ਗਿਆ ਹੈ: name: Azure Static Web Apps CI/CDon: 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
-
ਡਿਪਲੌਇਮੈਂਟ ਤੋਂ ਬਾਅਦ: ਡਿਪਲੌਇਮੈਂਟ ਪੂਰਾ ਹੋਣ ਤੋਂ ਬਾਅਦ, 'Go to Deployment' ਤੇ ਕਲਿੱਕ ਕਰੋ, ਫਿਰ 'View app in browser' ਤੇ ਕਲਿੱਕ ਕਰੋ।
ਜਦੋਂ ਤੁਹਾਡਾ GitHub Action (ਵਰਕਫਲੋ) ਸਫਲਤਾਪੂਰਵਕ ਚਲਦਾ ਹੈ, ਤਾਂ ਲਾਈਵ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵੇਖੋ।
ਅਸਵੀਕਾਰਨਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।