App-In Club is a new student-run coding club with peer-to-peer classes and workshops, competitions, and discussion forums for youth. Founders Tianyi Huang and Aaron Li — two high school coders from California — envision the group as a global meeting spot to share ideas and tech skills around the App Inventor platform. Show  More วันนี้เราจะมาสอนทำ Application สั่งงาน Chat bot ด้วยใช้ระบบ Google Assistant กาทำงานของ App คือ ให้ AI ค้นหาข้อมูลจาก Google โดยให้เสียงของเราสั่งการ ด้วยใช้ App Inventor มาพัฒนาจะเริ่มสอนตั้งแต่ออกแบบ UI ไปจนถึงใส่ Coding และ Build ออกมาเป็นไฟล์ไปใช้งานได้จริงกันเลย ทั้ง iOS และ Android เริ่มจากการเข้าไปที่เว็บไซต์ของ App Inventor ที่ https://appinventor.mit.edu/ ให้คลิกที่ Create Apps! เพื่อเข้าสู่หน้าพัฒนา Project App พอเข้ามาให้คลิกที่ Start new project แล้วมันจะขึ้นให้เราตั้งชื่อ Project และคลิก OK โดยใน Project จะประกอบไปด้วย 4 ส่วนหลัก คือ
ในการสร้าง Application ขึ้น 1 App อัน เราต้องคำนึงถึงหน้าตาของ UI ของเราก่อนที่จะเข้าไปเขียน Code หรือโปรแกรมให้ในแต่ล่ะส่วนๆ น้องๆ เขาจะได้มองเห็นภาพของสิ่งที่ตัวเองจะทำ เป็นการเริ่มความสำเร็จ และ จินตนาการ สำคัญมากๆเลยส่วนนี้ ดังนั้นขั้นตอนแรกของการทำ App คือ เริ่มจาก UI (User Interface)จากในภาพด้านล่างนี้ เราได้ใส่ Label (ข้อความ) และ Horizontal Arrangement (การจัด Component แบบแนวนอน) ใน Screen Components หลัก ใส่ Textbox และ Button ใน Components ของ Horizontal Arrangement โดยตรงนี้การทำงานของมันก็คือ ให้ผู้ใช้กรอกชื่อที่ต้องการให้ AI เรียกเราเวลาใช้งาน ต่อมาให้เพิ่ม Vertical Arrangement และใส่ Image เข้าไปที่ Properties ของมันและเลือกภาพ ตามเลย สามารถเข้าไปดาวน์โหลดไฟล์ภาพได้ที่นี่เลย คลิกโหลดภาพ พออัพโหลดรูปภาพเสร็จแล้ว ให้เรามาตกแต่ง Properties ของ Vertical Arrangement Components ปรับตามภาพเลย ปรับความกว้างและความสูงของภาพ ต่อมาเราจะมาเพิ่ม Label อีกตัว ตรงด้านหน้าของภาพ ภายใต้ Vertical Arrangement Components ตรงนี้เราจะให้ AI รู้ว่าเราเป็นใคร หลังจากกรอกชื่อและกด Save แล้ว ให้มีข้อความปรากฏขึ้นตรงนี้ ตรง Text ให้ลบ เป็นช่องว่างไงนะ ตามภาพ เพื่อให้ Text ที่เราจะเขียน Code ไว้มาขึ้นแทนตรงนี้ ต่อมาให้เรามาเลือก WebViewer และ Button มาใส่ใน Screen Component หลัก ให้เราลองสังเกต ดูดีๆ นะคะ ตำแหน่งของแต่ล่ะอันนะตรงนี้ และมาปรับตรง Properties ของ WebViewr ติก Visible ออก โดยคำสั่ง WebViewer ตรงนี้จะทำหน้าที่ นำคำที่เราต้องการค้นหาไปค้นหาและแสดงตรงนี้ และจะทำการแสดงก็ต่อเมื่อมีการคลิกปุ่ม Button รูปไมค์ ตามในภาพด้านล่าง หน้าตา UI เสร็จแล้วต่อไปมาเรียนการ Coding ให้แต่ละ Comportment กันต่อ ถ้าจะเข้าหน้าการเขียน Code Block ของ App Inventor ให้เราสังเกตเมนูด้านบนตรงด้านขวาของหน้าจอ จะเห็นคำว่า Blocks ให้เราเลือกคลิกเข้าไปในหน้านี้เลยค่ะ พอเข้ามาก็จะหน้าตาแบบนี้ว่างๆ และมี 2 หัวข้อใหญ่ๆ ดังนี้
ขั้นแรกเราต้องมาสร้างตัวแปรในส่วนของ Block Variable เรียก initialize global name to (เป็นการตั้งค่าตัวแปรแบบ Global ทำให้ทุกๆ Block ทุก Function สามารถเรียกใช้ตัวแปรที่สร้างด้วยคำสั่งที่ได้) ใน Project นี้จะมี Global Variable อยู่ 2 ตัวแปร และภายในตัวแปรจะเก็บข้อมูลเป็น Block Text เป็นโดยข้อมูลเป็นใส่ช่องว่าง (เพิ่อให้ข้อมูลตรงนี้สามารถเปลี่ยนแปลงเเป็นค่าอื่นๆ ได้โดย Set Default ข้อมูลเป็นข้อมูลว่างๆไว้) เดี๋ยวเรากลับมาหน้า Designers กันก่อนนิดหน่อยค่ะ ให้เราเพิ่ม Media ของ Speech Recognizer (เรียกใช้ไมค์จากอุปกรณ์มือถือของเรา) และ TextToSpeech (ให้มือถือฟังเสียงคำที่เราจะพูด) นำมาลากใส่ใน Screen Component ด้วยตรงนี้เป็นส่วนสำคัญมากที่ทำให้ AI ของเราได้รับข้อมูลเพื่อนำคำไปค้นหาต่อได้อย่างถูกต้อง ต่อมากลับมาที่หน้า Blocks และเราจะมาสร้าง Method ของการ Set ชื่อของเราให้ AI รู้จักกัน โดยจะมี 4 ขั้นตอนดังงนี้
สำคัญใครที่ใช้งาน Block Join และต้องการ + Variable หรือ Text สามารถทำได้ตามภาพด้านล่างนี้ได้เลยนะ ต่อมาเรามาสร้าง Function ขึ้นอีก 1 อัน เพื่อใช้งานในการแสดงคำหรือชื่อที่ถูกเก็บออกไปแสดงผล โดยข้อดีที่สร้างแบบนี้ก็คือ Function หรือ Method อื่นๆ จะสามารถเรียกใช้ที่ไหนเมื่อไหร่ก็ได้ ผ่านคำสั่ง call ตามโดยชื่อจอง Function นั้นๆ ดังภาพ ให้ Method ของ Block Button1 เรียกใช้ Speak_Message ที่มีการเรียกใช้ Set Text ของ Label2 โดย Get ค่าหรือรับค่ามาจาก global Message และเรียนใช้ TextToSpeech ตรงนี้จะเป็นการแสดงผล รับข้อมูลจากการที่เราพูดให้ออกมาเป็น Text โดยจะนำข้อมูลตรงนี้ไปใช้ในส่วนถัดไปต่อ ที่นี่เราได้มาครี่งทางแล้วเย้ๆ ทีนี่เราจะมา Test Application กัน โดยสามารถทำได้โดยเข้าไปในหน้า Designers และเลือกที่เมนู AI Companion ถ้าลองทดสอบดูตอนนี้เราจะได้ ชื่อขึ้นแล้วตอนกด Save (ฺButton1) ค่ะ โดยในการจะทดสอบในมือถือนั้นทุกคนต้องเข้าไปโหลดตัว App MIT App Inventor 2 ใน App Store และ Play Store ทั้ง iOS และ Android พอโหลดเสร็จแล้ว App จะให้เราเลือกวิธีการเชื่อมต่อกับ Project ให้เราเลือกแบบ กรอก Code หรือ Scan QR code เพื่อเชื่อมต่อ Project ที่เรากำลังพัฒนากับมือถือของเรา สำหรับ iOS ให้ทำแบบเดียวกัน ถ้าใคร งง สามารถดูคลิปวิดีโอด้านล่างประกอบได้เลยนะ ต่อมาเรามาทำอีกหนึ่ง Method คือ when ของ Speech Recognizer โดยเราจะนำตรงนี้ไปบวกกับส่วนของการกดปุ่มไมค์เพื่อนำเข้าข้อมูลของเสียงและเรียกใช้งานไมค์ของมือถือ ตรงนี้เราจะใช้ if else มาใช้เป็นหลักใน Function นี้ โดยการทำงานจะเป็นแบบนี้คือ ให้เช็ค if ว่า ถ้ามี result = TextBox แล้วให้ทำการ Set ตัวแปร Message ว่า How are your? (result เป็นตัวแปรที่เราสร้างขึ้นมาใช้เช็คเงื่อนไข) และให้เรียกใช้ Function Speak_Message พอเสร็จแล้วให้เพิ่มคำสั่ง และ else if (ถ้าอีกงั้นเงื่อนไข) else (ไม่ตรงกับอะไรให้มาทำงานที่นี้) ต่อดังภาพ ใน else if ที่จริงตรงนี้เราเขียนดักไว้กัน Error หรือ Bug ซึ่งอาจเกิดขึ้นได้น้อยแต่เขียนไว้ก็ดีค่ะเด็กๆเขาจะได้เรียนรู้การใช้คำสั่ง else if และรอบคอบในการเขียน Code มากยิ่งขึ้น การนำงานในส่วนของ Block นี้จะมีเป็นดังนี้ ถ้าตัวแปร get result = คำที่เราใส่ไว้ ให้ Set คำใส่ global Message ใน then และเรียกใช้ Speak_Message ตามเดิม (ตรง else if นี้จะใส่ไม่ใส่ก็ได้นะ) ใน else เราจะใช้ Method ของ Block WebViewer.GoToUrl และ Join ด้วย URL : https://www.google.com/search?q= (ต้องใช้อันนี้เท่านั้นตรงนี้สำคัญมาก) และ Get ค่าใน result (เป็นค่าที่มาจากใน if นั้นเองค่ะ รับค่ามาจาก Textboox1 ที่มีการเรียนใช้ Function Speak_Message) และเรียกใช้ Set Follow Links เลือก Visible ตามภาพ เพื่อไปค้นหาสิ่งที่เราพูดไป ใส่ Logic เป็น Ture ด้วย ที่นี้มาสร้าง Method Button2 ตรงนี้จะเป็นในส่วนของการกดปุ่มไมค์ ตามภาพคือข้อ 4 โดย Flow การทำงานทั้งหมดของส่วนนี้จะมีดังนี้
ที่นี้เป็นเสร็จเสร็จ Project App Chat bot แบบง่ายๆ ด้วย Google Assistant กันแล้วโดย Block Code ทั้งหมดจะมีดังนี้
ต่อเป็นเรากลับมาที่หน้า Designers ไปที่เมนู Build เป็นไฟล์ Android App (.apk) สามารถนำไปติดตั้งลงมือถือได้ ส่วน iOS นั้นตอนนี้ใน MIT App Inventor ยังไม่รองรับให้เราใช้วิธี Connect AI แทนเป็นก่อนนะในส่วนนี้เพราะถ้าใช้วิธีนี้มือถือ iOS ทุกรุ่นก็สามารถเปิด App ได้เหมือนค่ะ พอ Build เสร็จแล้วก็ Download หรือจะ Scan ได้เลยเป็นเสร็จสิ้น พอนำไฟล์ไปติดตั้ง หรือ เข้าใช้งาน ก็จะมีหน้าตาประมาณนี้ กรอกชื่อที่ต้องใน TextBox1 และกด Save (ฺButton1) ก็จะเห็น ตัวแปร Name ไปแสดงตรง Label2 พอกดที่ปุ่มไมค์ตัว Google Assistant จะทำงานให้เราพูดสิ่งที่ต้องการไปได้เลยและจะสังเกตมามันจะไปค้นหาจาก Google มาให้แบบ Auto โดยนำมาแสดงตรงนี้จะอยู่ในส่วนของ WebViewer หากสนใจเรียน Coding สามารถติดต่อสอบถามได้ที่เพจเลยค่ะติดตามเราได้ที่เพจ : https://www.facebook.com/codekidsTH/.ถ้าอยากให้ลูกๆของคุณเรียนเขียนโปรเเกรมเป็น สามารถเริ่มได้ตั้งเเต่ 6 หรือ 7 ได้เลย ลอง Inbox เข้ามาสอบถามได้นะคะหรือเว็บไซต์ CodeKids นี้ได้เลย มีความรู้ด้านการเรียนรู้การเขียนโปรเเกรมสำหรับเด็กๆมากมาย https://www.codekids.co
คุณครู สอนสร้างงานศิลปะทำภาพแบบ ArtCode แบบง่ายๆ ไม่กี่คลิก (ที่นี่!!)สวัสดีค่ะวันนี้โค้ดคิดส์เราจะพาไปสร้างงานศิลปะแบบ ArtCode ซึ่งทำได้ง่ายๆ ไม่กี่ขั้นตอนเลยบนเว็บไซต์ทำได้ทั้งภาพคน,สัตว์,สิ่งของซึ่ง Ascii |
ยกตัวอย่างการสร้าง app จาก mit app inventor
กระทู้ที่เกี่ยวข้อง
ลิขสิทธิ์ © 2024 moicapnhap Inc.
