อาจารยผ์ ู ส้ อน การพฒั นาโปรแกรมบน อุปกรณพ์ กพาเบอื้ งตน้ อ.จีระสิทธ์ิ อึง้ รัตนวงศ์ แผนกคอมพิวเตอรธ์ ุรกจิ 6mkbyur (3/1) , aniujvj (3/2) 062-5548444 pno-ball
Week 3 การเก็บขอ้ มูลดว้ ย TinyDB
วตั ถปุ ระสงค์การเรยี นรู้ 1. มีความรูค้ วามเข้าใจเก่ียวกบั การบันทึกขอ้ มูลลง ใน TinyDB 2. สามารถสรา้ งแอปพลเิ คชันท่เี ก่ียวขอ้ งกับการ บนั ทึกข้อมูลใน TinyDB ได้ ส่ิงท่ีจะได้จากบทเรียนน้ี (T2-1) หน้าบันทกึ ข้อมูลและรายงานการขาย
ขอ้ มูลสตรงิ • สตริง คอื ข้อมูลท่มี ลี กั ษณะข้อความยาวๆ • เราสามารถนามาประยุกต์ใช้งานได้ เช่ น แสดงรายการสนิ ค้าท่มี หี ลายรายการ ใน คอมโพเนนท์แบบเลอื กรายการ (List view)
ขอ้ มูลสตริง • การเกบ็ ขอ้ มูลสตริง จะเก็บไวใ้ นคอมโพเนนต์ List Picker โดยใช้คาส่ัง Elements From String ขอ้ ความสตรงิ
ขอ้ มูลสตรงิ • การเก็บขอ้ มูลสตรงิ หลายรายการ จะตอ้ งคนั่ ดว้ ยเคร่ืองหมาย , (comma) • หากภายในสตริงรายการนัน้ มหี ลายข้อมูล เช่ น ช่ือเคร่อื งด่ืมและราคา ก็จะตอ้ ง ค่นั ด้วยเคร่อื งหมายอะไรกไ็ ด้ เช่ น คน่ั ด้วย @ สตรงิ ชุดท่ี 1 สตรงิ ชุดท่ี 2 สตริงชุดท่ี 3 ขอ้ มูลท่ี 1 ข้อมูลท่ี 2 ตวั ค่ันสตรงิ ช่ือเคร่ืองด่ืม ราคา
อีเวนตแ์ ละคาส่ังท่เี ก่ยี วข้อง คาส่ัง Title กาหนดหัวข้อรายการ , คาส่ัง Title Bar Color กาหนดสแี ถบหวั ขอ้ List Picker คาส่ัง Open ส่งั ใหแ้ สดงรายการใน List View อเี วนต์ After Picking เกดิ ขน้ึ หลงั จากผู้ใช้ เลือกรายการจาก List Picker
WORKSHOP : ออกแบบ UI • Horizontal Arrangement จดั เลย์ เอาตภ์ ายในตามแนวนอน • Label แสดงขอ้ ความ • List View แสดงรายการใหเ้ ลือก • Button ป่ ุม คอมโนเนนท์ท่ีใช้ • Notifier แจ้งเตือน • List Picker มลี ักษณะเป็นป่ ุม เม่อื คลิกป่ ุม ก็จะแสดงรายการใหเ้ ลอื ก
ลองมอื สรา้ งแอป Label โดยปรบั ปรุงจาก Workshop List view บทเรียนท่แี ล้ว Horizontal Arrangement Button
กาหนดพรอ๊ พเพอร์ต้ี Screen-Home พรอ็ พเพอรต์ ี้ คา่ ท่ีกาหนด Sizing Resposize Align Horizontal Center Screen Orientation Portrait Title Visible ลบเคร่อื งหมายถูก Scrollable ลบเคร่ืองหมายถูก
กาหนดพรอ๊ พเพอรต์ ้ี Horizontal Arrangement พรอ็ พเพอรต์ ้ี คา่ ท่ีกาหนด Align Horizontal Center Weight Fill parent
กาหนดพรอ๊ พเพอรต์ ้ี Label :: Total พร็อพเพอรต์ ้ี คา่ ท่ีกาหนด Font Size 30 Width 90% Text 0 Teat Alignment Right
กาหนดพรอ๊ พเพอรต์ ี้ Button CoffeeMenu TeaMenu CakeMenu MilkMenu JuiceMenu พรอ็ พเพอรต์ ี้ ค่าท่ีกาหนด Background None (ไมม่ ีสี) Font Size 16 Text COFFEE, TEA, CAKE, MILK, JUICE Text Color Dark Gray
กาหนดพรอ๊ พเพอรต์ ้ี Button พรอ็ พเพอรต์ ้ี คา่ ท่กี าหนด BtnDeleteAll BtnReport Background กาหนดสตี ามใจชอบ BtnCheckBill Font Size 16 Width Fill parent Text ลบขอ้ มูล, รายงาน, คดิ เงิน Text Color White
กาหนดพรอ๊ พเพอรต์ ้ี List View พร็อพเพอรต์ ี้ ค่าท่ีกาหนด Background Color Light Gray Font Size 22 Width Fill parent Height Fill parent
อปั โหลดไฟล์ใส่ใน Assets • ไฟล์ภาพประเภทเคร่ืองด่มื
อีเวนต์และคาสั่งท่ีเก่ยี วขอ้ ง Screen อีเวนต์ Initialize เกดิ ข้นึ เม่อื เปิดแอป Button อีเวนต์ Click เกดิ ขึ้นเม่ือมีการคลกิ ปุ่ม
ตอ่ บลอ็ กคาส่งั Button - รูปภาพป่ ุมประเภทเคร่ืองด่ืม ตาแหนง่ ภาพไอคอน ไดแ้ ก่ left, right, คาส่งั With Icon From Picture ใช้สรา้ งปุ่มท่มี ที งั้ top, bottom ภาพไอคอน และข้อความบนปุ่ม ช่ือไฟลภ์ าพ ระยะหา่ งระหว่างไอคอนและข้อความบนปุ่ม ความกวา้ งของภาพไอคอน ความสูงของภาพไอคอน
ตอ่ บล็อกคาส่งั Button - ป่ ุมประเภทเคร่อื งด่มื
ตอ่ บลอ็ กคาส่งั List Picker – ดงึ แสดงรายการสนิ ค้าของแต่ละป่ ุมประเภทเคร่อื งด่มื ขอ้ ความแสดงบนแถบ สีแสดงบนแถบ แสดงรายการใน List Picker คาส่ัง Elements From String ใช้ แสดงรายกาเคร่อื งด่มื ใน List Picker โดย แต่ละรายการประกอบดว้ ย ช่ือเคร่อื งด่มื และราคา ค่ันดว้ ย @ และค่นั แต่ละชุด รายการด้วย ,
ตอ่ บลอ็ กคาส่งั List Picker – ดึงแสดงรายการสนิ คา้ ของแตล่ ะป่ ุมประเภทเคร่อื งด่มื
ตอ่ บลอ็ กคาส่งั List Picker – ดึงแสดงรายการสนิ คา้ ของแตล่ ะป่ ุมประเภทเคร่อื งด่มื
ต่อบลอ็ กคาสงั่ List Picker – ดึงแสดงรายการสนิ คา้ ของแตล่ ะป่ ุมประเภทเคร่ืองด่ืม Coffee (กาแฟ) เอสเปรสโซ่-ร้อน @35, เอสเปรสโซ่-เยน็ @40, เอสเปรสโซ่-ป่ัน @55, คาปูชิโน่-รอ้ น @35, คาปูชิโน่-เยน็ @40, คาปูชิโน่- ป่ัน @55, ลาเต้-ร้อน @35, ลาเต้-เย็น @40, ลาเต้-ป่ัน @55, มอคค่า-ร้อน @35, มอคคา่ -เยน็ @40, มอคคา่ -ป่ัน @55 Juice (น้าผลไม้) น้าผลไม้-เยน็ @45, น้าผลไม-้ ป่ัน @55 Milk (นม) นมสด-รอ้ น @35, นมสด-เยน็ @40, นมสด-ป่ัน @55, ชอคโกแลต-ร้อน @40, ชอคโกแลต-เยน็ @50, ชอคโกแลต-ป่ัน @65 Tea (ชา) ชา-ร้อน @40, ชาเขยี ว-รอ้ น @40, ชาเขยี วนม-ร้อน @45, ชาเขียวนม-เย็น @50, ชาเขียวนม-ป่ัน @55 Cake (เคก้ ) เค้กสม้ @65, เคก้ กาแฟ @65, เคก้ สตอเบอรี @75, เคก้ ชอคโกแลต @85, บราวน่ี @65
ตอ่ บล็อกคาส่งั After Picking - ไดอะล็อกเลอื กจานวน คาส่งั Show Number Picker ใช้แสดงไดอะลอ็ กให้เลือกจานวน หมายเลขไดอะลอ็ ก Start value (กรณมี ีหลายไดอะลอ็ กซ์) min max ค่าต่าสุด ค่าสงู สุด ค่าเร่มิ ต้น
ตอ่ บล็อกคาสัง่ Number Picker Selection - คานวณเงิน สร้างตัวแปร Global สรา้ งตวั แปรแบบ global ช่ือ order เกบ็ คา่ ว่าง
ตอ่ บลอ็ กคาส่ัง Number Picker Selection - คานวณเงนิ สรา้ งตัวแปร Local คาส่งั Number Picker Selection จะเกดิ หลงั จากผู้ใช้เลอื กจานวนแล้ว โดย ภายในจะมีตวั แร id (หมายเลขของไดอะลอ็ กซ์) และ selection (เก็บจานวน) สร้างตวั แปรแบบ local ดังน้ี • product เกบ็ ช่ือของเคร่อื งด่ืมท่ีส่ัง • price เก็บราคาเคร่ืองด่ืม • amount เก็บจานวนเงนิ ของรายการ น้ี
ตอ่ บล็อกคาสัง่ Number Picker Selection - คานวณเงิน คาส่งั split ใช้แยกข้อมูลโดยใช้ตัวแบ่ง โดยมีรูปแบบคือ ช่ือสินค้า @ราคา เช่น คาส่งั set ใช้เกบ็ คา่ ไวใ้ นตัวแปร คาส่งั select list item list เคก้ สม้ @65 ผลลพั ธ์ตวั แรกคือ ช่ือ product, price, amount ใช้สาหรบั ดึงขอ้ มูลสตริง ออกมาใช้งาน สนิ คา้ ตวั ท่สี องคือ ราคา ค่าตาแหนง่ ของ ผลลัพธต์ วั แรก ในลิสต์ คานวณเงิน โดยนาราคา x จานวน แลว้ เกบ็ คา่ ไวใ้ นตวั แปร amount
ต่อบล็อกคาส่งั Number Picker Selection – นนั ทกึ ขอ้ มูลแลว้ แสดงใน List view คาส่งั add items to list นาขอ้ มูลใหม่ลงในลิสต์ ท่เี กบ็ อยูใ่ นตัวแปร order ผลลัพธท์ ่ีไดจ้ าการ Join ลาเต-้ เย็น 55x2 = 110.00 จัดรูปแบบตัวเลข ทศนยิ ม 2 ตาแหนง่
ตอ่ บลอ็ กคาสั่ง Number Picker Selection – นนั ทึกข้อมูลแล้วแสดงใน List view นาลิสต์ในตัวแปร order ไปแสดงรายการใน List view คานวณยอดเงนิ ของรายการแลว้ แสดงผลท่ี Label Total
ตอ่ บลอ็ กคาส่งั After Picking - ไดอะลอ็ กลบรายการเคร่อื งด่ืม คาส่งั Custom Choose Dialog ใช้ไดอะลอ็ กแบบยืนยัน Message หมายเลขไดอะลอ็ ก
ตอ่ บลอ็ กคาส่งั Custom Choose Dialog - ไดอะลอ็ กลบรายการเคร่ืองด่ืม อเี วนต์ Got Custom Choose Dialog เกิดขึ้นหลงั จากผู้ใช้คลกิ ปุ่มบนไดอะลอ็ ก โดยมี ค่าตวั แปร id เกบ็ หมายเลขไดอะล็อกซ์ และ choice เกบ็ ขอ้ ความตามปุ่มท่ีคลกิ ลบเฉพาะรายการท่คี ลกิ ใน List view
ตอ่ บลอ็ กคาส่งั Custom Choose Dialog - ไดอะล็อกลบรายการเคร่อื งด่ืม นาคา่ ตัวแปร order ไปแสดง รายการอปั เดตใน List view เม่อื ลบรายการแล้ว ให้คานวณ ยอดเงินใหม่ นายอดเงนิ ท่ีลบออก หักออกจาก ยอดเงนิ เดิม
ตอ่ บลอ็ กคาส่งั Custom Choose Dialog - ไดอะลอ็ กลบออเดอร์ Message หมายเลขไดอะล็อก
ตอ่ บล็อกคาสง่ั Custom Choose Dialog - ไดอะล็อกลบออเดอร์ สร้างฟั งกช์ ัน ClearOrder ลบรายการใน List view ใหเ้ ปน็ ลิสตว์ า่ ง กาหนดขอ้ ความใน Label Total ใหเ้ ป็น 0 กาหนดคา่ ในตวั แปร order ใหเ้ ปน็ ลสิ ตว์ า่ ง
ต่อบลอ็ กคาสั่ง Custom Choose Dialog - ไดอะล็อกลบออเดอร์ เรียกใช้ฟั งกช์ ัน ClearOrder ถ้าตอ้ งการลบออเดอร์ ให้เรยี กใช้ฟังก์ชัน order
ตอ่ บลอ็ กคาส่งั Show Text Input Dialog - ไดอะลอ็ กป้ อนขอ้ มูลจานวนเงิน หมายเลขไดอะล็อก กาหนดใหค้ ียบ์ อร์ดมี เฉพาะตวั เลข
ตอ่ บล็อกคาส่งั Got Text Input From Dialog – ไดอะล็อกรับขอ้ มูลจานวนเงนิ ถ้าเงนิ ท่รี ับ มากกวา่ หรอื เท่ากับ เงนิ ท่ีตอ้ งจา่ ย
ตอ่ บลอ็ กคาส่งั Got Text Input From Dialog – ไดอะล็อกรบั ข้อมูลจานวนเงนิ คานวณเงนิ ทอน
ฐานขอ้ มูล TinyDB • TinyDB เป็นคอมโพเนนท์ระบบฐานขอ้ มูล ขนาดเลก็ ท่ีมองไมเ่ ห็น • สามารถจดั เก็บขอ้ มูลท่ีถูกสร้างดว้ ยแอป พลิเคชันได้ โดยข้อมูลจะถูกจัดเกบ็ ไวถ้ าวรใน แอปพลเิ คชัน ทาใหเ้ ม่อื มีการรันแอปพลเิ คชัน กจ็ ะสามารถเรียกใช้ข้อมูลไดไ้ ม่สูญหาย
ฐานขอ้ มูล TinyDB ลกั ษณะของข้อมูลท่จี ัดเกบ็ ใน TinyDb • ข้อมูล Data Items เป็นสตริง • จะถกู เกบ็ ภายใต้ tags • เม่อื จะเก็บขอ้ มูลต้องระบุ tag • เม่ือจะเรียกใช้หรือดงึ ขอ้ มูลก็ตอ้ งทาผา่ น tag ท่กี าหนด
ฐานขอ้ มูล TinyDB คาสั่งท่เี ก่ยี วขอ้ งกับ TinyDb คาส่ัง Store value ใช้สาหรับรับค่า คาส่ัง Get value ใช้สาหรับดงึ คา่ ขอ้ มูลใน ขอ้ มูลไว้ในแทก็ ท่ีกาหนด แทก็ ท่ีเลือก คาส่งั Get Tags ใช้สาหรับอ่านช่ือ คาส่งั ClearTag ใช้สาหรับ คาส่งั ClearAll ใช้สาหรบั ลบ แท็กทัง้ หมด ลบแท็กท่กี าหนด แทก็ ทงั้ หมด
คอมโนเนนทท์ ่ีใช้ • TinyDB เกบ็ ขอ้ มูล • Clock แสดงเวลา • Sharing แชร์รายงานตา่ งๆ
ตอ่ บลอ็ กคาส่งั Custom Choose Dialog - ไดอะลอ็ กลบรายงานการขาย Message หมายเลขไดอะลอ็ ก
ตอ่ บลอ็ กคาส่งั Custom Choose Dialog - ไดอะล็อกลบออเดอร์ เรียกใช้คาส่งั Clear All ของ TinyDB เพ่ือลบแทก็ ทงั้ หมด
ตอ่ บลอ็ กคาสัง่ Got Text Input From Dialog – เก็บข้อมูลลง TinyDB ขอ้ มูลท่ีจะเกบ็ บันทกึ ลงใน TinyDB แบง่ เปน็ 2 ส่วน คือ ข้อมูลการขาย และยอดเงินรวม
ตอ่ บลอ็ กคาสั่ง Got Text Input From Dialog – เกบ็ ข้อมูลลง TinyDB ส่วนท่ี 1 ข้อมูลการขาย จะเก็บเป็นลิสต์ ภายในประกอบด้วยข้อมูล 3 อยา่ ง ไดแ้ ก่ เวลา, รายการเคร่อื งด่ืม, ยอดเงนิ รวมของออเดอร์ คา่ เวลาปัจจุ บนั ในรูปแบบ HH:mm:ss
ตอ่ บล็อกคาสัง่ Got Text Input From Dialog – เก็บขอ้ มูลลง TinyDB ส่วนท่ี 2 ทาหน้าท่ีบนั ทึกยอดเงินจากทกุ ๆ ออเดอร์ นายอดเงินเดมิ ใน TinyDB มาบวกทบกับยอดเงิน จากออเดอร์ล่าสุด แล้วบันทึกลงใน TinyDB ภายใต้ แท็กช่ือ SumRevenue
ตอ่ บลอ็ กคาสัง่ Click – ทารายงานการขาย กาหนดตวั แปรช่ือ report เก็บรายงานท่ีสร้างขึ้น และ eachOrder เก็บข้อมูลแต่ละออเดอร์ เรยี กใช้คาส่ัง Get Tags ของ TinyDB เพ่ืออา่ นช่ือ แทก็ ทงั้ หมด จะได้ผลลพั ธ์ เป็นลสิ ต์ คาส่ัง for each item in list จะอา่ นช่ือแทก็ ทีละช่ือ เร่มิ จากค่าแรกแลว้ นาไปเกบ็ ในตัวแปร item
ตอ่ บล็อกคาสั่ง Click – ทารายงานการขาย อ่านขอ้ มูลจากแท็กใส่ในตัวแปร eachOrder
ตอ่ บล็อกคาสั่ง Click – ทารายงานการขาย index 1 คือ เวลา index 2 คอื รายการเคร่ืองด่ืม index 3 คือ ยอดเงนิ
Search
