พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (1)
พพัฒนา App งง่ายๆ ททท http://ibuildapp.com/ แอพ (App) คคืออะไร? แอพ (App) มาจากคค า วง่ า แอพพลลิ เ คชพัที่ น (Application) ความหมายโดยยง่ อ ๆ คคื อ “โปรแกรม ประเภทหนนที่ ง ททที่ ส รร้ า งขนขึ้ น เพคืที่ อ ใชร้ ง านบนโทรศพั พ ทท์ มคื อ ถคื อ (โทรศพั พ ทท์ เ คลคืที่ อ นททที่ : Mobile Phone) หรคื อ คอมพลิวเตอรท์พกพา (แทบเลล็ต : Tablet)” การสรร้ า ง /การเขท ย นหรคื อ การพพั ฒ นาแอพมท ห ลายวลิ ธท ตพัขึ้ ง แตง่ วลิ ธท พคืขึ้ น ฐานโดยการเขท ย นคค า สพัที่ ง ตง่ า งๆ เหมาะกพับผผร้ททที่มทความรผคร้ วามสามารถในการเขทยนโปรแกรม วลิธทนทขึ้จะพพัฒนาใหร้ไดร้ตามความตร้องการ จนถนงวลิธกท าร เขทยนหรคือพพัฒนาผง่านโปรแกรมททที่พพัฒนาขนขึ้นสคาหรพับการพพัฒนาแอพ ทคาใหร้งง่ายสรร้างหรคือพพัฒนาไดร้อยง่างรวดเรล็ว ผผร้พพัฒนาอาจไมง่ตร้องมทความรผร้ในการเขทยนโปรแกรมมากนพักหรคือไมง่มทความรผร้ในการเขทยนโปรแกรมเลยกล็สามารถ จะพพัฒนาไดร้ เพทยงแตง่เรทยนรผร้การใชร้งานเครคืที่องมคือตง่างๆ มททพัขึ้งโปรแกรมททที่ตลิดตพัขึ้งลงเครคืที่องคอมพลิวเตอรท์แลร้วคง่อย ลงมคือพพัฒนา หรคือสามารถพพัฒนาผง่านเวล็บไซตท์ไดร้เลย การเตรทยมกง่อนพพัฒนาแอพ กง่อนททที่จะกระทคาการใดๆ ควรมทการวางแผนหรคือเตรทยมการกง่อน ในเอกสารฉบพับนทขึ้จะสาธลิตวลิธทการใชร้ เครคืที่องมคือเพทยง 3 อยง่างคคือเวล็บลลิงคท์ หนร้าเวล็บเพจ (HTML) กพับวลิดโท อจากเวล็บไซตท์ Youtube 1. สมพัค รอทเ มลใหร้ เ รทย บรร้ อ ยหรคื อ ถร้ า มท บพั ญ ชท ผผร้ ใ ชร้ Facebook กล็ ไ มง่ จค า เปป็ น (ในความเปป็ น จรลิ ง จะสมพั ค ร Facebook ไดร้ตร้องมทอทเมลอยผง่แลร้ว) 2. กคาหนดเรคืที่องและเนคืขึ้อหาททที่จะพพัฒนาแอพ • ภาพไอคง่อน (Icon) หรคือโลโก (Logo) ของแอพ ขนาด 400 x 300 px หรคือ 516 x 72 px (ขนขึ้นอยผง่กพับตร้นแบบดร้วย) • ภาพพคืขึ้นหลพังของแอพ • หนร้าเวล็บเพจหรคือวลิดทโอจากเวล็บไซตท์ Youtube ททจที่ ะลลิงคท์ไปหา 3. ฯลฯ
http://ibuildapp.com/ เปป็น เวล็ บ ไซตท์ สค า หรพับ พพั ฒ นาแอพ มท ทพัขึ้ ง ใหร้ พพั ม นาไดร้ ไ ดร้ ฟ รท แตง่ ถร้ า ตร้ อ งการพพั ฒ นาอยง่ า งจรลิ ง จพั ง หรคื อ ใชร้ศพักยภาพททที่ทางเวล็บไซตท์ ibuildapp.com จพัดเตรทยมไวร้ใหร้อยง่างเตล็มททที่ตร้องเสทยงเงลิน การททที่จะสรร้างแอพไดร้ ตร้องสมพัครสมาชลิกหรคือเขร้าระบบกง่อน การเขร้าระบบสามารถใชร้ Username และ Password ของ Facebook ไดร้ การสมพัครสมาชชิก 1. เปปิดเวล็บไซตท์ http://ibuildapp.com/ 2. คลลิ ก ททที่ Login / Register (อยผง่ มมุ ม บนดร้ า นขวามคื อ : อาจเปลทที่ ย นแปลงไปตามแตง่ ท างเวล็ บ ไซตท์ จะกคาหนด) ในขพัขึ้นตอนนทขึ้ถร้ามทบพัญชทของ Facebook สามารถใชร้บพัญชทของ Facebook ไดร้โดยคลลิกททที่ sing up with Facebook แตง่ในเอกสารฉบพับนทขึ้จะสาธลิตการสมพัครใหมง่
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (2)
3.
พลิมพท์อทเมล (ตร้องเปป็นอทเมลท์ทใทที่ ชร้งานไดร้จรลิง) และกคาหนดรหพัสผง่าน (Password) จากนพัขึ้นคลลิกททที่ปมุปุ่ม SIGN UP!
4. เลคืที่อนเมาสท์ไปททที่ Username ของเรา (อยผง่มมุมบนดร้านขวามคือ) จะสามารถ กคาหนดคง่าตง่างๆ ไดร้
การสรร้าง/หรคือการพพัฒนาแอพ 1.
คลลิกททที่ปมุปุ่ม Create New App
2. ในขพัขึ้ น ตอนนทขึ้ ร ะบบจะใหร้ เ ลคื อ กวง่ า จะพพั ฒ นาแอพสค า หรพั บ โทรศพั พ ทท์ ฯ หรคื อ แทล็ บ เลล็ ต ใหร้ เ ลคื อ กพพั ฒ นาแอพสค า หรพั บ โทรศพัพทท์ฯ (Phone App)
3. จะมทรผปแบบแอพตร้นแบบใหร้เลคือกใชร้จคานวนหนนที่ง ใหร้เลคือกททใที่ กลร้เคทยงกพับททที่ตร้องการ ใหร้คลลิกททที่รผปแบบ แอพททที่ใกลร้เคทยงกพับททที่ตอร้ งการ 4. คลลิกททที่ปมุปุ่ม Create App
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (3)
5. กคาหนดภาพหรคือสทพคืขึ้นของแอพ (ใชร้ภาพททที่ทางเวล็บไซตท์เตรทยมไวร้ใหร้ หรคือจะอพัพโหลดภาพททที่เตทยมไวร้ กล็ไดร้) 6. คลลิกททที่ปมุปุ่ม Continue
7. เลคือกและปรพับแตง่งแกร้ไขปมุปุ่ม โดยเลคืที่อนหาปมุปุ่มททที่ใกลร้เคทยง กพับความตร้องการ จากนพัขึ้นคลลิกททที่ปมุปุ่มนพัขึ้นๆ
8. คลลิกททที่ปมุปุ่ม Apply (หรคือจะปรพับแตง่งกง่อนกล็ไดร้) 9. พลิมพท์ขร้อความของปมุปุ่ม (หพัวขร้อททที่จะลลิงคท์ไป) 10. คลลิกททที่ปมุปุ่ม Save
*** ปมุปุ่มอคืที่นๆ ทคาตามขร้อ 7-10 จนครบทมุกปมุปุ่ม
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (4)
การลบปปปุ่ม หากมทปปปุ่มเกชินความตร้องการใหร้คลชิกททท ON (จะกลายเปป็น OFF) ปมุปุ่มนพัขึ้นกล็จะหายไป
11. คลลิกททที่ Tabs เพคืที่อปรพับแกร้ปมุปุ่มททที่อยผใง่ นแถบดร้านลง่าง 12. คลลิกททที่ไอคง่อนแรกเพคืที่อปรพับแตง่ง 13. พลิมพท์ชคืที่อปมุปุ่ม จากตพัวอยง่างจะทคาปมุปุ่มสคาหรพับดผรายละเอทยดของผผร้จดพั ทคา 14. เลคือกไอคง่อนททที่เหมาะสม 15. คลลิกททที่ปมุปุ่ม Save
16. ปปิดปปุ่มททที่ไมง่ตร้องการโดยคลลิกททที่ ON 17. คลลิกททที่ปมุปุ่ม Continue 18. ปป้อนขร้อความ (ชคืที่อแอพ) ซนที่งจะปรากฏบนหนร้าแรกของแอพ 19. คลลิกททที่ปมุปุ่ม Continue
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (5)
20. คลลิกเพคืที่อใสง่โลโก ททใที่ ดททที่หนนที่ง (แบบสทเหลทที่ยมดร้านเทง่าหรคือแบบสทที่เหลทที่ยมผคืนผร้า) 21. คลลิกภาพททที่จดพั เตรทยมไวร้ 22. คลลิกททที่ปมุปุ่ม Open 23. คลคืกททที่ปมุปุ่ม Continue
24. Continue อทกครพัขึ้ง (ในสง่วนของ SplashScreen ตร้องเสทยเงลิน) จะเขร้าสผง่สง่วนจพัดการเนคืขึ้อหา (Manage Content) ใหร้คลลิกททที่ปมุปุ่ม Home
การจพัดการเนคืนื้อหา การจพั ด การเนคืขึ้ อ หามท ห ลายรผ ป แบบ มท ฟฟี เ จอรท์ (Feature) ใหร้เลคือกใชร้จคานวนมาก เชง่น การจพัดการฟฟีเจอรร์ (Feature) ประเภท HTML 1. คลลิกปมุปุ่มททที่จะจพัดการเนคืขึ้อหา
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (6)
2. พลิมพท์หพัวขร้อเหมคือนกพับขร้อความบนปมุปุ่ม (พลิมพท์ไดร้ไมง่เกลิน 15 ตพัวอพักษร) 3. พลิมพท์รายละเอทยด (ใสง่รผปภาพประกอบไดร้) 4. คลลิกททที่ปมุปุ่ม Home
การจพัดการฟฟีเจอรร์ (Feature) ประเภท Web 1. คลลิกปมุปุ่มททที่จะจพัดการเนคืขึ้อหา 2. คลลิกททที่ Change feature
3. คลลิกททที่เวล็บ (Web)
4. คลลิกททที่ปมุปุ่ม Continue
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (7)
5. พลิมพท์หพัวขร้อ 6. คพัดลอกหนร้าเวล็บไซตท์ททที่ตอร้ งการมาวางลงในกรอบ Enter your website URL 7. คลลิกททที่ปมุปุ่ม Home
การจพัดการฟฟีเจอรร์ (Feature) ประเภทวชิดทโอจาก Youtube แบง่งการสาธลิตออกเปป็น 2 สง่วน ไดร้แกง่ 1. การคพัดลอกททที่อยผง่วลิดโท อจากเวล็บไซตท์ Youtube 2. การจพัดการฟฟีเจอรท์ (Feature) ประเภทวลิดโท อจาก Youtube
1. การคพัดลอกทททอยยง่วชิดโท อจากเวว็บไซตร์ Youtube 1. 2. 3. 4.
คร้นหาวลิดโท อ คลลิกไปยพังวลิดทโอ คลลิกททที่ไอคง่อนแชรท์ คพัดลอกททที่อยผง่ไฟลท์วลิดทโอ
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (8)
2. การจพัดการฟฟีเจอรร์ (Feature) ประเภทวชิดทโอจาก Youtube 1. คลลิกปมุปุ่มททที่จะจพัดการเนคืขึ้อหา 2. คลลิกททที่ Change feature
3. คลลิกททที่วดลิ ทโอ (Video List)
4. คลลิกททที่ปมุปุ่ม Continue
5. คลลิกททที่ปมุปุ่ม Add video 6. คลลิกปมุปุ่ม Youtube 7. ไฟคพัดลอกททที่อยผง่ไฟลท์วลิดโท อจากเวล็บไซตท์ Youtube จากนพัขึ้น วางลง 8. คลลิกททที่ปมุปุ่ม Add 9. เพลิที่มลลิงคท์ไฟลท์วลิดทโอไดร้จคานวนมาก โดยเรลิที่มขพัขึ้นตอนททที่ 5- 8 10. คลลิกททที่ปมุปุ่ม Home
การแทรกภาพ (ฟฟีเจอรร์ประเภท HTML) 1. คลลิกปมุปุ่มททที่ไอคง่อนผผร้จพัดทคา
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (9)
2. พลิมพท์หพัวขร้อเหมคือนกพับขร้อความบนปมุปุ่ม (พลิมพท์ไดร้ไมง่เกลิน 15 ตพัวอพักษร) 3. พลิมพท์รายละเอทยด 4. คลลิกททที่ไอคง่อน Upload Image
5. คลลิกไฟลท์ภาพททที่เตรทยมไวร้ 6. คลลิกททที่ปมุปุ่ม Open
7.
คลลิกททที่ปมุปุ่ม Home
เปลททยนชคืทอแอพ การพพัฒนาแอพดร้วย http://ibuildapp.com/ ระบบจะกคาหนดชคือที่ ใหร้อพัตโนมพัตลิ เชง่น AppName_1 เพคืที่อสคืที่อความเขร้าใจ เราอาจเปลทที่ยนเพคืที่อสคืที่อความเขร้าใจยลิที่งขนขึ้น 1. คลลิกททที่ Edit
2. พลิมพท์ชคืที่อแอพ (ภาษาอพังกฤษหรคือตพัวเลขเทง่านพัขึ้น) 3. คลลิกททที่เครคืที่องหมาย
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (10)
การใสง่ไอคง่อน (App Icon) 1. เลคืที่อนเมาสท์ไปททที่ ชคืที่อของเรา 2. คลลิกททที่ My Apps
3. คลลิกททที่ App Icon 4. คลลิกภาพททที่เตรทยมไวร้ 5. คลลิกททที่ปมุปุ่ม Open
6. กคาหนดบรลิเวณททที่ตอร้ งการ 7. คลลิกททที่ปมุปุ่ม Apply
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (11)
การปรพับปรปง/แกร้ไขสง่วนตง่างๆ 1. คลลิกททที่ Edit 2. - 3. คลลิกททที่หพัวขร้อตง่างๆ ตามททที่อยากปรพับแกร้
การนนาแอพไปตชิดตพันื้งในโทรศพัพทร์ฯ หรคือแทว็บเลว็ต 1. คลลิกททที่ Publish 2. คลลิกททที่ Download Your Test App
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35
พพัฒนา App งง่ายๆ ททที่ http://ibuildapp.com/ ---------------------------- (12)
3. คลลิกททที่ Download Android Build หรคือ 4. สง่งไปททที่อทเมล หรคือ 5. ใชร้โทรศพัพทท์หรคือแทล็บเลล็ต สแกน QR Code เพคืที่อดาวนท์โหลดและตลิดตพัขึ้ง
โดย นายสรวง ศรทแกร้วทมุม ศนกษานลิเทศกท์ สพม.เขต 35