Sprint 2 - Pesquisa - Front-end

[oCaioOliveira]

Descrição

Pesquisar tecnologias relacionadas ao Front-end (React e Django) e iniciar o desenvolvimento dessa área do projeto.

Tarefas

Realizar os seguintes passos:

• [x] Pesquisar sobre Django, se familiarizar e buscar formas de encaixar essa tecnologia com o projeto.
• [x] Pesquisar sobre React, se familiarizar e buscar formas de encaixar essa tecnologia com o projeto.
• [x] Após os requisitos acima serem concluídos, iniciar o desenvolvimento do projeto respeitando o modelo decidido pelo time.

Critérios de aceitação

• [x] Postagem de sites ou documentos com as melhores informações encontradas em cada tecnologia pesquisada.
• [x] Informar onde está sendo produzido o projeto e descrever como está sendo.

[guibrbs]

React

ReactJS é uma biblioteca do Javascript que permite a criação de interfaces para o usuário. É uma maneira simples no quesito de criação do frontend de aplicações, já que é baseado no uso de componentes, organizando e deixando o código mais leve. Possui várias facilidades quanto a ligação com o backend, seja em python, ou até mesmo com bancos de dados. Alinhado a proposta do projeto, o React pode ser usado para criar toda a interface, incluindo web com React ou mobile com React Native.

Iniciando

O comando onde tudo inicia no react é:

npx create-react-app nome-que-quiser (cria a aplicação React na pasta com o nome)
cd nome-que-quiser (entra na pasta)
npm start ou yarn start (executa o React no navegador)

Esse comando cria e executa o arquivo no navegador, onde vem uma página default já configurada pelo React e pronto para a edição do usuário.

Link útil

• Este link aborda um vídeo com os primeiros passos ao React (é um vídeo longo, porém bem completo): https://www.youtube.com/watch?v=4GB6oixcDEo

[MorettiGS]

React

O que é?

Mesmo confundido constantemente por um framework, o React é uma biblioteca gratuita e de código aberto do Javascript. Seu principal objetivo é compor uma biblioteca fácil, flexível e rápida de se utilizar, o que a tornou a principal ferramenta na construção do Front-end de diversos aplicativos famosos, como Whatsapp, Netflix ou Facebook. Normalmente, é utilizado para aplicações Web que possuem grande interação entre usuário e site, compondo uma ótima otimização das mesmas.

Como funciona?

• Componentes JSX

  • O React faz uso de componentes JSX, sendo esta uma extensão de sintaxe do Javascript. Com essa sintaxe, você poderá utilizar o código HTML dentro do seu arquivo Javascript para criar os componentes da sua aplicação, misturando arrays, tags HTML, funções e/ou CSS dentro de um mesmo arquivo. Também, um componente criado no React é reusável, ou seja, ele pode ser acessado, pela biblioteca, de outras aplicações ou outros arquivos da sua própria.

• Virtual DOM

  • Diferente do DOM utilizado pelo Javascript padrão, o React faz uso do que é chamado de Virtual DOM ( ou VDOM ). Dessa forma, a biblioteca tenta manter o DOM de sua aplicação Web sempre sincronizado com o arquivo de sua máquina, possibilitando uma rápida revisão de estado, quando necessário, e economizando tempo no desenvolvimento do seu projeto.

Como nos ajudaria?

Para a construção de uma página Web, como o nosso caso, o React poderia ajudar diretamente com os estados do nosso site, visto que precisaremos de uma rápida ferramenta para transportar os dados dos usuários para o visual do Front-end. Por outro lado, a biblioteca também é bem intuitiva, o que evitaria a confusão e o tempo excessivo para aprender a utilizá-la.

Links Úteis e Fontes

Para melhor aprofundamento, seguem alguns links úteis, incluindo a documentação do React, e as fontes utilizadas na pesquisa:

• Documentação - React
• O que é React e como funciona?
• Quando Utilizar React?
• Componentes React
• Componentes e Props
• Comparação - React vs Vue vs Angular
• Crie um novo aplicativo React

[LeticiaAires]

Django

O que é?

Django é um framework full-stack de código aberto baseado em Python e voltado para aplicações web. O principal objetivo da ferramenta é viabilizar a construção rápida e de fácil manutenção de sites seguros, por meio da resolução de problemas como: autenticação, roteamento, object relational mapper (ORM), migrations e tratamento de protocolo HTTP.

Como funciona?

O Django trabalha segundo o modelo Model-View-Template (MVT):

• Model: Estrutura com ligação direta ao banco de dados que permite a manipulação de dados por meio de uma API.
• View: Estrutura responsável pela lógica entre dados de modo a receber requisição e retornar respostas.
• Template: Estrutura onde ocorre a interação do usuário final com o site em Django, permitindo a visualização.

Como nos ajudaria?

A ferramenta otimizaria o tempo relativo ao desenvolvimento da aplicação web, tendo em vista seu repertório completo de soluções, sua versatilidade, sua segurança, sua sustentabilidade, sua escalabilidade e sua portabilidade que o fazem um framework perfeito para iniciantes.

Links Úteis:

• https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/First_steps
• https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/Django
• https://www.youtube.com/watch?v=9SUVYuPK2f4&ab_channel=CanalDevPro
• https://kenzie.com.br/blog/django/

[guibrbs]

Como fazer autocomplete com React - Vídeo que serve como base de como criar uma barra de pesquisa e inserir o autocomplete, que futuramente será necessário para o desenvolvimento do projeto.