Mudanças entre as edições de "Flutter - CRUD Rest"
(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'];
}