การสร้างแอปสำหรับ Ubuntu Touch [QML] - [ตอนที่ 2]

บทนำ:

ที่นี่เรามีโพสต์ที่ตามมา ส่วนแรกในส่วนนี้เราจะมุ่งเน้นไปที่การจัดการข้อมูล (คำถาม) และเราจะเริ่มต้นด้วยส่วนตรรกะของเกมในส่วนถัดไปเราจะจบตรรกะและใช้เวลาและ 3 ตัวเลือก

ฐานข้อมูล:

สำหรับฐานข้อมูลที่เราจะใช้ u1dbซึ่งเป็นฐานข้อมูลที่บันทึกข้อมูลในรูปแบบ JSON.

ก่อนอื่นมาดูกันว่าเราควรบันทึกข้อมูลอะไรเรามีคำถาม 1 ข้อ (นอกเหนือจากข้อความของคำถามแล้วการมีตัวระบุจะเป็นการดี) โดยมีคำตอบที่เป็นไปได้ 4 ข้อซึ่งมีเพียง 1 ข้อเท่านั้นดังนั้นเอกสารใน JSON คำถามเดียวควรเป็น:

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

อย่างที่เราเห็นเรามีโครงสร้างในรูปแบบ JSON โดยที่เรามีตัวระบุสตริงที่มีคำถามและ r1, r2 ที่แทนคำตอบ 1 และคำตอบ 2 ในที่สุดเราก็มีคำตอบที่ถูกต้อง

มาดูกันเล็กน้อยว่า U1db ทำงานอย่างไรสิ่งแรกที่เราต้องทำเพื่อใช้ U1db คือการนำเข้าโมดูล:

import U1db 1.0 as U1db

เราประกาศฐานข้อมูล:

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

ฐานข้อมูลจะถูกบันทึกเป็น aU1DbDatabase.u1db ตอนนี้เราสร้างเอกสาร:

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


ที่เราสามารถดูรูปแบบ {«สวัสดี»: «บางอย่าง»} เพื่อดำเนินการสืบค้นไม่ว่าจะเป็นการเพิ่มข้อมูลรับข้อมูลลบออกเป็นต้น เรามีองค์ประกอบ U1db.Query

ไปที่แอปพลิเคชันของเราและสร้างฐานข้อมูลของเราตามที่เราเห็นเรากำหนดฐานข้อมูล:

U1db.Database {id: db questions; เส้นทาง: "questionsdb.u1db"}

เอาล่ะตอนนี้เรามาใส่องค์ประกอบเริ่มต้นในเอกสารฐานข้อมูล 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"}
                    ] }
    }

ฉันทราบว่ารหัสไม่แสดงเท่าที่ควร แต่ถ้าเราดูเราจะเห็นว่าเรามีองค์ประกอบ การซักถามซึ่งด้วย» [] »เราระบุว่าอาจมีหลายองค์ประกอบ (ไม่คงที่); ในกรณีนี้เราจะมีคำถาม 4 ข้อโดยค่าเริ่มต้น 4 คำถามพร้อมคำตอบตามลำดับ

เพื่อรับองค์ประกอบเอกสาร JSONเราสามารถระบุตัวระบุของเอกสารที่เราสร้างขึ้น (ซึ่งก็คือ เอกสาร). สมมติว่าเราต้องการรับข้อความของคำถามแรก:

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.

การเขียนโปรแกรมตรรกะของเกม

ตอนนี้เรารู้วิธีจัดการฐานข้อมูลที่เราบันทึกคำถามแล้วเราจะตั้งโปรแกรมตรรกะของเกม ก่อนอื่นเราจะสร้างไฟล์ JavaScript (.js): เพิ่มใหม่ -> Qt -> ไฟล์ Js ฉันจะโทรหาเขา logic.js.

ในไฟล์เราจะสร้างฟังก์ชันต่างๆเพื่อนำเข้าไฟล์ js ลงในเอกสาร qml ของเรา:

นำเข้า "logica.js" เป็น Logica

เราเชื่อมโยงชื่อ Logica ดังนั้นเมื่อเราต้องการเรียกใช้ฟังก์ชันเราจะทำเป็น Logica.funcion () ราวกับว่ามันเป็นวัตถุที่มีเมธอด

สำหรับตอนนี้เพื่อไม่ให้โพสต์ยาวเกินไปเราจะปล่อยให้เวลาของคำถามและตัวเลือกในภายหลังเราจะมุ่งเน้นไปที่คำถามและประเด็นต่างๆเรามาดูฟังก์ชันที่เราจะใช้เพื่อไปต่อจาก คำถาม:

ฟังก์ชัน 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; }

อย่างที่เราเห็นเราส่งหมายเลขคำถามที่เราอยู่เป็นอาร์กิวเมนต์และจากตรงนี้จะใส่คำตอบให้กับปุ่มและป้ายกำกับคำถาม มาดูกันเพื่อตรวจสอบว่าคำตอบที่เลือกถูกต้องหรือไม่:

ฟังก์ชัน hit (num, option) {var hit = false; var num_correcto = aDocument.contents.questions [num] .correcto; ถ้า (ตัวเลือก == correct_num) hit = true; ตีกลับ; }

รหัสพูดด้วยตัวมันเองในกรณีที่ตัวเลือกที่เลือกนั้นเหมือนกับตัวเลือกที่ฐานข้อมูลให้มามันจะเป็นจริงมิฉะนั้นจะไม่เป็นเช่นนั้น ตอนนี้เราได้กำหนดฟังก์ชันเหล่านี้แล้วเราจะใช้มันในโค้ด qml ของเรา

ก่อนอื่นเราจะเพิ่มตัวแปรที่จะเป็นตัวควบคุมคำถามที่เราอยู่เราจะเรียกมันว่า num นอกจากนี้เรายังมีตัวแปรอีกสามอย่าง ได้แก่ การเข้าชมการพลาดและคะแนน

    คุณสมบัติ int num: 0 คุณสมบัติ int nfaults: 0 คุณสมบัติ int เกิด: 0 คุณสมบัติ int npoints: 0

เริ่มแรกพวกเขาทั้งหมดอยู่ที่ 0

ตอนนี้เราเพิ่ม onClick ให้กับปุ่มคำตอบทั้งหมด onClick ตามชื่อคือเหตุการณ์ที่จะเกิดขึ้นเมื่อคลิกปุ่ม:

            ปุ่ม {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}}}

เราจะเห็นว่าเมื่อคุณคลิกปุ่มมันจะตรวจสอบว่าถูกต้องหรือไม่ให้เพิ่มคะแนนและส่งคำถามไปมิฉะนั้นชีวิตจะยังคงอยู่

ในที่สุดเราจะทำให้คำถามแรกโหลดเมื่อคอมโพเนนต์ของเพจโหลด:

    หน้า {id: pageGame Component.onCompleted: {Logic.nextPregunta (0)}

มาดูกันว่ามันเป็นอย่างไร: