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

Εφαρμογή Κουίζ

Αυτά τα κουίζ είναι τα κουίζ πριν και μετά τη διάλεξη για το πρόγραμμα σπουδών επιστήμης δεδομένων στο https://aka.ms/webdev-beginners

Προσθήκη μεταφρασμένου συνόλου κουίζ

Προσθέστε μια μετάφραση κουίζ δημιουργώντας αντίστοιχες δομές κουίζ στους φακέλους assets/translations. Τα αρχικά κουίζ βρίσκονται στο assets/translations/en. Τα κουίζ είναι χωρισμένα σε διάφορες ομάδες. Βεβαιωθείτε ότι η αρίθμηση ευθυγραμμίζεται με τη σωστή ενότητα κουίζ. Υπάρχουν συνολικά 40 κουίζ σε αυτό το πρόγραμμα σπουδών, με την αρίθμηση να ξεκινά από το 0.

Ακολουθεί η δομή ενός αρχείου μετάφρασης:

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

Αφού επεξεργαστείτε τις μεταφράσεις, επεξεργαστείτε το αρχείο index.js στον φάκελο μετάφρασης για να εισάγετε όλα τα αρχεία σύμφωνα με τις συμβάσεις στο en.

Επεξεργαστείτε το αρχείο index.js στο assets/translations για να εισάγετε τα νέα μεταφρασμένα αρχεία.

Για παράδειγμα, αν το JSON της μετάφρασής σας είναι στο ex.json, κάντε το 'ex' το κλειδί τοπικοποίησης και εισάγετέ το όπως φαίνεται παρακάτω:

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;

Εκτέλεση της Εφαρμογής Κουίζ τοπικά

Προαπαιτούμενα

• Λογαριασμός GitHub
• Node.js και Git

Εγκατάσταση & Ρύθμιση

1. Δημιουργήστε ένα αποθετήριο από αυτό το πρότυπο

2. Κλωνοποιήστε το νέο σας αποθετήριο και μεταβείτε στην εφαρμογή κουίζ

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

3. Εγκαταστήστε τα πακέτα npm και τις εξαρτήσεις

   npm install
   

Δημιουργία της εφαρμογής

1. Για να δημιουργήσετε τη λύση, εκτελέστε:

   npm run build
   

Εκκίνηση της Εφαρμογής

1. Για να εκτελέσετε τη λύση, εκτελέστε:

   npm run dev
   

[Προαιρετικό] Έλεγχος κώδικα

1. Για να βεβαιωθείτε ότι ο κώδικας έχει ελεγχθεί, εκτελέστε:

   npm run lint
   

Ανάπτυξη της Εφαρμογής Κουίζ στο Azure

Προαπαιτούμενα

• Συνδρομή Azure. Εγγραφείτε δωρεάν εδώ.

  Εκτίμηση κόστους για την ανάπτυξη αυτής της εφαρμογής κουίζ: ΔΩΡΕΑΝ

Αφού συνδεθείτε στο Azure μέσω του παραπάνω συνδέσμου, επιλέξτε μια συνδρομή και μια ομάδα πόρων:

• Λεπτομέρειες Στατικής Εφαρμογής Ιστού: Δώστε ένα όνομα και επιλέξτε ένα πλάνο φιλοξενίας

• Σύνδεση GitHub: Ορίστε την πηγή ανάπτυξης ως GitHub, συνδεθείτε και συμπληρώστε τα απαιτούμενα πεδία στη φόρμα:

  • Οργάνωση – Επιλέξτε την οργάνωσή σας.
  • Αποθετήριο – Επιλέξτε το αποθετήριο του προγράμματος σπουδών Web Dev for Beginners.
  • Κλάδος - Επιλέξτε έναν κλάδο (main)

• Προεπιλογές Δημιουργίας: Το Azure Static Web Apps χρησιμοποιεί έναν αλγόριθμο ανίχνευσης για να εντοπίσει το πλαίσιο που χρησιμοποιείται στην εφαρμογή σας.

  • Τοποθεσία εφαρμογής - ./quiz-app
  • Τοποθεσία API -
  • Τοποθεσία εξόδου - dist

• Ανάπτυξη: Κάντε κλικ στο 'Review + Create', στη συνέχεια 'Create'

  Μόλις αναπτυχθεί, ένα αρχείο ροής εργασίας θα δημιουργηθεί στον φάκελο .github του αποθετηρίου σας. Αυτό το αρχείο ροής εργασίας περιέχει οδηγίες για γεγονότα που θα ενεργοποιήσουν την επαν-ανάπτυξη της εφαρμογής στο Azure, για παράδειγμα, ένα push στον κλάδο main κ.λπ.

  Παράδειγμα Αρχείου Ροής Εργασίας

  Ακολουθεί ένα παράδειγμα του αρχείου ροής εργασίας 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
  

• Μετά την Ανάπτυξη: Αφού ολοκληρωθεί η ανάπτυξη, κάντε κλικ στο 'Go to Deployment' και στη συνέχεια 'View app in browser'.

Μόλις εκτελεστεί με επιτυχία η ενέργεια GitHub (ροή εργασίας), ανανεώστε τη ζωντανή σελίδα για να δείτε την εφαρμογή σας.

---

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.