Mudanças entre as edições de "Flutter - CRUD Rest"

De Aulas
(Criou página com 'Afluentes: Usabilidade, Desenvolvimento Web, Mobile e Jogos, Desenvolvimento Front-end II = Serviço web = Para que nosso CRUD possa ser funcional, precisamos de um...')
 
Linha 11: Linha 11:
  
 
= Criação do Projeto =
 
= Criação do Projeto =
 +
 +
Primeiro criamos nosso projeto. Nesse exemplo dei o nome de <code>appcrud</code>, mas vocês podem usar qualquer outro nome.
  
 
  $ flutter create appcrud
 
  $ flutter create appcrud
 +
 +
Na sequência, entramos dentro da pasta do projeto criado e lá dentro adicionamos a biblioteca <code>http</code> para podermos fazer as chamadas aos serviços web.
 +
 
  $ cd appcrud
 
  $ cd appcrud
 
  $ flutter pub add http
 
  $ flutter pub add http
 +
 +
A partir desse momento, nosso projeto básico já está funcionando. Para executá-lo, basta digitar o comando abaixo dentro da pasta do projeto:
 +
 +
$ flutter run
 +
 +
= Nosso Projeto =
 +
 +
Vamos primeiro alterar o arquivo <code>main.dart</code>, ajustando ele apenas para chamar a nossa janela de CRUD.
 +
 +
== main.dart ==
 +
 +
Veja que temos a classe <code>App</code> e nela configuramos o título e no home chamamos a classe <code>UsersCrud</code> que está no arquivo <code>userscrud.dart</code> que deve ser adicionado nos <code>imports</code>·
 +
 +
<syntaxhighlight lang=dart>
 +
import 'package:flutter/material.dart';
 +
import 'userscrud.dart';
 +
 +
void main() => runApp(const App());
 +
 +
class App extends StatelessWidget {
 +
  const App({super.key});
 +
 +
  @override
 +
  build(context) {
 +
    return const MaterialApp(
 +
      title: 'Usuários',
 +
      home: UsersCrud(),
 +
    );
 +
  }
 +
}
 +
</syntaxhighlight>
 +
 +
== user.dart ==
 +
 +
<syntaxhighlight lang=dart>
 +
class User {
 +
  final int id;
 +
  final String name;
 +
  final String email;
 +
 +
  User({
 +
    required this.id,
 +
    required this.name,
 +
    required this.email,
 +
  });
 +
 +
  // Serializando para MAP
 +
  Map<String, dynamic> toMap() {
 +
    return {
 +
      'id': id,
 +
      'name': name,
 +
      'email': email,
 +
    };
 +
  }
 +
 +
  // Deserializando do JSON
 +
  User.fromJson(Map json)
 +
      : id = json['id'],
 +
        name = json['name'],
 +
        email = json['email'];
 +
}
 +
</syntaxhighlight>

Edição das 14h32min de 11 de abril de 2024

Afluentes: Usabilidade, Desenvolvimento Web, Mobile e Jogos, Desenvolvimento Front-end II

Serviço web

Para que nosso CRUD possa ser funcional, precisamos de um serviço web com as operações de CRUD (CREATE, READ, UPDATE e DELETE). Para o nosso exemplo aqui, usarei um serviço web desenvolvido em linguagem de programação GO:

Caso você queira reimplementar o serviço em Node.js ou outra linguagem/framework, basta entender o manual de acesso ao serviço web:

Criação do Projeto

Primeiro criamos nosso projeto. Nesse exemplo dei o nome de appcrud, mas vocês podem usar qualquer outro nome.

$ flutter create appcrud

Na sequência, entramos dentro da pasta do projeto criado e lá dentro adicionamos a biblioteca http para podermos fazer as chamadas aos serviços web.

$ cd appcrud
$ flutter pub add http

A partir desse momento, nosso projeto básico já está funcionando. Para executá-lo, basta digitar o comando abaixo dentro da pasta do projeto:

$ flutter run

Nosso Projeto

Vamos primeiro alterar o arquivo main.dart, ajustando ele apenas para chamar a nossa janela de CRUD.

main.dart

Veja que temos a classe App e nela configuramos o título e no home chamamos a classe UsersCrud que está no arquivo userscrud.dart que deve ser adicionado nos imports·

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

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  build(context) {
    return const MaterialApp(
      title: 'Usuários',
      home: UsersCrud(),
    );
  }
}

user.dart

class User {
  final int id;
  final String name;
  final String email;

  User({
    required this.id,
    required this.name,
    required this.email,
  });

  // Serializando para MAP
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }

  // Deserializando do JSON
  User.fromJson(Map json)
      : id = json['id'],
        name = json['name'],
        email = json['email'];
}