Benjamarachutit School
Computing Sciene
M.3
4.9 การสร้างแอปพลิเคชันเครื่องคิดเลข
ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Calculator จากนั้นให้นำเครื่องหมายถูกออกจากช่อง Try it out จากนั้นกด 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 โดยเปลี่ยนจาก Button ซ้ายมือสุดเป็น 7 และ Text ของ Button เป็น 7 และทำแบบนี้ต่อไปเรื่อย ๆ (Button ขวาสุด และ Text ของ Button เปลี่ยนเป็น x (เครื่องหมายคูณ) ) และทำการตกแต่งโดยเปลี่ยนสีพื้นหลังปุ่มไปที่ BackgroundColor แล้วเลือกสีตามที่ต้องการ , Height และ Width = Absolute Size 40 (ใส่ตัวเลขตามความเหมาะสม)
ขั้นตอนที่ 7 ให้คลิกที่ Row1 จากนั้นไปที่ Height แล้วเลือกเป็น Fit Contents
ขั้นตอนที่ 8 ต่อไปให้ไปที่ Duplicate เพื่อก็อปปี้แถวสร้างขึ้นมาอีก 4 แถว
ขั้นตอนที่ 9 ทำการเปลี่ยนชื่อ Button และ Text ของ Button ให้สอดคล้องด้วยกันให้หมด
ขั้นตอนที่ 10 จากแถวที่ 1 ให้ทำการลบ Text ออก และทำการกำหนด Background
Color ของปุ่มที่ 2 และ 3 ให้เป็น Transparent
ขั้นตอนที่ 11 จากแถวที่ 5 ให้ทำการลบปุ่มที่ 2 ออก โดยการกดที่ถังขยะและไปที่ Delete
ขั้นตอนที่ 12 ให้ไปที่ปุ่ม 0 ทำการกำหนด Width > Absolute Size = 170 , Padding Right = 50 และไปที่ Advanced > Styling > BackgroundColor ให้เลือกสีให้ตรงกับพื้นหลังปุ่ม
ขั้นตอนที่ 13 ต่อไปจะทำการใส่โค้ดแอป โดยให้ไปที่ Blocks แล้วไปที่ Variable > initialize app variable name to แล้วลากมาวางใส่ที่หน้าจอ ต่อจากนั้นไปที่ Text แล้วเลือก ” ” ให้นำมาลากใส่ต่อบล็อค app name เป็นการกำหนดตัวแปร
ขั้นตอนที่ 14 ให้ทำการเปลี่ยนจาก name เป็น Operator
ขั้นตอนที่ 15 ให้ทำการคลิกที่ initialize app variable Operator to 1 ครั้ง แล้วคลิกขวา เลือก Duplicate เพื่อก็อปบล็อก โดยให้ก็อปขึ้นมา 2 อัน
ทำตามขั้นตอน 2 ครั้ง
ขั้นตอนที่ 16 ให้ทำการเปลี่ยนชื่อบล็อกทั้ง 2 อันเป็น initialize app variable Name1 toและ initialize app variable Name2 to
ขั้นตอนที่ 17 ต่อไปให้ไปที่ AC เลือกบล็อก when AC Click do ลากใส่หน้าจอ แล้วไปที่ Label1 > set Label1's text to ลากใส่ต่อจากบล็อก when AC Click do และไปที่ Text > ” ” นำมาลากใส่ต่อบล็อก set Label1 's text to
ขั้นตอนที่ 18 ให้ไปที่ Variables > set app Variables Operator to ลากใส่ต่อข้างล่างบล็อก from Label1 set text to ” ” แล้วไปที่ Text > ” ” นำมาต่อข้างบล็อก set app Variables Operator to หลังจากนั้นคลิกขวาที่ชุดบล็อก set app Variables Operator to ” ” แล้วเลือก Duplicate ให้กด 2 ครั้ง แล้วเปลี่ยนจากคำว่า Operator เป็น Number1 และ Number2 ตามลำดับ
หลังจากนั้นกลับไปหน้า Design แล้วให้ไปเปลี่ยนชื่อปุ่มตัวเลขบนหน้าจอแต่ละปุ่ม ให้ตรงกับชื่อใน Text ของแต่ละปุ่ม
ขั้นตอนที่ 19 ต่อไปกลับไปที่จะเป็นการทำให้ปุ่มตัวเลขทำงานได้ ให้ไปที่ 7 แล้วเลือก when 7 Click do ลากใส่ที่หน้าจอ แล้วไปที่ Label1 > set Label1 's text to ลากมาต่อข้างล่าง when 7 Click do
ขั้นตอนที่ 20 ให้ไปที่ Text > join นำมาลากใส่ข้างบล็อก set Label1 's Text to ให้ทำการลบคำว่า Hello จากบล็อก join ออก แล้วไปที่ Label1 > set Label1 get Text ให้มาลากใส่ข้างบล็อก join หลังจากนั้นให้เปลี่ยนจากคำว่า world เป็น 7
ขั้นตอนที่ 21 ให้ทำการคลิกขวาชุดบล็อก when 7 Click do แล้วเลือก Duplicate แล้วให้เปลี่ยนจาก when 7 เป็น when 8 , join 7 เป็น join 8 หลังจากนั้นก็คลิกขวา Duplicate เปลี่ยนตัวเลขไปเรื่อย ๆ จนครบ (0 ถึง 9)
ทำจนครบทั้ง 0-9
ขั้นตอนที่ 22 ต่อไปจะเป็นการทำให้ปุ่มทศนิยมทำงานได้ โดยปุ่มนี่จะบังคับให้พิมพ์ . ได้แค่ครั้งเดียวเท่านั้น ให้ไปที่ . แล้วเลือก when . Click do ลากใส่ที่หน้าจอ แล้วไปที่ Control > if do ลากมาต่อข้างล่าง when . Click do แล้วให้ไปที่ Logic > not ลากใส่ต่อข้างบล็อก if แล้วไปที่ Text > does contain ลากใส่ต่อข้างบล็อก not แล้วไปที่ Label1 > Label1 's Text ลากใส่ต่อบล็อก does และเปลี่ยนจากคำว่า b ที่อยู่ข้าง contain เป็น . แทน
ขั้นตอนที่ 23 ให้ไปคลิกขวาแล้วเลือก Duplicate ที่ชุดบล็อก set Label1 's Text to join Label1'sText จากชุดบล็อกปุ่มตัวเลขไหนก็ได้ เมื่อ Duplicate เสร็จให้นำมาลากใส่ต่อบล็อก do แล้วเปลี่ยนตัวเลขเป็น . แทน
ขั้นตอนที่ 24 ต่อไปจะเป็นการทำให้ปุ่มเครื่องหมายคำนวณทำงานได้ ให้ไปที่ + แล้วเลือก when + Click do ลากใส่ที่หน้าจอ แล้วไปที่ Variables > set app Variables Operator to แล้วให้เปลี่ยนจาก Operator เป็น Number1 แทน แล้วไปที่ Label1 > Label1 's Text ลากใส่ต่อข้างบล็อก set app Variables Number1 to
ขั้นตอนที่ 25 ให้ไปที่ Variables > set app Variables Operator to ลากใส่ข้างล่างบล็อก set app Variables Number1 to Label1's Text แล้วไปที่ Text > ” ” ลากใส่ข้างบล็อก set app Variables Operator to แล้วเติม + เข้าไปในช่องว่าง
ขั้นตอนที่ 26 ให้ไปที่ Label1 > set Label1 's Text to ลากใส่ข้างล่างบล็อก set app Variables Operator to + แล้วให้ไปที่ Text > ” ” ลากใส่ข้างบล็อก set Label1 's 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 Variables Operator to แล้วให้เปลี่ยนจาก Operator เป็น Number2 แทน แล้วไปที่ Label1 > Label1 's Text ลากใส่ต่อข้างบล็อก set app Variables Number2 to
ขั้นตอนที่ 29 ให้ไปที่ Control > if do ลากมาต่อข้างล่าง set app Variables Number2 to Label1 get Text แล้วไปที่ฟันเฟือง ให้เลือก else if 3 อัน และ else 1 อัน
ขั้นตอนที่ 30 ให้ไปที่ Logic > = ลากใส่ข้าง if แล้วไปที่ Variables > app Variables Operator ลากใส่ในช่องแรกของบล็อก = แล้วไปที่ Text > ” ” ลากใส่ในช่องที่สองของบล็อก = แล้วให้เติมเครื่องหมาย + เข้าไปใน " "
ขั้นตอนที่ 31 ให้ไปที่ Label1 > set Label1 's Text to ลากใส่ที่ do แล้วไปที่ Math > 1 + 1 นำมาลากใส่ต่อข้างบล็อก set Label1 's Text to จากนั้นไปที่ Variables > app Variables Number1 กับ app Variables Number2 โดยเอา app Variables Number1 ใส่ช่องแรกของ 1 + 1 และเอา app Variables Number2 ใส่ช่องที่สองของ 1 + 1
ขั้นตอนที่ 32 ให้ทำการ Duplicate ชุดบล็อก app Variables Operator = + และชุดบล็อก set Label1 's Text to app Variables Number1 + app Variables Number2 โดยนำชุดบล็อก app Variables Operator = + มาใส่ข้าง ๆ else if และชุดบล็อก set Label1 's Text to app Variables Number1 + app Variables Number2 มาใส่ do ที่อยู่ข้างล่าง else if
แล้วทำการเปลี่ยนจาก app Variables Operator = + เปลี่ยนเป็น app Variables Operator = – และ set Label1 's Text to app Variables Number1 + app Variables Number 2 เปลี่ยนเป็น set Label1 's Text to app Variables Number1 – app Variables Number 2
ขั้นตอนที่ 33 ให้ทำซ้ำเหมือนกับ ขั้นตอนที่ 32 โดยเพิ่มและเปลี่ยนเป็น x และ ÷ จนครบ
ขั้นตอนที่ 34 ต่อไปจะเป็นการสร้างข้อความเตือนข้อผิดพลาด Error โดยให้ไปที่ Label1 > set Label1 's Text to แล้วไปที่ Text > ” ” ลากมาใส่ต่อข้างบล็อก set Label1 s Text to พร้อมกับพิมพ์คำว่า Error เป็นการจบการต่อบล็อกของแอปพลิเคชันนี้
