Como Construir um Aplicativo de Reserva de Eventos com Flutter e Back4App

introdução no mundo acelerado de hoje, gerenciar eventos e reservas por meio de aplicativos móveis tornou se cada vez mais essencial um aplicativo de reserva de eventos permite que os usuários naveguem por eventos futuros, reservem ingressos, selecionem assentos e gerenciem suas reservas de forma contínua neste tutorial, você aprenderá como criar um aplicativo de reserva de eventos completo usando flutter para o frontend e back4app como o serviço de backend ao final deste tutorial, você terá construído um aplicativo funcional que exibe uma lista de eventos com detalhes permite que os usuários vejam os horários dos eventos e informações sobre os locais permite a reserva de ingressos com seleção de assentos processa pagamentos de forma segura (integração com um gateway de pagamento) gerencia perfis de usuários, incluindo histórico de reservas e preferências vamos começar! pré requisitos para completar este tutorial, você precisará flutter sdk instalado na sua máquina local siga o https //flutter dev/docs/get started/install conhecimento básico de dart e flutter se você é novo no flutter, considere passar pelo https //flutter dev/docs/get started/codelab uma conta back4app inscreva se para uma conta gratuita em https //www back4app com/ back4app flutter sdk integrado ao seu projeto você pode aprender como configurá lo seguindo o https //www back4app com/docs/flutter/parse sdk/flutter setup um editor de código como visual studio code ou android studio node js e npm instalados para executar funções em nuvem do back4app instale os a partir do https //nodejs org/ passo 1 – configurando o backend do back4app neste passo, você configurará seu projeto back4app, criará as classes necessárias (tabelas) e configurará o backend para armazenar dados de eventos, informações de ingressos e perfis de usuários 1 1 criar um novo aplicativo back4app faça login na sua conta back4app clique em "criar novo app" digite um nome do app (por exemplo, "eventbookingapp") e selecione seu ícone do app clique em "criar" 1 2 configurar chaves da aplicação navegue até o painel do seu app clique em "configurações do app" > "segurança e chaves" anote o id da aplicação e chave do cliente você precisará disso para inicializar o sdk parse em seu app flutter 1 3 defina os modelos de dados você precisa criar as seguintes classes no back4app evento armazena detalhes do evento local armazena informações sobre o local ingresso gerencia a disponibilidade e reservas de ingressos usuário gerencia perfis de usuário (classe padrão) crie a classe evento no painel lateral esquerdo, clique em "banco de dados" para abrir o navegador de dados clique em "criar uma classe" selecione "personalizado" , insira "evento" como o nome da classe, e clique em "criar classe" adicione as seguintes colunas à classe evento nome (string) descrição (string) data (data) imagem (arquivo) local (ponteiro para local) preço (número) crie a classe local repita os passos para criar uma nova classe chamada "local" adicione as seguintes colunas nome (string) endereço (string) capacidade (número) planodeassentos (arquivo) crie a classe ticket crie uma nova classe chamada "ticket" adicione as seguintes colunas evento (ponteiro para evento) usuário (ponteiro para usuário) númerodoassento (string) preço (número) estáreservado (booleano) 1 4 ativar autenticação de usuário no painel lateral esquerdo, clique em "configurações do servidor" > "configurações gerais" em "autenticação" , certifique se de que "ativar permissões de nível de classe" está marcado configure as permissões da classe usuário para permitir que os usuários se inscrevam e façam login 1 5 configurar funções em nuvem (opcional para processamento de pagamentos) para integração de pagamento, você pode precisar escrever funções em nuvem esta etapa dependerá do gateway de pagamento que você escolher (por exemplo, stripe, paypal) consulte a documentação do back4app sobre https //www back4app com/docs/platform/parse cloudcode passo 2 – inicializando o projeto flutter neste passo, você irá configurar o projeto flutter e integrar o back4app parse sdk 2 1 criar um novo projeto flutter abra seu terminal e execute flutter create event booking app navegue até o diretório do projeto cd event booking app 2 2 adicionar dependências abra pubspec yaml e adicione as seguintes dependências 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 execute flutter pub get para instalar os pacotes 2 3 inicializar o parse sdk em lib/main dart , importe os pacotes necessários e inicialize o 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 } substitua 'your back4app application id' e 'your back4app client key' pelas suas chaves reais do back4app passo 3 – implementando a autenticação do usuário os usuários precisam se inscrever e fazer login para reservar eventos e gerenciar seus perfis 3 1 criar telas de autenticação crie dois novos arquivos dart em lib/ login screen dart signup screen dart tela login 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 } } tela signup 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 atualizar main dart com rotas 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 atualizar main dart com rotas 3 3 implementar tela inicial crie um home screen dart arquivo onde os usuários autenticados são redirecionados import 'package\ flutter/material dart'; class homescreen extends statelesswidget { @override widget build(buildcontext context) { // build your home screen ui here } } passo 4 – exibindo eventos busque eventos do back4app e exiba os em uma lista 4 1 criar modelo de evento crie uma classe dart event dart em 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 buscar eventos na tela inicial em home screen dart , busque eventos e os exiba 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 criar tela de detalhes do evento criar 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'), ), ], ), ); } } passo 5 – implementando a seleção de assentos permitir que os usuários selecionem assentos antes de reservar 5 1 criar tela de seleção de assentos criar 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)), ), ); }, ), ); } } passo 6 – processando pagamentos integrar um gateway de pagamento para processar pagamentos de ingressos de forma segura 6 1 escolher um gateway de pagamento para este tutorial, assumiremos o uso de https //stripe com/docs/payments 6 2 configurar conta stripe e obter chaves de api inscreva se para uma https //dashboard stripe com/register obtenha sua chave publicável e chave secreta 6 3 adicionar dependência do stripe adicione stripe payment pacote ao seu pubspec yaml dependencies stripe payment ^1 0 9 execute flutter pub get 6 4 implementar tela de pagamento criar 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}'), ), ), ); } } nota o processamento de pagamentos requer manuseio seguro de dados sensíveis em um aplicativo de produção, você deve processar pagamentos de forma segura usando seu próprio servidor ou funções em nuvem passo 7 – gerenciando perfis de usuário permitir que os usuários visualizem e gerenciem suas reservas e preferências 7 1 criar tela de perfil criar 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 adicionar navegação à tela de perfil em seu home screen dart ou no menu de navegação principal, adicione um link para a tela de perfil iconbutton( icon icon(icons person), onpressed () { navigator push( context, materialpageroute(builder (context) => profilescreen()), ); }, ), passo 8 – testando o app execute seu app usando flutter run teste as seguintes funcionalidades cadastrar e fazer login ver a lista de eventos ver detalhes do evento selecionar assentos e prosseguir para o pagamento processar um pagamento (modo de teste, se possível) ver reservas no perfil conclusão parabéns! você construiu um aplicativo completo de reserva de eventos usando flutter e back4app este aplicativo permite que os usuários naveguem por eventos, reservem ingressos com seleção de assentos, processem pagamentos e gerenciem seus perfis e reservas a partir daqui, você pode aprimorar seu aplicativo adicionando notificações push para lembretes de eventos implementando busca e filtragem para eventos aprimorando a ui/ux com um design e animações melhores garantindo o processamento de pagamentos com validação do lado do servidor para mais informações sobre os recursos do flutter e do back4app, confira https //flutter dev/docs https //www back4app com/docs https //docs parseplatform org/cloudcode/guide/ ao integrar o flutter com o back4app, você aproveita uma combinação poderosa para construir aplicativos móveis escaláveis e ricos em recursos de forma eficiente