Scribd
Carregar
15 visualizações4 páginas

Aula de Python

O documento apresenta uma estrutura de projeto para um sistema contábil web utilizando React no front-end, Flask no back-end e SQLite ou PostgreSQL como banco de dados. Além disso, inclui um plano de aula detalhado para ensinar essa estrutura a estudantes iniciantes em programação web, abordando desde a arquitetura web até a integração do sistema. As aulas incluem teoria e prática, com objetivos claros e exemplos de código para facilitar o aprendizado.

Enviado por

Ronaldo de Castro
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
15 visualizações4 páginas

Aula de Python

O documento apresenta uma estrutura de projeto para um sistema contábil web utilizando React no front-end, Flask no back-end e SQLite ou PostgreSQL como banco de dados. Além disso, inclui um plano de aula detalhado para ensinar essa estrutura a estudantes iniciantes em programação web, abordando desde a arquitetura web até a integração do sistema. As aulas incluem teoria e prática, com objetivos claros e exemplos de código para facilitar o aprendizado.

Enviado por

Ronaldo de Castro
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

Perfeito, Ronaldo!

Vou te passar:

1. Uma estrutura de projeto para sistema web contábil


simples, com front-end, back-end e banco de dados.
2. Um plano de aula completo com parte teórica e prática,
voltado para ensinar essa estrutura (ideal para um curso
introdutório em desenvolvimento web com foco em sistema
contábil).

1. Estrutura de Projeto – Sistema Contábil Web


Tecnologias usadas:

 Front-end: React
 Back-end: Python (Flask)
 Banco de dados: SQLite (ou PostgreSQL)

Estrutura de Pastas
sistema_contabil/
│
├── backend/
│ ├── app.py # Ponto de entrada Flask
│ ├── models/ # Modelos de dados (ORM)
│ │ └── conta.py
│ ├── routes/ # Rotas/API
│ │ └── contas.py
│ ├── controllers/ # Lógica de negócios
│ │ └── contas_controller.py
│ └── database.py # Configuração do banco de dados
│
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── components/
│ │ │ └── TabelaContas.jsx
│ │ ├── pages/
│ │ │ └── Home.jsx
│ │ └── App.jsx
│ └── package.json
│
├── README.md
└── requirements.txt

2. Plano de Aula: Desenvolvimento Web – Sistema


Contábil
Público-alvo:

Estudantes iniciantes em programação web com interesse em contabilidade.


Aula 1 – Introdução à Arquitetura Web

Objetivos:

 Entender como funciona um sistema web (cliente-servidor).


 Conhecer os papéis do front-end, back-end e banco de dados.

Teoria:

 O que é front-end? (HTML, CSS, JS)


 O que é back-end? (API, lógica, segurança)
 Banco de dados relacional.

Prática:

 Apresentar a estrutura do projeto no VS Code.


 Instalar dependências com pip (Flask) e npm (React).

Aula 2 – Criando o Back-End com Flask

Objetivos:

 Criar uma API básica com Flask.


 Conectar com banco de dados SQLite.

Teoria:

 O que é uma API REST?


 Métodos HTTP (GET, POST, PUT, DELETE)

Prática:

 Criar rota /contas para listar contas.


 Criar modelo Conta com campos: id, descricao, valor, tipo.

# Exemplo simples
@app.route('/contas', methods=['GET'])
def listar_contas():
return jsonify([{"id": 1, "descricao": "Aluguel", "valor": 1500,
"tipo": "Despesa"}])

Aula 3 – Criando o Front-End com React

Objetivos:
 Criar uma tela que consome a API com React.
 Exibir dados em tabela.

Teoria:

 Componentes React
 Requisições com fetch ou axios

Prática:

 Criar TabelaContas.jsx
 Conectar com back-end

useEffect(() => {
fetch('http://localhost:5000/contas')
.then(res => res.json())
.then(data => setContas(data));
}, []);

Aula 4 – Integração Total e Cadastro de Contas

Objetivos:

 Integrar front e back.


 Criar formulário de cadastro de conta.

Teoria:

 Estado em React (useState)


 Requisições POST

Prática:

 Criar formulário React


 Criar rota POST /contas no Flask
 Salvar dados no SQLite

Aula 5 – Encerramento e Apresentação do Projeto

Objetivos:

 Refatorar código
 Criar relatório final ou vídeo demonstrando o sistema

Atividade final:

 Cada aluno ou grupo apresenta o sistema funcionando.


 Discutir melhorias e funcionalidades futuras (ex: login, gráficos,
relatórios PDF).

Se quiser, posso preparar os arquivos-base com códigos prontos e até um PDF com esse
plano de aula formatado. Deseja isso também?

Você também pode gostar