jsmcu

วันอังคารที่ 9 กรกฎาคม พ.ศ. 2556

วิธีการสร้างappinventor 1

ส่วนประกอบของโปรแกรม App Inventor

โปรแกรม App Inventor ช่วยให้สามารถพัฒนาแอพพลิเคชันสำหรับโทรศัพท์ระบบปฏิบัติการ Android ซึ่งทำผ่านการใช้เว็บเบราเซอร์และทดสอบบนโทรศัพท์ที่เชื่อมต่ออยู่กับคอมพิวเตอร์หรือทดสอบบนโทรศัพท์จำลองบนเครื่องคอมพิวเตอร์ โปรเจคที่สร้างทั้งหมดจะถูกจัดเก็บไว้บนเซิร์ฟเวอร์ App Inventor ซึ่งช่วยให้สามารถพัฒนางานต่อที่เครื่องคอมพิวเตอร์เครื่องใดก็ได้ เพียงแค่ได้มีการเชื่อมต่อกับระบบอินเทอร์เน็ตไว้เท่านั้น การสร้างแอพพลิเคชันจะแบ่งการทำงานออกเป็นสองส่วน คือ ส่วนออกแบบ (App Inventor Designer) ที่จะให้เราเลือกคอมโพเนนท์ที่ต้องการสำหรับที่จะให้สร้างแอพพลิเคชัน ส่วนที่สองเป็นส่วนการเขียนโค้ด (App Inventor Blocks Editor) ที่ให้เราเขียนโค้ดด้วยการต่อบล๊อกต่างๆ เข้าด้วยกันเป็นคำสั่ง ซึ่งจะเป็นการกำหนดพฤติกรรมหรือเหตุการณ์ที่เกิดขึ้นกับคอมโพเนนท์ การเขียนโปรแกรมจะเสมือนการต่อชิ้นส่วนตัวต่อจิ๊กซอว์เข้าด้วยกัน ในแต่ละขั้นตอนการสร้างจะสามารถทำการทดสอบได้ทุกขณะ และเมื่อสร้างเสร็จสมบูรณ์แล้วจะสามารถแพ็คเกจแอพพลิเคชันเพื่อนำไปใช้งานบนโทรศัพท์ระบบปฏิบัติการ Android เครื่องใดก็ได้ หรือหากไม่มีโทรศัพท์ระบบปฏิบัติการ Android ก็สามารถที่จะทดสอบได้บนโทรศัพท์จำลองที่ทำงานอยู่บนคอมพิวเตอร์ซึ่งจะมีลักษณะการทำงานเหมือนโทรศัพท์จริงทุกประการ สภาพแวดล้อมในการพัฒนาด้วยโปรแกรม App Inventor นั้น สนับสนุนระบบปฏิบัติการที่หลากหลาย ไม่ว่าจะเป็นระบบปฏิบัติการ Mac OS X, GNU / Linux และระบบปฏิบัติการ Windows และแอพพลิเคชันที่สร้างขึ้นนั้นสามารถติดตั้งและทำงานได้บนโทรศัพท์ระบบปฏิบัติการ Android หลากหลายรุ่นที่เป็นที่นิยมในปัจจุบัน

ภาพ 1 แอพพลิเคชันที่สร้างขึ้นด้วยโปรแกรม App Inventor ในหน้าต่างเว็บเบราเซอร์ 1.1.1 ส่วนออกแบบ (App Inventor Designer) ในขั้นตอนแรกของการสร้างแอพพลิเคชันด้วย App Inventor เริ่มจากการเลือกคอมโพเนนท์ที่ต้องการและจัดวางลงในส่วนของการออกแบบโดยจะทำผ่านส่วนของการออกแบบ (App Inventor Designer) ดังที่แสดงในภาพที่ 1 แสดงให้เห็นถึงแอพพลิเคชันที่สร้างขึ้นในหน้าต่างเว็บเบราเซอร์ โดยด้านซ้ายจะเป็นส่วนของคอมโพเนนท์ที่ App Inventor เตรียมไว้ให้จัดเรียงเป็นหมวดหมู่ เช่น ปุ่ม (button) ข้อความ (label) กล่องข้อความ (text box) เป็นต้น ผู้ใช้ทำการเพิ่มคอมโพเนนท์ที่เลือกด้วยการคลิกลากลงไปวางไว้ในโปรเจค

ภาพ 2 หน้าจอการจัดการโปรเจค (My Projects) อินเตอร์เฟสบนหน้าเว็บ App Inventor นั้นจะประกอบด้วยแท็บที่จะปรากฏในส่วนบนของหน้าเว็บซึ่งจะใช้ในการเข้าไปจัดการโปรเจค (My Projects) ส่วนการออกแบบ (Design) ส่วนการเรียนรู้คำสั่ง (Learn) ในหน้าจอการจัดการโปรเจคดังภาพ 2 จะสามารถเข้าไปจัดการสร้าง ลบ ดาวน์โหลด หรือเลือกโปรเจคที่สร้างและได้ทำการบันทึกไว้เพื่อกลับมาแก้ไขในหน้าจอส่วนการออกแบบได้

ภาพ 3 หน้าจอส่วนคอมโพเนนท์ที่มีให้เลือก

ภาพ 4 หน้าจอการออกแบบ (Viewer) ในส่วนหน้าจอการออกแบบ ปุ่มที่อยู่ทางด้านบนจะใช้เพื่อการบันทึกโปรเจคในลักษณะต่างๆ การเพิ่มและลบหน้าจอ Screen ปุ่มสำหรับการเปิดส่วนการเขียนโค้ด (Open the Blocks Editor) และการจัดแพ็คเกจแอพพลิเคชันเพื่อนำไปใช้งานบนโทรศัพท์ระบบปฏิบัติการ Android ต่อไป ในการสร้างแอพพลิเคชันที่หน้าจอส่วนการออกแบบนี้ ผู้ใช้จะเลือกคอมโพเนนท์ที่อยู่ทางด้านซ้ายของหน้าจอดังภาพ 3 คลิกลากเพื่อนำมาวางลงในส่วน Viewer ที่อยู่ตรงกลางหน้าจอดังภาพ 4 หลังจากนั้นคอมโพเนนท์ที่เลือกนำมาวางจะปรากฏในส่วน Viewer ตามมุมมองของผู้ใช้ซึ่งสามารถเลือกจัดวางลงในตำแหน่งที่เหมาะสมได้ตามต้องการ และคอมโพเนนท์นั้นยังปรากฏในส่วนรายการคอนโพเนนท์ (Components) ดังภาพ 5 เรียงกันเป็นรายการเพื่อให้ดูง่ายและสามารถเลือกคอมโพเนนท์ที่ต้องการกำหนดคุณสมบัติจากรายการนี้แล้วกำหนดคุณสมบัติต่างๆ ที่หน้าจอส่วนคุณสมบัติ (Properties) ดังภาพ 6 ซึ่งจะเป็นคุณสมบัติเฉพาะของคอมโพเนนท์นั้นๆ

ภาพ 5 หน้าจอส่วนคอมโพเนนท์ (Components) ที่เลือกนำมาใช้ในโปรเจค

ภาพ 6 หน้าจอส่วนคุณสมบัติของคอมโพเนนท์ (Properties) นอกจากในกลุ่มของคอมโพเนนท์ทั่วไปแล้วยังมีคอมโพเนนท์ที่มองไม่เห็น (Non-Visible Components) ซึ่งเมื่อนำมาวางในหน้าจอ Viewer แล้วจะไม่ปรากฎคอมโพเนนท์ดังกล่าวที่หน้าจอ Viewer แต่จะปรากฏที่หน้าจอรายการคอมโพเนนท์แทน คอมโพเนนท์ที่มองไม่เห็นนี้จะประกอบไปด้วยคอมโพเนนท์ในกลุ่ม Sersors ซึ่งประกอบไปด้วยคอมโพเนนท์ที่เกี่ยวข้องกับการเรียกใช้ตัวตรวจจับต่างๆ ที่มีอยู่ในโทรศัพท์ เช่น ระบบ GPS หรือ Accelerometers เป็นต้น กลุ่ม Notifiers ซึ่งเกี่ยวข้องกับความสามารถในการแจ้งเตือนต่างๆ หรือการเขียนบันทึกกิจกรรมของโทรศัพท์ ซึ่งคอมโพเนนท์ในกลุ่ม Notifiers นั้นจะมองไม่เห็นหรือถูกซ่อนไว้ แต่จะสามารถมองเห็นได้เมื่อเกิดการแจ้งเตือนหรือสอบถามโดยมีการโต้ตอบกับผู้ใช้ในรูปของข้อความ เสียง ปุ่ม หรือช่องสำหรับกรอกข้อมูล ที่จะแสดงให้ผู้ใช้เห็นเป็นครั้งคราวเท่านั้น กลุ่ม Clocks ซึ่งเกี่ยวข้องกับฟังก์ชันของเวลา ตัวจับเวลา และการตั้งค่าเวลา กลุ่ม ActivityStarters ซึ่งเกี่ยวข้องกับการสั่งให้แอพพลิเคชั่นอื่นที่ติดตั้งอยู่ในโทรศัพท์ทำงาน เช่น โปรแกรมอ่านบาร์โค้ด (barcode scanner) หรือโปรแกรมอ่านออกเสียงจากข้อความ (text to speech) เป็นต้น กลุ่ม Web Services เช่น คอมโพเนนท์เกี่ยวกับเกมส์ออนไลน์ (Game Client) คอมโพเนนท์เกี่ยวกับฐานข้อมูลบนเว็บ และคอมโพเนนท์เกี่ยวกับการใช้บริการ Twitter เป็นต้น

อ้างอิงจาก: http://programmingappinventor.wordpress.com/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-app-inventor/%E0%B8%AA%E0%B9%88%E0%B8%A7%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%AD%E0%B8%9A%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1-app-inventor/

การออกแบบและสร้างแอพพลิชั่นบนระบบปฏิบัิติการAndroid ด้วย appinventor

เริ่มต้นการใช้งาน app inventor ในปัจจุบันโทรศัพท์เคลื่อนที่และแท็บเลตระบบปฏิบัติกรแอนดรอยด์นั้นมีจำนวนมาก หลายหลายรุ่น หลายยี่ห้อ ให้เลือกใช้งาน และคาดว่าในอนาคตจะมีการใช้งานกันมากขึ้นเรื่อยๆ ซึ่งเป็นผลให้นักพัฒนาแอพพลิเคชั่นจำเป็นต้องพัฒนาแอพพลิเคชั่นเพื่อให้สามารถตอบสนองความต้องการของผู้ใช้ได้ แต่เนื่องจากแอพพลิเคชั่นบนระบบปฏิบัติการแอนดรอยด์นั้นถูกพัฒนาขึ้นด้วยโปรแกรมภาษาจาวา ซึ่งเป็นเรื่องยากสำหรับนักพัฒนาแอพพลิเคชั่นมือใหม่ ที่อยากจะเรียนรู้เกี่ยวกับเรื่องของการเขียนโปรแกรม App Inventor เป็นเครื่องมือตัวหนึ่งที่ใช้ในการพัฒนาแอพพลิเคชั่นบนมือถือระบบปฏิบัติการแอนดรอยด์ ซึ่งถูกออกแบบและพัฒนาโดยเริ่มต้นจากทีมงานของกูกเกิล และปัจจุบันอยู่ในการควบคุมดูแลของสถาบัน MIT (Massachusetts Institute of Technology) AppInventor ออกแบบมาเพื่อให้ง่ายต่อการใช้งาน โดยอาศัยหลักการทำงานผ่านระบบเครือข่ายอินเตอร์เนตเป็นหลัก ซึ่งใช้เว็บบราวเซอร์ในการทำงานร่วมกับเว็บเซิฟเวอร์ แอพพลิเคชั่นที่ถูกพัฒนาจะถูกจัดเก็บไว้ในเครื่องคอมพิวเตอร์เซิฟเวอร์ ซึ่งเวลาที่เราเรียกใช้งาน จะต้องเข้าไปที่เว็บไซด์ appinventor.mit.edu/ เพื่อที่จะนำแอพพลิเคชั่นที่สร้างขึ้นมาแก้ไข และพัฒนาต่อได้ ถือเป็นอีกหนึ่งแนวทางในการพัฒนาแอพพลิเคชั่นบนมือถือรูปแบบใหม่ ที่น่าสนใจ และใช้เป็นพื้นฐานในการพัฒนาแอพพลิเคชั่นขั้นสูงต่อไป

การตั้งค่าและการติดตั้งโปรแกรมเพื่อใช้งาน AppInventor ก่อนอื่นให้เราเข้าไปที่ http://www.appinventor.mit.edu/ เป็นเว็บไซด์หลักในการเข้าใช้งานโปรแกรม และดาวน์โหลดโปรแกรมสำหรับติดตั้งลงบนคอมพิวเตอร์ เราสามารถเข้าไปดาวน์โหลดไฟล์โปรแกรมได้ฟรี โดยคลิกไปที่ Explore http://explore.appinventor.mit.edu/learn

อ้างอิงจาก: http://appinventor-micro2bot.blogspot.com/2012/09/app-inventor.html

การจำลองการทำงานArduino แบบกราฟฟิค ด้วยโปรแกรมVirtualbreadoard

VIRTUAL BREADBOARD บอร์ดทดลองอิเล็กทรอนิกส์จำลอง

ในเรื่องของไมโครคอนโทรลเลอร์ หรืองาน Embedded System การได้เรียนรู้เกี่ยวกับการเขียนโปรแกรมเพื่อ โปรแกรมลงบนตัวไมโครคอนโทรลเลอร์ เป็นสิ่งที่ยากไม่แพ้กันกับ การที่ต้องต่อวงจร หรือทดลองฮาร์ดแวร์ เพื่อดูว่าโค๊ดที่เราได้เขียนมานั้น สามารถทำงานได้ตามที่เราต้องการหรือไม่ การได้เรียนรู้ทั้งสองอย่างไปพร้อมๆกัน เป็นสิ่งที่จำเป็นที่จะต้องทำ และได้เรียนรู้ปฏิบัติ เพื่อให้เกิดทักษะ ความเข้าใจ การทดสอบการเขียนโปรแกรม หรือเขียนโค๊ด ขอเพียงเรามีแค่่คอมพิวเตอร์ และ IDE ที่เอาไว้พัฒนาโปรแกรมก็สามารถที่จะทำงานด้านนี้ได้แล้ว แต่ในส่วนของฮาร์ดแวร์ ที่จะทดลอง simulate โค๊ดที่เราเขียน บางครั้งกลับกลายเป็นอุปสรรคสำหรับคนที่ไม่มีโอกาสในการเข้าถึงฮาร์ดแวร์ เหล่านั้น วันนี้ผมขอนำเสนอโปรแกรมที่ช่วยจำลองการทำงานของฮาร์ดแวร์ในส่วนนั้น ด้วยโปรแกรม VIRTUAL BREADBOARD โปรแกรม VIRTUAL BREADBOARD เป็นโปรแกรมที่ออกมาให้ทำหน้าที่เป็นตัวที่แสดงผลการทำงานของโค๊ดที่เราเขียนขึ้นมา และสร้างสภาวะแวดล้อมของงานด้าน Embedded System โดยใช้ไมโครคอนโทรลเลอร์จำลอง โปรแกรม VIRTUAL BREADBOARD หรือ VBB มีเบอร์ของไมโครคอนโทรลเลอร์ PIC16 และ PIC18 ให้เราเลือกอย่างหลากหลาย ซึ่งตอนนี้โปรแกรมนี้สามารถจำลองการทำงานของบอร์ด Arduino ได้แล้ว นอกจาก MCU หลักๆ แล้ว ยังมี อุปกรณ์ต่อพ่วงอื่นๆ ไม่ว่าจะเป็น LCD , Servo Motor หรือวงจรอื่นๆ อีกมากมาย http://www.virtualbreadboard.com/home.htm http://www.youtube.com/watch?v=hSKoxN9n6js อ้างอิง http://www.123microcontroller.com/Software-Tools/Virtual-Breadboard-program-simulation-microcontroller