บทที่ 9 การสร้างแอปพลิเคชันเครื่องคิดเลข

              ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Calculator จากนั้นกด Create

              ขั้นตอนที่ 2 ตกแต่งพื้นหลังให้สวยงามโดยไปที่ BackgroundColor แล้วเลือกสีตามที่ต้องการ

              ขั้นตอนที่ 3 ให้ไปที่ User Interface ลาก Label 1 ใส่ที่หน้าจอ และไปที่ Text แล้วทำการลบ Label ออก ต่อจากนั้นให้กำหนดขนาด Font = 50 (ใส่ตัวเลขตามความเหมาะสม) , Text Align = Right , Height > Relative Size (e.g. “50%”) = 11% (ใส่ตัวเลขตามความเหมาะสม) , Width > Relative Size (e.g. “50%”) = 90% (ใส่ตัวเลขตามความเหมาะสม)

              ขั้นตอนที่ 4 ให้ไปที่ Layout แล้วลาก Row1 ใส่ที่หน้าจอ

              ขั้นตอนที่ 5 ให้ไปที่ User Interface ลาก Button ใส่ที่หน้าจอจำนวน 4 อัน

              ขั้นตอนที่ 6 ให้ทำการเปลี่ยนชื่อ Button และ Text ของ Button โดยเปลี่ยนจาก Button1 เป็น 7 และ Text ของ Button เป็น 7 และทำแบบนี้ต่อไปเรื่อย ๆ (Button 4 และ Text ของ Button เปลี่ยนเป็น x (เครื่องหมายคูณ) ) และทำการตกแต่งโดยเปลี่ยนสีพื้นหลังปุ่มไปที่ BackgroundColor แล้วเลือกสีตามที่ต้องการ , Height และ Width = Absolute Size 40 (ใส่ตัวเลขตามความเหมาะสม)

              ขั้นตอนที่ 7 ให้คลิกที่ Row1 จากนั้นไปที่ Height แล้วเลือกเป็น Fit Contents

              ขั้นตอนที่ 8 ต่อไปให้ไปที่ Duplicate เพื่อก็อปปี้แถวสร้างขึ้นมาอีก 4 แถว

              ขั้นตอนที่ 9 ทำการเปลี่ยนชื่อ Button และ Text ของ Button ให้สอดคล้องด้วยกันให้หมด

              ขั้นตอนที่ 10 จากแถวที่ 1 ให้ทำการลบ Text ออก และทำการกำหนด BackgroundColor ของปุ่มที่ 2 และ 3 ให้เป็น Transparent

              ขั้นตอนที่ 11 จากแถวที่ 5 ให้ทำการลบปุ่มที่ 2 ออก โดยการกดที่ถังขยะและไปที่ Delete

              ขั้นตอนที่ 12 ให้ไปที่ปุ่ม 0 ทำการกำหนด Width > Absolute Size = 170 , Padding Right = 50 และไปที่ Advanced > Styling > BackgroundColor ให้เลือกสีให้ตรงกับพื้นหลังปุ่ม

               ขั้นตอนที่ 13 ต่อไปจะทำการใส่โค้ดแอป โดยให้ไปที่ Blocks แล้วไปที่ Variable > app name แล้วลากมาวางใส่ที่หน้าจอ ต่อจากนั้นไปที่ Text แล้วเลือก ” ” ให้นำมาลากใส่ต่อบล็อค app name เป็นการกำหนดตัวแปร

               ขั้นตอนที่ 14 ให้ทำการเปลี่ยนจาก app name เป็น app Operator

               ขั้นตอนที่ 15 ให้ทำการคลิกที่ app Operator 1 ครั้ง แล้วคลิกขวา เลือก Duplicate เพื่อก็อปบล็อก โดยให้ก็อปขึ้นมา 2 อัน

               ขั้นตอนที่ 16 ให้ทำการเปลี่ยนชื่อบล็อกทั้ง 2 อันเป็น app Number1 และ app Number2

               ขั้นตอนที่ 17 ต่อไปให้ไปที่ AC เลือกบล็อก when AC Click do ลากใส่หน้าจอ แล้วไปที่ Label1 > from Label1 set text to ลากใส่ต่อจากบล็อก when AC Click do และไปที่ Text > ” ” นำมาลากใส่ต่อบล็อก from Label1 set text to

              ขั้นตอนที่ 18 ให้ไปที่ Variables > set app Operator to ลากใส่ต่อข้างล่างบล็อก from Label1 set text to ” ” แล้วไปที่ Text > ” ” นำมาต่อข้างบล็อก set app Operator to หลังจากนั้นคลิกขวาที่ชุดบล็อก set app Operator to ” ” แล้วเลือก Duplicate ให้กด 2 ครั้ง แล้วเปลี่ยนจากคำว่า Operator เป็น Number1 และ Number2 ตามลำดับ

              ขั้นตอนที่ 19 ต่อไปจะเป็นการทำให้ปุ่มตัวเลขทำงานได้ ให้ไปที่ 7 แล้วเลือก when 7 Click do ลากใส่ที่หน้าจอ แล้วไปที่ Label1 > from Label1 set  Text to ลากมาต่อข้างล่าง when 7 Click do

              ขั้นตอนที่ 20 ให้ไปที่ Text > join นำมาลากใส่ข้างบล็อก from Label1 set  Text to ให้ทำการลบคำว่า Hello จากบล็อก join ออก แล้วไปที่ Label1 > from Label1 get Text ให้มาลากใส่ข้างบล็อก join หลังจากนั้นให้เปลี่ยนจากคำว่า world เป็น 7

              ขั้นตอนที่ 21 ให้ทำการคลิกขวาชุดบล็อก when 7 Click do แล้วเลือก Duplicate แล้วให้เปลี่ยนจาก when 7 เป็น when 8 , join 7 เป็น join 8 หลังจากนั้นก็คลิกขวา Duplicate เปลี่ยนตัวเลขไปเรื่อย ๆ จนครบ (0 ถึง 9)

              ขั้นตอนที่ 22 ต่อไปจะเป็นการทำให้ปุ่มทศนิยมทำงานได้ โดยปุ่มนี่จะบังคับให้พิมพ์ . ได้แค่ครั้งเดียวเท่านั้น ให้ไปที่ . แล้วเลือก when . Click do ลากใส่ที่หน้าจอ แล้วไปที่ Control > if do ลากมาต่อข้างล่าง when . Click do แล้วให้ไปที่ Logic > not ลากใส่ต่อข้างบล็อก if แล้วไปที่ Text > does contain ลากใส่ต่อข้างบล็อก not แล้วไปที่ Label1 > from Label1 get Text ลากใส่ต่อบล็อก does และเปลี่ยนจากคำว่า b ที่อยู่ข้าง contain เป็น . แทน

              ขั้นตอนที่ 23 ให้ไปคลิกขวาแล้วเลือก Duplicate ที่ชุดบล็อก from Label1 set  Text to join from Label1 get Text จากชุดบล็อกปุ่มตัวเลขไหนก็ได้  เมื่อ Duplicate เสร็จให้นำมาลากใส่ต่อบล็อก do แล้วเปลี่ยนตัวเลขเป็น . แทน

              ขั้นตอนที่ 24 ต่อไปจะเป็นการทำให้ปุ่มเครื่องหมายคำนวณทำงานได้ ให้ไปที่ + แล้วเลือก when + Click do ลากใส่ที่หน้าจอ แล้วไปที่ Variables > set app Operator to แล้วให้เปลี่ยนจาก Operator เป็น Number1 แทน แล้วไปที่ Label1 > from Label1 get Text ลากใส่ต่อข้างบล็อก set app Number1 to

              ขั้นตอนที่ 25 ให้ไปที่ Variables > set app Operator to ลากใส่ข้างล่างบล็อก set app Number1 to from Label1 get Text แล้วไปที่ Text > ” ” ลากใส่ข้างบล็อก set app Operator to แล้วเติม + เข้าไปในช่องว่าง

              ขั้นตอนที่ 26 ให้ไปที่ Label1 > from Label1 set Text to ลากใส่ข้างล่างบล็อก set app Operator to + แล้วให้ไปที่ Text > ” ” ลากใส่ข้างบล็อก from Label1 set Text to

              ขั้นตอนที่ 27 ให้ทำการคลิกขวาชุดบล็อก when + Click do แล้วเลือก Duplicate แล้วให้เปลี่ยนจาก when + เป็น when – , set app Operator to + เป็น set app Operator to – หลังจากนั้นก็คลิกขวา Duplicate เปลี่ยนเครื่องหมายคำนวณไปเรื่อย ๆ จนครบ ( + – × ÷ )

              ขั้นตอนที่ 28 ต่อไปจะเป็นการทำให้ปุ่ม = ทำงานได้ เพื่อที่คำนวณตัวเลขทั้ง 2 ตัวได้ ให้ไปที่ = แล้วเลือก when = Click do ลากใส่ที่หน้าจอ แล้วไปที่ Variables > set app Operator to แล้วให้เปลี่ยนจาก Operator เป็น Number2 แทน แล้วไปที่ Label1 > from Label1 get Text ลากใส่ต่อข้างบล็อก set app Number2 to

              ขั้นตอนที่ 29 ให้ไปที่ Control > if do ลากมาต่อข้างล่าง set app Number2 to from Label1 get Text แล้วไปที่ฟันเฟือง ให้เลือก else if 3 อัน และ else 1 อัน

              ขั้นตอนที่ 30 ให้ไปที่ Logic > = ลากใส่ข้าง if แล้วไปที่ Variables > app Operator ลากใส่ในช่องแรกของบล็อก = แล้วไปที่ Text > ” ” ลากใส่ในช่องที่สองของบล็อก = แล้วให้เติมเครื่องหมาย + เข้าไปใน “

              ขั้นตอนที่ 31 ให้ไปที่ Label1 > from Label1 set Text to ลากใส่ที่ do แล้วไปที่ Math > 1 + 1 นำมาลากใส่ต่อข้างบล็อก from Label1 set Text to จากนั้นไปที่ Variables > app Number1 กับ app Number2 โดยเอา app Number1 ใส่ช่องแรกของ 1 + 1 และเอา app Number2 ใส่ช่องที่สองของ 1 + 1

              ขั้นตอนที่ 32 ให้ทำการ Duplicate ชุดบล็อก app Operator = + และชุดบล็อก from Label1 set Text to app Number1 + app Number2 โดยนำชุดบล็อก app Operator = + มาใส่ข้าง ๆ else if และชุดบล็อก from Label1 set Text to app Number1 + app Number2 มาใส่ do ที่อยู่ข้างล่าง else if แล้วทำการเปลี่ยนจาก app Operator = + เปลี่ยนเป็น app Operator = – และ  from Label1 set Text to app Number1 + app Number 2  เปลี่ยนเป็น from Label1 set Text to app Number1 – app Number 2

              ขั้นตอนที่ 33 ให้ทำซ้ำเหมือนกับ ขั้นตอนที่ 32 โดยเพิ่มและเปลี่ยนเป็น x และ ÷ จนครบ

              ขั้นตอนที่ 34 ต่อไปจะเป็นการสร้างข้อความเตือนข้อผิดพลาด Error โดยให้ไปที่ Label1 > from Label1 set Text to แล้วไปที่ Text > ” ” ลากมาใส่ต่อข้างบล็อก from Label1 set Text to พร้อมกับพิมพ์คำว่า Error เป็นการจบการต่อบล็อกของแอปพลิเคชันนี้

แอปพลิเคชันเครื่องคิดเลขที่เสร็จสมบูรณ์