การสมัครรักษาคะแนนเปตอง / เฌอ-เดอ-บูล: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

นี่คือแอปพลิเคชั่นเก็บคะแนนเปตอง (บางครั้งเรียกว่า Jeu de Boules) สำหรับ Android แอปพลิเคชันนี้สามารถใช้งานได้ตามที่เป็นอยู่และทำงานได้อย่างสมบูรณ์ หรือใช้ร่วมกับจอแสดงผล Petanque Matrix [คำสั่งแยกกัน] ส่วนนี้ของโปรเจ็กต์นั้นง่ายเพราะไม่ต้องใช้ฮาร์ดแวร์ มีเพียงซอฟต์แวร์ที่ให้บริการฟรีเท่านั้น

เสบียง

1. โทรศัพท์ที่รองรับ Android (ควรเป็น)
2. อุปกรณ์ที่เข้าถึงอินเทอร์เน็ตเบราว์เซอร์ได้ ควรใช้คอมพิวเตอร์ที่มีเมาส์สำหรับงานเขียนโค้ดและออกแบบ
3. บัญชีกับ MIT App Inventor (ฟรี)
4. แพ็คเกจการวาดภาพอย่างง่ายเช่น Pixlr หรือ Gimp (ฟรีทั้งหมด)
5. เว็บไซต์ทรัพยากรไอคอนเช่น ไอคอน Material UI หรือ Material.io (ฟรีทั้งหมด)

ซอฟต์แวร์และซอร์สโค้ด:

คุณสามารถหาลิงค์ไปยังแอปพลิเคชัน Actual Petanque ได้ที่ด้านล่างของหน้านี้ คุณสามารถหาลิงก์ไปยังซอร์สโค้ดแบบเต็มได้ที่นี่ (ขออภัยสำหรับสิ่งนี้ แต่ Instructables ไม่อนุญาตให้ฉันอัปโหลดไฟล์.aia…)

ขั้นตอนที่ 1: กายวิภาคและการนำทางของแอพ

การออกแบบและการนำทางของแอพนั้นค่อนข้างง่าย มีทั้งหมด 4 หน้าจอ:

1. หน้าจอหลัก #1 (ที่เราใช้เวลาส่วนใหญ่ไปกับการรักษาคะแนน)
2. หน้าจอการแข่งขัน #2 (ที่เราพบรายการการแข่งขันและคะแนนที่เล่นทั้งหมด)
3. หน้าจอการตั้งค่า #3 (การตั้งค่าสำหรับแอพ งานดูแลระบบ ดีบัก ฯลฯ)
4. เกี่ยวกับหน้าจอ #0 (เกี่ยวกับ โลโก้ และตำแหน่งที่จะรับคำแนะนำในการสร้างเช่น หน้าเว็บนี้)

เลย์เอาต์ของหน้าจอและตำแหน่งของปุ่มได้รับการปรับให้เหมาะสมสำหรับการใช้งาน 1 มือและ 1 นิ้ว (นิ้วโป้ง) ปุ่มบนเมนูการนำทางด้านล่างจะนำคุณไปยังหน้าจอทางด้านขวาหรือซ้ายของหน้าจอปัจจุบัน ดังนั้นปุ่ม 0 จะนำคุณไปที่หน้าจอเกี่ยวกับ #0 และปุ่ม #1 จะนำคุณกลับไปที่หน้าจอหลัก #1 เป็นต้น

ชัดเจน? เลยไปต่อ…

ขั้นตอนที่ 2: การออกแบบข้อมูล (ฐาน)

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

มี 2 ประเภทของค่าที่เราจะจัดเก็บ:

• เราจะจัดเก็บค่าคีย์/ค่าทั่วทั้งแอปอย่างง่าย 10 ค่า (ดังแสดงในฟังก์ชัน 'CreateIgnoreList' ด้านบน)
• และคีย์/ค่าที่ซับซ้อนยิ่งขึ้นซึ่งจัดเก็บข้อมูลเกมที่เสร็จสมบูรณ์ทั้งหมดไว้ในสตริงเดียวด้วยคีย์/ค่า 'CurrentMatch' ซึ่งทำหน้าที่เป็นคีย์หลัก * (ดังแสดงในฟังก์ชัน 'SaveScore' ด้านบน) ฟิลด์เหล่านี้ภายในคู่คีย์/ค่านี้ถูกคั่นด้วยอักขระควบคุมที่ไม่ใช่ภาพ '\t' อักขระควบคุมนี้จะช่วยให้เราอยู่ในหน้าจอการจับคู่ #2 เพื่อดึงค่าทั้งหมดลงในส่วนประกอบที่แยกจากกันและแสดงและจัดเรียง แต่เพิ่มเติมเกี่ยวกับเรื่องนั้นในหัวข้อ หน้าจอ 2 (การแข่งขัน)

* ข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้าง PrimaryKey สำหรับ TinyDb ใน AppInventor บน YouTube

ขั้นตอนที่ 3: หน้าจอ 1 (หลัก)

นี่คือหน้าจอ 'ตัวทำงาน' ที่เราจะใช้เวลาส่วนใหญ่ในฐานะผู้ใช้แอป นอกจากนี้ยังเป็นจุดเริ่มต้นสำหรับแอป MIT App Inventor ของเราอีกด้วย

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

• กด 'Team 1' และคุณจะได้รับการแจ้งเตือนที่จะช่วยให้คุณสามารถเปลี่ยนชื่อของ 'Team 1' เมื่อเปลี่ยนแล้ว จะเปลี่ยน 'ทีม 1' เป็นชื่อที่คุณเลือก ชื่อนี้ยังเป็นชื่อที่จะใช้เพื่อแสดงคะแนน 'เกม' และ 'การแข่งขัน' ของคุณ (ในหน้าจอถัดไป)
• 'คะแนนของทีม 1' และ 'คะแนนของทีม 2' จะเปลี่ยนไปตามปุ่ม '+' และ '-' ที่กดที่ด้านล่างของแต่ละทีม หากคะแนนเป็น 0 และกด '-' จะมีสัญญาณเสียงและภาพให้ แต่คะแนนยังคงเป็น 0 (แน่นอน)
• หาก 'คะแนน' ถึง 13 มีบางสิ่งเกิดขึ้น: มีการส่งสัญญาณภาพ หน้าต่างการแจ้งเตือนจะแสดงผลลัพธ์ (รูปภาพ #2) และให้ตัวเลือกแก่คุณในการเริ่มเกมใหม่หรือการแข่งขันใหม่ (และแน่นอนว่าเกมใหม่ เกม). อย่างไรก็ตาม หากคุณไม่ได้เลือกการให้คะแนนเปตองแบบคลาสสิก แต่เป็นคะแนนความแตกต่าง 2 คะแนน (ซึ่งสามารถเลือกได้ในหน้าจอการตั้งค่า #3) กว่าขึ้นอยู่กับความแตกต่างระหว่างสองทีมหนึ่งจะถือเป็นผู้ชนะ (ดังแสดงในภาพที่ 3).
• 'คะแนน' ใน 'การแข่งขัน' ปัจจุบันจะแสดงที่กึ่งกลางของหน้าจอระหว่างคะแนน 'ทีม 1' และ 'ทีม 2' และสิ่งนี้จะทำเป็นตารางต่อไปจนกว่าจะมี 'การแข่งขัน' ใหม่เริ่มต้นขึ้น
• หากต้องการนำทางไปยังหน้าจออื่นๆ คุณยังสามารถ 'ปัดไปทางซ้าย' เพื่อแสดงหน้าจอเกี่ยวกับ #0 หรือ 'ปัดไปทางขวา' เพื่อแสดงหน้าจอการแข่งขัน #2

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

1. ล่างซ้าย: '?' ปุ่มจะไปทางซ้ายและแสดงหน้าจอเริ่มต้นเริ่มต้นเกี่ยวกับ (#0) อีกครั้ง
2. ตรงกลางล่างสุด: ปุ่มรีเซ็ต (ที่ดูเหมือน '@' พร้อมลูกศร) จะช่วยให้คุณเริ่มเกมใหม่หรือแมตช์ใหม่ได้ทุกเมื่อในเกม เพียงแค่กดปุ่ม 'รีเซ็ต' ตรงกลางด้านล่าง นี่จะเป็นหน้าต่างแจ้งเตือนที่จะขอให้คุณเริ่มเกมใหม่หรือนัดใหม่
3. ล่างขวา: ปุ่ม '->' จะไปทางขวาและแสดงภาพรวมของหน้าจอการแข่งขันทั้งหมด (#2)

ขั้นตอนที่ 4: หน้าจอ 2 (การแข่งขัน)

แม้ว่าการแต่งหน้าด้วยภาพจะง่ายมาก แต่หน้าจอนี้มีโค้ดที่น่าสนใจอยู่ภายในมากกว่าหน้าจออื่นๆ แต่ก่อนที่เราจะไปดูสิ่งที่เขาทำหน้าจอ:

ใต้ป้ายกำกับ "ทีม 1" และ "ทีม 2" เป็นรายการการแข่งขันทั้งหมดและคะแนนรวมตามลำดับ นี่คือรายการที่เรียงโดย 'แมตช์ที่เล่นล่าสุด' ที่ด้านบนและ 'แมตช์ที่เล่นเก่าที่สุด' ที่ด้านล่าง

ตรงกลางระหว่าง 'ทีมที่ 1' และ 'ทีมที่ 2' เป็นปุ่มที่ใช้เรียงลำดับรายการการจับคู่ในลำดับจากน้อยไปมากหรือจากมากไปน้อย ไอคอนจะเปลี่ยนไปตามทิศทางการจัดเรียงที่เลือก

ในการไปยังหน้าจออื่นๆ คุณยังสามารถ 'ปัดไปทางซ้าย' เพื่อแสดงหน้าจอหลัก #1 หรือ 'ปัดไปทางขวา' เพื่อแสดงหน้าจอการตั้งค่า #3

สุดท้ายที่ด้านล่างคือแถบเมนูการนำทาง ตำแหน่งนี้จะอยู่ที่ด้านล่างสุดของหน้าจอเสมอ ไม่ว่าหน้าจอจะมีขนาดเท่าใด แม้ว่าจะใช้ฟังก์ชัน 'แยกหน้าจอ' ของ Android (ดังแสดงในรูปภาพ #2) เมนูการนำทางด้านล่างมี 3 ปุ่ม:

1. ล่างซ้าย: '?' ปุ่มจะไปทางซ้ายและแสดงหน้าจอเริ่มต้นเริ่มต้นเกี่ยวกับ (#0) อีกครั้ง
2. ตรงกลางล่างสุด: ปุ่มรีเซ็ต (ที่ดูเหมือน '@' พร้อมลูกศร) จะช่วยให้คุณเริ่มเกมใหม่หรือแมตช์ใหม่ได้ทุกเมื่อในเกม เพียงแค่กดปุ่ม 'รีเซ็ต' ตรงกลางด้านล่าง นี่จะเป็นหน้าต่างแจ้งเตือนที่จะขอให้คุณเริ่มเกมใหม่หรือนัดใหม่
3. ล่างขวา: ปุ่ม '->' จะไปทางขวาและแสดงภาพรวมของหน้าจอการแข่งขันทั้งหมด (#2)

จัดรายการแมตช์ให้อยู่ตรงกลางหน้าจอ:

ฉันต้องการแสดงรายการการแข่งขันที่อยู่ตรงกลางหน้าจอโดยมีตัวแบ่ง '-' อยู่ตรงกลาง ตอนนี้ เนื่องจากจำนวนเกมที่ทีมชนะสามารถมีได้ตั้งแต่ 1 หลักขึ้นไป และชื่อจริงของแต่ละทีมอาจแตกต่างกันในขนาด เราจึงไม่สามารถใส่ไว้ใน 1 รายการได้ ทุกอย่างจะมีลักษณะดังนี้:

ทีม 1 0 - 1 ทีม 2

ฟู 1 - 42 ฟูบาร์

ดังนั้นฉลากสำหรับตัวแบ่ง '-' จึงต้องอยู่ตรงกลาง โดยจัด 'ชื่อทีม 1' และ 'คะแนนทีม 1' ชิดซ้ายของตัวแบ่ง '-' และ 'คะแนนทีม 2' และ 'ชื่อทีม 2' ชิดซ้ายทางด้านขวาของตัวแบ่ง '-' ดังนั้นเราจึงจบลงเช่นนี้:

"ทีม 1 0" "-" "1 ทีม 2" "ฟู 1" "-" "42 FooBar"

และเนื่องจากฉันไม่รู้ว่ารายการการแข่งขันของเราจะนานแค่ไหน ฉันจึงใส่ 'ชื่อทีม 1' และ 'คะแนนทีม 1' ทั้งหมดลงในป้ายกำกับ HTMLFormat Label เดียวกัน และหลังจากการแข่งขันแต่ละครั้ง ฉันจะแทรก a และใส่อันถัดไปใน NewLine.

เตรียมของให้พร้อมสำหรับการจัดเรียง:

ตามที่กล่าวไว้ในขั้นตอนการออกแบบ The Data(base) ฉันสามารถเก็บค่าได้เพียงค่าเดียวเท่านั้น ดังนั้นฉันจึงเก็บค่าของ 'ชื่อทีม 1', 'คะแนนทีม 1', 'คะแนนทีม 2' และ 'ชื่อทีม 2' คั่นด้วยอักขระควบคุมที่ไม่ใช่ภาพ '\t' ตอนนี้ฉันต้องเอามันออกจากฐานข้อมูลก่อน (ดังแสดงในรูปภาพ #3)

ข้อมูลโค้ดแสดงว่าเราตรวจสอบก่อนว่ามีการตั้งค่าสถานะดีบักหรือไม่ (ซึ่งจะทำในทุกหน้าจอของแอปพลิเคชันนี้ ถัดไปจะสร้างรายการของคู่คีย์/ค่า) ที่เราต้องละเว้นเมื่อดำเนินการผ่านฐานข้อมูล เราสนใจเฉพาะข้อมูล 'Match' เท่านั้น ไม่มีอะไรอื่น จากนั้นเราจะวนรอบฐานข้อมูล ละเว้นคีย์ทั้งหมดใน Ignorelist และสร้างรายการใหม่ด้วย 2 ค่า:

1. คีย์หลัก (จำไว้ว่านี่คือตัวเลขที่ระบุหมายเลขที่ตรงกัน เริ่มต้นด้วยการจับคู่ #1)
2. สตริงที่มีค่าสำหรับ 'ชื่อทีมที่ 1', 'คะแนนของทีมที่ 1', 'คะแนนของทีมที่ 2' และ 'ชื่อทีมที่ 2'

จากนั้นเราไปต่อที่ List และสร้าง List of Lists ขึ้นมาใหม่ โดยที่แต่ละ field จะถูกแยกออกเป็นแต่ละรายการ (ดังแสดงในภาพที่ 4):

DataToSort -> รายการดัชนี 1 -> รายการดัชนี 1 (หมายเลข PK)

-> รายการดัชนี 2 (ชื่อทีม 1) -> รายการดัชนี 3 (คะแนนทีม 1) -> รายการดัชนี 4 (คะแนนทีม 2) -> รายการดัชนี 5 (ชื่อทีม 2) -> รายการดัชนี 2 -> รายการดัชนี 1 (หมายเลข PK) -> รายการดัชนี 2 (ชื่อทีม 1) -> … -> …

หลังจากนั้น เราจะแสดงข้อมูลการดีบักบางอย่างหากแฟล็ก Debug เป็น True และตอนนี้เราก็สามารถจัดเรียงรายการของเราได้แล้ว (ของรายการ)

BubbleSort* รายการของรายการ:

รูปภาพ #5 แสดงรายการทั้งหมดของ BubbleSort* รายการของเรา แน่นอนว่าอัลกอริธึมนี้สามารถใช้ได้กับ List of Lists ขนาดใดก็ได้ ไม่ว่าจะมี Index กี่ดัชนีก็ตาม

* ข้อมูลเพิ่มเติมเกี่ยวกับความเรียบง่ายของอัลกอริทึม BubbleSort บน YouTube

ขั้นตอนที่ 5: หน้าจอ 3 (การตั้งค่า)

หน้าจอนี้ดูยุ่งมากและมีองค์ประกอบการออกแบบภาพมากมาย แต่ในท้ายที่สุดมีเพียง 5 สวิตช์สลับ:

1. 'Fred Scoring': หากเปิด 'On' จะเปลี่ยนพฤติกรรมการให้คะแนนและตัดสินผู้ชนะโดยพิจารณาจากความแตกต่าง 2 แต้มที่ 13 และไม่ใช่แค่คนแรกที่ไปถึง 13
2. 'การจับคู่บลูทูธ': (เมื่อเปิดใช้งาน) หากเปิดอยู่ 'เปิด' จะเปิดใช้งานการจับคู่กับแอปพลิเคชันนี้ด้วยจอแสดงผลเปตองภายนอก
3. 'รีเซ็ตการจับคู่': หากเปิด 'เปิด' จะเป็นการรีเซ็ต/ลบการแข่งขันทั้งหมดและเริ่มต้นด้วยการจับคู่ที่ 1
4. 'รีเซ็ตฐานข้อมูล': หากเปิด 'เปิด' จะเป็นการลบ/รีเซ็ตการแข่งขันทั้งหมดและการตั้งค่าแอปพลิเคชันอื่น ๆ ทั้งหมดกลับเป็นการตั้งค่าดั้งเดิมรวมถึงคะแนนปัจจุบัน การแข่งขัน ชื่อทีม การตั้งค่าดีบัก ลำดับการจัดเรียง การตั้งค่า luetooth (เมื่อเปิดใช้งาน) เป็นต้น.
5. 'Debug': หากเปิด 'On' จะแสดงข้อมูล Debug ทั่วทั้งแอประหว่างวงเล็บเหลี่ยม '' สิ่งต่างๆ เช่น 'จำนวนระเบียนทั้งหมด จำนวนตัวแปรทั้งหมด หมายเลขการจับคู่ปัจจุบัน หมายเลข PK ของเกม ฯลฯ

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

ล่างซ้าย: ปุ่ม '<-' จะไปทางซ้ายและแสดงภาพรวมเริ่มต้นของหน้าจอการแข่งขันทั้งหมด (#2)

ขั้นตอนที่ 6: หน้าจอ 0 (เกี่ยวกับ)

หน้าจอสุดท้าย. แค่ข้อมูล ไม่มีอะไรเพิ่มเติม

หน้าจอนี้จะแสดงในครั้งแรกที่แอปพลิเคชันนี้เริ่มทำงาน หลังจากนั้น ระบบจะไม่แสดงข้อมูลดังกล่าวอีก เว้นแต่คุณจะเลือกโดยกดปุ่ม '?' ปุ่มบนหน้าจอหลัก #1

แถบเมนูการนำทางด้านล่างมีเพียง 1 ปุ่มเท่านั้น และจะนำคุณกลับไปที่หน้าจอหลัก #1

ขั้นตอนที่ 7: ซอฟต์แวร์และ/หรือซอร์สโค้ด

ในที่สุด.

คุณสามารถดาวน์โหลดแอปพลิเคชันได้จากตำแหน่ง Google Drive นี้

คุณสามารถดาวน์โหลดรหัสจากรายการ MIT App Inventor Gallery สำหรับ Pentaque (รูปภาพ #1) สิ่งนี้จะช่วยให้คุณสามารถบันทึกโครงการลงในบัญชี MIT App Inventor ของคุณเอง (คุณสามารถเปลี่ยนชื่อเป็นอะไรก็ได้ที่คุณต้องการ) จากที่นั่น คุณสามารถดูโค้ดทั้งหมดในตัวแก้ไข Blocks หน้าจอในตัวแก้ไข Designer รวมถึงสื่อและทรัพยากรทั้งหมดที่ใช้สำหรับโครงการนี้

คุณยังสามารถดาวน์โหลดซอร์สโค้ด (ไฟล์.aia ซึ่งจริงๆ แล้วเป็นไฟล์.zip) จากตำแหน่ง Google Drive นี้