วันพฤหัสบดีที่ 14 พฤษภาคม พ.ศ. 2558

สิ่งที่ต้องรู้การเขียนแอพด้วย App inventor สำหรับมือใหม่

สิ่งที่ต้องรู้การเขียนแอพด้วย  App inventor สำหรับมือใหม่

1.  ทำงานบนเว็บ โดยต้องใช้อีเมล์ของ GMAIL ล๊อกอิน
เข้าทำงานได้ที่ http://ai2.appinventor.mit.edu

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

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

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

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

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

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

  •  ทดสอบผ่าน emulator หรือตัวจำลอง ที่ระบบให้มาเรียบร้อยต้องติดตั้งโปรแกรมเพิ่ม
  • ทดสอบผ่านมือถือแอนดรอย์​ โดยที่เราต้องโหลดแอพ  mit ai2 Componion  มาสแกนและต้องใช้ wifi ชุดเดียวกันกับเครื่องที่เราพัฒนา 
  • save เป็นไฟล์​ APK แล้วมาทดสอบกับตัวจำลองอื่นๆ เช่น bulestack , genymotion
8. แอพที่เราสร้างสามารถที่นำขึ้น  Play store ได้ โดยต้องใช้คู่กับ keystore และต้องมี Google Account Devlopper  ค่าสมัครสมาชิกตลอดอายุการใช้ 25$ หรือ 850 บาท


วันจันทร์ที่ 11 พฤษภาคม พ.ศ. 2558

ตอนที่ 4 คอนเซปของการสร้าง Mobile Application ด้วย App Inventor

การสร้าง Mobile Application แบบ Native App  อย่าง Android  หรือการเขียนแบบ Cross platform อย่าง Phonegap หรือ Cordova  ล้วนจะแบ่ง Concept เป็นสองส่วนด้วยกันคือ ส่วนของการออกแบบและส่วนของการเขียนชุดคำสั่ง





ในการเขีย Mobile Application ด้วย App inventor ก็เช่นกัน จะต้องประกอบการด้วยสองส่วนเช่นเดียวกัน แต่ส่วนของการเขียนชุดคำสั่งนั้นจะวางต่อ Block ลักษณะการต่อจิกซอล์แทน เรียกเป็นทางการว่า Block Programing  ดังนั้นในส่วนของชุดคำสั้งจะไม่ต้องเขียนโปรแกรมนั้นเอง




แต่ยังไงซะก็ต้องอยู่บนแนวคิดของการเขียนโปรแกรม (programing concept) โดยจะลักษณะการเขียนโปรแกรมเชิงวัตถุ ( object programing) คือแต่ละออบเจ็ต(ใน app inventor  จะเรียกว่า component) จะมีองค์ประกอบสองอย่างด้วยกันคือ Preperties หรือคุณสมบัติและ Event หรือเหตุการณ์ว่าสามารถทำอะไรยังไงได้บ้าง

แล้ว  component คืออะไร ? ว่ากันง่ายๆคืออะไรก็ตามที่ปรากฏอยู่บนหน้าจอ นั้นคือ Component และก็จะมี Component บางตัวที่ไม่แสดงบนหน้าจอ เช่นพวกเสียง เซ็นเซอร์ หรืออื่นๆ พวกนี้จะเรียกว่า non visible component ค่อยเรียนรู้ละกันน่ะ

เอาละ มาดูภาพประกอบเพื่อความเข้าใจเพิ่มขึ้นกัน



คุณสมบัติ (Preperties) คือ ลักษณะทางกายภาพของ component จากรูป อธิบายได้ดังนี้

  • Component พื้นหลัง  (screen1) มีคุณสมบัติ สีของพื้นหลังเป็นสี ดำ
  • Component ปุ่ม (button) มีคุณสมบัติคือ นำรูปภาพสวิสต์เปิดปิด แทนปุ่ม
  • Component Layout  มีการจัดตรงการของ  Layout (ค่อยอธิบายในตอนถัดไป )
ในส่วนของ Event นั้นคือเป็นการสั่งว่าแต่ละ Component ให้ดำเนินการยังไง จะทำงานอยู่ในส่วน Block mode จากรูปจากกำหนดชุดคำสั่ง เมื่อ ( when ) ปุ่ม Button1 ถูกคลิก (click)   ให้ดำเนินการ  (do) เปิดแฟลช (call openFlash)


โดยใน App Inventor ได้เตรียม component มากมายแบ่งเป็นหมวดหมู่ได้ถึง  9 หมวดหมู่ คลอบคลุมการ Mobile Application ได้อย่างดี