Week 01

การพฒั นาโปรแกรมบน อปุ กรณ์พกพาเบอื3 งต้น แผนกคอมพวิ เตอรธ์ รุ กจิ 6mkbyur (3/1) , aniujvj (3/2) 087-7037650 Watcharapol Thima

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

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

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

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

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

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

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

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

ขนัE ตอนในการสรา้ งแอปพลิเคชนั “ทดสอบ ” กาํ หนดคณุ สมบตั /ิ ออกแบบวธิ กี ารใชง้ าน  เตรยี มขอ้ มลู Œความสามารถของแอป Ž  เลอื กคอมโพเนนท์ ’ Export เขยี นโคด้ วางแผน/ออกแบบโฟลว์ การทาํ งาน ‘ กาํ หนดพรอ็ พเพอรต์ ใNี หก้ บั คอมโพเนนต์

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

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

เตรียมความพร้อมก่อนใช้ Kodular  Ž Œ เครอOื งคอมพวิ เตอร์ โปรแกรมเบราเซอร์  Internet (Chrome, Firefox, Safari, Edge) บญั ชี Google โทรศพั ทม์ อื ถอื (Android)

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

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

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

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

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

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

หน้า Designer

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

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

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

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

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

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

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

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

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

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

หน้า Designer กาํ หนด/เปล9ียนช9ือคอมโพเนนท์ คลกิ ไอคอน ดนิ สอ Œเลอื กคอมโพเนนท์ Žกาํ หนดชอOื แลว้ คลกิ ป่มุ Rename

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

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

หน้า Block Editor

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

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

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

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

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

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

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

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

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

สร้างไฟลต์ ิดตงัE แอปพลิเคชนั ’คลกิ ป่มุ ตดิ ตงัN “คลกิ ป่มุ ‘เปิดสวติ ซเ์ พอOื อนุญาตใหต้ ดิ ตงัN ตดิ ตงัN ต่อไป แอปจากแหลง่ นNี แลว้ คลกิ ป่มุ Back ”คลกิ ป่มุ เสรจ็

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