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

Quiz uygulaması

Bu quizler, https://aka.ms/webdev-beginners adresindeki veri bilimi müfredatının ders öncesi ve sonrası quizleridir.

Çeviri bir quiz seti ekleme

Bir quiz çevirisi eklemek için, assets/translations klasörlerinde eşleşen quiz yapıları oluşturun. Orijinal quizler assets/translations/en klasöründe bulunur. Quizler birkaç gruba ayrılmıştır. Numaralandırmayı doğru quiz bölümüyle hizalamayı unutmayın. Bu müfredatta toplam 40 quiz bulunmaktadır ve numaralandırma 0'dan başlar.

Bir çeviri dosyasının yapısı şu şekildedir:

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

Çevirileri düzenledikten sonra, çeviri klasöründeki index.js dosyasını düzenleyerek tüm dosyaları en klasöründeki kurallara uygun şekilde içe aktarın.

assets/translations klasöründeki index.js dosyasını düzenleyerek yeni çevrilmiş dosyaları içe aktarın.

Örneğin, çeviri JSON dosyanız ex.json ise, 'ex' çeviri anahtarı olarak belirleyin ve aşağıdaki gibi içe aktarın:

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;

Quiz Uygulamasını Yerel Olarak Çalıştırma

Gereksinimler

• Bir GitHub hesabı
• Node.js ve Git

Kurulum ve Ayarlar

1. Bu şablondan bir depo oluşturun.

2. Yeni deponuzu klonlayın ve quiz-app dizinine gidin:

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

3. npm paketlerini ve bağımlılıklarını yükleyin:

   npm install
   

Uygulamayı Derleme

1. Çözümü derlemek için şu komutu çalıştırın:

   npm run build
   

Uygulamayı Başlatma

1. Çözümü çalıştırmak için şu komutu çalıştırın:

   npm run dev
   

[Opsiyonel] Kod Denetimi

1. Kodun denetlendiğinden emin olmak için şu komutu çalıştırın:

   npm run lint
   

Quiz uygulamasını Azure'a Dağıtma

Gereksinimler

• Bir Azure Aboneliği. Ücretsiz bir abonelik için buradan kaydolabilirsiniz.

  Bu quiz uygulamasını dağıtmanın tahmini maliyeti: ÜCRETSİZ

Yukarıdaki bağlantı üzerinden Azure'da oturum açtıktan sonra, bir abonelik ve kaynak grubu seçin, ardından:

• Statik Web Uygulaması detayları: Bir ad girin ve bir barındırma planı seçin.

• GitHub Girişi: Dağıtım kaynağınızı GitHub olarak ayarlayın, ardından giriş yapın ve formdaki gerekli alanları doldurun:

  • Organizasyon – Organizasyonunuzu seçin.
  • Depo – Web Dev for Beginners müfredat deposunu seçin.
  • Dal - Bir dal seçin (main).

• Derleme Ön Ayarları: Azure Static Web Apps, uygulamanızda kullanılan çerçeveyi algılamak için bir algılama algoritması kullanır.

  • Uygulama konumu - ./quiz-app
  • Api konumu -
  • Çıktı konumu - dist

• Dağıtım: 'Gözden Geçir + Oluştur' ve ardından 'Oluştur' seçeneğine tıklayın.

  Dağıtım tamamlandıktan sonra, deponuzun .github dizininde bir iş akışı dosyası oluşturulacaktır. Bu iş akışı dosyası, uygulamanın Azure'a yeniden dağıtımını tetikleyecek olayların talimatlarını içerir, örneğin, main dalına bir push gibi.

  Örnek İş Akışı Dosyası

  İşte GitHub Actions iş akışı dosyasının nasıl görünebileceğine dair bir örnek: 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
  

• Dağıtımdan Sonra: Dağıtım tamamlandıktan sonra 'Dağıtıma Git' ve ardından 'Uygulamayı tarayıcıda görüntüle' seçeneğine tıklayın.

GitHub Action (iş akışı) başarıyla çalıştırıldıktan sonra, canlı sayfayı yenileyerek uygulamanızı görüntüleyebilirsiniz.

Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.