วิธีสร้างแอปจองงานด้วย Flutter และ Back4App

บทนำ ในโลกที่มีการเปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน การจัดการกิจกรรมและการจองผ่านแอปพลิเคชันมือถือกลายเป็นสิ่งที่จำเป็นมากขึ้น แอปจองกิจกรรมช่วยให้ผู้ใช้สามารถเรียกดูเหตุการณ์ที่จะเกิดขึ้น จองตั๋ว เลือกที่นั่ง และจัดการการจองของตนได้อย่างราบรื่น ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีสร้างแอปจองกิจกรรมที่สมบูรณ์โดยใช้ flutter สำหรับส่วนหน้าและ back4app เป็นบริการด้านหลัง เมื่อสิ้นสุดบทแนะนำนี้ คุณจะได้สร้างแอปที่ใช้งานได้ซึ่ง แสดงรายการกิจกรรมพร้อมรายละเอียด อนุญาตให้ผู้ใช้ดูตารางกิจกรรมและข้อมูลสถานที่ เปิดให้จองตั๋วพร้อมการเลือกที่นั่ง ประมวลผลการชำระเงินอย่างปลอดภัย (การรวมเข้ากับเกตเวย์การชำระเงิน) จัดการโปรไฟล์ผู้ใช้ รวมถึงประวัติการจองและความชอบ เริ่มกันเลย! ข้อกำหนดเบื้องต้น ในการทำบทแนะนำนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี flutter sdk ติดตั้งบนเครื่องของคุณแล้ว ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ dart และ flutter หากคุณเป็นมือใหม่ใน flutter ให้พิจารณาไปที่ บทแนะนำเบื้องต้นของ flutter https //flutter dev/docs/get started/codelab บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ back4app flutter sdk รวมเข้ากับโปรเจกต์ของคุณ คุณสามารถเรียนรู้วิธีการตั้งค่าได้โดยทำตาม คู่มือ back4app flutter https //www back4app com/docs/flutter/parse sdk/flutter setup โปรแกรมแก้ไขโค้ด เช่น visual studio code หรือ android studio node js และ npm ติดตั้งเพื่อรันฟังก์ชันคลาวด์ back4app ติดตั้งจาก เว็บไซต์ node js อย่างเป็นทางการ https //nodejs org/ ขั้นตอนที่ 1 – การตั้งค่า backend ของ back4app ในขั้นตอนนี้ คุณจะตั้งค่าโปรเจกต์ back4app ของคุณ สร้างคลาส (ตาราง) ที่จำเป็น และกำหนดค่าพื้นหลังเพื่อจัดเก็บข้อมูลเหตุการณ์ ข้อมูลตั๋ว และโปรไฟล์ผู้ใช้ 1 1 สร้างแอปพลิเคชัน back4app ใหม่ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ "สร้างแอปใหม่" กรอก ชื่อแอป (เช่น "eventbookingapp") และเลือก ไอคอนแอป คลิก "สร้าง" 1 2 กำหนดค่าคีย์แอปพลิเคชัน ไปที่ แดชบอร์ด ของแอปของคุณ คลิกที่ "การตั้งค่าแอป" > "ความปลอดภัย & คีย์" จดบันทึก รหัสประจำแอป และ คีย์ลูกค้า คุณจะต้องใช้สิ่งเหล่านี้เพื่อเริ่มต้น parse sdk ในแอป flutter ของคุณ 1 3 กำหนดโมเดลข้อมูล คุณต้องสร้างคลาสต่อไปนี้ใน back4app เหตุการณ์ เก็บรายละเอียดเหตุการณ์ สถานที่ เก็บข้อมูลสถานที่ ตั๋ว จัดการความพร้อมใช้งานและการจองตั๋ว ผู้ใช้ จัดการโปรไฟล์ผู้ใช้ (คลาสเริ่มต้น) สร้างคลาสเหตุการณ์ ในแถบด้านซ้าย ให้คลิกที่ "database" เพื่อเปิด data browser คลิกที่ "create a class" เลือก "custom" , ป้อน "event" เป็นชื่อคลาส และคลิก "create class" เพิ่มคอลัมน์ต่อไปนี้ใน event คลาส ชื่อ (string) คำอธิบาย (string) วันที่ (date) ภาพ (file) สถานที่ (pointer to venue) ราคา (number) สร้างคลาสสถานที่ ทำซ้ำขั้นตอนเพื่อสร้างคลาสใหม่ชื่อ "venue" เพิ่มคอลัมน์ต่อไปนี้ ชื่อ (string) ที่อยู่ (string) ความจุ (number) แผนที่ที่นั่ง (file) สร้างคลาส ticket สร้างคลาสใหม่ชื่อ "ticket" เพิ่มคอลัมน์ต่อไปนี้ เหตุการณ์ (ชี้ไปที่เหตุการณ์) ผู้ใช้ (ชี้ไปที่ผู้ใช้) หมายเลขที่นั่ง (สตริง) ราคา (หมายเลข) จองแล้ว (บูลีน) 1 4 เปิดใช้งานการตรวจสอบสิทธิ์ผู้ใช้ ในแถบด้านซ้าย คลิกที่ "การตั้งค่าเซิร์ฟเวอร์" > "การตั้งค่าทั่วไป" ภายใต้ "การตรวจสอบสิทธิ์" , ตรวจสอบให้แน่ใจว่า "เปิดใช้งานสิทธิ์ระดับคลาส" ถูกเลือก กำหนดค่าการอนุญาตของคลาส ผู้ใช้ เพื่ออนุญาตให้ผู้ใช้ลงทะเบียนและเข้าสู่ระบบ 1 5 ตั้งค่าฟังก์ชันคลาวด์ (ไม่บังคับสำหรับการประมวลผลการชำระเงิน) สำหรับการรวมการชำระเงิน คุณอาจต้องเขียนฟังก์ชันคลาวด์ ขั้นตอนนี้จะขึ้นอยู่กับเกตเวย์การชำระเงินที่คุณเลือก (เช่น stripe, paypal) โปรดดูเอกสารของ back4app เกี่ยวกับ ฟังก์ชันโค้ดคลาวด์ https //www back4app com/docs/platform/parse cloudcode ขั้นตอนที่ 2 – การเริ่มต้นโปรเจกต์ flutter ในขั้นตอนนี้ คุณจะตั้งค่าโปรเจกต์ flutter และรวม back4app parse sdk 2 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create event booking app ไปที่ไดเรกทอรีโปรเจกต์ cd event booking app 2 2 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter cupertino icons ^1 0 2 parse server sdk flutter ^4 0 1 provider ^6 0 0 \# add any additional packages you need, e g , http, image picker, etc รัน flutter pub get เพื่อติดตั้งแพ็กเกจ 2 3 เริ่มต้น parse sdk ใน 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 keyapplicationid = 'your back4app application id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { // build your app's ui here } แทนที่ 'your back4app application id' และ 'your back4app client key' ด้วยคีย์จริงของคุณจาก back4app ขั้นตอนที่ 3 – การดำเนินการยืนยันตัวตนของผู้ใช้ ผู้ใช้ต้องลงทะเบียนและเข้าสู่ระบบเพื่อจองกิจกรรมและจัดการโปรไฟล์ของตน 3 1 สร้างหน้าจอยืนยันตัวตน สร้างไฟล์ dart ใหม่สองไฟล์ใน lib/ login screen dart signup screen dart หน้าจอเข้าสู่ระบบ dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class loginscreen extends statefulwidget { @override loginscreenstate createstate() => loginscreenstate(); } class loginscreenstate extends state\<loginscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void douserlogin() async { final username = usernamecontroller text trim(); final password = passwordcontroller text trim(); final user = parseuser(username, password, null); var response = await user login(); if (response success) { // navigate to home screen navigator pushreplacementnamed(context, '/home'); } else { // show error message showerror(response error! message); } } void showerror(string message) { // implement a method to show error messages } @override widget build(buildcontext context) { // build your login ui here } } หน้าจอสมัครสมาชิก dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class signupscreen extends statefulwidget { @override signupscreenstate createstate() => signupscreenstate(); } class signupscreenstate extends state\<signupscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void douserregistration() async { final username = usernamecontroller text trim(); final password = passwordcontroller text trim(); final user = parseuser(username, password, null); var response = await user signup(); if (response success) { // navigate to home screen navigator pushreplacementnamed(context, '/home'); } else { // show error message showerror(response error! message); } } void showerror(string message) { // implement a method to show error messages } @override widget build(buildcontext context) { // build your sign up ui here } } 3 2 อัปเดต main dart ด้วย routes class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'event booking app', initialroute '/login', routes { '/login' (context) => loginscreen(), '/signup' (context) => signupscreen(), '/home' (context) => homescreen(), // add other routes as needed }, ); } } 3 2 อัปเดต main dart ด้วย routes 3 3 นำหน้าจอหลักไปใช้ สร้างไฟล์ home screen dart ที่ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์จะถูกเปลี่ยนเส้นทางไปยัง import 'package\ flutter/material dart'; class homescreen extends statelesswidget { @override widget build(buildcontext context) { // build your home screen ui here } } ขั้นตอนที่ 4 – แสดงเหตุการณ์ ดึงเหตุการณ์จาก back4app และแสดงในรายการ 4 1 สร้างโมเดลเหตุการณ์ สร้างคลาส dart event dart ใน lib/models/ import 'package\ parse server sdk flutter/parse server sdk dart'; class event extends parseobject implements parsecloneable { event() super( keytablename); event clone() this(); static const string keytablename = 'event'; static const string keyname = 'name'; static const string keydescription = 'description'; static const string keydate = 'date'; static const string keyimage = 'image'; static const string keyvenue = 'venue'; static const string keyprice = 'price'; @override clone(map\<string, dynamic> map) => event clone() fromjson(map); string? get name => get\<string>(keyname); string? get description => get\<string>(keydescription); datetime? get date => get\<datetime>(keydate); parsefilebase? get image => get\<parsefilebase>(keyimage); parseobject? get venue => get\<parseobject>(keyvenue); double? get price => get\<double>(keyprice); } 4 2 ดึงเหตุการณ์ในหน้าหลัก ใน home screen dart , ดึงเหตุการณ์และแสดงผลพวกมัน import 'package\ flutter/material dart'; import 'models/event dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class homescreen extends statefulwidget { @override homescreenstate createstate() => homescreenstate(); } class homescreenstate extends state\<homescreen> { future\<list\<event>> getevents() async { querybuilder\<event> queryevents = querybuilder\<event>(event()) orderbydescending('date'); final parseresponse apiresponse = await queryevents query(); if (apiresponse success && apiresponse results != null) { return apiresponse results as list\<event>; } else { return \[]; } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('events'), ), body futurebuilder\<list\<event>>( future getevents(), builder (context, snapshot) { if (snapshot hasdata) { list\<event> events = snapshot data!; return listview\ builder( itemcount events length, itembuilder (context, index) { event event = events\[index]; return listtile( title text(event name ?? 'no title'), subtitle text(event date? tolocal() tostring() ?? ''), ontap () { // navigate to event details navigator push( context, materialpageroute( builder (context) => eventdetailsscreen(event event), ), ); }, ); }, ); } else if (snapshot haserror) { return center(child text('error loading events')); } else { return center(child circularprogressindicator()); } }, ), ); } } 4 3 สร้างหน้ารายละเอียดกิจกรรม สร้าง event details screen dart import 'package\ flutter/material dart'; import 'models/event dart'; class eventdetailsscreen extends statelesswidget { final event event; eventdetailsscreen({required this event}); void bookticket(buildcontext context) { // implement ticket booking logic navigator push( context, materialpageroute( builder (context) => seatselectionscreen(event event), ), ); } @override widget build(buildcontext context) { // build ui to display event details return scaffold( appbar appbar( title text(event name ?? 'event details'), ), body column( children \[ // display event image, description, date, venue, etc text(event description ?? ''), elevatedbutton( onpressed () => bookticket(context), child text('book ticket'), ), ], ), ); } } ขั้นตอนที่ 5 – การเลือกที่นั่ง อนุญาตให้ผู้ใช้เลือกที่นั่งก่อนทำการจอง 5 1 สร้างหน้าจอการเลือกที่นั่ง สร้าง seat selection screen dart import 'package\ flutter/material dart'; import 'models/event dart'; class seatselectionscreen extends statelesswidget { final event event; seatselectionscreen({required this event}); // mock data for seats final list\<string> seats = list generate(100, (index) => 'seat ${index + 1}'); @override widget build(buildcontext context) { // build ui for seat selection return scaffold( appbar appbar( title text('select seats'), ), body gridview\ builder( griddelegate slivergriddelegatewithfixedcrossaxiscount( crossaxiscount 5, ), itemcount seats length, itembuilder (context, index) { string seat = seats\[index]; return gesturedetector( ontap () { // handle seat selection // navigate to payment screen navigator push( context, materialpageroute( builder (context) => paymentscreen(event event, seat seat), ), ); }, child card( child center(child text(seat)), ), ); }, ), ); } } ขั้นตอนที่ 6 – การประมวลผลการชำระเงิน รวมเกตเวย์การชำระเงินเพื่อประมวลผลการชำระเงินสำหรับตั๋วอย่างปลอดภัย 6 1 เลือกเกตเวย์การชำระเงิน สำหรับบทเรียนนี้ เราจะสมมติการใช้ stripe https //stripe com/docs/payments 6 2 ตั้งค่าบัญชี stripe และรับ api keys ลงทะเบียนสำหรับ บัญชี stripe https //dashboard stripe com/register รับ publishable key และ secret key 6 3 เพิ่มการพึ่งพา stripe เพิ่ม stripe payment แพ็คเกจลงใน pubspec yaml dependencies stripe payment ^1 0 9 รัน flutter pub get 6 4 การสร้างหน้าชำระเงิน สร้าง payment screen dart import 'package\ flutter/material dart'; import 'package\ stripe payment/stripe payment dart'; import 'models/event dart'; class paymentscreen extends statefulwidget { final event event; final string seat; paymentscreen({required this event, required this seat}); @override paymentscreenstate createstate() => paymentscreenstate(); } class paymentscreenstate extends state\<paymentscreen> { void initstate() { super initstate(); stripepayment setoptions( stripeoptions( publishablekey 'your stripe publishable key', // optionally set other options ), ); } void startpayment() async { // implement payment logic // create payment method paymentmethod paymentmethod = await stripepayment paymentrequestwithcardform( cardformpaymentrequest(), ); // process the payment using a cloud function or your server // for simplicity, we'll assume payment is successful saveticket(); } void saveticket() async { // save ticket information to back4app final ticket = parseobject('ticket') set('event', widget event) set('user', await parseuser currentuser()) set('seatnumber', widget seat) set('price', widget event price) set('isbooked', true); await ticket save(); // navigate to confirmation screen or display success message } @override widget build(buildcontext context) { // build payment ui return scaffold( appbar appbar( title text('payment'), ), body center( child elevatedbutton( onpressed startpayment, child text('pay \\$${widget event price}'), ), ), ); } } หมายเหตุ การประมวลผลการชำระเงินต้องการการจัดการข้อมูลที่ละเอียดอ่อนอย่างปลอดภัย ในแอปพลิเคชันที่ใช้งานจริง คุณควรประมวลผลการชำระเงินอย่างปลอดภัยโดยใช้เซิร์ฟเวอร์หรือฟังก์ชันคลาวด์ของคุณเอง ขั้นตอนที่ 7 – การจัดการโปรไฟล์ผู้ใช้ อนุญาตให้ผู้ใช้ดูและจัดการการจองและความชอบของตน 7 1 สร้างหน้าประวัติส่วนตัว สร้าง profile screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class profilescreen extends statelesswidget { future\<list\<parseobject>> getusertickets() async { final user = await parseuser currentuser(); querybuilder\<parseobject> querytickets = querybuilder\<parseobject>(parseobject('ticket')) whereequalto('user', user) includeobject(\['event']); final parseresponse apiresponse = await querytickets query(); if (apiresponse success && apiresponse results != null) { return apiresponse results as list\<parseobject>; } else { return \[]; } } @override widget build(buildcontext context) { // build profile ui return scaffold( appbar appbar( title text('my profile'), ), body futurebuilder\<list\<parseobject>>( future getusertickets(), builder (context, snapshot) { if (snapshot hasdata) { list\<parseobject> tickets = snapshot data!; return listview\ builder( itemcount tickets length, itembuilder (context, index) { parseobject ticket = tickets\[index]; parseobject event = ticket get('event'); return listtile( title text(event get\<string>('name') ?? 'no event name'), subtitle text('seat ${ticket get\<string>('seatnumber')}'), ); }, ); } else if (snapshot haserror) { return center(child text('error loading tickets')); } else { return center(child circularprogressindicator()); } }, ), ); } } 7 2 เพิ่มการนำทางไปยังหน้าประวัติส่วนตัว ใน home screen dart หรือเมนูนำทางหลัก ให้เพิ่มลิงก์ไปยังหน้าประวัติส่วนตัว iconbutton( icon icon(icons person), onpressed () { navigator push( context, materialpageroute(builder (context) => profilescreen()), ); }, ), ขั้นตอนที่ 8 – การทดสอบแอป เรียกใช้แอปของคุณโดยใช้ flutter run ทดสอบฟังก์ชันการทำงานต่อไปนี้ ลงทะเบียนและเข้าสู่ระบบ ดูรายการกิจกรรม ดูรายละเอียดกิจกรรม เลือกที่นั่งและดำเนินการชำระเงิน ดำเนินการชำระเงิน (โหมดทดสอบหากเป็นไปได้) ดูการจองในโปรไฟล์ บทสรุป ขอแสดงความยินดี! คุณได้สร้างแอปจองงานอีเวนต์ที่สมบูรณ์แบบโดยใช้ flutter และ back4app แอปนี้ช่วยให้ผู้ใช้สามารถเรียกดูงานอีเวนต์ จองตั๋วพร้อมการเลือกที่นั่ง ประมวลผลการชำระเงิน และจัดการโปรไฟล์และการจองของตนได้ จากที่นี่ คุณสามารถปรับปรุงแอปของคุณได้โดย เพิ่มการแจ้งเตือนแบบพุชสำหรับการเตือนความจำเกี่ยวกับงานอีเวนต์ ดำเนินการค้นหาและการกรองสำหรับงานอีเวนต์ ปรับปรุง ui/ux ด้วยการออกแบบและอนิเมชั่นที่ดีกว่า รักษาความปลอดภัยในการประมวลผลการชำระเงินด้วยการตรวจสอบจากฝั่งเซิร์ฟเวอร์ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ของ flutter และ back4app โปรดตรวจสอบที่ เอกสาร flutter https //flutter dev/docs เอกสาร back4app https //www back4app com/docs คู่มือ cloud code ของ parse server https //docs parseplatform org/cloudcode/guide/ โดยการรวม flutter กับ back4app คุณจะใช้ประโยชน์จากการรวมกันที่ทรงพลังในการสร้างแอปพลิเคชันมือถือที่สามารถปรับขนาดได้และมีฟีเจอร์มากมายอย่างมีประสิทธิภาพ