Tutoriais

Tutoriais das tecnologias utilizadas no projeto LibroRete.

Docker

LibroRete - Dockerização

Node Docker MySQL 8.0 Python 3.13 Django 5.1.2

Introdução

Tutorial para "dockerizar" o projeto LibroRete que possui as seguintes tecnologias:

Instalação

Siga os passos abaixo para configurar o ambiente

Instale o Docker na sua máquina.
Você pode seguir as instruções de instalação no site oficial do Docker.
Faça um git clone deste repositório: git clone https://github.com/mancinidsb/librorete.git
Crie um arquivo .env na raíz do diretório que possua os seguintes atributos (os valores podem ser configurados):

  MYSQL_ROOT_PASSWORD=xxx
  MYSQL_USER=xxx
  MYSQL_PASSWORD=xx
  DB_HOST=xxx
  DB_USER=xxx
  DB_PASSWORD=xxx

Com um terminal aberto dentro do diretório, insira o comando: docker compose up --build
Este comando irá utilizar os dockfiles para assim, criar os containers.

Vídeo sobre como criar os containers: video

Acessar a Aplicação - FrontEnd

Após a instalação, o container frontend-1 mostrará a seguinte mensagem:

Isto, significa que a aplicação frontend está rodando no localhost:3000. Para acessa-lá, basta digitar este endereço no seu navegador de internet.

Acessar a Aplicação - BackEnd

Após a instalação, o container backend-1 mostrará a seguinte mensagem:

Isto, significa que a aplicação backend está rodando no localhost:8000. Para acessa-lá, basta digitar este endereço no seu navegador de internet. Caso isto não ocorra, espere o terminal não mandar mensagens por alguns segundos. Após isso, acesse o localhost:8000 normalmente.

Rodar a Aplicação sem o processo de "build"

Caso queira somente rodar aplicação sem fazer o build das imagens, insira o seguinte código num terminal dentro da raíz do diretório (onde se encontra o docker-compose.yml): docker compose up

⚠️ATENÇÃO: Faça isso apenas se apliacação já sofreu o processo de build!

Rodar Apenas um serviço (FrontEnd ou BackEnd )

Para rodar apenas o frontend, digite: docker compose up frontend
Para rodar apenas o backend, digite: docker compose up backend

⚠️ATENÇÃO: Apesar de parecer que o docker apenas rodará um ou outro, na prática isto não acontece.

O motivo disto é para evitar que um serviço precise de outro e este, esteja desligado. Para sanar esse problema, foi optado as seguintes dependências:

Ao rodar o frontend, o backend e o banco de dados serão ligados
Ao rodar o backend, apenas o banco de dados será ligado.

Desse modo, caso o front faça uma requisição ao back, não ocorrerá uma falha de comunicação.

Django

Vídeos tutoriais: video1 video2

1. Entendendo o ambiente de desenvolvimento

1.1 - backend/project_name/core:

Essa pasta representa o diretório principal do projeto Django. Ele contém a configuração do projeto em si. Como os arquivos:
- __init__.py: Indica que essa pasta é um pacote Python.
- asgi.py: Configura a interface ASGI para o Django, permitindo que ele lide com conexões assíncronas.
- settings.py: Como mencionado, contém as configurações globais do projeto.
- urls.py: Define as URLs principais do projeto, incluindo as rotas para as aplicações.
- wsgi.py: Configura a interface WSGI, necessária para servir o projeto em produção com servidores como Gunicorn ou uWSGI.

1.2 - manage.py:

Esse arquivo é um utilitário de linha de comando que permite interagir com o projeto Django. Ele é criado automaticamente quando você inicia um novo projeto Django.
Com ele é possível executar vários comandos, como:
- startapp <nome_do_app>: Para criar uma nova aplicação Django.
- runserver: Para iniciar o servidor de desenvolvimento.
- migrate: Para aplicar migrações do banco de dados.
- createsuperuser: Para criar um usuário administrador.

python manage.py startapp api_rest

1.3 - settings.py:

Um dos principais arquivos de configuração de um projeto Django. Ele está localizado dentro da pasta do projeto (backend/project_name/core), e define todas as configurações globais do projeto Django, como configurações de banco de dados, autenticação, apps instalados, e configurações de middleware.
Ele permite definir configurações, como:
- INSTALLED_APPS: Lista de apps que o Django deve carregar para o projeto.
- DATABASES: Configuração do banco de dados.
- TEMPLATES: Configuração dos templates do Django.
- DEBUG: Ativa ou desativa o modo de depuração.

1.4 - requirements.txt:

Esse arquivo lista todas as dependências do projeto, ou seja, os pacotes e bibliotecas de Python necessários para que o projeto funcione corretamente. Facilitando a instalação das dependências.

pip install -r requirements.txt

2. Criando um projeto Django

2.1 - Criar um novo app:

No diretório project_name dentro de backend, execute o seguinte comando para criar um novo app chamado api_rest:

python manage.py startapp api_rest

Isso criará uma nova pasta chamada api_rest contendo a estrutura básica para o seu app Django.

2.2 - Registrar o Novo App:

Abra o arquivo settings.py (localizado em backend/project_name/core/settings.py) e adicione api_rest à lista de apps instalados. Esse passo informa ao Django para incluir o novo app no projeto:

INSTALLED_APPS = [
    # Seus apps
    'api_rest',  # Registra o novo app de API
]

3. Configurando Banco de Dados, Aplicativos e Middleware

3.1 Configuração do Banco de Dados

Modificamos o banco de dados padrão sqlite3 do Django para MySQL, que será utilizado neste projeto. Abaixo está a configuração de acesso ao banco de dados:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'escola',
        'USER': 'root',
        'PASSWORD': 'root',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

3.2 Configuração dos Aplicativos Instalados

No arquivo settings.py, na seção INSTALLED_APPS, adicionamos os aplicativos necessários para o projeto, incluindo o Django REST framework e o middleware de CORS:

INSTALLED_APPS = [
    # Apps padrão do Django
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Apps de terceiros
    'rest_framework',
    'corsheaders',

    # App do projeto
    'api_rest',
]

3.3 Configuração de Middleware

No mesmo arquivo settings.py, adicionamos o middleware do corsheaders para gerenciar as permissões de origem cruzada (CORS), permitindo que nossa aplicação seja acessada por domínios externos específicos:

MIDDLEWARE = [
    # Middlewares padrão do Django
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    # Middleware do CORS
    'corsheaders.middleware.CorsMiddleware',
]

3.4 Configuração de Permissões CORS

No final do arquivo settings.py, especificamos os endereços permitidos para acessar a aplicação. Esses endereços foram definidos anteriormente nos containers Docker:

CORS_ALLOW_ORIGINS = [
    'http://localhost:8000',
    'http://localhost:3000',
    'http://localhost:3306',
]

4. Acessando o BD e Criando Models

4.1 Definindo o Modelo

No arquivo models.py dentro do app api_rest, criamos uma tabela simples chamada User como exemplo. Esse modelo define as propriedades de cada usuário:

# api_rest/models.py

from django.db import models

class User(models.Model):
    user_nickname = models.CharField(primary_key=True, max_length=100, default='')
    user_name = models.CharField(max_length=50, default='')
    user_email = models.EmailField(default='')
    user_age = models.IntegerField(default=0)

    def __str__(self):
        return f'Nickname: {self.user_nickname} | E-mail: {self.user_email}'

4.2 Aplicando Migrações

Para criar a tabela User no banco de dados, execute os seguintes comandos no terminal para gerar e aplicar as migrações:

python manage.py makemigrations
python manage.py migrate

5. Criando um Super usuário

5.1 Registrando o Modelo no Django Admin

No arquivo admin.py dentro do app api_rest, registramos a classe User no painel de administração do Django. Isso permite que o modelo User seja gerenciado através da interface de administração.

# api_rest/admin.py

from .models import User
from django.contrib import admin

admin.site.register(User)

5.2 Criando o Super usuário

No terminal, execute o comando abaixo para criar um super usuário, que permitirá acessar o painel administrativo do Django:

python manage.py createsuperuser

Siga as instruções no terminal para definir um nome de usuário, e-mail e senha para o super usuário.

5.3 Executando o Servidor de Desenvolvimento

Após criar o super usuário, inicie o servidor de desenvolvimento para acessar o painel de administração:

	python manage.py runserver

Acesse a interface administrativa do Django em http://127.0.0.1:8000/admin/.

5.4 Acessando o Painel Administrativo

Faça login com o super usuário que você criou. Você verá uma tela inicial contendo os modelos registrados, incluindo User.
Inicialmente, a lista de usuários estará vazia, mas você pode adicionar novos usuários clicando na opção "Add" em "Users".

6. Criando um Serializer

6.1 Criando o Arquivo `serializers.py`

Na pasta api_rest, criamos um novo arquivo chamado serializers.py para definir os serializers que serão usados para a conversão entre os objetos de modelos e dados JSON.

6.2 Definindo o Serializer para o Modelo `User`

Dentro do arquivo serializers.py, criamos a classe UserSerializer, que será responsável por serializar o modelo User. A classe herda de serializers.ModelSerializer para permitir a conversão automática entre o modelo e o formato JSON.

# api_rest/serializers.py

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = '__all__'

A classe Meta dentro do UserSerializer define o modelo a ser usado (User) e os campos a serem incluídos na serialização. O valor '__all__' indica que todos os campos do modelo serão serializados.

6.3 Utilizando o Serializer

Este serializer pode agora ser usado nas views para converter instâncias do modelo User para JSON e vice-versa, facilitando a criação de APIs baseadas em Django Rest Framework.

7. Criando uma View

7.1 Definindo a View no Arquivo `views.py`

No arquivo views.py dentro do projeto, definimos as funções que serão responsáveis por acessar e retornar os dados do banco de dados.

Exemplo de código para uma função que retorna todos os usuários cadastrados:

# api_rest/views.py

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse

from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework import status

from .models import User
from .serializers import UserSerializer

import json

@api_view(['GET'])
def get_users(request):
    if request.method == 'GET':
        users = User.objects.all()
        serializer = UserSerializer(users, many=True)
        return Response(serializer.data)
    
    return Response(status=status.HTTP_400_BAD_REQUEST)

A função get_users usa o decorator @api_view para definir que ela aceita apenas requisições GET. Ela busca todos os usuários do banco de dados e os retorna como dados serializados.

7.2 Configurando as URLs no Projeto

Para que a view possa ser acessada pelo front-end, é necessário configurar as URLs no arquivo urls.py do projeto, adicionando o caminho para as URLs da API.

# backend/projetc_name/core/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api_rest.urls'), name='api_rest_urls'),
]

7.3 Definindo as URLs no App `api_rest`

Em seguida, criamos o arquivo urls.py dentro da pasta api_rest, onde definimos as URLs específicas que darão acesso às funções da API.

# api_rest/urls.py

from django.contrib import admin
from django.urls import path, include

from . import views

urlpatterns = [
    path('', views.get_users, name='get_all_users'),
]

7.4 Rodando o Servidor

Após configurar as URLs, rodamos o servidor de desenvolvimento para acessar a resposta da função.

python manage.py runserver

A API pode ser acessada na URL http://127.0.0.1:8000/api/, onde a resposta será os dados dos usuários cadastrados.

MySql

Introdução

Neste projeto, utilizaremos o MySQL para a persistência de dados. Amplamente adotado em aplicações web, o MySQL será executado em um contêiner Docker, garantindo um ambiente de banco de dados isolado e facilmente configurável.

Este tópico abordará como acessar o contêiner, bem como executar comandos e scripts SQL diretamente dentro dele, facilitando a interação e a administração do banco de dados no ambiente Docker.

Existem algumas maneiras de acessar o banco de dados: pelo CMD (no Windows), pelo Docker Desktop ou pelo MySQL Workbench.
Para qualquer um dos métodos, é necessário que o Docker e os containers do projeto estejam ativos.

Usando CMD(Windows)

Com o CMD aberto, digite: docker exec -it librorete-db-1 /bin/sh
Esse comando abrirá o terminal vinculado ao container que contém o banco de dados.

Para acessar o Mysql digite: mysql -u <usuário> -p
No espaço <usuário> digite o usuário criado no arquivo .env na variável MYSQL_USER
Lembre-se que o usuário padrão é root

Depois de inserir o comando, digite a senha vinculada ao usuário. Esta senha é a mesma do arquivo .env na variável: MYSQL_PASSWORD

Após isso, a seguinte tela será mostrada:

Com isso, é possivel utilizar comandos SQL
Como no exemplo abaixo, é utilizado o comando SHOW DATABASES; que mostrará as Databases que estam inseridas no container.

Usando o Docker Desktop

Abra o Docker Desktop e, com os containers ativos, clique no container db-1.

Vá para o aba exec

Digite o comando: mysql -u <usuário> -p e após digitar a senha vinculada ao usuário, será possível executar comandos SQL
Por exemplo:

Usando o MySQL Workbench

Primeiramente, baixe e instale o MySQL Workbench pelo seu site oficial.

Com o MySQL Workbench aberto, clique no ícone de "+" para criar uma nova conexão

Insira um nome para a sua conexão e o usuário, e em seguida clique em "ok"

Será criada uma nova conexão, clique nela para abri-lá

Em seguida, digite a senha correspondente ao usuário

Após isso, será possivel digitar comandos SQL

React

Introdução

O que é React?

React, ou ReactJS, é uma biblioteca JavaScript amplamente usada para criar interfaces de usuário dinâmicas e interativas, com foco em aplicações de página única (SPAs). Desenvolvida e mantida pelo Facebook, tornou-se bastante popular devido à sua eficiência na renderização, facilidade de reutilização de componentes e o suporte de uma comunidade engajada.

SPA é um padrão cujo carregamento de recursos, como CSS, JavaScript e HTML das páginas ocorre um única vez: na primeira vez em que o usuário acessa a aplicação. Logo, isso faz com que o carregamento das novas páginas seja bem mais rápido.

React segue a abordagem do DOM Virtual (Document Object Model), que otimiza o desempenho de renderização ao minimizar atualizações do DOM. Além disso, é rápido e funciona bem com outras ferramentas e bibliotecas.

Conceitos Fundamentais

Componentes

Componentes é um dos principais conceitos de React. Basicamente, são funções JavaScript que você pode enriquecer com markup (HTML). Eles são partes independentes e reutilizáveis de código e aceitam entradas (chamadas de “props”) e retornam elementos React que descrevem o que deve aparecer na tela.

JSX

JSX é uma extensão de sintaxe para JavaScript usada para escrever código HTML com JavaScript. Ele lembra linguagens de marcação, mas vem com todo o poder do JavaScript. Usar JSX não é obrigatório, mas é altamente recomendado para programar em React, pois torna o processo de desenvolvimento mais fácil, já que o código se torna mais simples de escrever e ler.

// Using JSX
const element = <h1>Hello World!</h1>;

// Using plain JavaScript
const element = React.createElement('h1', null, 'Hello World!');

Props e State

Componentes React usam props para se comunicar entre si. Todo componente pai pode passar algumas informações para seus componentes filhos, fornecendo-lhes props. Props podem lembrar atributos HTML, mas você pode passar qualquer valor JavaScript por meio delas, incluindo objetos, arrays e funções.

const SayHello = () => {
    return (
     <div>
       <p>Hello React<\p>
     </div>
    )
}

// Using props
const SayHelloWithProps = (props) => {
    return (
     <div>
       <p>Hello {props.name}<\p>
     </div>
    )
}

Em aplicações reais, clicar em "próximo" em um carrossel de imagens deve alterar a imagem exibida, clicar em "comprar" deve colocar um produto no carrinho de compras.Assim, os componentes precisam "lembrar" de certas coisas: o valor atual de entrada, a imagem atual, o carrinho de compras. No React, esse tipo de memória específica do componente é chamado de state (estado).

O Hook useState fornece duas coisas:

Uma variável de estado para reter os dados entre as renderizações.
Uma função de atualização de estado para modificar a variável e acionar o React para renderizar o componente novamente.

import { useState } from 'react';

function MyComponen() {
    const [age, setAge] = useState(20);
    const [name, setName] = useState('Joao');
    // ...

Hooks

Os Hooks permitem que você use diferentes funcionalidades do React a partir dos seus componentes. Você pode usar os Hooks nativos ou combiná-los para criar os seus próprios.

Para mais informações, documentação do React.

Preparação de Ambiente

A seguir, será mostrado um guia passo a passo para instalar e configurar um ambiente de desenvolvimento React funcional.

Antes de tudo, há alguns requisitos necessários:

Node.js and npm: o desenvolvimento React depende significativamente do Node.js e npm (Node Package Manager). Eles podem ser baixados e instalados pelo website oficial Node.js.
Editor de Código: Selecione um editor de código que corresponda às suas preferências. As opções mais populares são Visual Studio Code, Sublime Text e Atom. Você pode baixar o Visual Studio Code aqui.

Com os requisitos baixados, agora podemos criar nossa aplicação React!

Para isso:

Vá para a pasta onde você quer criar o projeto.
Abra o terminal e digite o comando npx create-react-app <Application_Name>.
Entre na pasta recém-criada pelo comando cd <Application_Name>.
Abra o projeto dentro do editor de código code ..

Você verá essa estrutura de pastas:

node_modules: é o diretório criado pelo npm para rastrear cada pacote que é instalado.
public: contém os recursos públicos da aplicação, como imagens. Ainda, há um arquivo HTML que contém o id "root". É neste id que a aplicação React será renderizada e vai ser exibida.
src: contém arquivos do componente React que é o responsável por renderizar a aplicação toda.
.gitignore: nele ficam os arquivos ignorados na hora de subir no Git.
package-lock.json: descreve as características da dependências usadas na aplicação.
package.json: é um repositório central de configurações e ferramentas.
README.md: arquivo que contém informações necessárias para entender o objetivo do projeto.

Abra o terminal integrado no Visual Studio Code com Crtl+' e digite o comando npm start que é usado para executar a aplicação.

Após isso, vai abrir automaticamente uma aplicação na porta 3000. E pronto, seu projeto já está funcionando!

Há arquivos que não serão utilizados na aplicação e podem ser deletados. São eles:

App.css
logo.svg
reportWebVitals.js
setupTests.js
App.test.js
favicon.ico
logo192.png
logo512.png
manifest.json
robots.txt

Exemplo

Criando nosso primeiro React App

Agora que temos tudo instalado, vamos colocar a mão na massa. O objetivo é fazer um contador simples onde poderemos explorar um pouco do funcionamento de React. Ao final da explicação, teremos esse resultado:

Vamos começar o processo pelo arquivo App.js. Ele contém o componente principal do aplicativo, onde implementamos a lógica do contador e definimos os botões de controle.

Código de App.js:

No código, formamos o nosso componente App, que é uma função JavaScript.

useState: Usado para gerenciar o estado contador, permitindo-nos aumentar ou diminuir o valor com as funções aumentarContador e diminuirContador.
aumentarContador e diminuirContador: Funções que alteram o valor de contador. Essas funções são associadas aos botões para que cada clique altere o estado e, assim, re-renderize a contagem.
return com JSX: Define a estrutura do componente que será exibida no navegador, com um <h1> para mostrar o contador e botões para controlá-lo.

Em seguida, é hora de mexer no arquivo index.js. Ele é o ponto de entrada do aplicativo e usa o ReactDOM para renderizar o componente App na página.

Código de index.js:

ReactDOM.render: Faz a renderização inicial do componente App dentro da div com o ID root que normalmente fica no index.html do projeto. Esse é o ponto de partida do aplicativo React.

Por fim, vamos adicionar estilização à nossa aplicação no arquivo index.css. Aqui, estilizamos o componente App para centralizá-lo na tela e definir estilos básicos para os botões.

Códigos de index.css:

html, body e #root: Definimos o layout de toda a página como flex, centralizando o componente App vertical e horizontalmente.

.App: Define uma borda, padding e sombra para o contêiner principal, com o objetivo de estilizar e centralizar o conteúdo.

button: Estiliza os botões com cores, sombras e uma leve animação para melhorar a aparência e a experiência de uso.

Confira mais detalhes do exemplo aqui.

Tutoriais

Docker

LibroRete - Dockerização

Introdução

Instalação

Acessar a Aplicação - FrontEnd

Acessar a Aplicação - BackEnd

Rodar a Aplicação sem o processo de "build"

Rodar Apenas um serviço (FrontEnd ou BackEnd )

Django

1. Entendendo o ambiente de desenvolvimento

1.1 - backend/project_name/core:

1.2 - manage.py:

1.3 - settings.py:

1.4 - requirements.txt:

2. Criando um projeto Django

2.1 - Criar um novo app:

2.2 - Registrar o Novo App:

3. Configurando Banco de Dados, Aplicativos e Middleware

3.1 Configuração do Banco de Dados

3.2 Configuração dos Aplicativos Instalados

3.3 Configuração de Middleware

3.4 Configuração de Permissões CORS

4. Acessando o BD e Criando Models

4.1 Definindo o Modelo

4.2 Aplicando Migrações

5. Criando um Super usuário

5.1 Registrando o Modelo no Django Admin

5.2 Criando o Super usuário

5.3 Executando o Servidor de Desenvolvimento

5.4 Acessando o Painel Administrativo

6. Criando um Serializer

6.1 Criando o Arquivo serializers.py

6.2 Definindo o Serializer para o Modelo User

6.3 Utilizando o Serializer

7. Criando uma View

7.1 Definindo a View no Arquivo views.py

7.2 Configurando as URLs no Projeto

7.3 Definindo as URLs no App api_rest

7.4 Rodando o Servidor

MySql

Introdução

Usando CMD(Windows)

Usando o Docker Desktop

Usando o MySQL Workbench

React

Introdução

O que é React?

Conceitos Fundamentais

Componentes

JSX

Props e State

Hooks

Preparação de Ambiente

Exemplo

Criando nosso primeiro React App

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally

6.1 Criando o Arquivo `serializers.py`

6.2 Definindo o Serializer para o Modelo `User`

7.1 Definindo a View no Arquivo `views.py`

7.3 Definindo as URLs no App `api_rest`