Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

การสร้าง Apps for Android ด้วย MIT App Inventor

13.532 Aufrufe

Veröffentlicht am

การสร้าง Apps for Android ด้วย MIT App Inventor โดย อ.สมชาติ แผ่อำนาจ
Workshop การสร้าง Apps For Android สำหรับค่ายวิทยาศาสตร์นักเรียนห้องเรียนพิเศษวิทยาศาสตร์ เครือข่ายภาคเหนือตอนบน 6-9 ต.ค. 2556 ณ โรงเรียนแม่สะเรียง "บริพัตรศึกษา"

การสร้าง Apps for Android ด้วย MIT App Inventor

  1. 1. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ คูมือการอบรม การสราง Apps for Android ดวย MIT App Inventor จัดทําโดย อ.สมชาติ แผอํานาจ ตําแหนง ครู วันที่ 6-9 ตุลาคม 2556 คายวิทยาศาสตรนักเรียนหองเรียนพิเศษวิทยาศาสตร ระดับชั้น ม.5 เครือขายกลุมภาคเหนือตอนบน ณ โรงเรียนแมสะเรียง “บริพัตรศึกษา” อ.แมสะเรียง จ.แมฮองสอน ~0~
  2. 2. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ สิ่งที่จะไดเรียนรูในบทเรียนนี้ 1. การตั้งคาและเปดใชงานโปรแกรม MIT App Inventor 2. การใชงานโปรแกรม MIT App Inventor และการทดสอบโปรแกรมผาน Emulator 3. การเขียนโปรแกรม แกไขโปรแกรมดวย Block Editor 4. การดาวนโหลดแอพไปใชงาน การตั้งคาและเปดใชงานโปรแกรม MIT App Inventor 1. เริ่มตนคัดลอก AppInventor46ict version 2.zip ไปวางไวใน C: ก็จะได C:AppInventor 2. เปดโฟลเดอร C:AppInventor แลวดับเบิ้ลคลิกรันไฟล a. startAI.cmd เพื่อรันโปรแกรม b. launch-buildserver32.cmd (32bit) หรือ launch-buildserver.cmd (64bit) เพื่อ จําลองเซอรเวอรในเครื่องเราเอง 3. เปดเว็บBrowser แลวพิมพ URL คือ localhost:8888 จากนั้นกรอกอีเมล แลวกด Login ~1~
  3. 3. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 4. ก็จะเขาสูหนาตางเพื่อเริ่มการทํางาน ดังรูป การใชงานโปรแกรม MIT App Inventor 1. อธิบายหนาตาของโปรแกรม  สวนเมนูหลัก ประกอบดวย คําสั่ง โปรเจก ออกแบบ และเรียนรู  สวนเมนูโปรแกรม ประกอบดวย คําสั่ง สราง ลบ ดาวนโหลดทุกโปรเจก งานอื่นๆ เชน ดาวนโหลด อัพโหลด  สวนพื้นที่แสดงโปรเจ็ก 2. คลิกปุม สราง เพื่อสรางโปรเจกใหม และตั้งชื่อโปรเจก เชน MyApp (ตองใชภาษาอังกฤษ) 3. เขาสูหนาโปรเจก องคประกอบดังนี้ ~2~
  4. 4. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 4. ตั้งคาพื้นหลังของแอพของหนา Screen 1 โดยกําหนดพื้นหลังเปนรูปภาพ คลิกเปลี่ยน Backgroundimages บนแท็บ คุณสมบัติ ~3~
  5. 5. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 5. แนะนําเครื่องมือสําหรับการทํางาน ในการสรางวัตถุ ออกแบบหนาตา Apps Basic แท็บพื้นฐาน Button = ปุมสําหรับกด Canvas = พื้นที่วาง CheckBox= เช็คเลือก Clock = แสดงเวลา Image = เลือกรูปภาพ Label = ใสขอความ ListPicker = สําหรับรายการเลือก PasswordTextBox = รหัสผาน Slider = สไลด TextBox = กลองขอความ TinyDB = ฐานขอมูล 6. คลิกปุม Label ลากมาวางบน Screen1 และแกไข คุณสมบัติ Text แกเปน “บทเรียน คอมพิวเตอรชวยสอน” , เปลี่ยนสีขอความ(TextColor) สีพื้นหลัง(Background) และขนาด ขอความ(FontSize) 7. เปลี่ยนชื่อตัวแปรสําหรับ Label1 เปน Title ~4~
  6. 6. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 8. แทรกรูปภาพของบน Apps คลิกลาก Images มาวางบน Screen1 จากนั้นอัพโหลดไฟลรูปโดย คลิก Picture > อัพโหลด > เลือกไฟล หาไฟลที่ตองการจากนั้นกด เปด แลวกด ตกลง 9. การแทรกปุมสําหรับคลิก คลิกลาก Button มาวางบน Screen1 แลวแกไขคุณสมบัติ อัพรูปภาพ ไปแทนที่ปุม คลิก Images > อัพโหลด > เลือกไฟล จากนั้นเปลี่ยนชื่อปุม เปน BtSearch ~5~
  7. 7. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ การเขียนโปรแกรม แกไขโปรแกรมดวย Block Editor 1. คลิกแท็บ เปดตัวแกไขบล็อก บนเมนูดานบน 2. มันก็จะดาวนโหลดไฟล Java ไวในเครื่องใหกด ยอมรับ แลวเปดไฟล 3. หนาตาของ Block Editor สําหรับเขียนโปรแกรม คลิกที่ My Blocks เพื่อดูวามีวัตถุอะไรบางที่ เราไดทําไว ไดแก Title Crete(ขอความ) Image1(รูปภาพ) และ BtSearch(คนหา) 4. คลิกเลือก BtSearch แลว ลาก When BtSearch.Click do มาวางบนที่วาง ~6~
  8. 8. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 5. คลิก Screen 1 แลวลาก set Screen1.BackgroundColor to มาวาง คลิกบนที่วาง เลือก Color > Red ใหไดดังรูป 6. คลิกปุม New emulator เลือก Emulator เปน emulator-5544 7. ลองทดสอบโปรแกรม คลิกปุม แลวจะเปลี่ยนสีพื้นหลังเปนสี ~7~
  9. 9. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ WorkShop สรางแอพหนังสือทองเที่ยว แมสะเรียง 1. สรางโปรเจกใหม ตั้งชื่อวา MaesariangBook 2. แท็บ สื่อ อัพโหลด ไฟลรูปภาพที่จะใชทําหนังสือทองเที่ยว ไฟลรูปภาพ 0-6 .jpg ทั้งหมด 3. ตั้งพื้นหลังของแอพ Screen1 เปน 0.jpg ~8~
  10. 10. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 4. ลาก Canvas มาใสบนพื้นที่ทํางาน แกไขชื่อ Canvas เปน Page แลวกด ตกลง 5. เปนพื้นหลังของ Canvas Page ใหเปนรูปภาพ 0.jpg 6. คลิกเปด Block Editor แลวเลือกคําสั่ง Page > Page.Flung ลากมาวางบนพื้นที่ทํางาน , ลาก ifelse then-do else-do มาตอชอง do ถามีการปดหนาซาย ใหภาพพื้นหลังเปลี่ยน (xvel<0)ตอคําสั่ง ใหไดดังรูป ~9~
  11. 11. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 7. ตั้งตัวแปรใหม คลิก Definition>variable ไวเก็บหนาปจจุบัน แลวตั้งชื่อ CurrentPage ใสคา 0 สรางอีกตัวแปรหนึ่งไวเก็บจํานวนหนาทั้งหมด แลวตั้งชื่อ TotalPage ใสคาขอมูล 6 8. ถามีการปดหนาโปรแกรมตองเพิ่ม CurrentPage +1 เปลี่ยนพื้นหลังเรียกใชงานตัวแปร CurrentPage .jpg 9. ถาปดหนาขวา โปรแกรมตองลดคา CurrentPage -1 เปลี่ยนพื้นหลังเรียกใชงานตัวแปร CurrentPage .jpg 10. กรณีที่ถึงหนาสูงสุดโปรแกรมจะทํางานตอไมไดดังนั้นตองตั้งคาใหเริ่มนับ 0 ใหม คําสั่ง If CurrentPage > TotalPage Then-do CurrentPage = 0 ดังนี้ ~ 10 ~
  12. 12. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 11. กรณีที่ปดขวาจนถึงหนาต่ําสุด โปรแกรมจะทํางานตอไมไดดังนั้นตองตั้งคาใหเปนคาสูงสุดของ หนาเพิ่มวนรอบ ~ 11 ~
  13. 13. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ 12. คําสั่งรวมทั้งหมดเปนดังรูป 13. สําเร็จแลวครับ แอพหนังสือทองเที่ยว แมสะเรียง สามารถปดหนาซาย-ขวาเพื่อดูขอมูลได ~ 12 ~
  14. 14. เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ # ขอเสนอแนะเพิ่มเติม บางทีเวลาไปเปดใชงานจริงภาพเล็กไมเต็มจอ ดังนั้นจึงตองใสคําสั่งเพิ่มให ปรับขยายตามขนาดของจอที่แตกตางกัน คําสั่งดังภาพ เกี่ยวกับผูจัดทํา นายสมชาติ แผอํานาจ ตําแหนง ครู โรงเรียนแมสะเรียง “บริพัตรศึกษา” จบปริญญาตรี สาขาวิทยาการคอมพิวเตอร มหาวิทยาลัยราชภัฏเชียงใหม จบป.บัณฑิตวิชาชีพครู มหาวิทยาลัยราชภัฏเชียงใหม (โครงการ สควค.) ติดตอครูสมชาติ แผอํานาจ เว็บบล็อก http://krusomchart.wordpress.com Facebook https://www.facebook.com/pages/คุณครูสมชาติ-แผอํานาจ/440481672663455 ขอขอบคุณ แหลงอางอิง  การสราง App invertor อ.ยุทธนา แมนผล https://plus.google.com/108787084391304065369/posts ~ 13 ~

×