บทที่ 1

อาจารยผ์ ู ส้ อน การพฒั นาโปรแกรมบน อุปกรณพ์ กพาเบอื้ งตน้ อ.จีระสิทธ์ิ อึง้ รัตนวงศ์ แผนกคอมพิวเตอรธ์ ุรกจิ 6mkbyur (3/1) , aniujvj (3/2) 062-5548444 pno-ball

Mobile Application หัวใจหลกั ของทำธุรกิจออนไลน์ในยุคปั จจุ บนั ประชากรไทย ใช้โทรศพั ทม์ ือถือ 67.9 ล้านคน 91.9 ล้านคน ใช้ smartphone 48.2 ล้านคน 52.44%

Mobile Application หวั ใจหลกั ของทำธุรกจิ ออนไลน์ในยุคปั จจุ บนั MOBILE DESKTOP 54.7% 82.1%

Week 1 หลักการพฒั นาโปรแกรมบน อุปกรณ์พกพาเบื้องต้น

วัตถปุ ระสงค์การเรยี นรู้ 1. มคี วามรูค้ วามเขา้ ใจเก่ยี วกบั แอปพลิเคชันบน อุปกรณ์พกพา 2. สามารถสรา้ ง User Interface ได้ 3. สามารถสร้างไฟล์ติดตงั้ และติดตัง้ แอปพลเิ คชัน บนอุปกรณ์พกพาได้ ส่ิงท่จี ะไดจ้ ากบทเรียนน้ี (T1-1) หนา้ Splash screen

การประยุกต์ใช้ Mobile Application ดา้ นการทอ่ งเท่ียว โรงแรม บริษทั ทวั ร์ ดา้ นอสงั หาริมทรัพย์ (Real Estate) (Tourism) ใช้ในการเก็บขอ้ มูลลูกคา้ การจอง การ สามารถดขู ้อมูลการจองท่ีพกั ขาย

การประยุกต์ใช้ Mobile Application ด้านการขายสนิ ค้า บริการ (Retail or Wholesale) ด้านภัตตาคาร ร้านอาหาร (Restaurant) นาเสนอเมนอู าหารและขายอาหารใน ในรูปแบบขายปลีกและสง่ หรอื การขาย รูปแบบท่ีทันสมยั ผ่านตัวแทน พนกั งานขาย

การประยุกตใ์ ช้ Mobile Application ด้านการแพทย์ สาธารณสขุ (Healthcare) ดา้ นการศึกษา (Education) นาเสนอคอรส์ วชิ าสอน บทความความรู้ ใหค้ าปรึกษาด้านสขุ ภาพ

ประโยชนข์ อง Mobile Application ดา้ นผูบ้ รโิ ภค ด้านผูใ้ ห้บริการ •ลดขนั้ ตอน และประหยัดเวลา ในการ ทาธุรกรรมตา่ งๆ เช่ น ต้องการโอน •ลดคา่ ใช้จ่ายในการผลติ ส่อื เงินค่าสนิ คา้ •เพ่ิมภาพพจนร์ า้ นให้ดดู ี มีจุดเดน่ มี •มตี วั เลือกท่ีหลากหลาย สามารถ จุ ดขายท่ีชั ดเจน เปรยี บเทยี บ คุณภาพ และราคาได้ •มีการบรกิ ารลูกค้าสมั พันธท์ ่ีดีขึน้ โดยท่ีไม่ต้องออกไปสารวจราคา– •ลดขนั้ ตอนการทางาน •ช่ วยลดเวลาในการเดนิ ทาง คานวณ เวลาได้ คน้ หาเสน้ ทางหรือแนะนา เล่ียงเส้นทางท่ีมกี ารจราจรตดิ ขดั ได้

ขนั้ ตอนในการสร้างแอปพลเิ คชัน กาหนดคุณสมบัต/ิ ออกแบบวธิ กี ารใช้งาน  เตรียมขอ้ มูล ทดสอบ ความสามารถของแอป     เลือกคอมโพเนนท์  Export เขยี นโค้ด วางแผน/ออกแบบโฟลว์ การทางาน  กาหนดพรอ็ พเพอร์ตีใ้ หก้ ับ คอมโพเนนต์

เคร่อื งมือในการพฒั นาและทดสอบแอปพลิเคชัน

รูจ้ ักกบั Kodular เคร่อื งมอื ออนไลน์ หรือเว็บไซต์ท่ีทกุ คน สามารถสรา้ งแอปพลเิ คชันได้ง่ายๆ โดยไม่ ต้องเรยี นรูก้ ารเขียนโปรแกรม เพียงแค่ลาก- วางบลอ็ ค มาตอ่ กนั แบบจก๊ิ ซอว์ สามารถ ออกแบบและสรา้ งแอปพลเิ คชันท่ที างานบน ระบบปฏิบัตกิ าร Android ไดอ้ ย่างรวดเรว็ .

เตรยี มความพรอ้ มกอ่ นใช้ Kodular    เคร่อื งคอมพวิ เตอร์ โปรแกรมเบราเซอร์  Internet (Chrome, Firefox, Safari, Edge) บญั ชี Google โทรศัพท์มอื ถือ (Android)

เร่มิ ต้นใช้บรกิ ารสรา้ งแอป เขา้ เวบ็ https://creator.kodular.io/

เร่มิ ต้นใช้บริการสรา้ งแอป ล็อกอนิ ด้วย Google หรอื สมัครใหม่

เร่ิมต้นสรา้ งแอปใหม่ คลิกท่ี Create project

เร่มิ ต้นสรา้ งแอปใหม่ หลักการตัง้ ช่ือโปรเจกต์ ตัง้ ช่ือโปรเจกต์ แลว้ คลิกปุ่ม Next • ตอ้ งขน้ึ ตน้ ด้วยอกั ษรภาษาองั กฤษ • หา้ มเวน้ วรรค หรอื เคร่อื งหมายอ่ืนใช้ได้ เฉพาะ _ (underscore) • ช่ือโปรเจกต์ กับช่ือแอปเป็นคนละช่ือกนั ได้ • ช่ือโปรเจกต์ สามารถเปล่ียนได้

เร่มิ ตน้ สรา้ งแอปใหม่ กาหนดค่าใหก้ บั แอป แล้วคลิก ปุ่ม Finish

หนา้ ต่างของ Kodular หนา้ Block Editor หนา้ Designer

หนา้ Designer

หนา้ Designer •เมนู และคาสั่งตา่ งๆ

หน้า Designer หน้ารวมโปรเจกต์ •เมนู Project นาเขา้ โปรเจกต์ หนา้ รวมโปรเจกต์

หนา้ Designer ทกสอบร่วมกบั แอป Kodular •เมนู Test Companion ผ่าน WIFI ยกเลิกการเช่ือมต่อระหว่าง ทดสอบโดยใช้สาย USB อุ ปกรณ์ท่ีใช้ทดสอบกับ คอมพวิ เตอร์ รีเฟรชหน้าจอแอปใหม่

หนา้ Designer Export ไฟล์ apk เพ่ือนาไปติดตงั้ จรงิ •เมนู Export บนอุปกรณ์มอื ถอื Export ไฟล์ aab

หน้า Designer •แถบจดั การหนา้ จอ ช่ือโปรเจกต์

หนา้ Designer • การเพ่ิมหน้าจอ กาหนดช่ือหนา้ จอ แล้วคลิก ปุ่ม Create

หน้า Designer •การคดั ลอกหน้าจอ กาหนดช่ือหนา้ จอ แล้วคลิก ปุ่ม Copy

หน้า Designer •การลบหนา้ จอ ยืนยนั การลบด้วยการ พมิ พ์ช่ือหนา้ จอ แลว้ คลิกปุ่ม Delete

หนา้ Designer •คอมโพเนนท์ 16 กล่มุ

หนา้ Designer แสดงคอมโพเนนต์ท่วี าง เรียกใช้งานคอมโพเนนท์ ลากวางไปในหน้าจอ

หนา้ Designer กาหนด/เปล่ียนช่ื อคอมโพเนนท์ คลิกไอคอน ดินสอ เลอื กคอมโพเนนท์ กาหนดช่ือ แลว้ คลกิ ปุ่ม Remove

หนา้ Designer ลบคอมโพเนนท์ คลิกไอคอน ถงั ขยะ เลือกคอมโพเนนท์ คลกิ ปุ่ม Delete

หนา้ Designer เปล่ียนสีพืน้ หลงั พร็อพเพอร์ตี้ของคอมโพเนนท์ ขนาดตัวอักษร การใช้งาน ความสงู ความกวาง

หนา้ Block Editor

หน้า Designer •บลอ็ กคาสงั่

หน้า Designer ลากบลอ็ กคาส่งั วางบนพื้นท่ี การใช้งานบล็อกคาสั่ง จะแสดงบนพื้นท่ี คลิกเลือกกลุ่มบล็ฮกคาส่งั

หนา้ Designer เม่ือต้องการเรียกใช้ แคค่ ลกิ กระเป๋ าเก็บบล็อกคาส่งั (Backpack) กระเป๋ า แลว้ เลือกชุดบล็อกคาส่งั ลากบล็อกคาส่งั วางบน กระเป๋ า

เลอื กรุน่ โทรศัพทจ์ าลองท่ตี ้องการ เปล่ยี นโทรศพั ทจ์ าลอง

ลบโปรเจกต์ ยืนยนั ด้วยพิมพช์ ่ือโปรเจกต์ แล้วคลกิ ปุ่ม Delete คลิกเมนู Project แลว้ เลอื ก Delete project

คลิกเพ่อื ดาวนโ์ หลด คลิกเพ่อื ลบ คลกิ ปุ่ม Assets หน้า Assets คลิกปุ่ม Upload เพ่อื อัปโหลดไฟล์

ทดสอบแอปพลเิ คชัน เปิดแอป Kodular แลว้ คลกิ ปุ่ม Scan QR Code คลกิ เมนู Test เลอื ก Connect to companion สแกน QR Code

สรา้ งไฟลต์ ดิ ตัง้ แอปพลเิ คชัน เปิดแอป Kodular แลว้ คลกิ ปุ่ม Scan QR Code คลิกเมนู Export เลอื ก Android App (.apk) จะไดไ้ ฟล์ QR Code สาหรบั ติดตัง้

สรา้ งไฟล์ตดิ ตัง้ แอปพลเิ คชัน ใหด้ าวน์โหลดไฟล์ apk เม่ือดาวนโ์ หลดเสร็จให้เปิด สแกน QR Code เพ่ือ ไฟล์ ดาวนโ์ หลดไฟล์ติดตงั้ ขะมีขอ้ ความเตือน ไม่ใหต้ ดิ ตัง้ แอปท่ีไมร่ ูจ้ กั น้ี ให้คลิกท่ี การตัง้ ค่า

สร้างไฟล์ติดตัง้ แอปพลเิ คชัน คลิกปุ่ม ติดตงั้ เปิดสวิตซ์เพ่อื อนญุ าตให้ตดิ ตงั้ คลิกปุ่ม แอปจากแหลง่ น้ี แล้วคลิกปุ่ม Back ตดิ ตัง้ ต่อไป คลิกปุ่ม เสร็จ

Workshop Splash Screen (T1-1) ให้สรา้ งหนา้ Splash Screen ด้วยโลโกแ้ ผนก และสร้างหนา้ แสดงช่ือ-สกลุ รหสั นักเรยี น โดยให้ Splash Screen หน่วยเวลา 3 วนิ าที เพ่อื เปล่ียนไปยังอีกหน้า