One place for hosting & domains

      Informações

      Usando ldflags para definir informações de versão em aplivativos Go


      Introdução

      Ao implantar aplicativos em um ambiente de produção, a compilação de binários com informações de versão e outros metadados irá melhorar seu processo de monitoramento, registro e depuração através da adição de informações de identificação para ajudar a rastrear suas compilações ao longo do tempo. Essas informações de versão com frequência podem incluir dados altamente dinâmicos, como o tempo de compilação, a máquina ou o usuário que compila o binário, o ID de confirmação do Sistema de Controle de Versão (VCS) em relação ao qual foi compilado, entre outras coisas. Como esses valores estão em constante mudança, codificar esses dados diretamente no código fonte e modificá-los antes de cada nova compilação é um processo tedioso e propenso a erros: os arquivos fonte podem mover-se e as variáveis/constantes podem trocar arquivos ao longo do desenvolvimento, interrompendo o processo de compilação.

      Uma maneira de resolver isso em Go é usando -ldflags com o comando go build para inserir informações dinâmicas no binário no momento da compilação, sem a necessidade de modificar códigos fonte. Neste identificador, o ld significa linker [vinculador], o programa que vincula os diferentes pedaços do código fonte compilado em um binário final. ldflags, então, significa *linker flags *[identificadores de vinculador]. Ele recebe esse nome porque passa um identificador para o conjunto subjacente do vinculador da cadeia de ferramentas em Go, cmd/link, que permite que você altere os valores de pacotes importados no momento da compilação a partir da linha de comando.

      Neste tutorial, você usará -ldflags para alterar o valor das variáveis no momento da compilação e introduzir suas próprias informações dinâmicas em um binário, usando um aplicativo exemplo que imprime informações de versão para a tela.

      Pré-requisitos

      Para seguir o exemplo neste artigo, será necessário:

      Compilando seu aplicativo exemplo

      Antes de poder usar ldflags para introduzir dados dinâmicos, será necessário primeiro um aplicativo no qual inserir as informações. Neste passo, você criará esse aplicativo, o qual, por enquanto,imprimirá apenas informações sobre o controle de versão estática. Vamos criar esse aplicativo agora.

      No seu diretório src, crie um diretório com o nome do seu aplicativo. Este tutorial usará o nome de aplicativo app:

      Mude seu diretório de trabalho para essa pasta:

      Em seguida, usando o editor de texto de sua escolha, crie o ponto de entrada do seu programa, main.go:

      Agora, faça seu aplicativo imprimir informações de versão, adicionando o seguinte conteúdo:

      app/main.go

      package main
      
      import (
          "fmt"
      )
      
      var Version = "development"
      
      func main() {
          fmt.Println("Version:t", Version)
      }
      

      Dentro da função main(), você declarou a variável Version, em seguida imprimiu a string Version:, seguida de um caractere de guia (tab), t e, na sequência declarou a variável.

      Neste ponto, a variável Version foi definida como development, a qual será a versão padrão desse app. Mais tarde, você trocará esse valor por um número oficial de versão, organizado segundo o formato semântico para controle de versão.

      Salve e saia do arquivo. Assim que terminar, compile e execute o aplicativo para confirmar que ele imprime a versão correta:

      Você verá o seguinte resultado:

      Output

      Agora, você tem um aplicativo que imprime informações da versão padrão, mas ainda não tem como enviar as informações da versão atual no momento da compilação. No próximo passo, você usará -ldflags e go build para resolver esse problema.

      Assim como mencionado anteriormente, ldflags significa identificadores de vinculador e é usado para enviar identificadores para o vinculador subjacente na cadeia de ferramentas Go. Isso funciona de acordo com a seguinte sintaxe:

      • go build -ldflags="-flag"

      Nesse exemplo, transmitimos o flag para o comando go tool link subjacente que executa como parte do go build. Esse comando usa aspas duplas ao redor do conteúdo transmitido para os ldflags para evitar quebrar caracteres nele, ou caracteres que a linha de comando possa interpretar como algo diferente do que queremos. A partir daqui, você poderia enviar muitos e diferentes identificadores de link. Para os fins deste tutorial, usaremos o identificador -X para gravar informações na variável no momento de vincular, seguido do caminho do pacote até a variável e seu novo valor:

      • go build -ldflags="-X 'package_path.variable_name=new_value'"

      Dentro das aspas, há agora a opção -X e um par chave-valor que representa a variável a ser alterada e seu novo valor. O caractere . separa o caminho do pacote e o nome da variável e aspas únicas são usadas para evitar a quebra de caracteres no par chave-valor.

      Para substituir a variável Version no seu aplicativo exemplo, use a sintaxe no último bloco de comando para enviar um novo valor e compilar o novo binário:

      • go build -ldflags="-X 'main.Version=v1.0.0'"

      Neste comando, main é o caminho de pacote da variável Version, uma vez que essa variável está no arquivo main.go. Version é a variável para a qual está gravando, e o v1.0.0 é o novo valor.

      Para usar o ldflags, o valor que você quiser alterar deve existir e ser uma variável do nível de pacote do tipo string. Essa variável pode ser exportada ou não exportada. O valor não pode ser const ou ter seu valor definido pelo resultado de uma chamada de função. Felizmente, Version se encaixa em todos esses requisitos: ela já foi declarada como variável no arquivo main.go, assim como o valor atual (development) e o valor desejado (v1.0.0) são ambos strings.

      Assim que seu novo binário app for compilado, execute o aplicativo:

      Você receberá o seguinte resultado:

      Output

      Usando -ldflags, você mudou com sucesso a variável Version de development para v1.0.0.

      Agora, você modificou uma variável string dentro de um aplicativo simples na hora da compilação. Usando ldflags, você pode inserir detalhes de versão, informações de licenciamento e outras coisas em um binário pronto para a distribuição, usando apenas a linha de comando.

      Neste exemplo, a variável que você mudou estava no programa main, o que reduz a dificuldade em determinar o nome do caminho. No entanto, as vezes, o caminho para essas variáveis é mais complicado de se encontrar. No próximo passo, você irá gravar valores para as variáveis nos subpacotes para demonstrar a melhor maneira de se determinar caminhos de pacotes mais complexos.

      Concentrando-se em variáveis para subpacotes

      Na última seção, você manipulou a variável Version, a qual estava no pacote de nível superior do aplicativo. Mas esse não é sempre o caso. Com frequência, é mais prático colocar essas variáveis em outro pacote, já que o main não é um pacote importável. Para simular isso em seu aplicativo exemplo, você criará um novo subpacote, app/build que armazenará informações sobre a hora em que o binário foi compilado e o nome do usuário que emitiu o comando de compilação.

      Para adicionar um novo subpacote, adicione primeiro um novo diretório ao seu projeto chamado build:

      Depois, crie um novo arquivo chamado build.go para reter as novas variáveis:

      No seu editor de texto, adicione novas variáveis para Time e User:

      app/build/build.go

      package build
      
      var Time string
      
      var User string
      

      A variável Time reterá uma representação de string da hora em que o binário foi compilado. A variável User reterá o nome do usuário que compilou o binário. Como essas duas variáveis sempre terão valores, você não precisa inicializar essas variáveis com valores padrão como você fez para Version.

      Salve e saia do arquivo.

      Em seguida, abra o main.go para adicionar essas variáveis ao seu aplicativo:

      Dentro de main.go, adicione as seguintes linhas destacadas:

      main.go

      package main
      
      import (
          "app/build"
          "fmt"
      )
      
      var Version = "development"
      
      func main() {
          fmt.Println("Version:t", Version)
          fmt.Println("build.Time:t", build.Time)
          fmt.Println("build.User:t", build.User)
      }
      

      Nessas linhas, você importou primeiro o pacote app/build e, então, imprimiu build.Time e build.User da mesma forma que imprimiu Version.

      Salve o arquivo e depois saia do seu editor de texto.

      Em seguida, para atingir essas variáveis com o ldflags, você poderia usar o caminho de importação app/build seguido de . User ou . Time, uma vez que você já sabe o caminho de importação. No entanto, para simular uma situação mais complexa na qual o caminho para a variável não é evidente, em vez disso, vamos usar o comando nm na cadeia de ferramentas Go.

      O comando go tool nm dará como resultado os símbolos envolvidos em um dado executável, arquivo de objeto ou arquivo. Neste caso, um símbolo se refere a um objeto no código, como uma variável ou função definida ou importada. Ao gerar uma tabela de símbolos com nm e usar o grep para procurar por uma variável, você pode rapidamente encontrar informações sobre seu caminho.

      Nota: o comando nm não ajudará você a encontrar o caminho da sua variável se o nome do pacote tiver qualquer caractere não ASCII ou um caractere " ou %, já que essa é uma limitação da ferramenta em si.

      Para usar esse comando, compile primeiro o binário para app:

      Agora que o app foi compilado, aponte a ferramenta nm para ele e examine o resultado:

      • go tool nm ./app | grep app

      Quando executada, a ferramenta nm gerará muitos dados como resultado. Por isso, o comando anterior usou o símbolo | para canalizar o resultado até o comando grep, o qual, na sequência, pesquisou termos que tivessem app de nível elevado no título.

      Você irá receber um resultado parecido com este:

      Output

      55d2c0 D app/build.Time 55d2d0 D app/build.User 4069a0 T runtime.appendIntStr 462580 T strconv.appendEscapedRune . . .

      Neste caso, as duas primeiras linhas do conjunto de resultados contêm os caminhos para as duas variáveis que você está procurando: app/build.Time e app/build.User.

      Agora que você conhece os caminhos, compile o aplicativo novamente, desta vez alterando Version, User e Time no momento de compilar. Para tanto, passe vários identificadores -X para os -ldflags:

      • go build -v -ldflags="-X 'main.Version=v1.0.0' -X 'app/build.User=$(id -u -n)' -X 'app/build.Time=$(date)'"

      Aqui, você enviou o comando Bash id -u -n para listar o usuário atual e o comando date para listar a data atual.

      Assim que o executável estiver compilado, execute o programa:

      Esse comando, quando executado em um sistema Unix, gerará um resultado similar ao seguinte:

      Output

      Version: v1.0.0 build.Time: Fri Oct 4 19:49:19 UTC 2019 build.User: sammy

      Agora, você tem um binário que contém informações do controle de versão e compilação que podem fornecer assistência vital na produção ao resolver problemas.

      Conclusão

      Este tutorial mostrou como, quando aplicado corretamento, o ldflags pode ser uma ferramenta poderosa para injetar informações valiosas em binários no momento da compilação. Dessa forma, você pode controlar identificadores de recursos, informações de ambiente, informações de controle de versão e outras coisas, sem introduzir alterações no seu código fonte. Ao adicionar ldflags ao seu fluxo de trabalho de compilação atual, você pode maximizar os benefícios do formato de distribuição binária independente do Go.

      Se quiser aprender mais sobre a linguagem de programação Go, confira toda a nossa série sobre Como codificar em Go. Se estiver procurando mais soluções para controle de versão, teste nosso guia de referência Como usar o Git.



      Source link

      Como Construir um Aplicativo Web Moderno para Gerenciar Informações de Clientes com Django e React no Ubuntu 18.04


      O autor selecionou a Open Sourcing Mental Ilness Ltd para receber uma doação como parte do programa Write for DOnations.

      Introdução

      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:

      • O React, um framework JavaScript que permite que os desenvolvedores construam front-ends para Web e nativos para seus back-ends de API REST.
      • O Django, um framework Web gratuito e de código aberto, escrito em Python, que segue o padrão arquitetônico de software Model View Controller (MVC) [Modelo-Visão-Controle].
      • Framework Django REST, um kit de ferramentas eficaz e flexível para a criação de APIs REST no Django.

      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.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      Passo 1 — Criando um Ambiente Virtual em Python e Instalando Dependências

      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:

      • cd ~
      • python3 -m venv ./env

      Ative o ambiente virtual criado usando source:

      A seguir, instale as dependências do projeto com o pip. Essas incluem:

      • Django: o framework Web para o projeto.
      • Framework Django REST: um aplicativo de terceiros que constrói APIs REST com o Django.
      • django-cors-headers: um pacote que habilita o CORS.

      Instale o framework Django:

      • pip install django djangorestframework django-cors-headers

      Com as dependências do projeto instaladas, você pode criar o projeto Django e o front-end do React.

      Passo 2 — Criando o Projeto Django

      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:

      • django-admin startproject 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:

      • sudo apt-get install tree

      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:

      • cd ~/djangoreactproject
      • 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:

      • nano ~/djangoreactproject/djangoreactproject/settings.py

      Navegue até a configuração INSTALLED_APPS e adicione os aplicativos rest_framework e corsheaders no final da lista:

      ~/djangoreactproject/djangoreactproject/settings.py

      ...
      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:

      ~/djangoreactproject/djangoreactproject/settings.py

      ...
      
      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:

      ~/djangoreactproject/djangoreactproject/settings.py

      
      ...
      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:

      • python manage.py startapp 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:

      • nano ~/djangoreactproject/djangoreactproject/settings.py

      Adicione o aplicativo customers:

      ~/djangoreactproject/djangoreactproject/settings.py

      ...
      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:

      • python manage.py runserver

      Você verá um resultado similar ao seguinte:

      Output

      Performing 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:

      Django demo page

      Neste ponto, deixe o aplicativo funcionando e abra um novo terminal para continuar desenvolvendo o projeto.

      Passo 3 — Criando a Front-end React

      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:

      • npx create-react-app frontend

      A seguir, navegue dentro do seu aplicativo React e inicie o servidor de desenvolvimento:

      • cd ~/djangoreactproject/frontend
      • npm start

      Seu aplicativo estará executando a partir do endereço http://localhost:3000/:

      React demo page

      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:

      • cd ~/djangoreactproject
      • 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:

      • nano ~/djangoreactproject/frontend/src/App.css

      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:

      ~/djangoreactproject/frontend/src/App.css

      @import  'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
      

      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.

      Passo 4 — Criando o Modelo de Cliente e Dados Iniciais

      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:

      • cd ~
      • source env/bin/activate

      Vá até o diretório customers e abra o models.py, um arquivo Python que possui os modelos do seu aplicativo:

      • cd ~/djangoreactproject/customers/
      • nano models.py

      O arquivo terá o seguinte conteúdo:

      ~/djangoreactproject/customers/models.py

      from django.db import models
      # Create your models here.
      

      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:

      ~/djangoreactproject/customers/models.py

      from django.db import models
      
      class Customer(models.Model):
          first_name = models.CharField("First name", max_length=255)
          last_name = models.CharField("Last name", max_length=255)
          email = models.EmailField()
          phone = models.CharField(max_length=20)
          address =  models.TextField(blank=True, null=True)
          description = models.TextField(blank=True, null=True)
          createdAt = models.DateTimeField("Created At", auto_now_add=True)
      
          def __str__(self):
              return self.first_name
      

      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:

      • python manage.py makemigrations

      Você receberá um resultado que se parece com este:

      Output

      customers/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:

      Output

      Operations 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:

      • python manage.py makemigrations --empty --name customers customers

      Você verá a seguinte confirmação com o nome do seu arquivo de migração:

      Output

      Migrations 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:

      • cd ~/djangoreactproject/customers/migrations

      Abra o arquivo de migração criado:

      Este é o conteúdo inicial do arquivo:

      ~/djangoreactproject/customers/migrations/0002_customers.py

      from django.db import migrations
      
      class Migration(migrations.Migration):
          dependencies = [
              ('customers', '0001_initial'),
          ]
          operations = [
          ]        
      

      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:

      ~/djangoreactproject/customers/migrations/0002_customers.py

      ...
      def create_data(apps, schema_editor):
          Customer = apps.get_model('customers', 'Customer')
          Customer(first_name="Customer 001", last_name="Customer 001", email="customer001@email.com", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()
      
      ...
      

      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:

      ~/djangoreactproject/customers/migrations/0002_customers.py

      
      ...
          operations = [
              migrations.RunPython(create_data),
          ]  
      

      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:

      ~/djangoreactproject/customers/migrations/0002_customers.py

      from django.db import migrations
      
      def create_data(apps, schema_editor):
          Customer = apps.get_model('customers', 'Customer')
          Customer(first_name="Customer 001", last_name="Customer 001", email="customer001@email.com", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()
      
      class Migration(migrations.Migration):
          dependencies = [
              ('customers', '0001_initial'),
          ]
          operations = [
              migrations.RunPython(create_data),
          ]        
      

      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:

      Output

      Operations 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.

      Passo 5 — Criando a 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.

      Adicionando a Classe de Serializadores

      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:

      • cd ~/djangoreactproject/customers/
      • nano serializers.py

      Adicione o seguinte código para importar o API do serializador e o modelo Customer:

      ~/djangoreactproject/customers/serializers.py

      from rest_framework import serializers
      from .models import Customer
      

      A seguir, crie uma classe de serializadores que estende serializers.ModelSerializer e especifica os campos que serão serializados:

      ~/djangoreactproject/customers/serializers.py

      
      ...
      class CustomerSerializer(serializers.ModelSerializer):
      
          class Meta:
              model = Customer 
              fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')
      

      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:

      ~/djangoreactproject/customers/serializers.py

      from rest_framework import serializers
      from .models import Customer
      
      class CustomerSerializer(serializers.ModelSerializer):
      
          class Meta:
              model = Customer 
              fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')
      

      Agora que criamos nossa classe de serializadores, podemos adicionar as visualizações da API.

      Adicionando 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:

      • nano ~/djangoreactproject/customers/views.py

      Exclua o que estiver ali e adicione as seguintes importações:

      ~/djangoreactproject/customers/views.py

      from rest_framework.response import Response
      from rest_framework.decorators import api_view
      from rest_framework import status
      
      from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
      from .models import Customer 
      from .serializers import *
      

      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:

      ~/djangoreactproject/customers/views.py

      ...
      
      @api_view(['GET', 'POST'])
      def customers_list(request):
          """
       List  customers, or create a new customer.
       """
          if request.method == 'GET':
              data = []
              nextPage = 1
              previousPage = 1
              customers = Customer.objects.all()
              page = request.GET.get('page', 1)
              paginator = Paginator(customers, 10)
              try:
                  data = paginator.page(page)
              except PageNotAnInteger:
                  data = paginator.page(1)
              except EmptyPage:
                  data = paginator.page(paginator.num_pages)
      
              serializer = CustomerSerializer(data,context={'request': request} ,many=True)
              if data.has_next():
                  nextPage = data.next_page_number()
              if data.has_previous():
                  previousPage = data.previous_page_number()
      
              return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})
      
          elif request.method == 'POST':
              serializer = CustomerSerializer(data=request.data)
              if serializer.is_valid():
                  serializer.save()
                  return Response(serializer.data, status=status.HTTP_201_CREATED)
              return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
      

      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:

      • Se for uma solicitação GET, o método pagina os dados utilizando o Paginator do Django e retorna a primeira página de dados após a serialização, a contagem de clientes disponíveis, o número de páginas disponíveis, e os links para as páginas anteriores e as páginas posteriores. O Paginator é uma classe integrada do Django que organiza uma lista de dados em páginas e proporciona métodos para acessar os itens de cada página.
      • Se for uma solicitação POST, o método serializa os dados recebidos do cliente e chama então o método 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):

      ~/djangoreactproject/customers/views.py

      
      ...
      @api_view(['GET', 'PUT', 'DELETE'])
      def customers_detail(request, pk):
       """
       Retrieve, update or delete a customer by id/pk.
       """
          try:
              customer = Customer.objects.get(pk=pk)
          except Customer.DoesNotExist:
              return Response(status=status.HTTP_404_NOT_FOUND)
      
          if request.method == 'GET':
              serializer = CustomerSerializer(customer,context={'request': request})
              return Response(serializer.data)
      
          elif request.method == 'PUT':
              serializer = CustomerSerializer(customer, data=request.data,context={'request': request})
              if serializer.is_valid():
                  serializer.save()
                  return Response(serializer.data)
              return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
      
          elif request.method == 'DELETE':
              customer.delete()
              return Response(status=status.HTTP_204_NO_CONTENT)
      

      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:

      • Se for um pedido GET, os dados do cliente são serializados e enviados utilizando um objeto de Resposta.
      • Se for um pedido PUT, o método cria um serializador para novos dados do cliente. Em seguida, ele chama o método save() do objeto serializador criado. Finalmente, ele envia um objeto de Resposta com o cliente atualizado.
      • Se for um pedido DELETE, o método chama o método delete() do objeto cliente a excluir; depois, retorna um objeto de Resposta sem dados.

      O arquivo final se parece com este:

      ~/djangoreactproject/customers/views.py

      from rest_framework.response import Response
      from rest_framework.decorators import api_view
      from rest_framework import status
      
      from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
      from .models import Customer 
      from .serializers import *
      
      
      @api_view(['GET', 'POST'])
      def customers_list(request):
          """
       List  customers, or create a new customer.
       """
          if request.method == 'GET':
              data = []
              nextPage = 1
              previousPage = 1
              customers = Customer.objects.all()
              page = request.GET.get('page', 1)
              paginator = Paginator(customers, 5)
              try:
                  data = paginator.page(page)
              except PageNotAnInteger:
                  data = paginator.page(1)
              except EmptyPage:
                  data = paginator.page(paginator.num_pages)
      
              serializer = CustomerSerializer(data,context={'request': request} ,many=True)
              if data.has_next():
                  nextPage = data.next_page_number()
              if data.has_previous():
                  previousPage = data.previous_page_number()
      
              return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})
      
          elif request.method == 'POST':
              serializer = CustomerSerializer(data=request.data)
              if serializer.is_valid():
                  serializer.save()
                  return Response(serializer.data, status=status.HTTP_201_CREATED)
              return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
      
      @api_view(['GET', 'PUT', 'DELETE'])
      def customers_detail(request, pk):
          """
       Retrieve, update or delete a customer by id/pk.
       """
          try:
              customer = Customer.objects.get(pk=pk)
          except Customer.DoesNotExist:
              return Response(status=status.HTTP_404_NOT_FOUND)
      
          if request.method == 'GET':
              serializer = CustomerSerializer(customer,context={'request': request})
              return Response(serializer.data)
      
          elif request.method == 'PUT':
              serializer = CustomerSerializer(customer, data=request.data,context={'request': request})
              if serializer.is_valid():
                  serializer.save()
                  return Response(serializer.data)
              return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
      
          elif request.method == 'DELETE':
              customer.delete()
              return Response(status=status.HTTP_204_NO_CONTENT)
      

      Agora, podemos seguir em frente para criar nossos pontos de extremidade.

      Adicionando Pontos de extremidade de API

      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:

      • nano ~/djangoreactproject/djangoreactproject/urls.py

      Deixe o que está lá, mas adicione a importação às visualizações do customers no topo do arquivo:

      ~/djangoreactproject/djangoreactproject/urls.py

      from django.contrib import admin
      from django.urls import path
      from customers import views
      from django.conf.urls import url
      

      Em seguida, adicione os URLs api/customers/ e api/customers/<pk> à lista urlpatterns que contém os URLs do aplicativo:

      ~/djangoreactproject/djangoreactproject/urls.py

      ...
      
      urlpatterns = [
          path('admin/', admin.site.urls),
          url(r'^api/customers/$', views.customers_list),
          url(r'^api/customers/(?P<pk>[0-9]+)$', views.customers_detail),
      ]
      

      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:

      • cd ~/djangoreactproject/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:

      • cd src
      • nano CustomersService.js

      Adicione o seguinte código, que contém métodos para se conectar à API REST do Django:

      ~/djangoreactproject/frontend/src/CustomersService.js

      import axios from 'axios';
      const API_URL = 'http://localhost:8000';
      
      export default class CustomersService{
      
          constructor(){}
      
      
          getCustomers() {
              const url = `${API_URL}/api/customers/`;
              return axios.get(url).then(response => response.data);
          }  
          getCustomersByURL(link){
              const url = `${API_URL}${link}`;
              return axios.get(url).then(response => response.data);
          }
          getCustomer(pk) {
              const url = `${API_URL}/api/customers/${pk}`;
              return axios.get(url).then(response => response.data);
          }
          deleteCustomer(customer){
              const url = `${API_URL}/api/customers/${customer.pk}`;
              return axios.delete(url);
          }
          createCustomer(customer){
              const url = `${API_URL}/api/customers/`;
              return axios.post(url,customer);
          }
          updateCustomer(customer){
              const url = `${API_URL}/api/customers/${customer.pk}`;
              return axios.put(url,customer);
          }
      }
      

      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.

      Passo 7 — Exibindo Dados da API no Aplicativo React

      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:

      • nano ~/djangoreactproject/frontend/src/CustomersList.js

      Inicie importando o React e o Component para criar um componente do React:

      ~/djangoreactproject/frontend/src/CustomersList.js

      import  React, { Component } from  '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:

      ~/djangoreactproject/frontend/src/CustomersList.js

      
      ...
      import  CustomersService  from  './CustomersService';
      
      const  customersService  =  new  CustomersService();
      

      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:

      ~/djangoreactproject/frontend/src/CustomersList.js

      
      ...
      class  CustomersList  extends  Component {
      
          constructor(props) {
              super(props);
              this.state  = {
                  customers: [],
                  nextPageURL:  ''
              };
              this.nextPage  =  this.nextPage.bind(this);
              this.handleDelete  =  this.handleDelete.bind(this);
          }
      }
      export  default  CustomersList;
      

      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:

      ~/djangoreactproject/frontend/src/CustomersList.js

      
      ...
      componentDidMount() {
          var  self  =  this;
          customersService.getCustomers().then(function (result) {
              self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
          });
      }
      

      Agora, adicione o método handleDelete() que lida com a exclusão de um cliente, abaixo do componentDidMount():

      ~/djangoreactproject/frontend/src/CustomersList.js

      
      ...
      handleDelete(e,pk){
          var  self  =  this;
          customersService.deleteCustomer({pk :  pk}).then(()=>{
              var  newArr  =  self.state.customers.filter(function(obj) {
                  return  obj.pk  !==  pk;
              });
              self.setState({customers:  newArr})
          });
      }
      

      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:

      ~/djangoreactproject/frontend/src/CustomersList.js

      
      ...
      nextPage(){
          var  self  =  this;
          customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
              self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
          });
      }
      

      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:

      ~/djangoreactproject/frontend/src/CustomersList.js

      
      ...
      render() {
      
          return (
          <div  className="customers--list">
              <table  className="table">
                  <thead  key="thead">
                  <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Phone</th>
                      <th>Email</th>
                      <th>Address</th>
                      <th>Description</th>
                      <th>Actions</th>
                  </tr>
                  </thead>
                  <tbody>
                      {this.state.customers.map( c  =>
                      <tr  key={c.pk}>
                          <td>{c.pk}  </td>
                          <td>{c.first_name}</td>
                          <td>{c.last_name}</td>
                          <td>{c.phone}</td>
                          <td>{c.email}</td>
                          <td>{c.address}</td>
                          <td>{c.description}</td>
                          <td>
                          <button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>
                          <a  href={"/customer/" + c.pk}> Update</a>
                          </td>
                      </tr>)}
                  </tbody>
              </table>
              <button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>
          </div>
          );
      }
      

      Este é o conteúdo completo do arquivo:

      ~/djangoreactproject/frontend/src/CustomersList.js

      import  React, { Component } from  'react';
      import  CustomersService  from  './CustomersService';
      
      const  customersService  =  new  CustomersService();
      
      class  CustomersList  extends  Component {
      
      constructor(props) {
          super(props);
          this.state  = {
              customers: [],
              nextPageURL:  ''
          };
          this.nextPage  =  this.nextPage.bind(this);
          this.handleDelete  =  this.handleDelete.bind(this);
      }
      
      componentDidMount() {
          var  self  =  this;
          customersService.getCustomers().then(function (result) {
              console.log(result);
              self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
          });
      }
      handleDelete(e,pk){
          var  self  =  this;
          customersService.deleteCustomer({pk :  pk}).then(()=>{
              var  newArr  =  self.state.customers.filter(function(obj) {
                  return  obj.pk  !==  pk;
              });
      
              self.setState({customers:  newArr})
          });
      }
      
      nextPage(){
          var  self  =  this;
          console.log(this.state.nextPageURL);        
          customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
              self.setState({ customers:  result.data, nextPageURL:  result.nextlink})
          });
      }
      render() {
      
          return (
              <div  className="customers--list">
                  <table  className="table">
                  <thead  key="thead">
                  <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Phone</th>
                      <th>Email</th>
                      <th>Address</th>
                      <th>Description</th>
                      <th>Actions</th>
                  </tr>
                  </thead>
                  <tbody>
                  {this.state.customers.map( c  =>
                      <tr  key={c.pk}>
                      <td>{c.pk}  </td>
                      <td>{c.first_name}</td>
                      <td>{c.last_name}</td>
                      <td>{c.phone}</td>
                      <td>{c.email}</td>
                      <td>{c.address}</td>
                      <td>{c.description}</td>
                      <td>
                      <button  onClick={(e)=>  this.handleDelete(e,c.pk) }> Delete</button>
                      <a  href={"/customer/" + c.pk}> Update</a>
                      </td>
                  </tr>)}
                  </tbody>
                  </table>
                  <button  className="btn btn-primary"  onClick=  {  this.nextPage  }>Next</button>
              </div>
              );
        }
      }
      export  default  CustomersList;
      

      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.

      Passo 8 — Adicionando os Componentes Customer Create e Update do React

      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:

      • nano ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      Adicione o seguinte código para criar um componente do React, import o React e o Component:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      import  React, { Component } from  'react';
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      ...
      import  CustomersService  from  './CustomersService';
      
      const  customersService  =  new  CustomersService();
      

      Em seguida, crie um componente CustomerCreateUpdate que estende o Component para criar e atualizar os clientes:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      
      ...
      class  CustomerCreateUpdate  extends  Component {
      
          constructor(props) {
              super(props);
          }
      
      }
      export default CustomerCreateUpdate;
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      
      ...
      render() {
              return (
                <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                  <label>
                    First Name:</label>
                    <input className="form-control" type="text" ref='firstName' />
      
                  <label>
                    Last Name:</label>
                    <input className="form-control" type="text" ref='lastName'/>
      
                  <label>
                    Phone:</label>
                    <input className="form-control" type="text" ref='phone' />
      
                  <label>
                    Email:</label>
                    <input className="form-control" type="text" ref='email' />
      
                  <label>
                    Address:</label>
                    <input className="form-control" type="text" ref='address' />
      
                  <label>
                    Description:</label>
                    <textarea className="form-control" ref='description' ></textarea>
      
      
                  <input className="btn btn-primary" type="submit" value="Submit" />
                  </div>
                </form>
              );
        }
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      
      ...
      handleSubmit(event) {
          const { match: { params } } =  this.props;
          if(params  &&  params.pk){
              this.handleUpdate(params.pk);
          }
          else
          {
              this.handleCreate();
          }
          event.preventDefault();
      }
      
      ...
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      ...
      class CustomerCreateUpdate extends Component {
      
      constructor(props) {
          super(props);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
      ...
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      
      ...
      handleCreate(){
          customersService.createCustomer(
              {
              "first_name":  this.refs.firstName.value,
              "last_name":  this.refs.lastName.value,
              "email":  this.refs.email.value,
              "phone":  this.refs.phone.value,
              "address":  this.refs.address.value,
              "description":  this.refs.description.value
              }).then((result)=>{
                      alert("Customer created!");
              }).catch(()=>{
                      alert('There was an error! Please re-check your form.');
              });
      }
      
      ...
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      
      ...
      handleUpdate(pk){
      customersService.updateCustomer(
          {
          "pk":  pk,
          "first_name":  this.refs.firstName.value,
          "last_name":  this.refs.lastName.value,
          "email":  this.refs.email.value,
          "phone":  this.refs.phone.value,
          "address":  this.refs.address.value,
          "description":  this.refs.description.value
          }
          ).then((result)=>{
      
              alert("Customer updated!");
          }).catch(()=>{
              alert('There was an error! Please re-check your form.');
          });
      }
      

      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:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      
      ...
      componentDidMount(){
          const { match: { params } } =  this.props;
          if(params  &&  params.pk)
          {
              customersService.getCustomer(params.pk).then((c)=>{
                  this.refs.firstName.value  =  c.first_name;
                  this.refs.lastName.value  =  c.last_name;
                  this.refs.email.value  =  c.email;
                  this.refs.phone.value  =  c.phone;
                  this.refs.address.value  =  c.address;
                  this.refs.description.value  =  c.description;
              })
          }
      }
      

      Este é o conteúdo completo do arquivo:

      ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

      import React, { Component } from 'react';
      import CustomersService from './CustomersService';
      
      const customersService = new CustomersService();
      
      class CustomerCreateUpdate extends Component {
          constructor(props) {
              super(props);
      
              this.handleSubmit = this.handleSubmit.bind(this);
            }
      
            componentDidMount(){
              const { match: { params } } = this.props;
              if(params && params.pk)
              {
                customersService.getCustomer(params.pk).then((c)=>{
                  this.refs.firstName.value = c.first_name;
                  this.refs.lastName.value = c.last_name;
                  this.refs.email.value = c.email;
                  this.refs.phone.value = c.phone;
                  this.refs.address.value = c.address;
                  this.refs.description.value = c.description;
                })
              }
            }
      
            handleCreate(){
              customersService.createCustomer(
                {
                  "first_name": this.refs.firstName.value,
                  "last_name": this.refs.lastName.value,
                  "email": this.refs.email.value,
                  "phone": this.refs.phone.value,
                  "address": this.refs.address.value,
                  "description": this.refs.description.value
              }          
              ).then((result)=>{
                alert("Customer created!");
              }).catch(()=>{
                alert('There was an error! Please re-check your form.');
              });
            }
            handleUpdate(pk){
              customersService.updateCustomer(
                {
                  "pk": pk,
                  "first_name": this.refs.firstName.value,
                  "last_name": this.refs.lastName.value,
                  "email": this.refs.email.value,
                  "phone": this.refs.phone.value,
                  "address": this.refs.address.value,
                  "description": this.refs.description.value
              }          
              ).then((result)=>{
                console.log(result);
                alert("Customer updated!");
              }).catch(()=>{
                alert('There was an error! Please re-check your form.');
              });
            }
            handleSubmit(event) {
              const { match: { params } } = this.props;
      
              if(params && params.pk){
                this.handleUpdate(params.pk);
              }
              else
              {
                this.handleCreate();
              }
      
              event.preventDefault();
            }
      
            render() {
              return (
                <form onSubmit={this.handleSubmit}>
                <div className="form-group">
                  <label>
                    First Name:</label>
                    <input className="form-control" type="text" ref='firstName' />
      
                  <label>
                    Last Name:</label>
                    <input className="form-control" type="text" ref='lastName'/>
      
                  <label>
                    Phone:</label>
                    <input className="form-control" type="text" ref='phone' />
      
                  <label>
                    Email:</label>
                    <input className="form-control" type="text" ref='email' />
      
                  <label>
                    Address:</label>
                    <input className="form-control" type="text" ref='address' />
      
                  <label>
                    Description:</label>
                    <textarea className="form-control" ref='description' ></textarea>
      
      
                  <input className="btn btn-primary" type="submit" value="Submit" />
                  </div>
                </form>
              );
            }  
      }
      
      export default CustomerCreateUpdate;
      

      Com o componente CustomerCreateUpdate criado, podemos atualizar o componente principal do App para adicionar links aos diferentes componentes que criamos.

      Passo 9 — Atualizando o Componente Principal do App

      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:

      • cd ~/djangoreactproject/frontend
      • npm install --save react-router-dom

      Em seguida, abra ~/djangoreactproject/frontend/src/App.js:

      • nano ~/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:

      ~/djangoreactproject/frontend/src/App.js

      import  React, { Component } from  'react';
      import { BrowserRouter } from  'react-router-dom'
      import { Route, Link } from  'react-router-dom'
      import  CustomersList  from  './CustomersList'
      import  CustomerCreateUpdate  from  './CustomerCreateUpdate'
      import  './App.css';
      

      O BrowserRoutermanté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:

      ~/djangoreactproject/frontend/src/App.js

      ...
      
      const  BaseLayout  = () => (
      <div  className="container-fluid">
          <nav  className="navbar navbar-expand-lg navbar-light bg-light">
              <a  className="navbar-brand"  href="https://www.digitalocean.com/#">Django React Demo</a>
              <button  className="navbar-toggler"  type="button"  data-toggle="collapse"  data-target="#navbarNavAltMarkup"  aria-controls="navbarNavAltMarkup"  aria-expanded="false"  aria-label="Toggle navigation">
              <span  className="navbar-toggler-icon"></span>
          </button>
          <div  className="collapse navbar-collapse"  id="navbarNavAltMarkup">
              <div  className="navbar-nav">
                  <a  className="nav-item nav-link"  href="/">CUSTOMERS</a>
                  <a  className="nav-item nav-link"  href="http://www.digitalocean.com/customer">CREATE CUSTOMER</a>
              </div>
          </div>
          </nav>
          <div  className="content">
              <Route  path="/"  exact  component={CustomersList}  />
              <Route  path="/customer/:pk"  component={CustomerCreateUpdate}  />
              <Route  path="/customer/"  exact  component={CustomerCreateUpdate}  />
          </div>
      </div>
      )
      

      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:

      ~/djangoreactproject/frontend/src/App.js

      ...
      
      class  App  extends  Component {
      
      render() {
          return (
          <BrowserRouter>
              <BaseLayout/>
          </BrowserRouter>
          );
      }
      }
      export  default  App;
      

      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:

      ~/djangoreactproject/frontend/src/App.js

      import React, { Component } from 'react';
      import { BrowserRouter } from 'react-router-dom'
      import { Route, Link } from 'react-router-dom'
      
      import  CustomersList from './CustomersList'
      import  CustomerCreateUpdate  from './CustomerCreateUpdate'
      import './App.css';
      
      const BaseLayout = () => (
        <div className="container-fluid">
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <a className="navbar-brand" href="https://www.digitalocean.com/#">Django React Demo</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div className="navbar-nav">
            <a className="nav-item nav-link" href="/">CUSTOMERS</a>
            <a className="nav-item nav-link" href="http://www.digitalocean.com/customer">CREATE CUSTOMER</a>
      
          </div>
        </div>
      </nav>  
      
          <div className="content">
            <Route path="/" exact component={CustomersList} />
            <Route path="/customer/:pk"  component={CustomerCreateUpdate} />
            <Route path="/customer/" exact component={CustomerCreateUpdate} />
      
          </div>
      
        </div>
      )
      
      class App extends Component {
        render() {
          return (
            <BrowserRouter>
              <BaseLayout/>
            </BrowserRouter>
          );
        }
      }
      
      export default App;
      

      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:

      Application Home Page

      Com este aplicativo em funcionamento, agora você tem a base de um aplicativo de CRM.

      Conclusão

      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.



      Source link