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

Aplicação de Quiz

Estes quizzes são os quizzes pré e pós-aula para o currículo de ciência de dados em https://aka.ms/webdev-beginners

Adicionar um conjunto de quizzes traduzido

Adicione uma tradução de quiz criando estruturas de quizzes correspondentes nas pastas assets/translations. Os quizzes originais estão em assets/translations/en. Os quizzes estão divididos em vários grupos. Certifique-se de alinhar a numeração com a seção correta do quiz. Existem 40 quizzes no total neste currículo, começando a contagem em 0.

Aqui está o formato de um ficheiro de tradução:

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

Depois de editar as traduções, edite o ficheiro index.js na pasta de tradução para importar todos os ficheiros seguindo as convenções em en.

Edite o ficheiro index.js em assets/translations para importar os novos ficheiros traduzidos.

Por exemplo, se o seu JSON de tradução estiver em ex.json, use 'ex' como a chave de localização e insira-o conforme mostrado abaixo para o importar:

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;

Executar a aplicação de Quiz localmente

Pré-requisitos

• Uma conta no GitHub
• Node.js e Git

Instalar & Configurar

1. Crie um repositório a partir deste template

2. Clone o seu novo repositório e navegue até à pasta quiz-app

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

3. Instale os pacotes npm e dependências

   npm install
   

Construir a aplicação

1. Para construir a solução, execute:

   npm run build
   

Iniciar a aplicação

1. Para executar a solução, execute:

   npm run dev
   

[Opcional] Linting

1. Para garantir que o código está formatado corretamente, execute:

   npm run lint
   

Desplegar a aplicação de Quiz no Azure

Pré-requisitos

• Uma subscrição do Azure. Registe-se gratuitamente aqui.

  Estimativa de custo para desplegar esta aplicação de quiz: GRATUITO

Depois de iniciar sessão no Azure através do link acima, selecione uma subscrição e um grupo de recursos, e então:

• Detalhes da aplicação web estática: Forneça um nome e selecione um plano de alojamento

• Login no GitHub: Defina a sua fonte de deployment como GitHub, depois inicie sessão e preencha os campos necessários no formulário:

  • Organização – Escolha a sua organização.
  • Repositório – Selecione o repositório do currículo Web Dev for Beginners.
  • Ramo - Selecione um ramo (main)

• Presets de construção: O Azure Static Web Apps usa um algoritmo de deteção para identificar o framework usado na sua aplicação.

  • Localização da aplicação - ./quiz-app
  • Localização da API -
  • Localização de saída - dist

• Deployment: Clique em 'Review + Create', depois 'Create'

  Uma vez desplegado, um ficheiro de workflow será criado no diretório .github do seu repositório. Este ficheiro de workflow contém instruções sobre eventos que irão desencadear um novo deployment da aplicação no Azure, por exemplo, um push no ramo main, etc.

  Exemplo de ficheiro de workflow

  Aqui está um exemplo de como o ficheiro de workflow do GitHub Actions pode parecer: 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
  

• Pós-Deployment: Após o deployment estar concluído, clique em 'Go to Deployment' e depois 'View app in browser'.

Depois de o seu GitHub Action (workflow) ser executado com sucesso, atualize a página ao vivo para visualizar a sua aplicação.

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se uma tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas resultantes do uso desta tradução.