Web-Dev-For-Beginners/translations/hu/quiz-app

Kvíz alkalmazás

Ezek a kvízek a data science tananyag előtti és utáni előadásokhoz kapcsolódó kvízek a következő oldalon: https://aka.ms/webdev-beginners

Fordított kvízkészlet hozzáadása

Adj hozzá egy kvízfordítást úgy, hogy létrehozod a megfelelő kvízstruktúrákat az assets/translations mappákban. Az eredeti kvízek az assets/translations/en mappában találhatók. A kvízek több csoportba vannak osztva. Ügyelj arra, hogy a számozás igazodjon a megfelelő kvízszekcióhoz. Ebben a tananyagban összesen 40 kvíz található, a számozás 0-tól kezdődik.

Íme, hogyan néz ki egy fordítási fájl:

[
    {
        "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
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

A fordítások szerkesztése után szerkeszd a translation mappában található index.js fájlt, hogy importáld az összes fájlt az en mappában található konvenciók szerint.

Szerkeszd az index.js fájlt az assets/translations mappában, hogy importáld az új fordított fájlokat.

Például, ha a fordítás JSON fájlod neve ex.json, akkor az 'ex' lesz a lokalizációs kulcs, és az alábbiak szerint add hozzá az importáláshoz:

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;

A Kvíz alkalmazás futtatása helyben

Előfeltételek

• Egy GitHub fiók
• Node.js és Git

Telepítés és beállítás

1. Hozz létre egy repót ebből a sablonból

2. Klónozd az új repót, és navigálj a kvíz-alkalmazás mappájába

   git clone https://github.com/your-github-organization/repo-name
   cd repo-name/quiz-app
   

3. Telepítsd az npm csomagokat és függőségeket

   npm install
   

Az alkalmazás felépítése

1. Az alkalmazás felépítéséhez futtasd:

   npm run build
   

Az alkalmazás indítása

1. Az alkalmazás futtatásához futtasd:

   npm run dev
   

[Opcionális] Lintelés

1. A kód lintelésének biztosításához futtasd:

   npm run lint
   

A Kvíz alkalmazás telepítése Azure-ra

Előfeltételek

• Egy Azure előfizetés. Itt regisztrálhatsz ingyenesen: itt.

  A kvíz alkalmazás telepítésének becsült költsége: INGYENES

Miután bejelentkeztél az Azure-ra a fenti linken keresztül, válassz egy előfizetést és egy erőforráscsoportot, majd:

• Statikus webalkalmazás részletei: Adj meg egy nevet, és válassz egy tárhelyi tervet

• GitHub bejelentkezés: Állítsd be a telepítési forrást GitHub-ra, majd jelentkezz be, és töltsd ki az űrlap szükséges mezőit:

  • Szervezet – Válaszd ki a szervezetedet.
  • Repository – Válaszd ki a Web Dev for Beginners tananyag repóját.
  • Branch - Válassz egy ágat (main)

• Build Presets: Az Azure Static Web Apps egy észlelési algoritmust használ az alkalmazásodban használt keretrendszer felismerésére.

  • App location - ./quiz-app
  • Api location -
  • Output location - dist

• Telepítés: Kattints a 'Review + Create', majd a 'Create' gombra.

  Miután a telepítés megtörtént, egy workflow fájl jön létre a repo .github könyvtárában. Ez a workflow fájl tartalmazza azokat az eseményeket, amelyek újratelepítést indítanak az alkalmazás Azure-ra, például _egy push a main ágon stb.

  Példa Workflow fájl

  Íme, hogyan nézhet ki a GitHub Actions workflow fájl: 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
  

• Telepítés után: Miután a telepítés befejeződött, kattints a 'Go to Deployment', majd a 'View app in browser' gombra.

Miután a GitHub Action (workflow) sikeresen lefutott, frissítsd az élő oldalt, hogy megtekinthesd az alkalmazásodat.

---

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.