Guia passo a passo para criar um backend do Flutter

Este artigo discutirá o Flutter, um kit de desenvolvimento de software de interface do usuário de código aberto criado pelo Google.

Exploraremos as vantagens e desvantagens de usar o Flutter e destacaremos diferentes opções de back-end para seu aplicativo Flutter.

Por fim, você aprenderá a criar um backend funcional para seu aplicativo Flutter usando o recurso Backend as a Service (BaaS) da Back4apps.

O que é Flutter?

O Flutter é uma estrutura de desenvolvimento multiplataforma que permite criar rapidamente aplicativos nativos para Android, iOS, Web, Linux, macOS e Windows.

Com o Flutter, você descobrirá que muitas das complexidades da criação de aplicativos específicos de plataforma são contornadas para você. O Flutter também é conhecido por seu desempenho rápido e pelos belos widgets de interface do usuário.

A própria equipe do Flutter define a tecnologia como;

Uma estrutura de código aberto do Google para criar aplicativos bonitos, compilados nativamente e multiplataforma a partir de uma única base de código.

As 3 principais vantagens e limitações do Flutter

Quais são os tipos de back-end?

A escolha da opção de backend correta para lidar com as tarefas do lado do servidor é muito importante ao criar qualquer aplicativo.

Cada tipo de backend tem seus pontos fortes, e a necessidade específica do seu aplicativo deve orientar a escolha do backend.

As subseções a seguir destacarão as diferentes opções de backend com as quais você pode trabalhar, o que são, como funcionam e como podem atender melhor às necessidades do seu aplicativo.

IaaS

A IaaS é uma opção de backend que você deve considerar empregar se estiver lidando com um aplicativo grande com muitos usuários. IaaS é um modelo de computação em nuvem que significa Infraestrutura como Serviço.

A computação em nuvem é um modelo no qual um provedor terceirizado fornece recursos de computação, como servidores, armazenamento e aplicativos, pela Internet.

Esses recursos podem ser acessados sob demanda, com preços de pagamento conforme o uso. Com a IaaS, o provedor de nuvem manterá a principal infraestrutura de computação subjacente, enquanto você terá controle total sobre a configuração dos dados do seu aplicativo, o sistema operacional e todos os outros requisitos de back-end.

Isso o torna uma boa opção de backend para aplicativos que precisam de escalonamento com recursos de computação para cima ou para baixo.

PaaS

Platform-as-a-Service (PaaS) e Infrastructure-as-a-Service (IaaS) são dois modelos distintos de computação em nuvem que servem a propósitos diferentes. Embora ambos ofereçam flexibilidade e escalabilidade, eles atendem a diferentes necessidades no desenvolvimento e na implantação de aplicativos.

Um backend de PaaS fornecerá a você um ambiente de desenvolvimento completo, abstraindo as complexidades do gerenciamento de servidores, redes e armazenamento. A PaaS é mais adequada se você quiser se concentrar na criação e na manutenção de aplicativos sem se preocupar com o gerenciamento da infraestrutura.

BaaS

Um backend BaaS (Backend-as-a-Service ) fornece serviços e funcionalidades de backend prontos para uso, permitindo que eles se concentrem na criação e no aprimoramento da experiência do usuário do aplicativo sem gerenciar a infraestrutura de backend.

Com o BaaS, os desenvolvedores podem acessar recursos como autenticação de usuário, bancos de dados e armazenamento por meio de APIs, eliminando a necessidade de configurar e manter servidores de back-end.

É como usar uma peça de quebra-cabeça pronta que se encaixa perfeitamente no seu aplicativo, economizando tempo e esforço.

Em essência, o BaaS simplifica o processo de desenvolvimento, permitindo que os desenvolvedores se concentrem nos aspectos voltados para o usuário de seus aplicativos e confiem em serviços de back-end pré-criados para lidar com o trabalho pesado.

Como criar um backend do Flutter usando um backend como serviço

Esta seção discutirá como você pode começar a criar o backend de um aplicativo Flutter. A plataforma Back4app é uma ótima opção para criar aplicativos de backend escaláveis e seguros que são flexíveis e fáceis de implementar.

Visão geral do Back4app

A Back4App é uma plataforma Backend-as-a-Service (BaaS) que simplifica o desenvolvimento de aplicativos móveis e da Web, fornecendo uma infraestrutura de back-end completa.

Com o Back4App, você poderá se concentrar na criação dos recursos de front-end do seu aplicativo.

A plataforma oferece uma ampla gama de serviços de back-end prontos para uso, incluindo bancos de dados, APIs e funções de nuvem.

Os principais recursos/benefícios do Back4app incluem:

• Bancos de dados relacionais e não relacionais
• APIs REST e GraphQL
• Consultas ao vivo
• Ampla gama de opções de autenticação
• Hospedagem escalável
• Notificações push e por e-mail

O Back4App usa o servidor Parse, um kit de código aberto para desenvolver componentes do lado do servidor de um aplicativo. Com suporte para várias tecnologias. Este guia de referência lista as diferentes tecnologias suportadas pelo Back4app.

Introdução ao projeto

O objetivo deste guia é criar um backend do Back4app para dar suporte a um aplicativo Flutter. O aplicativo se conectará e interagirá com o backend configurado usando o SDK do servidor Parse.

O aplicativo que você criará é um aplicativo simples de contatos que permite aos usuários criar e ler contatos. Esses contatos serão armazenados usando o suporte ao banco de dados PostgreSQL do Back4app.

Os usuários podem adicionar novos contatos inserindo as informações do contato no aplicativo.

Ao final deste guia, você terá uma sólida compreensão de como fazer:

• Criar um aplicativo de back-end na plataforma Back4app
• Gravar em um banco de dados estruturado do Back4app
• Lidar com os princípios básicos de segurança do backend do Parse.

Pré-requisitos

Para acompanhar este guia, você deve atender a estes pré-requisitos:

• Familiaridade com a linguagem Dart e a estrutura Flutter
• Conhecimento de manipulação de estado no Flutter
• Um simulador ou emulador de dispositivo para executar seu aplicativo. Xcode para iOS ou Android Studio para Android.
• Conhecimento básico de bancos de dados relacionais e não relacionais

Criar aplicativo

Você precisará ter uma conta Back4app para criar seu backend. Se ainda não tiver uma, você pode criá-la inscrevendo-se para obter umaconta gratuitaem .

Se você já tiver uma conta no Back4app, faça login e crie um novo aplicativo. Selecione Backend as a Service como a opção de serviço.

Isso criará um backend BaaS escalável. Não se esqueça de dar um nome exclusivo ao seu aplicativo. Para o banco de dados escolhido, o Back4app oferece o PostgreSQL como opção de banco de dados.

O PostgreSQL é um popular sistema de gerenciamento de banco de dados relacional (RDBMS) de código aberto. Ele é conhecido por sua escalabilidade, confiabilidade, alto desempenho e segurança.

O uso da opção beta do PostgreSQL no Back4app permite que você aproveite esses recursos e benefícios.

A fase de compilação deve ser rápida. Quando ela for concluída, você será direcionado para o painel do aplicativo.

Banco de dados PostgreSQL

No Back4App, você pode definir classes e campos que representam os dados do seu aplicativo. O PostgreSQL usa bancos de dados relacionais, um método estruturado de armazenamento de dados para os usuários do seu aplicativo.

Como mencionado anteriormente, nosso aplicativo Flutter será uma agenda de contatos onde podemos armazenar vários contatos. Os bancos de dados PostgreSQL mantêm relações. Um modelo de dados razoável para esse aplicativo seria uma classe de contatos e a cidade ZipCode do contato.

Vamos começar com o modelo de contatos. A tabela de contatos exigiria os diferentes campos;

• ContactId/ObjectId
• Nome
• Número de telefone
• Código Postal

Sua tabela de modelo de dados teria a seguinte aparência;

Contato

Código postal

O objeto Contact armazenará as informações de contato, com o contactId como chave primária. Os campos name, phoneNumber e zipCode são de preenchimento obrigatório (NOT NULL),

Esse modelo de dados cria uma relação entre as tabelas do aplicativo Contatos, permitindo que você gerencie informações de contato e associe vários campos a cada contato.

Para criar essas duas classes em seu aplicativo Back4app, clique no botão Create a Class (Criar uma classe ) no canto superior esquerdo de seu Dashboard.

Nomeie a classe Contato e ative a opção “é um campo obrigatório?”.

Crie as colunas para os campos de dados em Contact e, em seguida, faça o mesmo para a classe ZipCode. O Back4app permite que você personalize cada coluna criada.

Painel do administrador

O Back4App fornece uma GUI (Graphical User Interface, interface gráfica do usuário) intuitiva chamada Admin Panel para gerenciar o backend dos seus aplicativos sem esforço.

O Admin Panel é uma ferramenta poderosa para monitorar, editar e analisar dados, o que o torna um recurso inestimável para o gerenciamento de aplicativos.

Você pode acessar o painel de administração do seu aplicativo dentro dele. No painel do aplicativo, você encontrará um botão ou link chamado“Painel de administração” em “Mais“,que o direcionará para o Painel de administração. Lá, você pode ativar e habilitar o aplicativo de administração.

Você fornecerá um nome de usuário e uma senha para acessar o aplicativo de administração.

A etapa final para configurar seu aplicativo de administração é escolher um nome de domínio que você gostaria de usar para acessar o painel.

Para este guia, um bom exemplo seria: flutter-backend.admin.back4app.com.

Agora você pode fazer login no painel de administração abrindo o domínio fornecido em um navegador.

Para saber mais sobre o aplicativo Back4app Admin, visite a documentação oficial.

Protegendo o aplicativo

Atualmente, seu aplicativo de back-end está completamente vulnerável, e as informações contidas nele podem ser adulteradas pelo lado do cliente.

Para evitar isso na fase de produção, você pode configurar regulamentos e permissões de acesso.

Para controlar como as classes são criadas e não permitir a criação de classes no lado do cliente, navegue até Dashboard > App Settings e localize Client Class Creation. Desative essa opção, pois seu aplicativo atualmente requer apenas as duas classes que você criou.

Uma janela pop-up será exibida quando você desativar o aplicativo. Isso serve para confirmar e salvar suas alterações no aplicativo.

Teste de API CRUD com o Flutter

Nesta seção, você testará as funções de API de backend e o banco de dados do seu aplicativo com um aplicativo Flutter que você criará. Você começará criando a interface de usuário para o aplicativo Flutter.

Você deve instalar o SDK do Flutter em seu computador para inicializar um aplicativo Flutter.

Siga os documentos oficiais de introdução do Flutter para instalar o Flutter SDK e as ferramentas necessárias para criar um aplicativo Flutter em seu computador Windows ou Mac.

Para inicializar um aplicativo Flutter, execute os seguintes comandos em seu terminal:

#Initialize your Flutter app
flutter create my_flutter_app

#Run your Flutter app
flutter run

Esses comandos irão estruturar e iniciar um aplicativo Flutter simples para você desenvolver.

Com o objetivo de manter este guia simples, o arquivo main.dart conterá a maior parte do código para executar seu aplicativo Flutter. Não discutiremos o código do Flutter aqui, pois esse não é o objetivo do guia.

Substitua todo o código em main.dart pelo seguinte:

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'appID';
  final keyClientKey = 'clientKey';
  final keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  runApp(MaterialApp(
    title: 'Contacts',
    theme: ThemeData(
      primaryColor: Colors.white,
    ),
    home: ContactsApp(),
  ));
}

class ContactsApp extends StatefulWidget {
  const ContactsApp({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _ContactsAppState createState() => _ContactsAppState();
}

class _ContactsAppState extends State<ContactsApp> {
  List<Contact> contacts = [];
  String? selectedZipCode; // Initialize with a default value

  @override
  void initState() {
    super.initState();
    selectedZipCode = '1234'; // Initialize with a default value
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Contacts'),
      ),
      body: ListView.builder(
        itemCount: contacts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(contacts[index].name),
            subtitle: Text(contacts[index].phoneNumber),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  contacts.removeAt(index);
                });
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showAddContactDialog();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  void _showAddContactDialog() async {
    showDialog(
      context: context,
      builder: (context) {
        String name = '';
        String phoneNumber = '';

        return AlertDialog(
          title: const Text('Add Contact'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                decoration: const InputDecoration(labelText: 'Name'),
                onChanged: (value) {
                  name = value;
                },
              ),
              TextField(
                decoration: const InputDecoration(labelText: 'Phone Number'),
                onChanged: (value) {
                  phoneNumber = value;
                },
              ),
              // Checkbox for Zip Code
              ListTile(
                title: const Text('Select Zip Code'),
                subtitle: Column(
                  children: [
                    RadioListTile(
                      title: const Text('1234'),
                      value: '1234',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                    RadioListTile(
                      title: const Text('4321'),
                      value: '4321',
                      groupValue: selectedZipCode,
                      onChanged: (value) {
                        setState(() {
                          selectedZipCode = value;
                        });
                        print(selectedZipCode);
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  contacts.add(Contact(
                    name: name,
                    phoneNumber: phoneNumber,
                    zipCode: selectedZipCode as String,
                  ));
                });

                // Save the contact to Back4App
                final contact = ParseObject('Contact');
                contact.set('name', name);
                contact.set('phoneNumber', phoneNumber);
                contact.set(
                    'zipCode',
                    (ParseObject('ZipCode')..objectId = selectedZipCode.objectId)
                        .toPointer());

                await contact.save();

                // ignore: use_build_context_synchronously
                Navigator.of(context).pop();
              },
              child: const Text('Save'),
            ),
          ],
        );
      },
    );
  }
}

class Contact {
  final String name;
  final String phoneNumber;
  final String zipCode;

  Contact({
    required this.name,
    required this.phoneNumber,
    required this.zipCode,
  });
}

class ZipCode {
  final String zipCode;

  ZipCode({
    required this.zipCode,
  });
}

Com isso, você terá a UI básica do seu aplicativo Flutter funcionando.

Agora você pode iniciar a implementação do Back4app. O Back4app usa o Parse Flutter SDK para integrar o Parse Server em um aplicativo Flutter.

O Parse Server é uma plataforma de back-end de código aberto que fornece uma infraestrutura pronta para uso para gerenciar dados de aplicativos.

Com o SDK, você pode se comunicar com a API do Parse Server a partir do seu aplicativo Flutter, facilitando a execução de operações CRUD (Criar, Ler, Atualizar, Excluir) nos dados, gerenciar sessões de usuário e lidar com outras funcionalidades do lado do servidor.

Para usar o Parse SDK, instale-o como uma dependência em seu arquivo pubspec.yaml do projeto Flutter.

Especifique o servidor Parse:

dependencies:
	# Parse SDK
  parse_server_sdk_flutter: ^5.1.1

  flutter:
    sdk: flutter

Certifique-se de que a indentação esteja correta. Os arquivos .yaml são muito sensíveis a maiúsculas e minúsculas e à indentação.

Execute o comando para instalar a dependência especificada:

flutter pub get

Vá para main.dart e importe o Parse SDK adicionado:

import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
	// code for runApp()

  const keyApplicationId = 'YOUR_APPLICATION_ID_HERE';
  const keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  const keyParseServerUrl = '<https://parseapi.back4app.com>';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
}

Aqui você importa o ParseSDk para o seu arquivo main.dart. Você também inicializa o Parse dentro de main() chamando Parse().initialize(). Como esse é um programa assíncrono, marque main() com a palavra-chave async.

Os espaços reservados para seu Application_Id e Client Key devem ser substituídos pelos valores reais. Essas são as credenciais do aplicativo para comunicação com seu backend.

Para obter essas chaves, navegue até App Settings > Security & Keys ( Configurações do aplicativo > Segurança e chaves ) no painel do Back4app. Em seguida, substitua os espaços reservados pelas respectivas chaves.

Ao executar seu aplicativo, main() é acionado, o Parse será inicializado com seu aplicativo e seu aplicativo Flutter será conectado ao backend do Back4app.

Gravação nas classes Contact e ZipCode

Aqui você aprenderá a criar e gravar nas classes do seu banco de dados a partir do lado do cliente do seu aplicativo. Para criar as classes Contact e Birthday, você modificará o main.dart.

Dentro do método onPressed() do widget do botão elevado, você usará ParseObject() para criar uma nova instância da classe Contacts :

final contact = ParseObject('Contact');
contact.set('name', name);
contact.set('phoneNumber', phoneNumber);

final ParseResponse parseResponse = await contact.save();

if (parseResponse.success) {
   final contactId = (parseResponse.results!.first as ParseObject).objectId!;
		print('Object created: $contactId');

	} else {
      print('Object created with failed: ${parseResponse.error.toString()}');
    }

O Parse Flutter SDK usa ParseObject() para criar uma nova instância de qualquer nome de classe que você passar como argumento. Chamar Contact.set() com o nome do campo do objeto e seus valores escreverá e atualizará esses campos.

Você pode criar um objeto ParseResponse para manter os resultados da operação de salvamento. O ParseResponse conterá uma propriedade success que será true se a operação de salvamento for bem-sucedida e false se a operação de salvamento falhar.

Em seguida, o código inicializa uma variável contactId como nula. Essa variável será usada para armazenar o objectId gerado automaticamente do objeto de contato salvo. Em seguida, faça o tratamento de erros.

Abaixo do código acima:

final zipCodeObject = ParseObject('ZipCode')
    ..objectId = selectedZipCode as String;
zipCodeObject.set('zipCode', selectedZipCode);
contact.set('zipCode', zipCodeObject.toPointer());

await contact.save();
await zipCodeObject.save();

Aqui você cria o ParseObject de código postal. Ao adicionar um novo contato por meio da caixa de diálogo, o código criará corretamente um objeto ZipCode e o associará ao campo zipCode do objeto Contact.

Ele usa o objectId do código postal selecionado para estabelecer a associação como um ponteiro. Use o método .save() para salvar os dois objetos no backend.

Consulta/leitura de dados do banco de dados

Aqui discutiremos como você pode enviar uma consulta ao banco de dados a partir do seu aplicativo Flutter. Você pode fazer uma consulta para recuperar todos os contatos com o mesmo código postal. Isso seria bastante complexo de se conseguir em um sistema de banco de dados não relacional.

Se a recuperação for bem-sucedida, você poderá mostrar uma lista de todos os contatos no seu aplicativo Flutter.

Para recuperar uma lista de contatos com o mesmo código postal:

Future<void> _loadContacts() async {
  final queryBuilder = QueryBuilder<ParseObject>(ParseObject('Contact'))
    ..whereEqualTo('zipCode', selectedZipCode) // Filter by zip code
    ..orderByAscending('name');

  final response = await queryBuilder.query();

  if (response.success && response.results != null) {
    final List<Contact> loadedContacts = response.results!.map((parseObject) {
      return Contact(
        name: parseObject.get('name'),
        phoneNumber: parseObject.get('phoneNumber'),
        zipCode: parseObject.get('zipCode')!.objectId,
      );
    }).toList();

    setState(() {
      //set your contacts to loadedContacts
    });
  }
}

@override
  void initState() {
    super.initState();
   
    _loadContacts(); // Load contacts when the app starts
  }

O método _loadContacts cria uma consulta para a classe Contacts, procurando objetos de contato com o código postal especificado.

Em seguida, o método retorna os contatos em uma lista, ordenando-os por nome em ordem crescente com base no campo “name”.

Quando o aplicativo é iniciado(initState), o método _loadContacts é chamado para recuperar os contatos com o código postal selecionado.

Conclusão

É absolutamente necessário ter um backend controlado no qual você possa estruturar adequadamente o fluxo de dados em seu aplicativo. Com o Back4app, você pode criar o backend do seu aplicativo móvel em qualquer lugar.

Você também pode usar a plataforma Back4app para implementar a autenticação de usuários com um banco de dados de modelo de usuário configurado.