E-book Mobile

v รหสั วชิ า 20901-2005 Basic Mobile Devices Programming การเขียนโปรแกรมบนอุปกรณ์เคล่ือนที่เบ้ืองต้น ระดับชั้น ปวช.2 โดย อาจารย์สุพตั รา ชยั ทารินทร์

ลกั ษณะรายวชิ า รหัสวิชา 2005-20901 ชื่อวิชา การเขียนโปรแกรมบนอุปกรณ์เคลื่อนที่เบื้องต้น (Basic Mobile ลักษณะรายวชิ าDevices Programming) จดุ ประสงค์รายวชิ า 1. เข้าใจเก่ียวกบั การเขียนโปแกรมบนอุปกรณเ์ คล่ือนท่ี ลกั ษณะรายวชิ า2. สามารถเขยี นโปแกรมบนอปุ กรณ์เคล่ือนที่ 3. มกี จิ นสิ ัยในการทำงานด้วยความเป็นระเบยี บเรียบร้อย ประณตี รอบคอบ ปลอดภยั และมี คุณธรรม v ลกั ษณะรายวิชา สมรรถนะรายวิชา 1. แสดงความรู้เกี่ยวกับการเขียนโปแกรมบนอุปกรณ์เคลือ่ นท่ี ลักษณะรายวชิ า2. เขยี นโปแกรมบนอุปกรณ์เคลอื่ นท่ี คำอธิบายรายวิชา ศึกษาและปฏิบตั ิเก่ียวกบั หลักการ เคร่ืองมือ และภาษาที่ใช้การเขยี นโปรแกรมบนสมารท์ โฟน แท็บ เลต หรืออุปกรณ์เคลื่อนที่อื่น ๆ การใช้งานระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่ ติดตั้งและถอนโปรแกรม ลักษณะรายวิชาประยุกต์ใช้งานบนอุปกรณ์เคลื่อนที่ การเขียนโปรแกรมบนอุปกรณ์เคลื่อนที่ด้วยภาษาโปรแกรมหรือ เคร่อื งมือสำเร็จรปู ลกั ษณะรายวชิ า

สารบญั ความหมายของการพัฒนาโปรแกรมบนอปุ กรณ์เคลื่อนที่ .................................................................................................. 1 สารบัญรจู้ กั และเข้าใชง้ าน Thunkable........................................................................................................................................ 4 หลัก 3 ส ก่อนลงมือสร้าง Application........................................................................................................................ 4 รจู้ กั กับ Thunkable ..................................................................................................................................................... 4 เตรยี มพร้อมก่อนเข้าใช้งาน Thunkable....................................................................................................................... 6 การเขา้ ใชง้ าน Thunkable ........................................................................................................................................... 7 รู้จัก Function การใชง้ าน................................................................................................................................................ 9 ร้จู กั Function การทำงานของ Thunkable ................................................................................................................ 9 ทดลองสร้างแอปพลิเคชัน............................................................................................................................................... 19 v สรา้ งแอป Hello World............................................................................................................................................. 19 การสรา้ งแอปพลเิ คชัน ButtonImage............................................................................................................................ 23 การออกแบบหน้าดไี ซต์................................................................................................................................................... 27 โลโก้แบนเนอรข์ องแอปพลเิ คชัน ................................................................................................................................. 28 รูปภาพสำหรับประชาสมั พันธ์ตา่ งๆ............................................................................................................................. 31 กลอ่ งข้อความสำหรับกรอกข้อมูล และปุมสำหรับกดยืนยนั ......................................................................................... 34 กลอ่ งข้อความสำหรบั แสดงข้อความตัวอกั ษร.............................................................................................................. 40

ความหมายของการพฒั นาโปรแกรมบนอปุ กรณ์เคลอื่ นที่ Mobile Application ประกอบด้วย 1) Mobile คืออุปกรณ์สื่อสารที่ใช้ในการพกพา ซึ่งนอกจากจะใช้งานได้ตามพื้นฐาน ของโทรศัพท์แล้ว ยังทำงานได้เหมือนกับเครื่องคอมพิวเตอร์ เนื่องจากเป็นอุปกรณ์ที่พกพาได้จึงมีคุณสมบัติเด่น คือ ขนาดเล็ก น้ำหนักเบาใช้พลังงานค่อนข้างน้อย ปัจจุบันมักใช้ทำหน้าที่ได้หลายอย่างในการติดต่อแลกเปลี่ยนข่าวสารกับคอมพิวเตอร์ 2) Application หมายถึงซอฟต์แวรท์ ่ีใชเ้ พ่ือช่วยการทำงานของผู้ใช้ (User) โดย Application จะตอ้ งมสี ิง่ ทเ่ี รียกว่า ส่วนติดต่อกับ ผ้ใู ช้ (User Interface หรอื UI) เพ่อื เป็นตัวกลางการใชง้ านต่าง ๆ การพฒั นาโปรแกรมบนอปุ กรณเ์ คลื่อนทหี่ รอื การพัฒนาโมบายแอปพลิเคชนั หรือการพฒั นาแอปพลิเคชันบนมอื ถือ หมายถึง การพัฒนาโปรแกรมหรือซอฟแวร์สำหรับอุปกรณ์พกพา (การสร้างแอปลิเคชันบนมือถือ) เช่น สมาร์ทโฟน (Smart phone) แท็บเล็ต (Tablet) ซึ่งผู้พัฒนาจะเขียนแอปลิเคชัน เพื่อใช้ประโยชน์บางอย่างจากอุปกรณ์ของมือถือที่มีคุณลักษณะเฉพาะ เช่น เซ็นเซอร์ตรวจจับลักษณะการเคลื่อนไหวของสมาร์ทโฟน (Accelerator Sensor), GPS และข้อมูลจากเซ็นเซอร์ตัวอื่นๆ เปน็ ต้น ในปัจจุบันโทรศัพท์มือ หรอื สมาร์ทโฟนมหี ลายระบบปฏิบัติการที่พัฒนาออกมาให้ผบู้ ริโภคใช้ ส่วนที่มีคนใช้และเป็นที่นิยม มากก็คือ iOS และ Android จึงทำให้เกิดการเขียนหรือพัฒนา Application ลงบนสมาร์ทโฟนเป็นอย่างมาก อย่างเช่น แผนที่, เกมส์, โปรแกรมคุยตา่ งๆ และหลายธุรกจิ กเ็ ข้าไปเน้นในการพฒั นา Mobile Application เพอื่ เพ่มิ ช่องทางในการส่ือสารกับลูกค้า มากขึ้น ตัวอย่าง Application ท่ีติดมาvกับโทรศัพท์ เช่น Facebook ที่สามารถแชร์เรื่องราวต่างๆ ไมว่ ่าจะเป็น ความรู้สึก สถานท่ี รปู ภาพ ผ่านทางแอปพลิเคชนั ไดโ้ ดยตรงไมต่ ้องเข้าเว็บบราวเซอร์ Mobile Application เหมาะสำหรับธุรกิจและองค์กรต่างๆ ในการเข้าถึงกลุ่มคนรุ่นใหม่ รวมถึงขยายการให้บริการผ่าน มอื ถอื สะดวกงา่ ย ทกุ ที่ ทกุ เวลา ตัวอยา่ งการประยกุ ตใ์ ช้ เช่น Mobile Application for Real Estate: โมบายแอปพลิเคชันสำหรับอสังหาริมทรัพย์ ใช้ในการเก็บข้อมูลลูกค้า การจอง การขายบ้าน คอนโด ท่ดี ิน Mobile Application for Tourism: โมบายแอปพลิเคชันสำหรับการท่องเท่ียว โรงแรม บรษิ ัททวั ร์ สามารถดขู ้อมูล จองที่ พักได้ รวมถงึ กลมุ่ MICE ท่ีสามารถจัดทำระบบการลงทะเบยี น การชำระเงิน ขอ้ มลู การประชมุ สัมมนา นิทรรศการ 1|P a g e

Mobile Application for Restaurant: โมบายแอปพลิเคชันสำหรับภัตตาคาร ร้านอาหาร ร้านไวน์ นำเสนอเมนูอาหาร รปู แบบใหม่ สรา้ งความแตกต่างและทนั สมัย v Mobile Application for Retail or Wholesale: โมบายแอปพลิเคชันสำหรับการขายสินคา้ หรือ บริการ ทงั้ แบบค้าปลีก คา้ สง่ ตัวแทนจำหนา่ ย หรอื ขายผ่านพนักงานขาย 2|P a g e

Mobile Application for Education: โมบายแอปพลิเคชันสำหรับการศึกษา สถาบันการศึกษา ห้องสมุด ศูนย์ฝึกอบรม สามารถจดั ทำสือ่ การสอน การจัดทำบทเรยี น Mobile Application for Healthcare: สำหรบั บรกิ ารทางการแพทย์ สาธารณสขุ ในการให้คำปรกึ ษาทางไกลระบบ v Mobile Application for Logistics, Mobile Application for Government: สำหรับหน่วยงานราชการในการนำเสนอ ฐานข้อมูล ขา่ วสาร กจิ กรรม บริการตา่ งๆ ของหน่วยงานในรปู แบบทันสมยั มากข้ึน เป็นต้น 3|P a g e

รู้จักและเขา้ ใชง้ าน THUNKABLE แนวโน้มการใช้งาน Mobile Device อย่าง Smart Phone ได้เพิ่มขึ้นอย่างก้าวกระโดดในช่วงไม่กี่ปีที่ผ่านมาซึ่งเป็นผลมา จากการพัฒนา Mobile Application และเทค นโลยีของตัวเครื่องโทรศัพท์จากค่ายผู้ผลิตโทรศัพท์โดยเฉพาะการพัฒนาต่อยอด Application บนอุปกรณเ์ คล่ือนที่ของบริษทั ตา่ ง ๆ ทแี่ ข่งขันกันเพอ่ื ชงิ ความเปน็ หนงึ่ ในตลาดด้าน Mobile Application และด้วย Application ที่เพิ่มขึ้นและมีประสิทธิภาพมากขึน้ ทำให้ผู้ใช้ smart Phone มีแนวโน้มใช้โปรแกรมต่าง ๆ เพื่อตอบสนองกิจกรรม ในชีวิตประจำวัน ได้แก่ การเล่น อินเตอร์เน็ต การดูหนัง ฟังเพลงหรือแมแ้ ตก่ ารเล่นเกมซึ่งมี ทั้งออนไลน์ และออฟไลน์ ด้วยอัตรา การขยายตัวด้านการใช้งานอุปกรณ์เคลื่อนที่ทำให้บริษัทชั้นนำด้านโทรศัพท์มือถือหลายแห่งหันมาให้ความสำคัญกับการพัฒนา โปรแกรมบนโทรศัพท์มือถือ โดยสงั เกต ไดว้ า่ มคี วามเติบโตอย่างมากจากจำนวนโปรแกรมท่ีเขียนขนึ้ และอัตราการเพิ่มขึ้นจากการ ดาวน์โหลดโปรแกรมอย่างเหน็ ไดช้ ัด หลัก 3 ส กอ่ นลงมอื สร้าง Application 1. สำรวจปัญห การสำรวจปัญหาจะเปน็ สิ่งที่ทำให้เราเกดิ ไอเดียในการสร้างแอปพลิเกชัน โดยปัญหาอาจจะเป็นปญั หาใกล้ ตัว ปัญหาที่พบในสังคม เราต้องพิจารณาว่าแอปพลิเคชันที่เราสร้างขึ้นต้องจะช่วยในการแกป้ ัญหาของคนไดอ้ ย่างไร หรือเกิดประ โยชนอ์ ะไรตอ่ สังคม 2. สำรวจตลาด พิจารณาตลาดหรือความต้องการของผู้ใช้ว่ามีผู้ใช้แอปพลิเคชันของเรามีจำนวนมากน้อยเพียงใด ใครบ้างที่ จะไดใ้ ชแ้ อปพลิเคชันทเี่ ราสรา้ งขึ้น เพรvาะถา้ เราสร้างแอปพลเิ คชันออกมาแล้วแต่ไม่ตรงกบั ความต้องการของตลาดก็ไม่มีประโยชน์ อะไร ในการสรา้ ง 3. สำรวจแอปพลเิ คชันอ่ืน ๆ รเู้ ขารเู้ รา รบรัอยครง้ั ชนะร้อยคร้ัง การสำรวจหรือการศกึ ษาแอปพลเิ กชันของคนอื่นจะช่วยให้ เราสามารถพิจารณาสิ่งต่าง ๆ ในการสร้างแอปพลิเคชัน อาทิเช่น ศึกษาระบบการทำงานของคนอื่น หน้าต่างแอปพลิเคชันเป็น อย่างไร ทำไมแอปพลิเกชันนี้ถึงมีผู้ใช้มากมาย สิ่งเหล่านี้จะช่วยใหเ้ ราเห็นข้อดีข้อเสียก่อนการลงมือสร้างแอปพลิเกชันของเรา ซึ่ง ขอยำ้ ไว้เลยว่าเปน็ การศกึ ษาเพ่อื ปรับใหเ้ หมาะสมกับแอปพลิเคชนั ของเรา แต่ไม่ใช่การลอกเลียนแบบ รู้จกั กับ Thunkable 4|P a g e

จากขอ้ จำกดั ในการเรยี นรภู้ ายาคอมพวิ เตอร์ต่าง ๆ เพอ่ื พฒั นาแอปพลเิ กชันมคี วามย่งุ ยากสำหรบั ผูท้ ี่เรม่ิ ตน้ ในการสร้างแอป พลเิ กชนั หรือผ้ทู ไ่ี ม่มีพืน้ ฐานในการเขียนโปรแกรม ทำให้ Google ไดพ้ ฒั นาระบบการ สร้างแอปพลเิ คชันใหส้ ะดวกข้นึ Thunkable มีพื้นฐานการทำงานมาจากโกรงการ App Inverter ในระยะแรกเป็นส่วนหนึ่งในงานวิจัยของ Google และ ต่อมาไดพ้ ัฒนารว่ มกบั สถาบัน MIT (Massachusetts Institute of Technology) App Inventor เรมิ่ ต้นขนึ้ ในปี 2007 เมือ่ Hal Abelson ศาสตราจารยด์ ้านวิทยาการคอมพวิ เตอร์ ท่ีสถาบนั MIT และ Mark Friedman วิศวกรอาวโุ สของ Google ไดส้ ร้างการ พัฒนาแพลตฟอร์มด้วยความช่วยเหลือจาก ผู้ใช้ Google คือ Liz Looney, Sharon Perl, Ellen Spertus, Karen Parker, และ Debbie Wallach. App Inventor ได้ย้ายฐานการพัฒนาจาก Google มาสู่สถาบัน MIT ในปี 2010 โดย ณ Google เป็นผู้สนับสนุน ทำให้ App Inventor ได้รับการพัฒนาอย่างน่าตกใจโดยเจ้าหน้าที่ของ MIT ในทีมงานของ Andrew McKinney, Jeff Schiller, Josh Sheldon, Marisol Diaz, และนักเรียนในเครื่อข่ายของสถาบนั MIT ที่มีความสามารถ พวกเขาเหล่านี้เปน็ ผูร้ ว่ มก่อตั้ง Thunkable ซง่ึ ความสำคญั ของ App Inventor หรอื Thunkable คือ การผลกั ดันข้อจำกดั ของการเรียนรกู้ ีย่ วกบั มือถือสำหรบั นักเรียนและ นัก การศกึ ษาทัว่ โลก v Thunkable มีหลักการทำงานเหมือนกับ MIT App Inventor โดยใช้หลักการเขียนโปรแกรมแบบVisual Programming Language ซึ่งเป็นแนวทางการเขียนโปรแกรมมิ่งรุ่นใหม่ เน้นความง่ายต่อการเขียนและใช้หลักการการต่อแบบเลโก้ คือต่อเป็น บลอ็ ก ๆ โดยยังรักษาหลกั การการเขยี นโปรแกรมมิ่งทกุ อย่าง ซึ่งเหมาะสำหรบั มอื ใหม่ทส่ี นใจทางดา้ นการเขียนโปรแกรมอยา่ งยง่ิ Thunkable มีการพัฒนาอย่างต่อเนื่องซึ่งพฒั นามาจาการ MIT App Inventor Version 2 ซึ่งมีเครื่องมือตา่ งใหใ้ ช้ได้อยา่ ง กรบครันมากขึ้น อาทิเช่น ผู้ใช้สามารถเพิม่ font ได้หลากหลายย่ิงขึน้ มีสีให้เลือกมากยิง่ ขึ้นเหมาะสำหรบั นักพัฒนาแอปพลิเคชนั บนโทรศพั ทม์ ือถอื แอนครอยค์อย่างยิ่ง 5|P a g e

เตรยี มพรอ้ มกอ่ นเข้าใช้งาน Thunkable 1. เตรียม Computer หรือ Notebook 2. เตรียมระบบปฏบิ ัติการ (Windows) Windows XP, Vista, 7,8,10 Mac OS Ubuntu 3. เตรยี มบราวเซอร์ v Chrome 4.0 หรอื ใหมก่ ว่า Mozilla Firefox 3.6 หรอื ใหม่กว่า 4. อปุ กรณโ์ มบายพร้อมติดตั้งแอป Thunkable โดยสามารถคน้ หาแอป Thunkable ได้จาก Play Stores และติดตงั้ ทันที 6|P a g e

5. เชอื่ มต่ออนิ เตอร์เนต็ 6. มี Google Account หรือ Gmail การเขา้ ใชง้ าน Thunkable 1. เขา้ ส่เู ว็บไซต์ http://thunkable.com คลกเิ ข้าสรู่ ะบบ Sign in v 2. เลือก Sign in with Google 7|P a g e

3. ปอ้ น Gmail และรหัสผ่าน เสร็จแล้วเลือก Sign in 4. เข้าสู่หน้าตา่ ง Thunkable เลอื ก Create New App เพื่อเริ่มสรา้ ง v 5. ใส่ชื่อ App แลว้ กด OK เพ่ือเข้าสู่หนา้ ต่างการทำงาน 8|P a g e

6. หนา้ ต่างการทำงาน รจู้ ัก FUNCTION การใช้งาน หลังจากได้ทำความรู้จักกับ Thunkable เว็บไซต์ที่ช่วยในการสร้างแอปพลิเคชันไปแล้ว ในบทนี้เราจะไปทำความรู้จักกับ คอมโพเนนซ์ตา่ ง ๆ ของ Thunkable เพอ่ื ท่จี ะนำทรพั ยากร และเครื่องมือตา่ ง ๆ ไปใชใ้ นการพัฒนาแอปพลิเคชันของเราต่อไป รจู้ กั Function การทางvานของ Thunkable 1. หนา้ ตา่ งการทำงานโดยรวม 1. Menu เป็นแหลง่ รวบรวมคำสั่งในการทำงานเกย่ี วกับแอป เชน่ การสรา้ งแอปใหม่ เรยี กใชแ้ อปที่เคยสร้างไว้ การเช่ือมต่อ กบั มอื ถือเพอื่ จำลองการทำงาน การ Export แอปเพอ่ื นำไปใชจ้ รงิ เป็นตน้ 2. Palette เป็นแหล่งรวบร วมส่วนโปรแกรม (Component) เอาไว้เป็นหมวดหมู่ (User Interface, Layout, Media, Animation, etc.) คลกิ หมวดทตี่ อ้ งการ จะเหน็ รายการส่วนโปรแกรม ทเี่ ราสามารถใส่เขา้ ไปบนโปรแกรมมือถือ ทีก่ ำลังออกแบบน้ี ได้ เชน่ ในหมวด User Interface จะเห็นสว่ นโปรแกรมปมุ (Button) ขอ้ ความ (Label) รปู ภาพ (Image) เป็นต้น 9|P a g e

3. Viewer เป็นพนื้ ทบี่ นหน้าจอมอื ถือ (Screen 1) ทำให้เห็นภาพตอนออกแบบโปรแกรม เมือ่ เราลากส่วนโปรแกรมมาใส่ใน พ้ืนที่น้ี 4. Components คอื ส่วนโปรแกรมท่ถี ูกใส่เข้าไปใน Viewer เปน็ สว่ นโปรแกรมท่เี ราต้องการใหม้ อี ยู่ในโปรแกรมมอื ถือ และ สามารถเขียนโค้ดเข้าไปในสว่ น โปรแกรมเหล่านี้ได้ เพ่ือใหโ้ ปรแกรมทำงานตามที่ต้องการ ดา้ นลา่ งติดกนั เป็นสว่ นของ Media เรา สามารถพิ่มไฟล์ส่ือชนิดต่าง ๆ เช่น ไฟลร์ ูปภาพ ไฟลเ์ สยี ง แบบอักษร (Font) เขา้ ไปในโปรเจกต์เพ่ือนำไปใชใ้ นโปรแกรมได้ 5. Properties คือคุณสมบัติต่าง ๆ ของส่วนโปรแกรม เมื่อเราคลิกเลือกส่วน โปรแกรมใด ที่อยู่ใน Viewer หรือใน Components เราจะเห็นรายการคุณสมบัติของส่วนโปรแกรมน้ัน โดยแต่ละส่วนโปรแกรมจะมีคุณสมบัติ ที่อาจจะเหมือนกันหรือ แตกต่างกันออกไปกไ็ ด้ ซงึ่ เราสามารถแก้ไข เพ่ิมเดิม ข้อมูลลงไปในคุณสมบัตติ า่ ง ๆ ท่มี ไี ด้ 2. ชุดเครื่องมือใน Add Components Button = ปุ้มสำหรับกดหรือสมั ผัส 2.1 User Interface Label = ขอ้ ความในแอปพลเิ คชัน Text Input = กลอ่ งสำหรบั ป้อนข้อความ v List Viewer = สามารถเพม่ิ ดู และคลิกทรี่ ายการในลิสต์ Web Viewer = แสดงหน้าเว็บ Switch = สวติ ช์ สามารถเปดิ และปิด Slider = สไลด์ Alert = แสดงการแจง้ เตอื น Canvas = แบบสัมผัส ใชใ้ นการเลอ่ื น หรือวาดบนหน้าจอ Loading icon = ไอคอนโหลด Data Input = เลือกระบุวัน เดอื น ปี Time Input = เลอื กระบุเวลา PDF Reader = ดูและแสดงไฟล์ PDF Data Viewer List = เชอื่ มต่อข้อมลู จาก Google Sheets, Airtable Data Viewer Grid = เชื่อมต่อข้อมูลจาก Google Sheets, Airtable เปน็ รปู แบบ ชอ่ ง 10 | P a g e

2.2 Layout Top Tab Navigator = ช่วยใหผ้ ู้ใชส้ ลับไปมาระหวา่ งหน้าจอ 2.3 Voice ต่าง ๆโดยคลิกท่ีแถบดา้ นบน 2.4 Image Bottom Tab Navigator = สลับไปยังหนา้ จออน่ื โดยใช้ เนวเิ กเตอรแ์ ท็บด้านลา่ ง Stack Navigator = สรา้ งแถบสว่ นหัวในทกุ หนา้ จอ สามารถ เพม่ิ ชือ่ เร่ืองลงในแถบนี้ โดยไปท่คี ณุ สมบัติหนา้ จอ Drawer Navigator = นำทางไปขงั หนา้ จอท่ีแตกต่างกนั โดย ใชล้ ้นิ ชกั ท่ีคลิกได้ ซงึ่ เลอ่ื นออกมาจากด้านข้าง Screen = หนา้ จอวา่ ง Row = สร้างแถว Column = สรา้ งคอลมั น์ Sound = ใสเ่ สียง Text To Speech = แปลงข้อความเป็นเสยี ง v Speech Recognizer = เสยี งพดู Translator = แปลภาษา Assistant = ตวั ผชู้ ว่ ยโดย Google โดยพูดใส่ไมโคร โฟน Audio Recorder = บนั ทึกเสยี ง Image = ใสร่ ูปภาพ Photo Library - แสดงรูปภาพในอลั บ้ัม Camera = ถา่ ยภาพ Barcode Scanner = สแกนบาร์ โค้ดหรอื QR โค้ด Image Recognizer = ระบบจดจำรปู ภาพ Animation = สรา้ งภาพเคลื่อนไหว Video = เล่นวิดีโอบนแอป 11 | P a g e

2.5 Data Accelerometer = วัดความเรว็ Local Storage = ที่เกบ็ ขอ้ มูล 2.6 Location Local DB = เพิ่มตารางขอ้ มูลลงในแอป 2.7 Sensors Realtime DB = ตัวบนั ทกึ สถิติคะแนนแบบเรยี ลไทม์ 2.8 Social Airtable = เพิ่ม ลบ ตารางข้อมูลใน Airtable Web API = สามารถดึงข้อมูลจากบริการสาธารณะหรอื ส่วนตัว API (อินเตอร์เฟซการเขียนโปรแกรมประยกุ ต)์ บนเวบ็ Media DB = ติดต้ัง อัปโหลดสอ่ื มเี ดยี Smart Contract = เรียกใช้ Smart Contract จาก Oasis Blockchain Wallet - เพ่ิมขอ้ มลู เกีย่ วกับบัญชขี อง Blockchain ลงในแอปพลเิ คชนั Map = แผนท่ี Location Sensor = พิกดั ตำแหนง่ v Timer = ตัวจบั เวลา Accelerometer = วัดแรงของการเร่งความเรว็ ทกี่ ระทำกับโทรศพั ท์ Gyroscope = วัดความเร็วของโทรศัพทท์ ่ีกำลงั เปิด วดั อัตราการหมนุ ของโทรศัพท์ และส่งกลับค่าในเรเดยี นตอ่ วินาที Magnetometer = เครอื่ งวัดสนามแมเ่ หลก็ ใช้สำหรับวดั ความหนาแน่นฟลักซ์แม่เหลก็ Bluetooth Low Energy – ใชเ้ พ่อื เชื่อมต่ออปุ กรณ์สองเครอ่ื งเข้าดว้ ยกนั แบบไร้สาย Share = แชร์ไปขงั สอื่ ต่าง ๆ Push Notification = การแจง้ เตอื นแบบพชุ 12 | P a g e

2.9 Authentication Sign in = ลงชื่อเขา้ ใช้อเี มล 2.10 Monetization AdMob Interstitial = โฆษณาค่ันระหวา่ งหน้า AdMob Rewarded Video = โฆษณาวดิ โี อรับรางวลั AdMob Banner = ปา้ ยโฆษณา 3. ชดุ คำสั่งในส่วนของ Block v 3.1 ภาพรวมของสว่ นหนา้ ตา่ งการทำงานเก่ียวกบั Code ของแอปพลเิ คชนั 1) Built-in คือ สว่ นของ Block Code ตา่ ง ๆ ทใ่ี ช้ในการส่ังการแอปพลิเคชนั 2) ส่วนของ Screen ทีร่ วบรวม Components ต่าง ๆ ทอี่ ยู่ในแอปพลิเคชนั ของเรา 3) Bag สว่ นทีเ่ ราสามารถลาก Block Code มาใสเ่ พ่ือเกบ็ Code ไว้ใชใ้ น Screen ใหม่ได้ 4) สว่ นสำหรับลบ Block Code ทเี่ ราไม่ได้ใชง้ านออกไปโดยการลากมาใส่ 13 | P a g e

3.2 Control ส่วนทรี่ วบรวมคำส่ังตา่ ง ๆ ท่เี กย่ี วกับการทำงานของแอปพลเิ คชัน เช่น การวางเงือ่ นไข สงั่ การให้ไปหนา้ ถัดไป การส่ังการให้ ปิดแอปพลเิ คชนั เป็นต้น v 3.3 Logic สว่ นทรี่ วบรวมคำสั่งตา่ ง ๆ ที่เก่ยี วกบั ตรรกศาสตร์ จรงิ เท็จ การเปรยี บเทยี บ ตา่ ง ๆ 14 | P a g e

3.4 Math ส่วนที่รวบรวมคำสง่ั ตา่ ง ๆ ทีเ่ กี่ยvวกบั คณิตศาสตร์ จำนวน ตวั เลข การคำนวณ บวก ลบ คณู เปน็ ต้น 3.5 Text สว่ นที่รวบรวมคำส่ังต่าง ๆ ที่เกย่ี วกบั การทำงานกับข้อความ 15 | P a g e

3.6 List สว่ นทร่ี วบรวมคำส่งั ต่าง ๆ ทีเ่ กย่ี vวกับการทำงานกับลิสต์ การดึงข้อมลู จากไฟลต์ า่ ง ๆ มาในรูปของลสิ ต์ 3.7 Color ส่วนทีร่ วบรวมคำส่ังตา่ ง ๆ ทเี่ กยี่ วกบั สี การส่งั การใหเ้ ปล่ยี นสี Components ตา่ ง ๆ เช่น สีพน้ื หลัง สปี ุ่ม สขี อ้ ความ เปน็ ต้น 16 | P a g e

3.8 Device ส่วนที่จะรวบรวมข้อมูลที่เป็นประโยชน์จากอุปกรณ์ (Android / i0S, ออนไลน์ / ออฟไลน์, เวลา และวันที่) รวมทั้งตั้งค่า โทรศัพท์ใหส้ ่นั 3.9 Objects v ส่วนที่มักจะส่งข้อมูลในรูปแบบวัตถุ ส่งข้อมูลที่ต้องการ ไปยังสเปรดชีตข้อมูลที่จะอยู่ในรูปแบบวัตถุเพื่อให้สามารถ อปั โหลดเป็นแถวได้ 17 | P a g e

3.10 Variables สว่ นท่รี วบรวมคำสัง่ ตา่ ง ๆ ทีเ่ กย่ี วกบั ตวั เปร การประกาศตัวแปร การรับคต่ ัวแปร 3.11 Functions v สว่ นที่รวบรวมคำสงั่ ต่าง ๆ ทีเ่ กี่ยวกบั ส่วนการทำงานยอ่ ย ๆ ของ Code ในส่วนของการใช้งานอื่น ๆ จะเป็นพื้นฐานที่สามารถเรียนรู้และเข้าใจได้ง่าย อาทิเช่น ส่วนของ Properties ส่วนนี้จะ แตกต่างกันออกไปตาม Components ที่เลือกแต่การปรับแต่งในส่วนนี้จะไม่ซับซ้อนมากนัก เช่น การเปลี่ยนสี ปรับขนาดวัตถุ ขนาด อกั ษร แบบอกั ษร ใส่รปู ภาพ เป็นต้น และใน Palette บางสว่ นท่ีไมไ่ ด้กล่าวถึง เพราะเป็นสว่ นทีเ่ จาะลกึ ลงไป ในส่วนท่กี ลา่ ว มาโดยเบ้ืองตน้ น้ี จะเป็นพนื้ ฐานทผี่ อู้ า่ นจะสามารถนำไปพฒั นาแอปพลเิ คชันไดใ้ นบทตอ่ ไป 18 | P a g e

ทดลองสร้างแอปพลเิ คชนั หลงั จากได้ทำความรู้จักกบั เครื่องมือต่าง ๆ ของ Thunkable ในบทน้ีเราจะมาทดสอบการสรา้ งแอปพลิเคชันอย่างงา่ ย เพ่ือ ทดลองการใชง้ านเครอื่ งมอื ต่าง ๆ ของ Thunkable สรา้ งแอป Hello World หลังจากที่เราเข้าส่หู น้าจอการทำงานของ Thunkable ขน้ั ตอนท่ี 1 ให้ไปที่ Properties เพ่ือตง้ั ชอ่ื Title ของ Screen1 ใหเ้ ปน็ Hello world v ขัน้ ตอบที่ 2 ตั้งค่า Screen Orientation ใหเ้ ป็น Portrait เพอ่ื แสดงผลในแนวตั้ง หรือผู้ใชส้ ามารถเลือกเปน็ แนวนอน หรือ ใช้เซนเซอร์ในการวัดการทำงานได้หลังจากไดต้ ัง้ ค่าในส่วนน้ี จะแสดงผลให้เห็นในหน้าจอ Viewer โดยจะโชว์คำว่า Hello World และผู้ใช้สามารถปรับค่าอื่น ๆ ในหน้าจอนี้ได้เช่น การใส่สีพื้นหลัง (Background Color) การใส่ภาพพื้นหลัง (Background Picture) เป็นต้น ขน้ั ตอบท่ี 3 ใหล้ าก Label ใu Add Components User Interface มาใสใ่ นหนา้ จอ Viewer ขั้นตอบที่ 4 เปลี่ยนข้อความใน Label1 โดยเลือก Label1 ใu Components แล้วมาที่ Properties ในส่วนของ Text ให้ ปรบั เปน็ \"สวัสดีชาวโลก\" ขั้นตอบที่ 5 เปลี่ยนขนาดข้อความใน Label1 โดยเลือก Label1 ใu Components แล้วมาที่ Properties ในส่วนของ Font Size ใหป้ รบั เปน็ 20 19 | P a g e

ในส่วนนี้แอปพลิเคชันจะแสดงข้อความที่หน้าจอว่า \"สวัสดีชาวโลก\" ซึ่งเราสามารถปรับแต่งในส่วนอื่น ๆ ได้เช่น การปรับ แบบอักษร เลือก Font Typeface import (.ttf) และ Upload ไฟล์ font ทเี่ ราไดเ้ ตรียมไว้ หรอื การปรับสอี กั ษร โดยเลือกท่ี Text Color แลว้ เลอื กสที ่ตี อ้ งการ ขัน้ ตอนที่ 6 การใส่รปู ภาพใหล้ าก Image ใน Add Components Image มาใส่ในหนา้ จอ Viewer ขั้นตอนที่ 7 เลือกภาพ โดยเลือก Image1 ใน Components แล้วมาที่ Properties ในส่วนของ Picture ให้เลือกภาพที่มี อย่แู ล้ว หรอื เลอื ก Upload File หากไม่มี v ขัน้ ตอนที่ 8 เลือกภาพในคอมพวิ เตอรข์ องเรา พอได้ภาพท่ีต้องการแล้วใหค้ ลิกที่ Open ขั้นตอนที่ : 9 ปรับขนาดของภาพโดยเลือก Image1 ใน Components แล้วมาที่ Properties ในส่วนของ Height และ Width ให้ปรับโดยสามารถเลือก Fit Contents , Fill Container (ปรับเต็มพื้นที่) หรือ Absolute size (ปรับตามขนาค Pixels คงที)่ หรือ Relative Size (เปอร์เซน็ ต์หนา้ จอ ในทน่ี ีใ้ หป้ รบั เปน็ Relative Size คือ Height 50%และ Width 70% (สามารถปรับ เองไดต้ ามเหมาะสม) ขน้ั ตอนท่ี 10 การสรา้ งปุ๊ม Hello ให้ลาก Button ใน Add Components User Interface มาใส่ ในหน้าจอ Viewer ข้นั ตอนท่ี 11 แกไ้ ขข้อความใน Button โดยเลือก Button ! ใน Components แล้วมาที่ Properties ใน 20 | P a g e

ส่วนของ Text ให้แกไ้ ขเป็น \"Hello\" ถือเป็นการเสร็สิ้นขั้นอนในการออกแบบหน้าตาของแอปพลิเคชัน ในส่วนต่อไปจะเป็นการใส่ Code เพื่อสั่งการในการ ทำงานตา่ ง ๆ ของแอปพลิเคชัน ขั้นตอนที่ 12 การใส่ Code ของแอปพลิเคชัน ในส่วนของ Code จะเป็นแบบ Block Editor ซึ่งจะ ง่ายต่อการทำงาน สำหรับผ้เู ร่มิ ดันพัฒนาแอปพลิเคชันอย่างมาก โดยให้ผู้ใช้เลือกที่ Blocks ขน้ั ตอนที่ 13 ในส่วนของหน้าต่างการทำงานของ Block ทางด้านซ้ายมอื จะมี Screen1 ท่รี วม Components ตา่ ง ๆ ท่ีเรา ใส่ในแอปพลิเคชันของเรา ในส่วนน้ีจะvมเี พียง Button! เท่านั้นที่มีการทำงานเมื่อเราสัมผสั โดยใหค้ ลิก Button1 และเลือก Block \"when Button 1 Click\" แล้วคลิกเม้าส์คา้ งไวล้ ากมาใส่หนา้ จอการทำงาน 21 | P a g e

ขั้นตอนที่ 14 การทำงานเมื่อ Button 1 Click คือ เปลี่ยนข้อความ ให้เราไปที่ Built-in คลิก Label1 คลิกเลือก Block \"from Label 1 set Text to\" คลิกเม้าส์ค้างไว้แลว้ ลาก Block \"from Label1 set Text to\" มาใส่ใน Block \"When Button 1 Click\" และใสข่ อ้ ความทตี่ ้องการในช่องว่าง ถือว่าเสร็จสิ้นการทำงานในส่วนของ Code ต่อไปเป็นการทดสอบแอปพลเิ คชนั โดยการเชื่อมกับโทรศัพท์ และการ Export แอปพลิเคชันออกมาใช้งานจรงิ การเช่อื มต่อกบั โทรศพั ทเ์ พ่อื ทดสอบแอปพลเิ คชัน ให้เลอื กเมนู Live Test v จะแสดงแอปจำลองขึ้นมาบนหน้าจอคอมพิวเตอร์ สามารถดูและ ทดสอบใช้แอปที่เราสร้างได้เลยหรือเราสามารถแสดงดู และทดสอบใช้แอปทเี่ ราสร้างทางโทรศัพท์มือถือได้ ด้วยโดยโหลดแอปพลเิ คชนั \"Thunkable\" จาก Play store (ระบบ Android) หรอื App Store (ระบบ iOS) การ Export File แอปพลเิ คชนั ให้เลือกเมนู Download แล้วเลือก Download iOS App (สำหรับระบบ iOS) หรือ Download Android App (สำหรับ ระบบ Android) เพ่อื ดาวน์โหลดไฟล์ apk ลงในคอมพวิ เตอรห์ รือบนมอื ถอื 22 | P a g e

การสร้างแอปพลิเคชัน BUTTONIMAGE ส่งิ ทตี่ ้องเตรยี มกอ่ นสร้างแอป : รปู กาพท่ีต้องการใสใ่ นแอป ในตวั อยา่ งน้จี ะเปน็ รูปภาพของสนุ ัข แมว และหมู v ขั้นตอบที่ 1 Create New App ตั้งชอ่ื New Project Name ว่า ButtonImage จากนนั้ กด Create ขั้นตอนที่ 2 ไปที่ User Interface > Labe! ลากใส่ที่หน้าจอ ตรง Text ให้เปลี่ยนจากคำว่า Label เป็นเลือกรูปภาพ และ ตกแต่ง Font Size, Color ตามที่ต้องการ ขั้นตอนที่ 3 ไปที่ Image > Image ลากใส่ที่หน้จอ และทำการปรับ Height กับ Width ตามที่ต้องการ (ในตัวอย่างจะเป็น การปรับความสงู และความกวา้ งเป็นแบบ %) 23 | P a g e

ข้ันตอนท่ี 4 ไปท่ี Picture > Upload files และคลมุ คำรปู ภาพที่เตรยี มไวท้ ้ังหมด แลว้ กด Open เพื่ออปั โหลดรูปภาพลงใน แอป ขั้นตอนที่ 5 ไปที่ Layout > Row ลากใส่ที่หน้จอ และไปที่ User Interface > Button ทำการลาก Button ใส่หน้าจอ 3 อัน และทำการตกแตง่ ตามทตี่ ้องการ v ขนั้ ตอนที่ 6 ทำการเปล่ียน Text ของ Button เปีน สุนัข แมว หมู ตามลำดับ ขั้นตอนที่ 7 ทำการกำหนด Height > Relative Size (e.g. \"50%\") = 1000และ Width > Relative Size (e.g. \"50%\") = 30% ทัง้ 3 Button และคลิกท่ี Row 1 ทำการกำหนด Height > Fit contents 24 | P a g e

ข้นั ตอนท่ี 8 ตอ่ ไปเป็นการต่อบลอ็ ก เพ่ือให้ปุม่ ทั้งสามอันทำงานได้ โดยไปท่ี Blocks แลว้ ไปท่ี Button1 > when Button ! Click do ลากใสท่ ี่หนา้ จอ ขน้ั ตอนที่ 9 ตอ่ ไปใหไ้ ปท่ี Image1 > from Image1 set Picture to ลากใสต่ ่อท่บี ลอ็ ก when Button1 Click do ขั้นตอนที่ 10 ต่อไปให้ลากบล็อก Image1 > from Image1 set Height to และ Image1 > from Image1 set Width to ต่อข้างล่างบล็อก from Image 1 set Picture to และทำการใส่ตัวเลขเพ่ือกำหนดความสูง (Height) กับความกว้าง (Width) ของรปู ภาพ ดงั ภาพ (สามารถใส่ไดต้ ามความเหมาะสม ในตัวอยา่ งใสเ่ ลข 250) v ขั้นตอนท่ี 11 ให้คลิกท่บี ล็อก when Buton1 Click do และคลกิ ขวาเลือก Duplicate 2 คร้ัง เพือ่ กอ๊ บปี้ชุดบล็อกขึ้นมา อกี 2 ชุดบลอ็ ก ข้ันตอนท่ี 12 ทำการเปลี่ยนเลข Button และชื่อรปู ให้เข้าดว้ ยกนั ขั้นตอนที่ 13 กลับมาที่หน้า Design ให้ทำการตกแต่งแอปให้สวยงามตามเหมาะสม เช่น ใส่ BackgroundColor ให้กับ Screen , ใส่ Border Image 25 | P a g e

แอปพลิเคชนั ButtonImage ทเี่ สร็จสมบูรณ์ v 26 | P a g e

การออกแบบหนา้ ดไี ซต์ เปา้ หมายของการดไี ซต์ หน้านจ้ี ะประกอบไปดว้ ย 1.โลโก้แบนเนอรข์ องแอปพลิเคชนั 2.รูปภาพสำหรับประชาสัมพันธ์ต่างๆ 3.กลอ่ งข้อความสำหรับกรอกข้อมูล และปุมสำหรบั กดยนื ยัน 4.กล่องข้อความสำหรับแสดงข้อความตวั อักษร v 27 | P a g e

โลโกแ้ บนเนอรข์ องแอปพลเิ คชัน 1. กลบั มาทีห่ นา้ จอโปรเจ็คของเรา บนเว็บไซต์ Thunkable 2. ทำการเปลี่ยนช่อื หน้าจอโดยคลกิ รปู ดนิ สอ เพ่ือเปล่ียนช่ือ 3. เปล่ียนชอื่ เป็นคำวา่ “index” เสรจ็ แลว้ กด Enter 4. คลิกที่เลเยอร์index หรือ บริเวณหนา้ จอ index ก็ได้ (ไดท้ ั้ง 2 ท)่ี 5. ในส่วนของ Property ทางฝง่ั ขวาของหนา้ จอ ใหป้ รับ Vertical Alignment เปน็ “top” 6. จะสังเกตไดว้ ่า คำว่า index บนหนา้ จอของเราจะขยับไปชิดด้านบนสดุ ของหน้าจอแลว้ v 7. ในส่วนฝง่ั ซ้ายของหน้าจอ ในหวั ขอ้ Add Components ในคน้ หาคำว่า row 8. ให้ลาก Row จากฝ่งั ซ้าย มาวางไวบ้ นหน้าจอ (คลิกเมา้ ส์ซ้ายค้าง แล้วทำการลาก) 28 | P a g e

9. ทำการเปลี่ยนช่ือ Row เป็นชือ่ “row-banner” (กำหนดไว้เพอื่ ให้เราทราบ และสะดวกในการจดั การในอนาคต) หมายเหตุ : ข้นั ตอนการเปลยี่ นช่ือท่านสามารถกลับไปดไู ด้อย่างละเอยี ดตัง้ แต่ข้อท่ี 2 10. ในเลเยอร์row-banner ใหต้ ง้ั คา่ Height เปน็ Fit contents 11. จะเหน็ ไดว้ ่า ขนาดของ row-banner จะหดตัวลงเหลือนิดเดียว หมายเหตุ : Fit contents คือการปรับให้คา่ ความสงู มีความยดื หยุ่นตามขนาดของวัตถุ เม่ือใสว่ ัตถเุ ขา้ ไป 12. ข้นั ตอนต่อไป พมิ คน้ หา Component ท่ีมีชอื่ ว่า “image” 13. ใหล้ าก Image มาวางไวใ้ นเลเยอรข์ อง row-banner (คลกิ เมา้ สซ์ ้ายลาก) หมายเหตุ : ใหส้ ังเกตแถบสสี ้ม จะตอ้ งอยู่ฝั่งซ้ายของเลเยอร์row-banner เทา่ นน้ั v 14. หากท่านวางถูกต้อง ลำดับของเลเยอร์image จะตอ้ งอยู่ในเลเยอร์row-banner เท่านนั้ 15. เปล่ียนช่อื image1 ใหเ้ ป็นชอ่ื img-logo 16. ในส่วนของ Property Picture เมอื่ คลิกทชี่ ่องแลว้ ใหเ้ ลือก Upload Files 17. เข้าโฟล์เดอร์ thunkable > img > เลอื กไฟลท์ ีช่ ื่อวา่ img-logo.png > กด Open 18. เมอื่ อพั โหลดเสร็จสน้ิ ระบบจะมีแจง้ เตือนใหท้ ราบทม่ี ุมขวาบนของหนา้ จอ 19. ให้เราไปสังเกตที่โทรศัพท์มือถือของเรา ที่ทำการ Live Test ไว้ตั้งแต่ข้างต้น จะสังเกตได้ว่า รูปภาพที่เราอัพ โหลดไปน้ัน ขนาดของรปู ภาพยังผดิ เพ้ียนอยู่ 29 | P a g e

20. ให้ปรับ Property ของ img-logo โดยกำหนดให้ มคี ่าเทา่ กับ 30 Height Absolute Size มีค่าเท่ากับ 160 Width Absolute Size มีค่าเท่ากับ 10 px Margin Top มีค่าเทา่ กับ 10 px v Bottom 21. เม่อื กำหนดค่า Property เสร็จสิ้นตามข้างต้นแลว้ จะเสรจ็ ในส่วนโลโก้แบนเนอรข์ องแอปพลิเคชัน หมายเหตุ : Layout (row-banner) เราจะไมส่ ามารถมองเหน็ ไดด้ ว้ ยตาเปล่า หากตอ้ งการท่จี ะมองเหน็ Layout เราจำเปน็ จะต้อง ใส่สใี หม้ ัน 30 | P a g e

รูปภาพสาหรบั ประชาสัมพนั ธต์ ่างๆ 1. คลิกทีร่ ปู สามเหลยี่ ม เพือ่ พับเกบ็ Component ตา่ งๆ ท่ีอยู่ใน row-banner 2. คน้ หา Component ท่ีช่อื วา่ “Row” 3. ลาก Component Row มาวางต่อกับ row-banner หมายเหตุ : ให้สังเกตแถบสสี ม้ จะต้องอยู่ด้านลา่ งของ row-banner เทา่ น้นั 4. เปลีย่ นชื่อ Row เปน็ “row-section-1” 5. ปรับค่า Height ให้เป็น “Fit contents” 6. ผลลพั ธ์ที่ไดจ้ ะออกมาดังรปู น้ี หมายเหตุ : Fit contents คอื การปรับให้ค่าความสงู มีความยืดหยุ่นตามขนาดของวัตถุ เมือ่ ใสว่ ัตถเุ ขา้ ไป v 7. ค้นหา Component ทช่ี ่อื ว่า “Image” 8. ลาก Component image มาวางตอ่ กับ row-section-1 หมายเหตุ : ให้สังเกตแถบสสี ้มจะต้องอยู่ดา้ นข้างซ้าย ของ row section-1 เท่าน้นั 9. เมอ่ื ลาก image มาแล้ว จะได้ผลลพั ธ์ตามรปู ดังน้ี (image จะต้องอย่ใู น row-section-1 เท่านั้น) 31 | P a g e

10. คลกิ เลือก image1 เปล่ียนชือ่ ใหม่เป็น “img-cover” 11. ในสว่ นของ Property Picture เมือ่ คลกิ ทีช่ ่องแลว้ ใหเ้ ลือก Upload Files 12. เขา้ โฟล์เดอร์ thunkable > img > เลอื กไฟลท์ ่ชี อ่ื ว่า img-cover.png > กด Open 13. เมอ่ื อัพโหลดเสรจ็ ส้นิ ระบบจะมีแจ้งเตือนให้ทราบท่ีมุมขวาบนของหน้าจอ 14. ให้ปรบั Property ของ img-logo โดยกำหนดให้ Height Absolute Size มคี า่ เท่ากบั 200 v มีค่าเท่ากับ 400 Width Absolute Size 15. ให้ปรบั Property ของ img-logo โดยกำหนดให้ Margin-Top 10px Margin-Bottom 10px 16. ตอ่ มาคลกิ ที่เลเยอร์row-section-1 17. ในสว่ นของ Property ใหห้ าคำวา่ BackgroundColor และคลกิ เขา้ ไปตั้งคา่ สีใหเ้ ป็น 333 32 | P a g e

18. เมอ่ื กำหนดคา่ Property เสรจ็ ส้ินตามข้างตน้ แลว้ ท่านจะได้รูปแบบหน้าตาของแบนเนอร์ดงั นี้ หมายเหตุ : รปู ฝ่งั ซ้ายคือหนา้ Design บนคอมพวิ เตอร์ / ฝง่ั ขวาคอื รูปจาก Live Test บนโทรศพั ท์ v 33 | P a g e

กล่องขอ้ ความสาหรบั กรอกขอ้ มลู และปมุ สาหรับกดยนื ยัน 1. ค้นหา Component ทชี่ อ่ื ว่า \"Column\" 2. ลาก Components Column มาวางตอ่ จาก row-section-1 หมายเหตุ : ใหส้ ังเกตแถบสีส้ม จะต้องอย่ดู ้านลา่ งของ row-section-1 เทา่ นั้น 3. เปล่ียนชอ่ื Column1 ให้เปน็ ช่อื “col-body” 4. ในสว่ นของ Property ให้หาคำวา่ BackgroundColor และคลิกเขา้ ไปตง้ั คา่ สีให้เป็น e5e5e5 v 5. ตอ่ มาต้งั คา่ Property ของ col-body โดยเลือก Vertical Alignment ใหเ้ ปน็ \"top\" หมายเหตุ : Vertical Alignment คือ การปรบั ตำแหน่งในแนวตั้ง (แกน Y) Horizontal Alignment คือ การปรับตำแหน่งในแนวนอน (แกน X) 6. ตอ่ มาค้นหา Component ที่ชื่อวา่ “Column” อีกครงั้ 7. ลาก Components Column มาวางไว้ใน col-body หมายเหตุ : ใหส้ ังเกตแถบสีส้ม จะต้องอยดู่ ้านขา้ งซ้าย ของ col-body เท่าน้ัน 8. เปลีย่ นชือ่ Column1 ให้เป็นชอ่ื “col-news-1” 9. ตง้ั คา่ Property ของ col-news-1 โดยปรบั Height ใหเ้ ป็น “Fit contents” 34 | P a g e

10. ต้งั ค่า Property ของ col-news-1 โดยปรบั BackgroundColor ให้เปน็ FFC400 11. ผลลพั ธ์ทไ่ี ดห้ ลงั จากการต้ังคา่ Fit contents และต้งั คา่ BackgroundColor 12. ต่อมา ตงั้ คา่ Property ของ col-news-1 โดยปรบั ดงั นี้ Margin Margin-Top 20px Margin-Bottom 0px Margin-Left 20px Margin-Right 20px Padding-Top 10px Padding-Bottom 10px Padding-Levft 10px Padding-Right 10px หมายเหตุ : Margin คือ การขยายขอบเขตออกไปนบั ตง้ั แต่ ส่วนนอกของวตั ถุ (การตง้ั ค่าระยะหา่ ง) Padding คือ การขยายขอบเขตออกไปนบั ต้ังแต่ ส่วนในของวตั ถุ (การทำให้วัตถกุ ว้างข้นึ ) 35 | P a g e

13. ต่อมา ตัง้ คา่ Property ของ col-news-1 โดยปรับ border radius ใหเ้ ป็น 10 หมายเหตุ : border radius คือ การทำใหข้ อบมีความโคง้ มน ยิง่ ค่ามากเทา่ ไร ขอบกจ็ ะโคง้ มนมากยิ่งขน้ึ 14. และในขั้นสุดท้าย ตง้ั ค่า Property ของ col-news-1 โดยปรบั Horizontal Alignment ให้เปน็ Left 15. ต่อมา คน้ หา Components ทมี่ ีช่อื ว่า label 16. ลาก Components Label มาวางไว้ใน col-news-1 หมายเหตุ : ใหส้ งั เกตแถบสสี ้ม จะต้องอยดู่ า้ นข้างซ้าย ของ col-news-1 เท่านน้ั 17. เปลยี่ นชอื่ Label1 ให้เปน็ ชอื่ “lb-search” 18. ตำแหน่งเลเยอร์ตอนนจี้ ะตอ้ งเป็นไปตามรปู ด้านล่างนี้เทา่ น้ัน -col-body -col-news-1 - Ib-search v 19. ต่อมา ตง้ั ค่า Property ของ lb-search โดยตั้งคา่ Text ใหเ้ ป็นคำว่า Insert data 20. ตง้ั ค่า Font Size ให้เปน็ 24 และตง้ั คา่ Font Weight ให้เป็น Bold หมายเหตุ : Font Size คือ การเซ็ทขนาดตวั อกั ษร Font Weight คือ การเซท็ ความหนาของตวั อักษร 21. คน้ หา Components ที่ชอ่ื วา่ Row 22. ลาก Components Row มาวางไวใ้ น col-news-1 โดยให้ตอ่ จาก lb-search (อยู่ด้านลา่ งของ lb-search) หมายเหตุ : ให้สงั เกตแถบสีส้ม จะตอ้ งอยดู่ ้านล่าง ของ lb-search เทา่ นัน้ 36 | P a g e

23. เปล่ียนชอ่ื Row ให้เปน็ ช่ือ “row-txt-btn” 24. ตั้งค่า Property ของ row-txt-btn โดยปรบั ค่า Height ใหเ้ ปน็ Fit contents 25. คน้ หา Components ทชี่ อ่ื วา่ textinput 26. ลาก Components Text Input มาวางไว้ใน row-txt-btn หมายเหตุ : ใหส้ ังเกตแถบสีส้ม จะตอ้ งอยูด่ ้านขา้ งซ้าย ของ row-txt-btn เทา่ น้ัน 27. เปลี่ยนชือ่ Text_Inpvut1 ให้เป็นช่ือ “txt-data” 28. ตัง้ คา่ Property ของ txt-data โดยปรบั ให้Width มีค่าเป็น Fill container หมายเหตุ : Fill container คือ การขยายใหเ้ ต็มพ้ืนท่ี ที่มีอยู่ 29. ตงั้ คา่ Property ของ txt-data โดยปรับ Padding ดังน้ี 30. ปรบั คา่ Border Radius ให้เปน็ 10 37 | P a g e

31. ต่อมาเลือก Advanced โหมด > เลอื ก Styling 32. เลือก Background > และปรบั คา่ สีให้เปน็ FFF (สีขาว) 33. คน้ หา Components ทมี่ ชี ื่อว่า button 34. ลาก Components Button มาวางไว้ล่าง txt-data หมายเหตุ : ใหส้ งั เกตแถบสสี ้ม จะตอ้ งอยดู่ ้านล่าง ของ txt-data เทา่ นัน้ 35. เปล่ียนช่อื Button1 ให้เป็นชื่อ “btn-commit” 36. ต้ังค่า Property ของ btn-commit โดยปรบั Text เป็นขอ้ ความวา่ commit Text Color ปรบั สเี ปน็ ค่า FFF (สีขาว) BackgroundColor ปรบั สเี ปน็ คา่ 000 (สีดำ) v 37.ต้ังค่า Property ของ btn-commit โดยปรับ Padding ตามน้ี 38 | P a g e

38. ต้งั คา่ Property ของ btn-commit โดยปรับ Border Radius ให้เป็น 10 39. เสร็จสิน้ การสร้างกลอ่ งข้อความสำหรับกรอกข้อมลู และปมุ่ สำหรับกดยืนยนั v 39 | P a g e

กล่องข้อความสาหรบั แสดงขอ้ ความตวั อกั ษร 1. คน้ หา Component ทชี่ อ่ื วา่ “Column” อกี ครง้ั 2. ลาก Components Column มาวางไว้ใน col-body โดยใหอ้ ยูด่ ้านลา่ งตอ่ จาก col-news-1 หมายเหตุ : ใหส้ งั เกตแถบสีส้ม จะต้องอยดู่ ้านล่างต่อจาก col-news-1 เท่าน้นั 3. เปล่ยี นชื่อ Column1 ให้เปน็ ช่ือ “col-news-2” 4. ต้ังค่า Property ของ col-news-2 โดยปรับ Height ใหเ้ ปน็ Fit contents 5. ต้งั คา่ Property ของ vcol-news-2 โดยปรับ BackgroundColor ให้เปน็ ค่าFFC400 6. ต้งั ค่า Property ของ col-news-2 โดยปรับ Horizontal Alignment เปน็ คา่ Left 7. ตง้ั คา่ Property ของ col-news-2 โดยปรับ Margin และ Padding ดังนี้ 8. ตง้ั คา่ Property ของ col-news-2 โดยปรับ Border Radius ให้เป็น 10 9. ต่อมา ค้นหา Components ที่มีชอื่ วา่ label 40 | P a g e

10. ลาก Components Label มาวางไวใ้ น col-news-2 หมายเหตุ : ให้สังเกตแถบสีส้ม จะตอ้ งอยู่ด้านขา้ งซ้าย ของ col-news-2 เทา่ น้ัน 11. เปลย่ี นช่อื Label1 ให้เป็นชือ่ “lb-output” 12. ตัง้ คา่ Property ของ lb-output โดยปรบั Text ให้เปน็ ข้อความว่า Text from insert Font Size ขนาด 24 13. ต้งั ค่า Property ของ lb-output โดยปรบั Font Weight ใหเ้ ปน็ Bold 14. เสรจ็ ส้นิ ในส่วนของการออกแบบหน้าดีไซตท์ ั้งหมด v 41 | P a g e

v 42 | P a g e