O autor selecionou a Open Sourcing Mental Illness Ltd para receber uma doação como parte do programa Write for DOnations.
As pessoas usam tipos diferentes de dispositivos para se conectar à internet e navegar pela Web. Por isso, os aplicativos precisam ser acessíveis de uma variedade de locais. Para sites tradicionais, ter uma interface responsiva geralmente é o suficiente, mas aplicativos mais complexos requerem muitas vezes o uso de outras técnicas e arquiteturas. Essas incluem ter aplicativos (separados) REST com back-end e front-end - que podem ser implementados como aplicativos Web do lado do cliente, Progressive Web Applications (PWAs - Aplicativos Progressivos para Web) ou aplicativos móveis nativos.
Algumas ferramentas que você pode usar ao construir aplicativos mais complexos incluem:
Neste tutorial, você irá construir um aplicativo Web moderno com uma API REST separada com back-end e front-end, usando React, Django e o Django REST Framework. Ao usar o React com o Django, você conseguirá se beneficiar dos últimos avanços em JavaScript e desenvolvimento front-end. Em vez de construir um aplicativo Django que utilize um mecanismo de template interno, você usará o React como uma biblioteca de UI, beneficiando-se de sua abordagem informativa virtual Modelo de Documento por Objetos (do inglês Document Object Model - DOM) e de componentes que processam rapidamente alterações nos dados.
O aplicativo Web que você construirá armazena registros sobre os clientes em um banco de dados, e você pode usá-lo como um ponto de partida para um aplicativo CRM. Quando você terminar, você conseguirá criar, ler, atualizar e excluir registros usando uma interface React estilizada com o Bootstrap 4.
Para completar este tutorial, você precisará de:
pip
e venv
instalados em sua máquina, seguindo os Passos 1 e 2 de Como Instalar o Python 3 e Configurar um Ambiente Local de Programação no Ubuntu 18.04.npm
5.2 ou superior instalados em sua máquina. Você pode instalar ambos, seguindo as instruções em Como Instalar o Node.js no Ubuntu 18.04, ao instalar a partir de um PPA (Personal Package Archive [Arquivo de Pacotes Pessoais].Neste passo, vamos criar um ambiente virtual e instalar as dependências necessárias para nosso aplicativo, incluindo o Django, o Django REST framework, e o django-cors-headers
.
Nosso aplicativo usará dois servidores diferentes para o Django e o React. Eles executarão em portas diferentes e funcionarão como dois domínios separados. Por isso, precisamos habilitar o compartilhamento de recursos com origens diferentes (CORS) para enviar pedidos HTTP do React para o Django sem sermos bloqueado pelo navegador.
Navegue até seu diretório principal (home) e crie um ambiente virtual usando o módulo do Python 3 venv
:
Ative o ambiente virtual criado usando source
:
A seguir, instale as dependências do projeto com o pip
. Essas incluem:
django-cors-headers
: um pacote que habilita o CORS.Instale o framework Django:
Com as dependências do projeto instaladas, você pode criar o projeto Django e o front-end do React.
Neste passo, vamos gerar o projeto Django usando os comandos e utilitários a seguir:
**django-admin startproject project-name**
: django-admin
é um utilitário de linha de comando usado para realizar tarefas com o Django. O comando startproject
cria um novo projeto Django.
**python manage.py startapp myapp**
: manage.py
é um script utilitário, adicionado automaticamente a cada projeto Django, que executa uma série de tarefas administrativas: criar novos aplicativos, migrar o banco de dados e atender ao projeto Django localmente. Seu comando startapp
cria um aplicativo Django dentro do projeto Django. No Django, o termo aplicativo descreve um pacote Python que fornece alguns recursos em um projeto.
Para começar, crie o projeto Django com django-admin startproject
. Vamos chamar nosso projeto de djangoreactproject
:
Antes de continuar, vamos ver a estrutura do diretório do nosso projeto Django usando o comando tree
.
Dica: tree
é um comando útil para visualizar estruturas do arquivo e diretório da linha de comando. Você pode instalá-lo com o seguinte comando:
Para usá-lo, cd
no diretório que você queira e digite tree
ou forneça o caminho para o ponto inicial com tree /home/sammy/sammys-project
.
Navegue até a pasta djangoreactproject
na raiz do seu projeto e execute o comando tree
:
Você verá o seguinte resultado:
Output├── djangoreactproject
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
A pasta ~/djangoreactproject
é a raiz do projeto. Dentro dessa pasta, há vários arquivos que serão importantes para seu trabalho:
manage.py
: o script utilitário que faz uma série de tarefas administrativas.settings.py
: o arquivo de configuração principal para o projeto Django onde você pode modificar as configurações do projeto. Essas configurações incluem variáveis como INSTALLED_APPS
, uma lista de strings que designam os aplicativos habilitados para seu projeto. A documentação do Django tem mais informações sobre as configurações disponíveis.urls.py
: este arquivo contém uma lista de padrões de URL e visualizações relacionadas. Cada padrão mapeia uma conexão entre um URL e a função que deve ser chamada para aquele URL. Para obter mais informações sobre URLs e visualizações, consulte nosso tutorial em Como Criar Visualizações no Django.Nosso primeiro passo no desenvolvimento do projeto será configurar os pacotes que instalamos no passo anterior, incluindo o Django REST framework e o pacote Django CORS, adicionando-os às settings.py
. Abra o arquivo com o nano
ou com o seu editor favorito:
Navegue até a configuração INSTALLED_APPS
e adicione os aplicativos rest_framework
e corsheaders
no final da lista:
...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders'
]
A seguir, adicione o middleware corsheaders.middleware.CorsMiddleware
do pacote CORS previamente instalado para a configuração do MIDDLEWARE
. Esta configuração é uma lista de middlewares, uma classe Python que contém códigos processados cada vez que seu aplicativo Web lida com uma solicitação ou resposta:
...
MIDDLEWARE = [
...
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware'
]
A seguir, você pode habilitar o CORS. A configuração CORS_ORIGIN_ALLOW_ALL
especifica se você quer ou não permitir o CORS para todos os domínios e aCORS_ORIGIN_WHITELIST
é uma tupla Python que contém URLs permitidos. No nosso caso, uma vez que o servidor de desenvolvimento para React estará executando em http://lochhost:3000
, vamos adicionar as novas configurações CORS_ORIGIN_ALLOW_ALL = False
e CORS_ORIGIN_WHHELIST('localhost:3000',)
ao nosso arquivo settings.py
. Adicione essas configurações em qualquer lugar do arquivo:
...
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'localhost:3000',
)
...
Você pode encontrar mais opções de configuração nos django-cors-headers
docs.
Salve o arquivo e saia do editor quando você terminar.
Ainda no diretório ~/djangoreactproject
, faça um novo aplicativo Django chamado customers
:
Isso irá conter os modelos e exibições para gerenciar clientes. Modelos (models) definem os campos e comportamentos dos dados do aplicativo, enquanto exibições (views) habilitam nosso aplicativo para lidar corretamente com solicitações Web e retornar as respostas necessárias.
A seguir, adicione este aplicativo na lista de aplicativos instalados no arquivo do seu projeto settings.py
para que o Django o reconheça como parte do projeto. Abra as settings.py
novamente:
Adicione o aplicativo customers
:
...
INSTALLED_APPS = [
...
'rest_framework',
'corsheaders',
'customers'
]
...
A seguir, migre o banco de dados e inicie o servidor local de desenvolvimento. Migrações consistem no modo que o Django tem de propagar as alterações que você faz nos modelos do esquema do seu banco de dados. Essas alterações podem incluir coisas como adicionar um campo ou excluir um modelo, por exemplo. Para saber mais sobre modelos e migrações, consulte o tópico Como Criar Modelos do Django.
Migre o banco de dados:
Inicie o servidor local de desenvolvimento:
Você verá um resultado similar ao seguinte:
OutputPerforming system checks...
System check identified no issues (0 silenced).
October 22, 2018 - 15:14:50
Django version 2.1.2, using settings 'djangoreactproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
Seu aplicativo Web estará executando do endereço http://127.0.0.1:8000
. Se você navegar até este endereço no seu navegador Web você verá a seguinte página:
Neste ponto, deixe o aplicativo funcionando e abra um novo terminal para continuar desenvolvendo o projeto.
Nesta seção, vamos criar o aplicativo com front-end do nosso projeto usando o React.
O React tem um utilitário oficial que permite que você crie rapidamente projetos React sem ter que configurar o Webpack diretamente. Webpack é um empacotador de módulos usado para empacotar ativos Web como o código JavaScript, CSS e imagens. Normalmente, antes de poder usar o Webpack você precisa definir várias opções de configuração, mas graças ao utilitário create-react-app
você não precisa lidar com o Webpack diretamente até decidir que você precisa de mais controle. Para executar o create-react-app
você pode usar o npx, uma ferramenta que executa pacotes npm
binários.
No seu segundo terminal, certifique-se de estar em seu diretório de projeto:
Crie um projeto React chamado frontend
usando o create-react-app
e o npx
:
A seguir, navegue dentro do seu aplicativo React e inicie o servidor de desenvolvimento:
Seu aplicativo estará executando a partir do endereço http://localhost:3000/
:
Deixe o servidor React de desenvolvimento funcionando e abra outra janela do terminal para prosseguir.
Para ver a estrutura do diretório do projeto inteiro até o momento, navegue até a pasta raiz e execute novamente o tree
:
Você verá uma estrutura como essa:
Output├── customers
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── djangoreactproject
│ ├── __init__.py
│ ├── __pycache__
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── frontend
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ └── manifest.json
│ ├── README.md
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── logo.svg
│ │ └── registerServiceWorker.js
│ └── yarn.lock
└── manage.py
Nosso aplicativo usará o Bootstrap 4 para estilizar a interface do React. Assim,nós o incluiremos no arquivo frontend/src/App.css
, que gerencia nossas configurações CSS. Abra o arquivo:
Adicione o seguinte import ao início do arquivo. Você pode excluir o conteúdo do arquivo existente, embora isso não seja necessário:
Aqui, @import
é uma instrução CSS que é usada para importar regras de estilo de outras folhas de estilo.
Agora que criamos os aplicativos com back-end e front-end, vamos criar o modelo Customer e alguns dados demonstrativos.
Após criar o aplicativo Django e o front-end React, nosso próximo passo será criar o modelo Customer, que representa a tabela do banco de dados que irá reter informações sobre os clientes. Você não precisa de nenhuma SQL (Structured Query Language, ou Linguagem de Consulta Estruturada), uma vez que o Object Relational Mapper (ORM) [Mapeamento Objeto-Relacional] do Django gerenciará as operações de banco de dados, mapeando as classes e variáveis em Python até as tabelas e colunas em SQL. Desta forma, o ORM do Django separa as interações em SQL com o banco de dados através de uma interface em Python.
Ative seu ambiente virtual novamente:
Vá até o diretório customers
e abra o models.py
, um arquivo Python que possui os modelos do seu aplicativo:
O arquivo terá o seguinte conteúdo:
A API do modelo Customer já foi importada para o arquivo, graças à declaração de importação from django.db import models
. Agora, você adicionará a classe Customer
, que estende models.Model
. Cada modelo no Django é uma classe em Python que estende o django.db.models.Model
.
O modelo Customer
terá esses campos de banco de dados:
first_name
— O primeiro nome do cliente.last_name
— O sobrenome do cliente.email
— O endereço de e-mail do cliente.phone
— O número de telefone do cliente.address
— O endereço do cliente.description
— A descrição do cliente.createdAt
— A data em que o cliente é adicionado.Também adicionaremos a função __str__()
, que define como o modelo será exibido. No nosso caso, ela estará com o primeiro nome do cliente. Para saber mais sobre a construção de classes e definição de objetos, consulte o tópico pelo link How To Construct Classes and Define Objects in Python 3.
Adicione o código a seguir ao arquivo:
A seguir, migre o banco de dados para criar as tabelas de banco de dados. O comando makemigrations
cria os arquivos de migração onde as alterações do modelo serão adicionadas e o comando migrate
aplica as alterações feitas nos arquivos de migrações ao banco de dados.
Navegue novamente para a pasta raiz do projeto:
Execute o que vem a seguir para criar os arquivos de migração:
Você receberá um resultado que se parece com este:
Outputcustomers/migrations/0001_initial.py
- Create model Customer
Aplique essas alterações ao banco de dados:
Você verá o resultado indicando uma migração bem-sucedida:
OutputOperations to perform:
Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
Applying customers.0001_initial... OK
Depois, você usará um arquivo de migração de dados para criar os dados iniciais do cliente. Um arquivo de migração de dados é uma migração que adiciona ou altera dados no banco de dados. Crie um arquivo de migração de dados vazio para o aplicativo customers
:
Você verá a seguinte confirmação com o nome do seu arquivo de migração:
OutputMigrations for 'customers':
customers/migrations/0002_customers.py
Note que o nome do seu arquivo de migração é 0002_customers.py
.
Na sequência, navegue dentro da pasta de migração do aplicativo customers
:
Abra o arquivo de migração criado:
Este é o conteúdo inicial do arquivo:
A instrução de importação importa a API migrations
, uma API Django para criação de migrações, do django.db
, um pacote integrado que contém classes para trabalhar com bancos de dados.
A classe Migration
é uma classe em Python que descreve as operações que são executadas durante a migração de bancos de dados. Esta classe estende migrations.Migration
e tem duas listas:
dependencies
: contém as migrações dependentes.operations
: contém as operações que serão executadas quando aplicarmos a migração.Na sequência, adicione um method para criar os dados de cliente da demonstração. Adicione o seguinte método antes da definição da classe Migration
:
Neste método, estamos pegando a classe Customer
do nosso app customers
e criando um cliente de demonstração para inserir no banco de dados.
Para obter a classe Customer
, que irá habilitar a criação de novos clientes, usamos o método get_model()
do objeto apps
. O objeto apps
representa o registry dos aplicativos instalados e seus modelos de banco de dados.
O objeto apps
passará do método RunPython()
quando o usamos para executar o create_data()
. Adicione o método migrations.RunPython()
à lista operations
vazia:
O RunPython()
faz parte da API com Migrations que permite que você execute códigos em Python personalizados em uma migração. Nossa lista operations
especifica que este método será executado quando aplicarmos a migração.
Este é o arquivo completo:
Para obter mais informações sobre a migração de dados, consulte a documentação sobre migrações de dados no Django.
Para migrar seu banco de dados, navegue primeiro de volta para a pasta raiz do seu projeto:
Migre o seu banco de dados para criar os dados para demonstração:
Você verá o resultado que confirma a migração:
OutputOperations to perform:
Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
Applying customers.0002_customers... OK
Para obter mais detalhes sobre este processo, volte para o link How To Create Django Models.
Com o modelo Customer e dados de demonstração criados, podemos continuar para a construção da API REST.
Neste passo, vamos criar a API REST utilizando o Django REST Framework. Vamos criar várias *visualizações da API *diferentes. Uma visualização de API é uma função que lida com um pedido ou chamada de API, enquanto um *ponto de extremidade de API *é um URL único que representa um ponto de contato com o sistema REST. Por exemplo, quando o usuário envia um pedido GET para um ponto de extremidade de API, o Django chama a função correspondente ou a visualização de API para lidar com o pedido e retornar quaisquer resultados possíveis.
Também vamos usar os serializers. Um serializador no Django REST Framework permite que as instâncias de modelos complexas e o QuerySets sejam convertidos em formato JSON para consumo de API. A classe de serializadores também pode funcionar na outra direção, fornecendo mecanismos para processar e desserializar dados em modelos Django e QuerySets.
Nossos pontos de extremidade de API irão incluir:
api/customers
: este ponto de extremidade é usado para criar clientes e retorna conjuntos de clientes paginados.api/customers/<pk>
: este ponto de extremidade é usado para obter, atualizar e excluir clientes únicos por chave ou ID primária.Também vamos criar URLs no arquivo urls.py
do projeto para os pontos de extremidade correspondentes (ou seja, api/customers
e <pk>
).
Vamos começar criando a classe de serializadores para nosso modelo Customer
.
Criar uma classe de serializadores para nosso modelo Customer
é necessário para transformar as instâncias de cliente e os QuerySets de e para JSON. Para criar a classe de serializadores, faça primeiro um arquivo serializers.py
dentro do aplicativo customers
:
Adicione o seguinte código para importar o API do serializador e o modelo Customer
:
A seguir, crie uma classe de serializadores que estende serializers.ModelSerializer
e especifica os campos que serão serializados:
A classe Meta
especifica o modelo e os campos para serializar: pk
, first_name
, last_name
, email
, phone
, address
, description
.
Este é o conteúdo completo do arquivo:
Agora que criamos nossa classe de serializadores, podemos adicionar as visualizações da API.
Nesta seção, vamos criar as visualizações da API para nosso aplicativo que serão chamadas pelo Django quando o usuário visitar o ponto de extremidade correspondente à função da visualização.
Abra ~/djangoreactproject/customers/views.py
:
Exclua o que estiver ali e adicione as seguintes importações:
Estamos importando o serializador que criamos, junto com o modelo Customer
e as APIs com o Django e o Django REST Framework.
Em seguida, adicione a visualização para processar os pedidos do POST e GET HTTP:
Primeiramente, usamos o decorador @api_view(['GET', 'POST'])
para criar uma visualização de API que possa aceitar solicitações GET e POST. Um decorator é uma função que assume outra função e a amplia de maneira dinâmica.
No corpo do método, utilizamos a variável request.method
para verificar o método HTTP atual e executar a lógica correspondente, dependendo do tipo de solicitação:
save()
do objeto serializador. Então, ele retorna um objeto de Resposta, uma instância do HttpResponse, com um código de status 201. Cada visualização que você cria é responsável por retornar um objeto HttpResponse
. O método save()
salva os dados serializados no banco de dados.Para saber mais sobre HttpResponse
e visualizações, leia esta discussão: creating view functions.
Agora, adicione a visualização de API que será responsável por processar os pedidos GET, PUT e DELETE para obter, atualizar e excluir clientes por pk
(chave primária):
O método é decorado com @api_view(['GET', 'PUT', 'DELETE'])
para indicara que se trata de uma visualização de API que pode aceitar solicitações GET, PUT e DELETE.
A checagem no campo request.method
verifica o método de solicitação e, dependendo do seu valor, chama a lógica correta:
save()
do objeto serializador criado. Finalmente, ele envia um objeto de Resposta com o cliente atualizado.delete()
do objeto cliente a excluir; depois, retorna um objeto de Resposta sem dados.O arquivo final se parece com este:
Agora, podemos seguir em frente para criar nossos pontos de extremidade.
Agora, vamos criar os pontos de extremidade de API: api/customers/
, para consultar e criar clientes e api/customers/<pk>
, para obter, atualizar ou excluir clientes únicos por pk
.
Abra ~/djangoreactproject/djangoreactproject/urls.py
:
Deixe o que está lá, mas adicione a importação às visualizações do customers
no topo do arquivo:
Em seguida, adicione os URLs api/customers/
e api/customers/<pk>
à lista urlpatterns
que contém os URLs do aplicativo:
Com nossos pontos de extremidade de REST criados, vamos ver como podemos consumi-los.
Neste passo, vamos instalar o Axios, o cliente HTTP que vamos usar para fazer chamadas de API. Também vamos criar uma classe para consumir os pontos de extremidade da API que criamos.
Primeiramente, desative o seu ambiente virtual:
Em seguida, navegue até sua pasta frontend
:
Instale o axios
a partir do npm
utilizando:
A opção --save
adiciona a dependência do axios
ao arquivo package.json
do seu aplicativo.
Em seguida, crie um arquivo JavaScript chamado CustomersService.js
, que irá conter o código para chamar as APIs REST. Vamos fazer isso dentro da pasta src
, onde o código do aplicativo para nosso projeto irá viver:
Adicione o seguinte código, que contém métodos para se conectar à API REST do Django:
A classe CustomersService
irá chamar os seguintes métodos do Axios:
getCustomers()
: obtém a primeira página de clientes.getCustomersByURL()
: obtém clientes por URL. Isso possibilita obter-se as próximas páginas de clientes, atravessando-se links do tipo /api/customers/?page=2
.getCustomer()
: obtém um cliente pela chave primária.createCustomer()
: cria um cliente.updateCustomer()
: atualiza um cliente.deleteCustomer()
: exclui um cliente.Agora, podemos exibir os dados de nossa API na nossa interface com a UI React criando um componente CustomersList
.
Neste passo, vamos criar o componente
do aplicativo React chamado CustomersList. Um componente do React representa uma parte da UI; ele também permite que você divida a UI em pedaços independentes e reutilizáveis.
Inicie criando o CustomersList.js
em frontend/src
:
Inicie importando o React
e o Component
para criar um componente do React:
Em seguida, importe e crie a instância do módulo CustomersService
que você criou no passo anterior, que proporciona métodos que interagem com o back-end da API REST:
Em seguida, crie um componente CustomersList
que estende o Component
para chamar a API REST. Um componente React deve estender ou subclassificar a classe
Component. Para saber mais sobre as classes E6 e herança, consulte nossos tutorial Understanding Classes in JavaScript.
Adicione o seguinte código para criar um componente do React que estende o react.Component
:
Dentro do construtor, estamos inicializando o objeto de ](https://reactjs.org/docs/react-component.html#state)estado[
. Isso mantém as variáveis de estado do nosso componente utilizando uma matriz de clientes vazia. Esta matriz conterá os clientes e um nextPageURL
que irá reter o URL da próxima página a ser recuperada do back-end da API. Também estamos ligando os métodos nextPage()
e o handleDelete()
a este para que eles fiquem acessíveis a partir do código HTML.
Em seguida, adicione o método componentDidMount()
e uma chamada para o getCustomers()
dentro da classe CustomersList
, antes da chave de fechamento.
O método componentDidMount()
é um método de ciclo de vida do componente que é chamado quando o componente é criado e inserido no DOM. O getCustomers()
chama o objeto Customers Service para obter a primeira página de dados e o link da página seguinte a partir do back-end do Django:
Agora, adicione o método handleDelete()
que lida com a exclusão de um cliente, abaixo do componentDidMount()
:
O método handleDelete()
chama o método deleteCustomer()
para excluir um cliente utilizando sua pk
(chave primária). Se a operação for bem-sucedida, a matriz de customers
é filtrada em relação ao cliente removido.
Em seguida, adicione um método nextPage()
para obter os dados da próxima página e atualize o próximo link da página:
O método nextPage()
chama um método getCustomersByURL()
, que recebe o próximo URL da página do objeto de estado, this.state.nextPageURL
e atualiza a matriz de customers
com os dados retornados.
Finalmente, adicione o método render()
do componente, que renderiza uma tabela de clientes a partir do estado do componente:
Este é o conteúdo completo do arquivo:
Agora que criamos o componente CustomersList
para exibir a lista de clientes, podemos adicionar o componente que lida com a criação e as atualizações do cliente.
Neste passo, vamos criar o componente CustomerCreateUpdate
que irá lidar com a criação e atualização dos clientes. Ele irá fazer isso fornecendo um formulário que os usuários podem usar para digitar dados sobre um novo cliente ou atualizar um item existente.
No frontend/src
, crie um arquivo CustomerCreateUpdate.js
:
Adicione o seguinte código para criar um componente do React, import
o React e o Component
:
Além disso, podemos importar e instanciar a classe CustomersService
que criamos no passo anterior, a qual proporciona métodos que interagem com o back-end da API REST:
Em seguida, crie um componente CustomerCreateUpdate
que estende o Component
para criar e atualizar os clientes:
Dentro da definição da classe, adicione o método render()
do componente, que renderiza uma forma HTML que recebe informações sobre o cliente:
Para cada elemento form input, o método adiciona uma propriedade ref
para acessar e definir o valor do elemento do formulário.
Em seguida, acima do método render()
, defina um método handleSubmit(event)
para que você tenha a funcionalidade apropriada quando um usuário clicar no botão para enviar:
O método handleSubmit(event)
cuida do envio do formulário e, dependendo da rota, chama o método handleUpdate(pk)
para atualizar o cliente com o método pk
aprovado ou o método handleCreate()
para criar um novo cliente. Vamos definir esses métodos em breve.
De volta ao construtor do componente, conecte o método handleSubmit()
recém-adicionado a este, para que você possa acessá-lo em seu formulário:
Em seguida, defina o método handleCreate()
para criar um cliente a partir dos dados do formulário. Acima do método handleSubmit(event)
adicione o seguinte código:
O método handleCreate()
será usado para criar um cliente a partir dos dados inseridos. Ele chama o método CustomersService.createCustomer()
correspondente que faz a API real chamar o back-end para criar um cliente.
Depois, abaixo do método handleCreate()
, defina o método handleUpdate(pk)
para implementar as atualizações:
O método updateCustomer()
irá atualizar um cliente através da pk
utilizando as novas informações do formulário de informações do cliente. Ele chama o método customersService.updateCustomer()
.
Em seguida, adicione um método componentDidMount()
. Se o usuário visitar uma rota customer/:pk
, queremos preencher o formulário com informações relacionadas ao cliente, utilizando a chave primária do URL. Para fazer isso, podemos adicionar o método getCustomer(pk)
após o componente ser montado no evento do ciclo de vida do componentDidMount()
. Adicione o seguinte código abaixo do construtor do componente para adicionar este método:
Este é o conteúdo completo do arquivo:
Com o componente CustomerCreateUpdate
criado, podemos atualizar o componente principal do App
para adicionar links aos diferentes componentes que criamos.
Nesta seção, atualizaremos o componente App
do nosso aplicativo para criar links para os componentes que criamos nos passos anteriores.
A partir da pasta frontend
, execute o seguinte comando para instalar o React Router, que permite que você adicione roteamento e navegação entre vários componentes do React:
Em seguida, abra ~/djangoreactproject/frontend/src/App.js
:
Exclua tudo o que está lá e adicione o seguinte código para importar as classes necessárias para adicionar roteamentos. Esses incluem o BrowserRouter
, que cria um componente Router e o Route
, que cria um componente de rota:
O BrowserRouter
mantém a UI em sincronia com o URL utilizando a API de histórico HTML5.
Na sequência, crie um layout básico que fornece o componente base a ser encapsulado pelo componente BrowserRouter
:
Usamos o componente Route
para definir as rotas do nosso aplicativo; o componente que o roteador deve carregar tão logo encontre um que seja compatível. Cada rota precisa de um path
para especificar o caminho compatível e de um component
para especificar o componente a carregar. A propriedade exact
diz ao roteador para corresponder ao caminho exato.
Finalmente, crie o componente App
, o componente root ou o componente de nível superior do nosso aplicativo React:
Nós juntamos o componente BaseLayout
ao componente BrowserRouter
, uma vez que o nosso app deverá ser executado no navegador.
O arquivo final se parece com este:
Após adicionar o roteamento ao nosso aplicativo, estamos agora prontos para testar o aplicativo. Navegue até o endereço http://localhost:3000
. Você deve ver a primeira página do aplicativo:
Com este aplicativo em funcionamento, agora você tem a base de um aplicativo de CRM.
Neste tutorial, você criou um aplicativo de demonstração utilizando o Django e o React. Você usou Django REST framework para construir a API REST, o Axios para consumir a API, e o Bootstrap 4 para estilizar o seu CSS. Você pode encontrar o código-fonte deste projeto neste repositório do GitHub.
Esta configuração de tutorial usou apps separados de front-end e back-end. Para obter uma abordagem diferente para integrar o React ao Django, verifique este tutorial e este tutorial.
Para saber mais sobre a construção de um aplicativo com o Django, você pode seguir as séries de desenvolvimento do Django. Você também pode considerar os documentos oficiais do Django.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!