Aula 3 (05 08 2020): Front e Back End Web

Videos Youtube

Trilha OmniStack

Wikis

GitHub Pages

Web
Mobile

CADASTRO

EXPO

O Expo é uma ferramenta utilizada no desenvolvimento mobile com React Native que permite o fácil acesso às API’s nativas do dispositivo sem precisar instalar qualquer dependência ou alterar código nativo. Apesar de cumprir esse papel muito bem, o Expo possui algumas desvantagens, principalmente para programadores que estão migrando de um estágio iniciante para intermediário com React Native e por isso vamos analisar todas vantagens do Expo e pontos negativos nesse post.

Quando iniciamos no desenvolvimento mobile percebemos que o número de API’s e recursos nativos que podemos controlar através da nossa aplicação é gigante, e muitas vezes não nos recordamos de todas opções que temos disponíveis. O Expo, por sua vez, oferece grande parte desses recursos de forma nativa e integrada e, por exemplo, você tem acesso à recursos como câmera, microfone, player de música, entre outros, de forma muito simples utilizando essa ferramenta.

Apesar de todos esses benefícios, o grande ponto do Expo para quem está iniciando é que para começar a desenvolver suas aplicações mobile com React Native você não precisará instalar a SDK do Android ou o XCode para Mac, isso porque o Expo possui um aplicativo móvel instalável pelas lojas do Android/iOS que contém todo código nativo necessário pelo React Native para iniciar sua aplicação e, dessa forma, a única alteração em código que você faz é em Javascript.

O ponto destacado acima, na minha opinião, tem dois lados. A vantagem é que nesse formato o desenvolvedor inicia muito rápido e em poucos minutos está criando sua aplicação, toda parte complicada foi abstraída. A desvantagem está em exatamente pular essas etapas pois desconhecendo todo processo de instalação da SDK do Android ou XCode para iOS vai te limitar MUITO futuramente para lidar com processos de atualização e build das aplicações. Utilizar o Expo quando:

Você está testando o React Native e quer entender como ele funciona;
Você não tem interesse em publicar e manter aplicações mobile complexas (apenas criar apps simples).

Para instalar o Expo é bem simples e o passo é o mesmo nos 3 sistemas operacionais. Com o Node e Yarn instalados, abra o terminal (no Windows, sem ser como admin) e execute:

> yarn global add expo-cli

Caso você prefira utilizar o npm, basta executar:

> npm install expo-cli --global

Para verificar se a instalação ocorreu com sucesso, execute:

> expo –version

As seguintes bibliotecas foram utilizadas na aplicação:

Express.js: Express é o framework utilizado para construir a aplicação, desde infraestrutura básica como gerenciamento de rotas, até cabeçalhos e middlewares.
Cors.js: Este é um middleware para express que abstrai as configurações de Cross-Origin Resource Sharing, fazendo com que em vez de mexer diretamente nos cabeçalos das requisições, você possa passar os endereços dos clientes autorizados e deixar o middleware fazer seu trabalho.
Knex: Um construtor de queries SQL para Node.js, o Knex é utilizado para criar e gerenciar o nosso banco de dados relacional.
SQLite: Uma forma simples e fácil de criar uma base de dados na aplicação, o SQLite permite criar um banco SQL dentro de um pequeno arquivo binário, e gerenciá-lo localmente. Perfeito para aplicações pequenas e/ou de teste, como esta.

Estruturando página de cadastro

Voltamos ao projeto Front-End, na página Formulário de Cadastro da classe que ficou faltando da aula 1. Como já foi mencionado, é possível criar uma propriedade nula no componente.

Para renderizar condicionalmente essa informações no componente PageHeader temos duas sintaxe possíveis:

Ternário:

{propriedade.description? <p>{propriedade.description}</p> : null

Javacript:

{propriedade.description && <p>{propriedade.description}</p> }

Crie na pasta componentes uma pasta input com os arquivos padrão index.tsx e styles.css. Para extender todos atributos de um componente padrão para o seu componente tem que aplicar herança (extends) da classe InutHTMLAttributes do React, como abaixo:

Estilizando página de cadastro

Depois recorte e cole a css do input que estava no css da página TeacheList no css desse componente.

Importando o componente e substituindo os input da página TeacherList.tsx:

Testando a herança do componente:

TextArea e Caixa de Seleção

Basicamente, esses dois componentes é o mesmo procedimento do Input, entãom podemos copiar toda a pasta e arquivos e renomeie para o correto. Para renomear múltiplas ocorrências você pode utilizar os atalhos:

Crtl + D: Para ir selecionando uma a uma as ocorrências de um texto selecionado.
Crtl + Shift + L: Para selecionar todas ocorrências de um texto selecionado.

O TextArea teve pequenas mudanças de estilo em relação ao componente Input.

A caixa de seleção poderia ser estilizada usando uma biblioteca externa como o React-Select (https://react-select.com/home):

Para criar os items da caixa de seleção siga o exemplo abaixo no arquivo index.tsx do componente Select

E na págima TeacherForm.tsx:

Porém no Inspect >> Console indica que houve erro:

Isso por que não colocamos o key, que deve ser único para o primeiro elemento da lista. Ajuda o React a identificar os elementos na hora de listar na tela. Foi incluído também um option default.

<select id={name} {...rest} >
    <option value="" disabled hidden >Selecione um opção</option>
    {options.map(option => {
        return <option key={option.id} value={option.id}>{option.value}</option>
    })}
</select>

CONCEITO DE ESTADOS

Preparando cadastro de horários

Sempre que precisar manipular um ação dentro de um componente cria-se um estado para manipular o valor. Com o React, diferente do Javascript, estamos criando uma interface declarativa. Principios React no [site](https://reactjs.org/):

Declarativo: O React facilita a criação de UIs interativas. Crie visualizações simples para cada estado do aplicativo e o React atualizará e renderizará com eficiência os componentes certos quando os dados forem alterados. Exibições declarativas tornam seu código mais previsível e mais fácil de depurar.
Baseado em componentes: Crie componentes encapsulados que gerenciam seu próprio estado e os componha para criar UIs complexas. Como a lógica do componente é escrita em JavaScript, em vez de modelos, você pode passar facilmente dados ricos pelo aplicativo e manter o estado fora do DOM.
Aprenda uma vez, escreva em qualquer lugar: Não fazemos suposições sobre o restante da sua pilha de tecnologia, para que você possa desenvolver novos recursos no React sem reescrever o código existente. O React também pode renderizar no servidor usando o Nó e ativar aplicativos móveis usando o React Native.

No Javascript, para colocar elementos iterativos repetitivos, tinha que inserir HTML (Com algum InnerHTML) para obter o seguinte resultado:

No React, só precisamos iterar por um array. Porém, o React não fará isso automaticamente por padrão, mas pelo conceito de estados:

const scheduleItems = [
	{week_day: 0, from: "8:00 AM", to: "16:00 PM"},
    {week_day: 1, from: "10:00 AM", to: "6:00 PM"},
]

Repare que sempre que usarmos map na tela, tem que setar a propriedade key.

Sempre que adicionarmos novos itens, um problema de key no mapa acontece, pois o índice inicial 0 é repetitdo para cada elemento incluso.

Para resolver isso, setamos o key para o index, que é incremental a cada elemento criado:

Para ativar o estados no React, precisamos importar o módulo, e alterar o array para que aceite os estados, assim:

As variáveis depois que criadas pelo React pelo conceito de estado são imutáveis, por isso foi colocado este formato:

{ week_day: 0, from: '', to: ''}

A função setScheduleItems que o usa para copiar o array:

A sintaxe Javascript de propagação (Spread) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.
- Para chamadas de função: minhaFuncao(...objIteravel);
- Para array literais: [...objIteravel, 4, 5, 6]
- Desestruturação: [a, b, ...objIteravel] = [1, 2, 3, 4, 5];

Para recuperar o valor selecionado da caixa de seleção, precisamos atribuir o método Onchange:

A função utilizada ficará como a seguir:

Que tem o seguinte funcionamento:

const [scheduleItems, setScheduleItems] = useState([
	{ week_day: 0, from: '', to: ''},
]);

Na função setScheduleItemValue(position: number, field: string, value: string), se tiver os valores iniciais como setScheduleItemValue(0, "week_day", '2'), quando passar por scheduleItems.map((scheduleItem, index) terá como valores:

scheduleItem = { week_day: 0, from: '', to: ''},
index = 0

Irá fazer a comparação if (index === position) e, sendo 0 === 0, retorna um objeto array return {...scheduleItem, [field]: value }; O valor de field é "week_day" que vai sobreescrever o valor do campo weekday do objeto array. Testando na aplicação;

INTEGRANDO BACK E FRONT

Carregando total de conexões na Landing

Pelo terminal, navegue até a pasta do projeto server e digite:

yarn start

Às vezes, dá erro ao carregar e não reconhecer o cors e tem que reinstalar. Para confirmar que está funcionando vá ao Insomnia e teste em qualquer dos métodos criado anteriormente:

Precisamos instalar outra biblioteca que facilita o consumo de API externas pela aplicação. Quase todo projeto precisa fazer interface com uma API REST em algum estágio. Axios é um cliente HTTP leve baseado no serviço $ http em Angular.js v1.x e semelhante à API Fetch.

Axios é um cliente HTTP, que funciona tanto no browser quanto em node.js. A biblioteca é basicamente uma API que sabe interagir tanto com XMLHttpRequest quanto com a interface http do node. Isso significa que o mesmo código utilizado para fazer requisições ajax no browser também funciona no servidor. Além disso, as requisições feitas através da biblioteca retornam uma promise, compatível com a nova versão do JavaScript - ES6 e, portanto, podemos aproveitar as vantagens do assíncrono e aguardar por um código assíncrono mais legível. Também podemos interceptar e cancelar solicitações, e há proteção integrada do lado do cliente contra falsificação de solicitação entre sites.

yarn add axios

Criamos uma nova pasta services com um arquivo api.tx com o seguinte código:

Obrigatório colocar o URL de baseURL em maiúsculas e indicar a base do endereço. Vamos adicionar as informações primeiro na página Landing, vamos precisar novamente utilizar dos Estados. Para facilitar a inclusão das referências é possível teclar Crtl + . (ponto):

Se quiser que o useEffect atualizasse os valores a cada mudança e não apenas no carregamento da página, teríamos que criar uma variável inclui-la no “Array de Dependências”. Se a variável alterar indica a função quando deve ser executada. O useEffect utiliza o método GET para obter os dados, e se colocássemos um console.log na função poderíamos analisar o retorno:

Cadastro de novas aulas

Na página de TeacherForm.tsx vamos adicionar nossas variáveis de Estado e inicialixa-las:

Depois relacionamos com o campo e adicionamos o método Onchange:

A seguir, envolvemos todo o código do formulário com uma tag form e trocamos o tipo do botão para submit

Criamos o método handleCreateClass e para testa-lo emitimos um console.log com os dados da tela. O parâmetro e: FormEvent é necessário pois como a função está fora do HTML, precisamos dessa classe do React para especificar o tipo dos argumentos. O e.preventDefalt é colocado para interromper o POST de direcionamento da página que é o comportamento padrão do botão submit.

Ao clicar o botão deve voltar os dados:

Quando os dados estiverem retornando, podemos alterar a função para gravar a aula:

E verifique se está gravando com o Insomnia e o Request List Classes

Para redirecionarmos a página inicial depois de completar o cadastro, precisamos importar o módulo history:

import { useHistory } from 'react-router-dom';

Criamos uma constante e aplicamos no método.

const history = useHistory();

Listagem de professores

A parte de filtragem é feita da mesma forma que foi feito do POST do formulário, mas até agora os items listados nesta tela TescherList.tsx estão na forma HARD-CODE, ou seja, estático e precisamos trocar por variáveis.

Para isso precisamos primeiro alterar o componente TeacherItem criando a interface para passar os dados na tela. E também criamos outra interface para definir um objeto, já que as informações que iremos passar não são de tipo primitivo:

Lembra-se quando criamos uma interface e precisamos passar os dados, devemos chamar o React.FC é uma abreviação de React.FuncionalComponent, mesma coisa que foi feito no input. E substituímos os campos.

Por fim, alteramos a página TeacherList.tsx para ficar assim:

Ao realizar a filtragem:

Por fim, temos que ativar o botão de contato do Whatsapp que utilizará o procedimento “Como usar a conversa em um clique”

Com o recurso conversa em um clique, você pode iniciar uma conversa com alguém cujo número de telefone não está salvo na sua lista de contatos. Desde que você saiba o número de telefone dessa pessoa e que ela tenha uma conta do WhatsApp ativa, você poderá criar um link que permite iniciar uma conversa entre vocês. Ao clicar nesse link, a conversa com essa pessoa será criada automaticamente. A conversa em um clique funciona no seu celular e no WhatsApp Web. Criar seu link

Utilize [https://wa.me/<número>] e insira seu número de telefone em formato internacional completo no lugar de <número>. Não é necessário adicionar zero à frente do número, parênteses nem travessões ao inserir o número de telefone em formato internacional.

Exemplos: