วิธีการใช้ Uint8List ใน Flutter และเก็บถาวรใน Backend โดยใช้ Back4app

บทนำ ในระบบดิจิทัล ไฟล์มักถูกแทนที่ด้วยลำดับของไบต์ และ dart มีวิธีที่มีประสิทธิภาพในการจัดการข้อมูลไบต์โดยใช้ uint8list uint8list เป็นรายการที่มีความยาวคงที่ของจำนวนเต็ม 8 บิตที่ไม่มีเครื่องหมาย ซึ่งหมายความว่าหมายเลขแต่ละหมายเลขมีค่าตั้งแต่ 0 ถึง 255 โครงสร้างนี้มีประโยชน์สำหรับการทำงานกับข้อมูลไบนารี เช่น รูปภาพหรือไฟล์ ซึ่งประสิทธิภาพของหน่วยความจำมีความสำคัญ ในบทเรียนนี้ เราจะพูดถึงวิธีการทำงานกับ uint8list ใน flutter แปลงไฟล์เป็นรายการไบต์ และเก็บข้อมูลในแบ็กเอนด์ของ back4app โดยใช้ parse sdk สำหรับ flutter ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณเอง ติดตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install หากคุณยังไม่ได้ตั้งค่า ความรู้พื้นฐานเกี่ยวกับ dart, วิดเจ็ต flutter และการใช้ back4app สำหรับบริการแบ็กเอนด์ ขั้นตอนที่ 1 – การตั้งค่าแบ็กเอนด์ back4app ของคุณ สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชี back4app https //www back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse สำหรับบทเรียนนี้ ให้สร้างคลาส parse ชื่อ filestorage เพื่อเก็บข้อมูลไบนารี filename (string) ชื่อของไฟล์ filedata (file) ข้อมูลไบนารีของไฟล์ รับข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึงหมายเลขประจำตัวแอปพลิเคชันและคีย์ลูกค้า ซึ่งคุณจะต้องเชื่อมต่อแอป flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การตั้งค่าโปรเจกต์ flutter สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน flutter create uint8list example เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter parse server sdk flutter latest version file picker latest version path provider latest version รัน flutter pub get เพื่อติดตั้ง dependencies เหล่านี้ เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , เริ่มต้น parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home uint8listexample(), ); } } แทนที่ 'your back4app app id' และ 'your back4app client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 – การทำงานกับ uint8list ใน flutter การเลือกไฟล์และการอ่าน ใช้ file picker แพ็คเกจเพื่อเลือกไฟล์จากอุปกรณ์และแปลงเป็น uint8list import 'dart\ io'; import 'dart\ typed data'; import 'package\ flutter/material dart'; import 'package\ file picker/file picker dart'; import 'package\ path provider/path provider dart'; class uint8listexample extends statefulwidget { @override uint8listexamplestate createstate() => uint8listexamplestate(); } class uint8listexamplestate extends state\<uint8listexample> { uint8list? filebytes; string? filename; future\<void> pickfile() async { filepickerresult? result = await filepicker platform pickfiles(); if (result != null) { platformfile file = result files first; setstate(() { filebytes = file bytes; filename = file name; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('uint8list example')), body center( child column( mainaxisalignment mainaxisalignment center, children \[ elevatedbutton( onpressed pickfile, child text('pick a file'), ), if ( filename != null) text('selected file $ filename'), if ( filebytes != null) elevatedbutton( onpressed savetobackend, child text('save to backend'), ), ], ), ), ); } future\<void> savetobackend() async { // implement the saving logic in the next step } } โค้ดนี้ให้ผู้ใช้เลือกไฟล์ อ่านไฟล์เป็น uint8list , และแสดงชื่อไฟล์และปุ่มเพื่อบันทึกมัน ขั้นตอนที่ 4 – การเก็บรักษา uint8list ใน back4app เพื่อเก็บไฟล์ใน back4app เราใช้ parsefile อ็อบเจ็กต์ ซึ่งช่วยให้เราสามารถอัปโหลดข้อมูลไบนารี เช่น รูปภาพหรือเอกสารได้ การบันทึกไฟล์ไปยัง back4app อัปเดต savetobackend เมธอดเพื่อเก็บไฟล์ที่เลือกใน back4app future\<void> savetobackend() async { if ( filebytes != null && filename != null) { final parsefile = parsefile(null, name filename, bytedata filebytes); // create a new parseobject to store the file final filestorage = parseobject('filestorage') set('filename', filename) set('filedata', parsefile); // save the file in back4app final response = await filestorage save(); if (response success) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('file saved successfully!'), )); } else { scaffoldmessenger of(context) showsnackbar(snackbar( content text('failed to save file '), )); } } } เมธอดนี้อัปโหลดไฟล์เป็นข้อมูลไบนารีไปยัง back4app โดยใช้ parsefile หากสำเร็จจะแสดงข้อความยืนยัน ขั้นตอนที่ 5 – รันแอป รันแอปของคุณ โดยใช้ flutter run คุณควรเห็นปุ่มเพื่อเลือกไฟล์ ตามด้วยตัวเลือกในการบันทึกไปยังแบ็กเอนด์เมื่อเลือกแล้ว ตรวจสอบข้อมูลใน back4app โดยการเข้าสู่ระบบในแดชบอร์ด back4app ของคุณและตรวจสอบ filestorage คลาส คุณควรเห็นไฟล์ที่บันทึกพร้อมกับชื่อของมัน แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดเก็บข้อมูลไบนารี เมื่อทำงานกับ uint8list และข้อมูลไบนารี นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการ ใช้ parsefile ของ back4app เป็นวิธีที่มีประสิทธิภาพในการจัดเก็บและเรียกคืนข้อมูลไบนารี เช่น รูปภาพ วิดีโอ และเอกสาร หลีกเลี่ยงการจัดเก็บไฟล์ขนาดใหญ่โดยตรงในวัตถุ parse หากไฟล์ของคุณมีขนาดใหญ่ ให้พิจารณาใช้บริการจัดเก็บข้อมูล เช่น aws s3 และจัดเก็บ url ของไฟล์ในวัตถุ parse แทนไฟล์เอง การบีบอัดและการเพิ่มประสิทธิภาพ สำหรับรูปภาพหรือไฟล์ขนาดใหญ่ ให้พิจารณาบีบอัดไฟล์ก่อนที่จะอัปโหลดเพื่อปรับปรุงประสิทธิภาพ บทสรุป ในบทแนะนำนี้ เราได้พูดถึงวิธีการทำงานกับ uint8list ใน flutter แปลงไฟล์เป็นรายการไบต์ และเก็บข้อมูลนี้ใน back4app โดยใช้ parse sdk uint8list ให้วิธีการที่ใช้หน่วยความจำอย่างมีประสิทธิภาพในการจัดการข้อมูลไบต์ใน dart ทำให้เหมาะสมสำหรับการดำเนินการไฟล์ เช่น การอัปโหลดรูปภาพ การจัดเก็บเอกสาร และอื่นๆ การรวมสิ่งนี้กับ back4app ช่วยให้คุณสามารถจัดเก็บและจัดการข้อมูลไบนารีในคลาวด์ได้อย่างง่ายดาย สำหรับข้อมูลเพิ่มเติม โปรดเยี่ยมชม เอกสาร flutter https //flutter dev/docs และ เอกสาร back4app https //www back4app com/docs โค้ดให้สนุก!