Blog: front-end

Aplicação Completa de login e registro com Python Flask e MySQL

Image without description

A ideia aqui é também conter postagens sobre projetos e simples adicionados ao github.

Projeto para uma aplicação completa de login e registro com Python Flask e MySQL.

1.O que é mostrado Form Design — Crie um formulário de login e registro com HTML5 e CSS3. Modelos — Crie modelos do Flask com HTML e Python. Validação básica — Validação de dados de formulário que são enviados ao servidor (nome de usuário, senha e e-mail). Gerenciamento de sessão — Inicialize sessões e armazene os resultados do banco de dados recuperados. Consultas MySQL — Selecione e insira registros de/na nossa tabela de banco de dados. Rotas — O roteamento nos permitirá associar as URLs às funções que criaremos.

1.1. Requisitos Python => 3.7.2. Certifique-se de marcar a opção Add Python to PATH na tela de configuração da instalação. Pode baixar e instalar o MySQL Community Server e o MySQL Workbench. Abra a linha de comando e instale o Python Flask com o comando: pip install flask Instale o Flask-MySQLdb com o comando: pip install flask-mysqldb

1.2. Estrutura e configuração de arquivos Precisamos criar nosso diretório e arquivos do projeto. Você pode criar o diretório em qualquer lugar do seu computador, desde que o Python possa acessá-lo. Crie os diretórios e arquivos abaixo.

File Structure

\-- sample-app-login-python-flask
    |-- main.py
    \-- static
        |-- style.css
    \-- templates
        |-- index.html
        |-- register.html
        |-- home.html
        |-- profile.html
        |-- layout.html

main.py — Este será nosso arquivo de projeto principal, todo nosso código Python estará neste arquivo (Rotas, conexão MySQL, validação, ...). index.html — O modelo de formulário de login criado com HTML5 e CSS3. register.html — O modelo de formulário de registro criado com HTML5 e CSS3. home.html — O modelo inicial restrito a usuários logados. profile.html — O modelo de perfil restrito a usuários logados. Os detalhes do usuário serão preenchidos nesta página. layout.html — O modelo de layout para os modelos de página inicial e de perfil. style.css — A folha de estilo CSS3 para nosso sistema de login e registro.

1.3. Abra o prompt de comando e navegue até o diretório do seu projeto. Você pode fazer isso com o comando cd c:\pasta_projeto. Pessoalmente sigo um padrão: C:\projetos-NOMEDATECNOLOGIA

Para executar eu crio um ambiente python3 -m venv .venv

Instale o Flask no ambiente virtual inserindo: python3 -m pip install flask.

Run command: set FLASK_APP=main.py
Run command: set FLASK_DEBUG=1
Run command: python3 -m flask run

O modo de depuração nos permitirá editar nossos arquivos sem reiniciar constantemente o servidor web.

Me segue no blog e nas redes sociais (edersonmelo) - Blog pessoal. (edersonmelo) - Aplicação Completa de login e registro com Python Flask e MySQL. [(GitHub) https://github.com/edersonmelo (Twitter) @edersonmelo (Instagram) @edersonmmelo

Redux vs Context API

Image without description

Caso na postagem sobre Redux você tenha entendido que puramente com o React passar dados para as props dos filhos dos filhos requer um pouco mais, você entendeu tudo.

Mas outra forma de resolver o problema, além de Redux, seria o gerenciamento de estado como Context API. O difícil é saber qual o mais adequado para sua aplicação.

A Context API, em um aplicativo React típico, os dados são passados ​​de cima para baixo (pai para filho) por meio de props, mas esse uso pode ser complicado para certos tipos de props (por exemplo, preferência de localidade, tema de interface do usuário) que são exigidos por muitos componentes dentro de um aplicativo. O contexto fornece uma maneira de compartilhar valores como esses entre componentes sem ter que passar explicitamente um prop por todos os níveis da árvore.

A Context API é uma ferramenta React integrada que não influencia o tamanho final do pacote e é integrada por design.

Para usar a Context API, você precisa:

Crie o contexto const Context = createContext(MockData);

Criar um provedor para o contexto

const Parent = () => {
    return (
        <Context.Provider value={initialValue}>
            <Children/>
        </Context.Provider>
    )
}

Consumir os dados no Contexto

const Child = () => {
    const contextData = useContext(Context);
    // use the data
    // ...
}

Já o Redux é um contêiner de estado previsível para aplicativos JavaScript. Ajudando na escrita de aplicativos que se comportam de forma consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar.

Redux é uma biblioteca de código aberto que fornece um armazenamento central e ações para modificar o armazenamento. Ele pode ser usado com qualquer projeto usando JavaScript ou TypeScript.

Para usar o Redux você precisa:

Create a Reducer

import { createSlice } from "@**Redux**js/toolkit";

export const slice = createSlice({
    name: "slice-name",
    initialState: {
        // ...
    },
    reducers: {
        func01: (state) => {
            // ...
        },
    }
});

export const { func01 } = slice.actions;
export default slice.reducer;

Configure the Store

import { configureStore } from "@**Redux**js/toolkit";
import reducer from "./reducer";

export default configureStore({
    reducer: {
        reducer: reducer
    }
});

Make the Store available for data consumption

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-**Redux**';
import App from './App.jsx'
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Use State or Dispatch Actions

import { useSelector, useDispatch } from 'react-**Redux**';
import { func01 } from './**Redux**/reducer';

const Component = () => {
    const reducerState = useSelector((state) => state.reducer);
    const dispatch = useDispatch();
    const doSomething = () = > dispatch(func01)  
    return (
        <>
            {/* ... */}
        </>
    );
}
export default Component;

Então, como resultado comparativo final, posso levantar alguns pontos, inclusive alguns coletei na web para ter mais insumos. Se a ideia é apenas passar dados de pai para filho, o uso da Context API te atende. Mas se a ideia é trabalhar com muitos dados dinâmicos, o Redux seria a solução.

Redux

Image without description

Foi inevitável aprender Reactjs e não olhar para o Redux.

Redux é uma biblioteca que gerencia estados em uma aplicação. Tirando a responsabilidade de um componente ter um estado que poderá ser usado por vários outros componentes dentro da sua aplicação por um objeto global.

O Redux cria um objeto global contento todos os estados que precisam ser acessados por diversos componentes que não se ligam.

Image without description

Componentes do Redux

Store: Nesse objeto que você vai guardar todos os estados que serão usados globalmente na sua aplicação. Quando um component precisar ler um estado, ele vai consultar o store;

Actions são ações que serão enviadas do seu component para acionar os Reducers. Ele serve apenas para informar qual função deverá rodar e qual é o dado que ela vai usar como parâmetro;

MiddleWares vão fazer toda a lógica necessária com o dado que será alterado no estado, dentro do Store.

Reducers Após o MiddleWare tratar os dados, os Reducers despacham esses dados para o reducer informar ao Store que o state foi alterado, e os demais componentes que precisarem usar esse novo estado são notificados;

Estrutura dos arquivos do Redux com Reactjs podem ser encontrados na pasta chamada store, dentro dessa pasta ficam os States, Reducers, MiddleWares e Actions.

Image without description

A estrutura dos middlewares é composta por funções que retornam outras funções.

getState: É uma função que será responsável por acessa um estado global da store;
dispatch: vai mandar o novo estado já tratado para o reducer pelas actions;
createStore: Função responsável por criar a store em si, é essa função que deixando todos os estados globais;
combineReducers: Cria um objeto com todos os estados e faz a ligação com os reducers para que a store guarda-los;
applyMiddleware: Intercepta as actions antes de chegar ao reducer para fazer toda a lógica;

Outro ponto importante é importando um Provider da biblioteca react-redux. Permitindo que os componentes tenham acesso a store.

Se você ouviu falar em Redux, também ouviu falar em hooks, que são os manipuladores de estados no seu componente.

useDispatch: Usado nos componentes para acionar os middlewares.
useSelector: função para acessar os nossos objetos com todos os estados da nossa store.

Esse post é um rascunho de um trabalho feito para eCommerce, por isso você deve ter reparado em alguns detalhes incomuns.

React com TypeScript

Image without description

Todo Desenvolvedor/Programador geralmente é focado e especializado em uma linguagem. Venho de uma linha mais generalista e até estou lendo um livro sobre, nas redes sosciais postei sobre, onde continuo a saga de entender se seria melhor ser um especialista ou generalista. Enquanto isso, me divirto aprendendo e agregando conhecimento. React.js e toda gama de libs e frameworks que agragam valor a uma solução não esta fora disso.

Faz +12 anos, talvez um pouco mais, que desenvolvo com tecnologia front-end e pouco mais de 1 ano que desenvolvo com React.js e e toda gama de libs e frameworks. Então a ideia é comentar um pouco.

Este tópico dá inicio a u básico de React com TypeScript. A ideia é evoluir agregando e mostrando o conhecimento com o passar do tempo e disponibilidade, claro.

Preciso antes, pincelar de leve sobre Yarn, um gerenciador de pacotes de códigos. Tão eficiente quanto o NPM e o Bower, que muito usei, o Yarn ganhou muitos adeptos.

Alguns comandos básicos que você precisa ou vai acabar conhecendo.

Para instalar uma dependência do seu arquivo package.json basta executar:

yarn add [pacote]

yarn add [pacote]@[versão]

yarn add [pacote]@[tag]

Para atualizar uma dependência

yarn upgrade [pacote]

yarn upgrade [pacote]@[versão]

yarn upgrade [pacote]@[tag]

Para remover uma dependência

yarn remove [pacote]

Para instalar todas as dependências de um projeto

yarn install

De volta ao tópico deste post.

React é muito simples e abrange uma complexa linha de possibilidades. Pra mim é uma das melhores bibliotecas front-end da atualidade.

TypeScript é uma linguagem de programação estrita e estaticamente tipada, tornando nosso código JavaScript mais previsível.

Para criar qualquer aplicativo usando o template do typescript, basta executar a linha de comando:

yarn create react-app todo-app --template typescript

A estrutura do nosso aplicativo deve ficar assim.

Image without description

Para executar e abrir o aplicativo no navegador, basta usar yarn start. E você tem uma estrutura básica pronta e funcional para criar.

Quanto ao TypeScript, existem duas possibilidades de uso, Tipos e interfaces (typescriptlang.org/docs/handbook/advanced-types.html)

Interface

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

Alias ​​do tipo

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

Image without description