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

Kvízová aplikace

Tyto kvízy slouží jako přednáškové a popřednáškové kvízy pro kurikulum datové vědy na https://aka.ms/webdev-beginners

Přidání přeložené sady kvízů

Přidejte překlad kvízu vytvořením odpovídajících struktur kvízů ve složkách assets/translations. Kanonické kvízy se nacházejí v assets/translations/en. Kvízy jsou rozděleny do několika skupin. Ujistěte se, že číslování odpovídá správné sekci kvízu. Celkem je v tomto kurikulu 40 kvízů, přičemž číslování začíná od 0.

Takto vypadá struktura souboru s překladem:

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

Po úpravě překladů upravte soubor index.js ve složce s překlady, aby importoval všechny soubory podle konvencí v en.

Upravte soubor index.js v assets/translations, aby importoval nové přeložené soubory.

Například pokud je váš překlad JSON v ex.json, nastavte 'ex' jako lokalizační klíč a zadejte jej, jak je uvedeno níže, pro import:

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;

Spuštění kvízové aplikace lokálně

Předpoklady

• Účet na GitHubu
• Node.js a Git

Instalace a nastavení

1. Vytvořte repozitář z této šablony

2. Naklonujte svůj nový repozitář a přejděte do složky quiz-app

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

3. Nainstalujte balíčky npm a závislosti

   npm install
   

Sestavení aplikace

1. Pro sestavení řešení spusťte:

   npm run build
   

Spuštění aplikace

1. Pro spuštění řešení spusťte:

   npm run dev
   

[Volitelné] Lintování

1. Pro zajištění, že je kód lintován, spusťte:

   npm run lint
   

Nasazení kvízové aplikace na Azure

Předpoklady

• Předplatné Azure. Zaregistrujte se zdarma zde.

  Odhad nákladů na nasazení této kvízové aplikace: ZDARMA

Jakmile se přihlásíte na Azure prostřednictvím výše uvedeného odkazu, vyberte předplatné a skupinu prostředků:

• Detaily statické webové aplikace: Zadejte název a vyberte hostingový plán

• Přihlášení na GitHub: Nastavte svůj zdroj nasazení jako GitHub, poté se přihlaste a vyplňte požadovaná pole ve formuláři:

  • Organizace – Vyberte svou organizaci.
  • Repozitář – Vyberte repozitář kurikula Web Dev for Beginners.
  • Větev - Vyberte větev (main)

• Předvolby sestavení: Azure Static Web Apps používá detekční algoritmus k určení frameworku použitého ve vaší aplikaci.

  • Umístění aplikace - ./quiz-app
  • Umístění API -
  • Umístění výstupu - dist

• Nasazení: Klikněte na 'Review + Create', poté na 'Create'

  Po nasazení bude ve složce .github vašeho repozitáře vytvořen soubor workflow. Tento soubor workflow obsahuje instrukce o událostech, které spustí opětovné nasazení aplikace na Azure, například push na větev main atd.

  Příklad souboru workflow

  Zde je příklad, jak může vypadat soubor 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
  

• Po nasazení: Po dokončení nasazení klikněte na 'Go to Deployment' a poté na 'View app in browser'.

Jakmile bude GitHub Action (workflow) úspěšně proveden, obnovte živou stránku, abyste viděli svou aplikaci.

---

Upozornění:
Tento dokument byl přeložen pomocí služby pro automatický překlad Co-op Translator. I když se snažíme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nezodpovídáme za jakékoli nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.