Cara Membangun Aplikasi Imersi Bahasa AR dengan Flutter dan Back4App

pendahuluan dalam tutorial ini, anda akan membangun aplikasi imersi bahasa realitas tertambah (ar) menggunakan flutter dan back4app aplikasi ini memanfaatkan teknologi ar untuk mengenali objek melalui kamera perangkat, menampilkan terjemahan, memberikan informasi budaya, dan melacak kemajuan pengguna pada akhir tutorial ini, anda akan memiliki aplikasi fungsional yang membantu pengguna belajar bahasa baru dalam konteks dunia nyata prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan flutter terinstal di mesin lokal anda jika anda belum mengaturnya, ikuti panduan instalasi flutter https //flutter dev/docs/get started/install akun back4app daftar untuk akun gratis di back4app https //www back4app com/ aplikasi back4app buat aplikasi baru dengan mengikuti panduan memulai dengan back4app https //www back4app com/docs/get started pengetahuan dasar tentang dart dan flutter kenali dokumentasi flutter https //flutter dev/docs jika diperlukan pemahaman dasar tentang api restful dan pemrograman asinkron di dart langkah 1 – menyiapkan proyek flutter pertama, siapkan proyek flutter baru di mana anda akan mengembangkan aplikasi imersi bahasa ar 1 1 buat proyek flutter baru buka terminal anda dan jalankan perintah berikut flutter create ar language immersion app perintah ini membuat proyek flutter baru bernama ar language immersion app 1 2 buka proyek di ide anda navigasikan ke direktori proyek dan buka di ide pilihan anda (misalnya, visual studio code, android studio) cd ar language immersion app langkah 2 – mengonfigurasi backend back4app siapkan backend anda di back4app untuk menangani data pengguna, terjemahan, informasi budaya, dan pelacakan kemajuan pengguna 2 1 buat aplikasi baru di back4app masuk ke akun back4app anda klik pada "buat aplikasi baru" masukkan "aplikasi imersi bahasa ar" sebagai nama aplikasi klik "buat" 2 2 menyiapkan model data tentukan kelas sesuai dengan model data pengguna objekterkenal terjemahan infokultural kemajuanpengguna 2 2 1 buat kelas pengguna kelas pengguna adalah kelas default di back4app untuk menangani otentikasi pengguna navigasikan ke inti > browser di dasbor back4app anda anda akan melihat kelas pengguna sudah tersedia 2 2 2 buat kelas recognizableobject klik pada "buat kelas" pilih "kustom" dan beri nama "recognizableobject" klik "buat kelas" tambahkan kolom berikut nama (string) kategori (string) imagereference (file) 2 2 3 buat kelas translation buat kelas lain bernama "translation" tambahkan kolom berikut objectid (string) \[default] objectid (pointer to recognizableobject) languagecode (string) translatedtext (string) pronunciationguide (string) audiofilereference (file) 2 2 4 buat kelas culturalinfo buat kelas bernama "culturalinfo" tambahkan kolom berikut objectid (pointer ke recognizableobject) languagecode (string) shortdescription (string) detailedinformation (string) relatedmediareferences (array of files) 2 2 5 buat kelas userprogress buat kelas bernama "userprogress" tambahkan kolom berikut userid (penunjuk ke pengguna) recognizedobjects (array dari id objek yang dikenali) translationsviewed (array dari id terjemahan) culturalinfoaccessed (array dari id informasi budaya) learningstreaks (jumlah) proficiencyscores (kamus) 2 3 ambil kunci aplikasi pergi ke pengaturan aplikasi > keamanan & kunci catat id aplikasi dan kunci klien ; anda akan membutuhkannya untuk menginisialisasi parse di aplikasi flutter anda langkah 3 – mengintegrasikan parse sdk ke dalam flutter integrasikan parse sdk yang disediakan oleh back4app ke dalam proyek flutter anda untuk berkomunikasi dengan backend 3 1 tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut 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 jalankan perintah flutter pub get 3 2 inisialisasi parse di aplikasi anda di lib/main dart , inisialisasi parse saat aplikasi dimulai 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()); } ganti 'your application id' dan 'your client key' dengan kunci yang anda peroleh dari back4app langkah 4 – mengimplementasikan autentikasi pengguna implementasikan fungsionalitas pendaftaran dan login pengguna 4 1 buat layar autentikasi buat file baru 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 pembaruan main dart untuk menyertakan rute di lib/main dart , perbarui materialapp anda untuk menyertakan rute 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(), }, ); } } langkah 5 – mengimplementasikan pengenalan objek ar siapkan fungsionalitas ar untuk mengenali objek menggunakan kamera perangkat 5 1 siapkan izin untuk android dan ios, anda perlu meminta izin kamera android di android/app/src/main/androidmanifest xml , tambahkan \<uses permission android\ name="android permission camera" /> ios di ios/runner/info plist , tambahkan \<key>nscamerausagedescription\</key> \<string>we need to access your camera to recognize objects for language learning \</string> 5 2 implementasikan tampilan ar import 'package\ flutter/material dart'; // import your ar plugin here class arviewscreen extends statefulwidget { @override arviewscreenstate createstate() => arviewscreenstate(); } class arviewscreenstate extends state\<arviewscreen> { @override widget build(buildcontext context) { // placeholder for ar view return scaffold( appbar appbar( title text('ar language immersion'), ), body center( child text('ar view coming soon'), ), ); } } 5 3 simulasi pengenalan objek untuk tujuan demonstrasi, kami akan mensimulasikan pengenalan objek dengan menampilkan objek yang telah ditentukan perbarui 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]), ), ), ); }, ), ), ], ), ); } } langkah 6 – menampilkan overlay terjemahan ambil terjemahan dari back4app dan tampilkan sebagai overlay 6 1 ambil data terjemahan di ar view screen dart , tambahkan metode untuk mengambil terjemahan 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 perbarui ui untuk menampilkan terjemahan modifikasi metode 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), ), ), ), langkah 7 – menyediakan informasi budaya ambil dan tampilkan informasi budaya yang terkait dengan objek yang dikenali 7 1 ambil informasi budaya tambahkan metode di 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 perbarui ui untuk menampilkan informasi budaya modifikasi metode 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), ); } }, ), ], ); langkah 8 – melacak kemajuan pengguna perbarui kemajuan pengguna setiap kali mereka melihat terjemahan atau informasi budaya 8 1 perbarui userprogress di back4app tambahkan metode untuk memperbarui kemajuan 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 panggil updateuserprogress ketika sebuah objek dikenali di setstate di mana selectedobject diperbarui ontap () { setstate(() { selectedobject = recognizedobjects\[index]; }); updateuserprogress(selectedobject); }, langkah 9 – mengimplementasikan mode offline pastikan aplikasi dapat berfungsi tanpa koneksi internet untuk fitur inti 9 1 cache data secara lokal gunakan basis data lokal seperti sqflite atau hive untuk menyimpan terjemahan dan informasi budaya tambahkan hive ketergantungan di pubspec yaml dependencies hive ^2 0 0 hive flutter ^1 1 0 inisialisasi hive di main dart import 'package\ hive flutter/hive flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); await hive initflutter(); // initialize parse } 9 2 modifikasi metode pengambilan data untuk menggunakan cache perbarui gettranslation metode 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'; } } } ulangi langkah serupa untuk getculturalinfo langkah 10 – pengujian dan penyebaran uji aplikasi secara menyeluruh dan siapkan untuk penyebaran 10 1 uji pada perangkat fisik karena fungsionalitas ar memerlukan akses kamera, uji aplikasi pada perangkat nyata 10 2 optimalkan kinerja gunakan struktur data yang efisien minimalkan pengulangan yang tidak perlu di ui optimalkan aset gambar dan media 10 3 siapkan untuk penyebaran perbarui ikon aplikasi dan layar splash konfigurasi izin aplikasi bangun versi rilis untuk android dan ios rujuk ke dokumentasi resmi flutter tentang membangun dan merilis https //flutter dev/docs/deployment untuk detail lebih lanjut kesimpulan selamat! anda telah membangun aplikasi imersi bahasa ar menggunakan flutter dan back4app aplikasi ini mengenali objek, menampilkan terjemahan dan informasi budaya, melacak kemajuan pengguna, dan berfungsi secara offline anda dapat meningkatkan aplikasi lebih lanjut dengan mengintegrasikan pengenalan objek ar yang nyata, menambahkan lebih banyak bahasa, dan meningkatkan ui/ux untuk informasi lebih lanjut tentang fitur fitur canggih, pertimbangkan untuk menjelajahi mengintegrasikan model pembelajaran mesin gunakan tensorflow lite untuk pengenalan objek di perangkat meningkatkan kemampuan ar manfaatkan plugin seperti arcore flutter plugin atau arkit plugin untuk pengalaman ar yang lebih kaya mengimplementasikan teks ke ucapan tambahkan sintesis suara untuk panduan pengucapan menggunakan paket seperti flutter tts meningkatkan autentikasi pengguna implementasikan login sosial atau autentikasi dua faktor dengan membangun aplikasi ini, anda telah mendapatkan pengalaman dalam pengembangan flutter, integrasi backend dengan back4app, dan fitur fitur penting seperti caching data offline dan pelacakan kemajuan pengguna teruslah menjelajahi dan meningkatkan aplikasi anda untuk menciptakan pengalaman belajar bahasa yang lebih menarik