วิธีสร้างแอปการเรียนรู้ภาษาแบบ AR ด้วย Flutter และ Back4App

บทนำ ในบทเรียนนี้ คุณจะสร้างแอปการเรียนรู้ภาษาเสริมจริง (ar) โดยใช้ flutter และ back4app แอปนี้ใช้เทคโนโลยี ar เพื่อจดจำวัตถุผ่านกล้องของอุปกรณ์ แสดงการแปล ให้ข้อมูลทางวัฒนธรรม และติดตามความก้าวหน้าของผู้ใช้ เมื่อสิ้นสุดบทเรียนนี้ คุณจะมีแอปที่ใช้งานได้ซึ่งช่วยให้ผู้ใช้เรียนรู้ภาษาใหม่ในบริบทของโลกจริง ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสิ้น คุณจะต้องมี ติดตั้ง flutter บนเครื่องของคุณ หากคุณยังไม่ได้ตั้งค่า ให้ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ แอป back4app สร้างแอปใหม่โดยทำตาม คู่มือเริ่มต้นใช้งาน back4app https //www back4app com/docs/get started ความรู้พื้นฐานเกี่ยวกับ dart และ flutter ทำความคุ้นเคยกับ เอกสารของ flutter https //flutter dev/docs หากจำเป็น ความเข้าใจพื้นฐานเกี่ยวกับ restful apis และการเขียนโปรแกรมแบบอะซิงโครนัสใน dart ขั้นตอนที่ 1 – การตั้งค่าโปรเจกต์ flutter ก่อนอื่น ให้ตั้งค่าโปรเจกต์ flutter ใหม่ที่คุณจะพัฒนาแอปการเรียนรู้ภาษา ar 1 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรันคำสั่งต่อไปนี้ flutter create ar language immersion app คำสั่งนี้สร้างโปรเจกต์ flutter ใหม่ชื่อ ar language immersion app 1 2 เปิดโปรเจกต์ใน ide ของคุณ ไปที่ไดเรกทอรีโปรเจกต์และเปิดใน ide ที่คุณชื่นชอบ (เช่น visual studio code, android studio) cd ar language immersion app ขั้นตอนที่ 2 – การกำหนดค่าพื้นหลัง back4app ตั้งค่าพื้นหลังของคุณบน back4app เพื่อจัดการข้อมูลผู้ใช้ การแปล ข้อมูลทางวัฒนธรรม และการติดตามความก้าวหน้าของผู้ใช้ 2 1 สร้างแอปพลิเคชันใหม่บน back4app เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ "สร้างแอปใหม่" ป้อน "ar language immersion app" เป็นชื่อแอป คลิก "สร้าง" 2 2 การตั้งค่าโมเดลข้อมูล กำหนดคลาสตามโมเดลข้อมูล ผู้ใช้ วัตถุที่สามารถจดจำได้ การแปล ข้อมูลทางวัฒนธรรม ความก้าวหน้าของผู้ใช้ 2 2 1 สร้างคลาสผู้ใช้ คลาส ผู้ใช้ เป็นคลาสเริ่มต้นใน back4app สำหรับการจัดการการตรวจสอบสิทธิ์ของผู้ใช้ ไปที่ core > เบราว์เซอร์ ในแดชบอร์ด back4app ของคุณ คุณจะเห็นคลาส user ที่มีอยู่แล้ว 2 2 2 สร้างคลาส recognizableobject คลิกที่ "สร้างคลาส" เลือก "กำหนดเอง" และตั้งชื่อเป็น "recognizableobject" คลิก "สร้างคลาส" เพิ่มคอลัมน์ต่อไปนี้ ชื่อ (string) หมวดหมู่ (string) imagereference (file) 2 2 3 สร้างคลาส translation สร้างคลาสอีกอันชื่อ "translation" เพิ่มคอลัมน์ต่อไปนี้ objectid (string) \[ค่าเริ่มต้น] objectid (ชี้ไปที่ recognizableobject) languagecode (string) translatedtext (string) pronunciationguide (string) audiofilereference (file) 2 2 4 สร้างคลาส culturalinfo สร้างคลาสชื่อ "culturalinfo" เพิ่มคอลัมน์ต่อไปนี้ objectid (ชี้ไปที่ recognizableobject) languagecode (string) shortdescription (string) detailedinformation (string) relatedmediareferences (อาร์เรย์ของไฟล์) 2 2 5 สร้างคลาส userprogress สร้างคลาสชื่อ "userprogress" เพิ่มคอลัมน์ต่อไปนี้ userid (ชี้ไปที่ผู้ใช้) recognizedobjects (อาร์เรย์ของ id ของวัตถุที่สามารถรับรู้ได้) translationsviewed (อาร์เรย์ของ id การแปล) culturalinfoaccessed (อาร์เรย์ของ id ข้อมูลทางวัฒนธรรม) learningstreaks (จำนวน) proficiencyscores (พจนานุกรม) 2 3 ดึงคีย์แอปพลิเคชัน ไปที่ การตั้งค่าแอป > ความปลอดภัย & คีย์ จดบันทึก application id และ client key ; คุณจะต้องใช้เพื่อเริ่มต้น parse ในแอป flutter ของคุณ ขั้นตอนที่ 3 – การรวม parse sdk เข้ากับ flutter รวม parse sdk ที่จัดเตรียมโดย back4app เข้ากับโปรเจกต์ flutter ของคุณเพื่อสื่อสารกับ backend 3 1 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 camera ^0 10 0 flutter spinkit ^5 1 0 augmented reality plugin ^0 0 1 # hypothetical ar plugin รันคำสั่ง flutter pub get 3 2 เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , เริ่มต้น parse ในระหว่างการเริ่มต้นแอป import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; void main() async { widgetsflutterbinding ensureinitialized(); const string applicationid = 'your application id'; const string clientkey = 'your client key'; const string parseserverurl = 'https //parseapi back4app com'; await parse() initialize( applicationid, parseserverurl, clientkey clientkey, autosendsessionid true, debug true, ); runapp(myapp()); } แทนที่ 'your application id' และ 'your client key' ด้วยคีย์ที่คุณได้รับจาก back4app ขั้นตอนที่ 4 – การดำเนินการรับรองความถูกต้องของผู้ใช้ ดำเนินการลงทะเบียนผู้ใช้และฟังก์ชันการเข้าสู่ระบบ 4 1 สร้างหน้าจอการตรวจสอบสิทธิ์ สร้างไฟล์ใหม่ lib/screens/auth screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class authscreen extends statefulwidget { @override authscreenstate createstate() => authscreenstate(); } class authscreenstate extends state\<authscreen> { bool islogin = true; final usernamecontroller = texteditingcontroller(); final passwordcontroller = texteditingcontroller(); future\<void> submit() async { if (islogin) { final user = parseuser( usernamecontroller text trim(), passwordcontroller text trim(), null, ); var response = await user login(); if (response success) { // navigate to main app navigator of(context) pushreplacementnamed('/home'); } else { // show error showerror(response error message); } } else { final user = parseuser( usernamecontroller text trim(), passwordcontroller text trim(), usernamecontroller text trim() + '@example com', // placeholder email ); var response = await user signup(); if (response success) { // navigate to main app navigator of(context) pushreplacementnamed('/home'); } else { // show error showerror(response error message); } } } void showerror(string message) { showdialog( context context, builder (ctx) => alertdialog( title text('an error occurred!'), content text(message), actions \[ textbutton( child text('okay'), onpressed () => navigator of(ctx) pop(), ), ], ), ); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text(islogin ? 'login' 'sign up'), ), body padding( padding edgeinsets all(16 0), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username'), ), textfield( controller passwordcontroller, decoration inputdecoration(labeltext 'password'), obscuretext true, ), sizedbox(height 20), elevatedbutton( child text(islogin ? 'login' 'sign up'), onpressed submit, ), textbutton( child text(islogin ? 'don\\'t have an account? sign up' 'already have an account? login'), onpressed () { setstate(() { islogin = !islogin; }); }, ), ], ), )); } } 4 2 อัปเดต main dart เพื่อรวมเส้นทาง ใน lib/main dart , อัปเดต materialapp ของคุณเพื่อรวมเส้นทาง import 'screens/auth screen dart'; import 'screens/home screen dart'; class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'ar language immersion', theme themedata( primaryswatch colors blue, ), home authscreen(), routes { '/home' (ctx) => homescreen(), }, ); } } ขั้นตอนที่ 5 – การนำเสนอการรู้จำวัตถุ ar ตั้งค่าฟังก์ชัน ar เพื่อรู้จำวัตถุโดยใช้กล้องของอุปกรณ์ 5 1 ตั้งค่าการอนุญาต สำหรับทั้ง android และ ios คุณต้องขออนุญาตกล้อง android ใน android/app/src/main/androidmanifest xml , เพิ่ม \<uses permission android\ name="android permission camera" /> ios ใน ios/runner/info plist , เพิ่ม \<key>nscamerausagedescription\</key> \<string>we need to access your camera to recognize objects for language learning \</string> 5 2 นำเสนอ ar view สร้างไฟล์ใหม่ lib/screens/ar view screen dart }]},{ import 'package\ flutter/material dart'; // นำเข้า ar plugin ของคุณที่นี่ class arviewscreen extends statefulwidget { @override arviewscreenstate createstate() => arviewscreenstate(); } class arviewscreenstate extends state\<arviewscreen> { @override widget build(buildcontext context) { // placeholder สำหรับ ar view return scaffold( appbar appbar( title text('การเรียนรู้ภาษา ar'), ), body center( child text('ar view จะมาเร็วๆ นี้'), ), ); } } 5 3 จำลองการรู้จำวัตถุ เพื่อวัตถุประสงค์ในการสาธิต เราจะจำลองการรู้จำวัตถุโดยการแสดงวัตถุที่กำหนดไว้ล่วงหน้า อัปเดต ar view screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class arviewscreen extends statefulwidget { @override arviewscreenstate createstate() => arviewscreenstate(); } class arviewscreenstate extends state\<arviewscreen> { list\<string> recognizedobjects = \['apple', 'book', 'chair']; string selectedobject; @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('ar language immersion'), ), body column( children \[ expanded( child center( child text( selectedobject != null ? 'recognized object $selectedobject' 'point your camera at an object', style textstyle(fontsize 20), ), ), ), container( height 150, child listview\ builder( scrolldirection axis horizontal, itemcount recognizedobjects length, itembuilder (ctx, index) { return gesturedetector( ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); }, child card( child container( width 100, alignment alignment center, child text(recognizedobjects\[index]), ), ), ); }, ), ), ], ), ); } } ขั้นตอนที่ 6 – การแสดงการแปลแบบ overlay ดึงการแปลจาก back4app และแสดงเป็น overlay 6 1 ดึงข้อมูลการแปล ใน ar view screen dart , เพิ่มวิธีการเพื่อดึงการแปล future\<string> gettranslation(string objectname) async { querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('translation')) whereequalto('objectname', objectname) whereequalto('languagecode', 'es'); // example target language var response = await query query(); if (response success && response results != null) { final translation = response results first; return translation get\<string>('translatedtext'); } else { return 'translation not found'; } } 6 2 อัปเดต ui เพื่อแสดงการแปล ปรับเปลี่ยน build วิธีการ expanded( child center( child selectedobject != null ? futurebuilder\<string>( future gettranslation(selectedobject), builder (ctx, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return circularprogressindicator(); } else if (snapshot haserror) { return text('error fetching translation'); } else { return text( snapshot data, style textstyle(fontsize 24, fontweight fontweight bold), ); } }, ) text( 'point your camera at an object', style textstyle(fontsize 20), ), ), ), ขั้นตอนที่ 7 – การให้ข้อมูลทางวัฒนธรรม ดึงและแสดงข้อมูลทางวัฒนธรรมที่เกี่ยวข้องกับวัตถุที่ถูกจดจำ 7 1 ดึงข้อมูลทางวัฒนธรรม เพิ่มวิธีการใน ar view screen dart future\<string> getculturalinfo(string objectname) async { querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('culturalinfo')) whereequalto('objectname', objectname) whereequalto('languagecode', 'es'); // example target language var response = await query query(); if (response success && response results != null) { final info = response results first; return info get\<string>('shortdescription'); } else { return 'no cultural info available'; } } 7 2 อัปเดต ui เพื่อแสดงข้อมูลทางวัฒนธรรม แก้ไข build วิธีการ return column( mainaxisalignment mainaxisalignment center, children \[ text( snapshot data, style textstyle(fontsize 24, fontweight fontweight bold), ), sizedbox(height 10), futurebuilder\<string>( future getculturalinfo(selectedobject), builder (ctx, infosnapshot) { if (infosnapshot connectionstate == connectionstate waiting) { return circularprogressindicator(); } else if (infosnapshot haserror) { return text('error fetching cultural info'); } else { return text( infosnapshot data, style textstyle(fontsize 16), ); } }, ), ], ); ขั้นตอนที่ 8 – ติดตามความก้าวหน้าของผู้ใช้ อัปเดตความก้าวหน้าของผู้ใช้ทุกครั้งที่พวกเขาดูการแปลหรือข้อมูลทางวัฒนธรรม 8 1 อัปเดต userprogress ใน back4app เพิ่มวิธีการเพื่ออัปเดตความก้าวหน้า future\<void> updateuserprogress(string objectname) async { final currentuser = await parseuser currentuser() as parseuser; // fetch userprogress querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('userprogress')) whereequalto('userid', currentuser objectid); var response = await query query(); parseobject userprogress; if (response success && response results != null) { userprogress = response results first; } else { // create new userprogress userprogress = parseobject('userprogress') set('userid', currentuser); } // update recognizedobjects list\<dynamic> recognizedobjects = userprogress get\<list\<dynamic>>('recognizedobjects') ?? \[]; if (!recognizedobjects contains(objectname)) { recognizedobjects add(objectname); userprogress set('recognizedobjects', recognizedobjects); await userprogress save(); } } 8 2 เรียกใช้ updateuserprogress เมื่อมีการรับรู้วัตถุ ใน setstate ที่ selectedobject ถูกอัปเดต ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, ขั้นตอนที่ 9 – การดำเนินการโหมดออฟไลน์ ตรวจสอบให้แน่ใจว่าแอปสามารถทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ตสำหรับฟีเจอร์หลัก 9 1 แคชข้อมูลในเครื่อง ใช้ฐานข้อมูลท้องถิ่นเช่น sqflite หรือ hive เพื่อเก็บการแปลและข้อมูลทางวัฒนธรรม เพิ่ม hive ขึ้นอยู่ใน pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 เริ่มต้น hive ใน main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 แก้ไขวิธีการดึงข้อมูลเพื่อใช้แคช อัปเดต gettranslation วิธีการ future\<string> gettranslation(string objectname) async { var box = await hive openbox('translations'); string cachekey = '$objectname es'; // example target language if (box containskey(cachekey)) { return box get(cachekey); } else { // fetch from back4app querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('translation')) whereequalto('objectname', objectname) whereequalto('languagecode', 'es'); var response = await query query(); if (response success && response results != null) { final translation = response results first; string translatedtext = translation get\<string>('translatedtext'); await box put(cachekey, translatedtext); return translatedtext; } else { return 'translation not found'; } } } ทำซ้ำขั้นตอนที่คล้ายกันสำหรับ getculturalinfo ขั้นตอนที่ 10 – การทดสอบและการปรับใช้ ทดสอบแอปอย่างละเอียดและเตรียมพร้อมสำหรับการปรับใช้ 10 1 ทดสอบบนอุปกรณ์จริง เนื่องจากฟังก์ชัน ar ต้องการการเข้าถึงกล้อง ให้ทดสอบแอปบนอุปกรณ์จริง 10 2 ปรับปรุงประสิทธิภาพ ใช้โครงสร้างข้อมูลที่มีประสิทธิภาพ ลดการเรนเดอร์ที่ไม่จำเป็นใน ui ปรับปรุงภาพและสื่อที่ใช้ 10 3 เตรียมพร้อมสำหรับการปรับใช้ อัปเดตไอคอนแอปและหน้าจอเริ่มต้น กำหนดค่าการอนุญาตของแอป สร้างเวอร์ชันการปล่อยสำหรับ android และ ios โปรดดูเอกสารอย่างเป็นทางการของ flutter เกี่ยวกับ การสร้างและการปล่อย https //flutter dev/docs/deployment เพื่อรายละเอียดเพิ่มเติม บทสรุป ขอแสดงความยินดี! คุณได้สร้างแอป ar language immersion โดยใช้ flutter และ back4app แอปนี้สามารถจดจำวัตถุ แสดงการแปลและข้อมูลทางวัฒนธรรม ติดตามความก้าวหน้าของผู้ใช้ และทำงานแบบออฟไลน์ คุณสามารถปรับปรุงแอปเพิ่มเติมโดยการรวมการจดจำวัตถุ ar ที่แท้จริง เพิ่มภาษาเพิ่มเติม และปรับปรุง ui/ux สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ขั้นสูง โปรดพิจารณาสำรวจ การรวมโมเดลการเรียนรู้ของเครื่อง ใช้ tensorflow lite สำหรับการจดจำวัตถุในอุปกรณ์ การเพิ่มขีดความสามารถ ar ใช้ปลั๊กอินเช่น arcore flutter plugin หรือ arkit plugin เพื่อประสบการณ์ ar ที่ดียิ่งขึ้น การนำเสนอข้อความเป็นเสียง เพิ่มการสังเคราะห์เสียงสำหรับคำแนะนำการออกเสียงโดยใช้แพ็คเกจเช่น flutter tts การปรับปรุงการตรวจสอบผู้ใช้ นำเข้าสังคมเข้าสู่ระบบหรือการตรวจสอบสองขั้นตอน โดยการสร้างแอปนี้ คุณได้มีประสบการณ์ในการพัฒนา flutter การรวมแบ็กเอนด์กับ back4app และฟีเจอร์ที่สำคัญเช่น การแคชข้อมูลแบบออฟไลน์และการติดตามความก้าวหน้าของผู้ใช้ โปรดสำรวจและปรับปรุงแอปของคุณต่อไปเพื่อสร้างประสบการณ์การเรียนรู้ภาษาให้ดียิ่งขึ้น