ใบงานที่ 2 การสมัครใช้งาน Appinventer 2


      ใบงานที่ 2 การสมัครใช้งาน Appinventer 2

1. เราจะสามารถใช้ App Inventor ได้นั้น เราจะต้องมีบัญชีของ Google โดยการสมัครบัญชีของ Google คือ

  1. ตั้งชื่อภาพ Make a Google Account Step 1
            เปิดหน้าเว็บไซต์ของ Google. โดยอาจเป็นหน้าเว็บอะไรของ Google ก็ได้เช่น เว็บไซต์ Google Gmail Google+ Google Drive หรืออื่นๆ คลิก“ลงชื่อเข้าใช้” จากนั้นคลิก “สร้างบัญชี” เมื่อคลิกแล้ว คุณจะเข้าสู่หน้า “สร้างบัญชี Google ของคุณ”
    • หน้าตาของปุ่มอาจแตกต่างกันไปตามหน้าเว็บบริการของ Google ที่คุณเข้า ตัวอย่างเช่น หากคุณสมัครผ่านเว็บไซต์ Gmail ปุ่มจะขึ้นว่า “สร้างบัญชี” แทนที่จะเป็น “สมัครสมาชิก”


  2. ตั้งชื่อภาพ Make a Google Account Step 2
            ตั้งชื่อผู้ใช้งาน. ในการตั้งค่าพื้นฐาน ชื่อผู้ใช้งานของคุณจะปรากฏเป็นชื่อบัญชี  Gmail ของคุณ คุณสามารถคลิกลิงค์ด้านล่างช่องอีเมล์เพื่อสร้างบัญชี Google โดยใช้อีเมล์ที่มีอยู่แล้วเพื่อไม่ต้องสมัครอีเมล์ใหม่
    • หากคุณยังไม่มีอีเมล์ของ Gmail คุณจะไม่สามารถเลือกขั้นตอนนี้ได้ คุณต้องสมัคร Gmail เสียก่อน
    • หากชื่อผู้ใช้ของคุณมีคนใช้ไปแล้ว จะมีตัวเลือกชื่อต่างๆ ที่คล้ายกันให้คุณเลือก หรือคุณอาจลองตั้งชื่ออื่นดูก็ได้   


  3. ตั้งชื่อภาพ Make a Google Account Step 3
           กรอกข้อมูลที่จำเป็นให้ครบถ้วน. คุณต้องใส่ชื่อ นามสกุล วันเกิด(เพื่อยืนยันอายุ) เพศ หมายเลขโทรศัพท์เผื่อในกรณีที่คุณไม่สามารถเข้าบัญชีของตัวเองได้ และอีเมล์ยืนยัน คุณต้องระบุประเทศที่คุณอยู่ด้วย
    • หมายเลขโทรศัพท์ไม่ใช่ข้อมูลบังคับ แต่ก็แนะนำให้คุณกรอกไปด้วยเผื่อในกรณีฉุกเฉิน 
     

  4. ตั้งชื่อภาพ Make a Google Account Step 4
           กรอกตัวหนังสือ CAPTCHA. ขั้นตอนนี้เป็นการยืนยันว่าผู้สมัครเป็นคนจริงๆ หากคุณอ่านตัวหนังสือไม่ออก กดปุ่มรีเฟรชข้างๆ ช่องว่างเพื่อขอ CAPTCHA ใหม่ หรือคลิกปุ่มลำโพงเพื่อให้คอมพิวเตอร์ออกเสียงให้ฟังก็ได้
     

  5. ตั้งชื่อภาพ Make a Google Account Step 5
           ยอมรับข้อกำหนดในการให้บริการและนโยบายส่วนบุคคล. ใช้เวลาอ่านนโยบายส่วนบุคคลทั้งหมด เพื่อทราบว่า Google สามารถหรือไม่สามารถทำอะไรกับข้อมูลส่วนตัวของคุณได้บ้าง กดตกลงในช่องหากคุณยอมรับข้อกำหนดในการใช้บริการของ Google 
  6. ตั้งชื่อภาพ Make a Google Account Step 6

           คลิก “ขั้นตอนต่อไป”. คุณจะเข้าสู่หน้าการสร้างโปรไฟล์ Google+ เมื่อคุณสมัครบัญชี Google แล้ว บัญชี Google+ ของคุณจะถูกสร้างขึ้นด้วยโดยอัตโนมัติ คุณอาจเลือกเพิ่มรูปลงในบัญชีของคุณหรือไม่ก็ได้ 

  7. ตั้งชื่อภาพ Make a Google Account Step 7
          คลิกเพื่อเริ่มต้น ขณะนี้บัญชี Google. ของคุณถูกสร้างขึ้นเรียบร้อยแล้ว คุณสามารถคลิกเพื่อย้อนกลับไปหน้าหลักของ Google หรือลองสำรวจบริการอื่นๆ ของ Google ดู ในขณะที่คุณเข้าชมเว็บไซต์ต่างๆ ของ Google นั้น คุณจะอยู่ในระบบโดยอัตโนมัติ
                                          อ้างอิงจาก http://th.wikihow.com

2.การเข้าใช้ Mit App inventer


1.มาเข้าไปที่เว็บไซต์ http://ai2.appinventor.mit.edu/
 2.ลงชื่อเข้าใช้ จะได้หน้าจอดังภาพข้างล่าง



3.กด new project เพื่อทำการสร้างโปรเจคใหม่โดยตั้งชื่อโปรแจค

                                   อ้างอิงจากhttp://www.อาจารย์เปรม.com


3.การติดตั้งMIT App Inventor


 สิ่งที่ต้องเตรียมความพร้อมก่อนใช้งาน App Inventor คือ
  1. เครื่องคอมพิวเตอร์ และ ระบบปฏิบัติการ
  2. เบราว์เซอร์ ที่ติดตั้ง Java
  3. โปรแกรม App Inventor Setup
  4. ไดรเวอร์ของโทรศัพท์ Android (เฉพาะ Windows)
รายละเอียด
ระบบปฏิบัติการใช้ได้ทั้ง Windows, Mac OS, Linux ส่วนเบราว์เซอร์ (Browser) มีอยู่หลายโปรแกรมดังนี้ (ควรใช้เวอร์ชั่นล่าสุด)
  • Mozilla Firefox 3.6 or higher ถ้าใช้ NoScript extension ต้องปิดการใช้งานตัวนี้ก่อน
  • Apple Safari 5.0 or higher
  • Google Chrome 4.0 or high
  • Microsoft Internet Explorer 7 or higher
App Inventor ต้องใช้ Java 6 (Java 1.6) ขึ้นไป ถ้าไม่มีสามารถดาวน์โหลดได้ที่  http://www.java.com เมื่อติดตั้งเรียบร้อยแล้ว สามารถทดสอบ Java ได้โดยคลิกที่ Java test page หรือ AppInventor Java test
จากนั้นติดตั้งโปรแกรม App Inventor Setup สำหรับ Windows ดาวน์โหลดและติดตั้งจากลิงค์นี้ AppInventor_Setup_Installer_v_1_2.exe (~92 MB)
การเตรียมพร้อมคอมพิวเตอร์ให้พร้อมใช้ App Inventor บน Windows  มีความยุ่งยากนิดหน่อย เนื่องจากต้องลงไดรเวอร์ของโทรศัพท์  ส่วน MAC OS หรือ Linux ไม่ต้อง
ถ้าโทรศัพท์ที่จะใช้ เป็นหนึ่งในรายการด้านล่างนี้ ก็ไม่ต้องติดตั้งไดรเวอร์ เพราะมันมาพร้อมกับโปรแกรม App Inventor Setup เรียบร้อยแล้ว
  • T-Mobile G1 / ADP1
  • T-Mobile myTouch 3G / Google Ion / ADP2
  • Verizon Droid (not Droid X)
  • Nexus One
  • Nexus S
ส่วนโทรศัพท์นอกเหนือจากนี้ ต้องติดตั้งไดรเวอร์ (USB driver) จากผู้ผลิตโทรศัพท์แต่ละยี่ห้อ ตรวจสอบได้ ที่นี่
วิธีตรวจสอบว่า ไดรเวอร์ได้ติดตั้งเรียบร้อยแล้ว
  • เปิดหน้าต่าง Command Prompt (cmd) เปลี่ยนไดเรกทอรี่ (cd) ไปยัง  C:\Program Files (x86)\AppInventor\commands-for-Appinventor สำหรับ Windows 32-bit หรือ C:\Program Files\AppInventor\commands-for-Appinventor สำหรับ Windows 64-bit
  • ต่อสาย USB ของโทรศัพท์มือถือเข้ากับคอมพิวเตอร์
  • ที่หน้าต่าง Command Prompt พิมพ์คำสั่ง adb devices จะเห็นข้อความ  daemon not running ตามด้วย daemon stated successfully และ ตามด้วยระหัสโทรศัพท์ที่ต่อกับคอมพิวเตอร์อยู่ เช่น HT99TP800054 แสดงว่าไดรเวอร์ทำงาน และคอมพิวเตอร์ก็สามารถติดต่อกับโทรศัพท์ได้แล้ว
  • แต่ถ้าไม่มีรายชื่อรายการโทรศัพท์เลย แสดงว่าไดรเวอร์ไม่ทำงาน ต้องลองลงไดรเวอร์ใหม่ อาจต้องหาข้อมูลในการลงไดรเวอร์โทรศัพท์รุ่นที่ใช้งานอยู่ ในเน็ต หรือลองดูที่ troubleshooting page หรือค้นจาก App Inventor User Forum ในหัวข้อ Getting set up and connecting your phone
สุดท้ายตรวจที่โทรศัพท์ดูว่าทำงานถูกต้องหรือยัง
1. แตะปุ่ม Home เพื่อไปยังหน้าต่าง Home
2. แตะปุ่ม Menu -> Settings -> Applications
3. ถ้าปรากฎ Unknown sources แตะเลือกที่กล่องสี่เหลี่ยม (ตามรูป)

phone-1
4. แตะเลือก Development
5. แตะเลือก USB Debugging และ Stay Awake

phone-21
จากนั้นต่อโทรศัพท์เข้ากับคอมพิวเตอร์ด้วยสาย USB จะเห็น 2 ข้อความปรากฎ บริเวณ notifications (ด้านบนของจอโทรศัพท์)
  • USB Connected หมายความว่าโทรศัพท์ต่อกับคอมพิวเตอร์แล้ว
  • USB Debugging Connected หมายถึง App Inventor ในคอมพิวเตอร์เข้าควบคุมโทรศัพท์ได้แล้ว

                                           อ้างอิง http://kidsangsan.com


 3.การใช้งาน MIT App Inventor

Appinventer2 สามารถใช้งานได้ผ่าน เบาร์เซอร์ต่างๆได้

  การออกแบบและแก้ไขบล็อกคำสัง


1. การสร้างแอพ มีอยู่สองโหมดที่ต้องสลับทำงานคือ โหมด Design สำหรับการออกแบบและโหมด Block สำหรับการต่อชุดคำสั่งให้ทำงานตามต้องการ


2.วัตถุที่ลากมาวางบนหน้า Design จะเรียกว่าคอมโพแนน (Component) โดยแตละคอมโพแนนจะประกอบด้วย Properties (คุณสมบัติ) และ Event (เหตุการณ์) และจะมีโคโพแนนบางตัวที่ไม่แสดงบนหน้าจอแต่จะทำงานด้านหลัง เช่น เสียง , การติดต่อกับอุปกรณ์มือถือ , วิดีโอ , sensor เป็นต้น


3. Properties (คุณสมบัติ) คือการบอกคุณสมบัติของคอโพแนนแต่ละตัวว่าเป็นยังไร เช่น ปุ่ม จะมีลักษระสีแดง ข้อความเขียนว่า ตกลง สีตัวอักษรสีขนาว ขนาดตัวอักษร 18 px เป็นตัวสามารถตั้งค่าในโหมด Design และโหมด Block


4. Event (เหตุการณ์) คือการสั่งให้คอมโพแนนทำงานตามที่เรากำหนดในชุดคำสั่ง เช่น เมื่อกดปุ่ม แล้วให้เปลี่ยนสีพื้นหลังของแอพ ซึ่งจะทำงานในส่วนของโหมด block


5.การเซพงานที่เรากำลังทำอยู่จะเซฟอัตโนมัติ แล้วสามารถเปิดได้ทุกที่ทีมีเน็ตผ่านเว็บเบราเซอร์ โดยใช้อีเมล์ gmail ของเรา Log in


4.การแพ็คแบ่งปันโปรแกรมประยุกต์


การทดสอบแอพที่เราสร้าง สามารถทำได้ 3 วิธี

1.ทดสอบผ่าน emulator หรือตัวจำลอง ที่ระบบให้มาเรียบร้อยต้องติดตั้งโปรแกรมเพิ่ม

2.ทดสอบผ่านมือถือแอนดรอย์​ โดยที่เราต้องโหลดแอพ mit ai2 Componion มาสแกนและต้องใช้ wifi ชุดเดียวกันกับเครื่องที่เราพัฒนา

3.save เป็นไฟล์​ APK แล้วมาทดสอบกับตัวจำลองอื่นๆ เช่น bulestack , genymotion

การเผยแพร่ผ่าน Play store 
แอพที่เราสร้างสามารถที่นำขึ้น Play store ได้ โดยต้องใช้คู่กับ keystore และต้องมี Google Account Devlopper ค่าสมัครสมาชิกตลอดอายุการใช้ 25$ หรือ 850 บาท

                                                         อ้างอิงhttp://ai2startup.blogspot.com

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

ใบงานที่ 1 หลักการและขั้นตอนการพัฒนาพัฒนาซอฟต์แวร์