Tworzenie aplikacji dla Ubuntu Touch [QML] - [Część 2]

Wprowadzenie:

Tutaj mamy post następujący po część pierwszaW tym skupimy się na obsłudze danych (pytań), zaczniemy od logicznej części gry, w kolejnym zakończymy logikę i zaimplementujemy czas i 3 opcje.

Baza danych:

Do bazy danych będziemy używać u1db, czyli baza danych, która zapisuje dane w formacie JSON.

Przede wszystkim zobaczmy jakie dane powinniśmy zapisać, mamy 1 pytanie (oprócz tekstu pytania fajnie byłoby mieć identyfikator), z 4 możliwymi odpowiedziami, z których tylko 1 może być, dlatego dokument w JSON jedno pytanie powinno brzmieć:

{
"id": 1,
"pregunta": " habra dev.desdelinux.net ",
"respuestas" : { r1: "si" , r2: "no" , r3: "no se sabe" ,  r4: "esto es una respuesta falsa" },
"correcta": 3
}

Jak widzimy, ustrukturyzowaliśmy w formacie JSON gdzie mamy identyfikator, ciąg znaków z pytaniem i r1, r2, które reprezentują odpowiedź 1 i odpowiedź 2, ostatecznie mamy, która z odpowiedzi jest poprawna.

Zobaczmy trochę, jak działa U1db, pierwszą rzeczą, którą musimy zrobić, aby użyć U1db, jest zaimportowanie modułu:

import U1db 1.0 as U1db

Deklarujemy bazę danych:

U1db.Database {
id: aDatabase
path: "aU1DbDatabase"
}

Bazy danych zostaną zapisane jako aU1DbDatabase.u1db, teraz tworzymy dokument:

U1db.Document {
id: aDocument
database: aDatabase
docId: 'helloworld'
create: true
defaults: { "hello": "Hello World!" }
}


Gdzie możemy zobaczyć format {«cześć»: «coś»}, do wykonywania zapytań, dodawania danych, uzyskiwania danych, usuwania ich itp. Mamy element U1db.Query.

Przejdźmy do naszej aplikacji i stwórzmy naszą bazę danych, tak jak widzieliśmy definiujemy bazę danych:

U1db.Database {id: db pytania; ścieżka: "questionsdb.u1db"}

OK, teraz umieśćmy kilka domyślnych elementów w dokumencie bazy danych questionsdb:

    U1db.Document {
        id: aDocument
        database: preguntasdb
        docId: 'preguntas'
        create: true
        defaults: { "preguntas":
                    [
                        {"pregunta":"Habra dev.desdelinux.net ?", 
                        "r1":"si", "r2":"no", "r3":"nose", 
                        "r4":"respuesta falsa", "correcta": "3" },
                        {"pregunta":"Quien es hagrid (harry potter) ?", 
                        "r1":"El vicedirector de la escuela", 
                        "r2":"El guardabosques", 
                        "r3":"El profesor de transformaciones", 
                        "r4":"Un prefecto", 
                        "correcta": "2"},
                        {"pregunta":"¿Cúal es la capital de Islandia?", 
                       "r1":"Amsterdam",
                       "r2":"Reykjavik", 
                       "r3":"Tiflis", 
                       "r4":"Almaty",
                       "correcta": "2"}
                    ] }
    }

Zdaję sobie sprawę, że kod nie jest wyświetlany tak, jak powinien, ale jeśli spojrzymy, zobaczymy, że mamy element preguntas, które za pomocą »[]» określamy, że może być kilka elementów (nie są one statyczne); w tym przypadku będziemy mieli domyślnie 4 pytania z odpowiadającymi im odpowiedziami.

Aby uzyskać elementy dokumentu JSONmożemy określić identyfikator utworzonego przez nas dokumentu (czyli dokument). Wyobraźmy sobie, że chcemy uzyskać tekst pierwszego pytania:

aDocument.contents.questions [0] .question

Esta línea de código nos retorna el contenido de pregunta del documento aDocument, del elemento 0 (el primero del índice), que es: «Habra dev.desdelinux.net?». Si ponemos en el índice el número 1, entonces seáa la segunda pregunta.

Programowanie logiki gry

Cóż, teraz, gdy już wiemy, jak obsługiwać bazę danych, w której trochę przechowujemy pytania, zamierzamy zaprogramować logikę gry. Przede wszystkim utworzymy plik JAVASCRIPT (.js): Dodaj nowy -> Qt -> Js File. zadzwonię do niego logic.js.

W pliku utworzymy kilka funkcji, aby zaimportować plik js do naszego dokumentu qml:

import „logica.js” jako Logica

Kojarzymy to z nazwą Logica, dlatego gdy chcemy wywołać funkcję, zrobimy to jako Logica.funcion (), tak jakby to był obiekt, który ma swoje metody.

Na razie, aby post nie stał się zbyt długi, zostawimy czas pytania i opcje na później, skoncentrujemy się na pytaniach i punktach, zobaczmy funkcję, której użyjemy, aby przejść od pytanie:

function nextQuestion (num) {// time = 0 question.text = aDocument.contents.questions [num] .question; resp1.text = aDocument.contents.questions [num] .r1; resp2.text = aDocument.contents.questions [num] .r2; resp3.text = aDocument.contents.questions [num] .r3; resp4.text = aDocument.contents.questions [num] .r4; }

Jak widać, jako argument przekazujemy numer pytania, w którym się znajdujemy, i stamtąd umieszcza odpowiedzi na przyciskach i etykiecie pytania. Zobaczmy teraz, aby sprawdzić, czy wybrana odpowiedź jest poprawna:

function hit (num, option) {var hit = false; var num_correct = aDocument.contents.questions [num] .correct; if (opcja == correct_num) hit = true; uderzenie powrotne; }

Kod mówi sam za siebie, w przypadku gdy wybrana opcja jest taka sama jak ta dostarczona przez bazę danych, to będzie prawdą, w przeciwnym razie nie. Teraz, gdy mamy już zdefiniowane te funkcje, zastosujemy je w naszym kodzie qml.

Przede wszystkim dodamy zmienną, która będzie kontrolować, w którym pytaniu się znajdujemy, nazwiemy ją num; Będziemy mieć również trzy dodatkowe zmienne: trafienia, chybienia i punkty.

    property int num: 0 property int nfaults: 0 property int births: 0 property int npoints: 0

Początkowo wszystkie są na 0.

Teraz dodajemy onClick do wszystkich przycisków odpowiedzi. onClick, jak sama nazwa wskazuje, jest zdarzeniem, które nastąpi po kliknięciu tego przycisku:

            Button {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20 onClicked: {if (Logic.certain (num, 1)) {num = num + 1; Logic.nextQuestion (num) npoints = npoints + 50 births = births + 1} else {nfaults = nfaults + 1}}}

Widzimy, że po kliknięciu przycisku sprawdza, czy jest poprawny, czy nie, jeśli tak, dodaj punkty i zdaj pytanie, w przeciwnym razie pozostaje jedno życie.

Na koniec pierwsze pytanie załadujemy po załadowaniu komponentu Page:

    Strona {id: pageGame Component.onCompleted: {Logic.nextPregunta (0)}

Zobaczmy, jak się okazało: