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

Aplikacja Quiz

Te quizy to quizy przed i po wykładach w ramach programu nauczania data science dostępnego na stronie https://aka.ms/webdev-beginners

Dodawanie przetłumaczonego zestawu quizów

Dodaj tłumaczenie quizu, tworząc odpowiadające struktury quizów w folderach assets/translations. Kanoniczne quizy znajdują się w assets/translations/en. Quizy są podzielone na kilka grup. Upewnij się, że numeracja odpowiada właściwej sekcji quizu. W tym programie nauczania znajduje się łącznie 40 quizów, a numeracja zaczyna się od 0.

Oto struktura pliku tłumaczenia:

[
    {
        "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 edycji tłumaczeń edytuj plik index.js w folderze tłumaczeń, aby zaimportować wszystkie pliki zgodnie z konwencjami w en.

Edytuj plik index.js w assets/translations, aby zaimportować nowe przetłumaczone pliki.

Na przykład, jeśli Twoje tłumaczenie JSON znajduje się w ex.json, użyj 'ex' jako klucza lokalizacji, a następnie wprowadź go w następujący sposób, aby go zaimportować:

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;

Uruchamianie aplikacji Quiz lokalnie

Wymagania wstępne

• Konto GitHub
• Node.js i Git

Instalacja i konfiguracja

1. Utwórz repozytorium z tego szablonu

2. Sklonuj swoje nowe repozytorium i przejdź do folderu quiz-app

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

3. Zainstaluj pakiety npm i zależności

   npm install
   

Budowanie aplikacji

1. Aby zbudować rozwiązanie, uruchom:

   npm run build
   

Uruchamianie aplikacji

1. Aby uruchomić rozwiązanie, uruchom:

   npm run dev
   

[Opcjonalne] Lintowanie

1. Aby upewnić się, że kod jest lintowany, uruchom:

   npm run lint
   

Wdrażanie aplikacji Quiz na platformie Azure

Wymagania wstępne

• Subskrypcja Azure. Zarejestruj się za darmo tutaj.

  Szacunkowy koszt wdrożenia tej aplikacji quizowej: BEZPŁATNIE

Po zalogowaniu się na platformie Azure za pomocą powyższego linku, wybierz subskrypcję i grupę zasobów, a następnie:

• Szczegóły aplikacji statycznej: Podaj nazwę i wybierz plan hostingowy

• Logowanie do GitHub: Ustaw źródło wdrożenia jako GitHub, a następnie zaloguj się i wypełnij wymagane pola w formularzu:

  • Organizacja – Wybierz swoją organizację.
  • Repozytorium – Wybierz repozytorium programu nauczania Web Dev for Beginners.
  • Gałąź - Wybierz gałąź (main)

• Presety budowania: Azure Static Web Apps używa algorytmu wykrywania do identyfikacji frameworka użytego w Twojej aplikacji.

  • Lokalizacja aplikacji - ./quiz-app
  • Lokalizacja API -
  • Lokalizacja wynikowa - dist

• Wdrożenie: Kliknij 'Review + Create', a następnie 'Create'

  Po wdrożeniu w katalogu .github Twojego repozytorium zostanie utworzony plik workflow. Ten plik workflow zawiera instrukcje dotyczące zdarzeń, które spowodują ponowne wdrożenie aplikacji na platformie Azure, na przykład push na gałęzi main itp.

  Przykładowy plik workflow

  Oto przykład, jak może wyglądać plik 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 wdrożeniu: Po zakończeniu wdrożenia kliknij 'Go to Deployment', a następnie 'View app in browser'.

Po pomyślnym wykonaniu akcji GitHub (workflow) odśwież stronę na żywo, aby zobaczyć swoją aplikację.

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.