🧩 Semana 3 – Ambiente e “Hello, Flet!” (Windows + VS Code)

🪟 Tópico 1 – Preparando o Windows para desenvolvimento

Antes de instalar o Python e o VS Code, faça alguns ajustes que evitam dores de cabeça:

  • Atualize o Windows (Windows Update) e reinicie se necessário.
  • Mostre extensões de arquivo no Explorador (Exibir → Extensões de nomes de arquivo).
  • Escolha uma pasta simples para seus projetos, sem espaços: C:\Projetos.
  • PowerShell com scripts habilitados (para ativar venv):
    PowerShell (como usuário):
    Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
    Get-ExecutionPolicy   # deve mostrar RemoteSigned
    Se não quiser alterar a política, use o Prompt de Comando (CMD) para ativar o venv.
🐍 Tópico 2 – Instalando e verificando o Python (3.11+)

Instale o Python 3.11+ (ou mais recente) e garanta o pip e o Python Launcher (py):

  1. Baixe do python.org e marque Add python.exe to PATH durante a instalação; ou use:
    winget install -e --id Python.Python.3
  2. Verifique a instalação:
    py --version
    python --version
    pip --version
    Se pip não aparecer, tente py -m ensurepip --upgrade e py -m pip --version.
Use o py para garantir a versão correta do Python no Windows: py -3.11 -m venv .venv.
🧰 Tópico 3 – Instalando o VS Code + extensões essenciais
  1. Instale o VS Code:
    winget install -e --id Microsoft.VisualStudioCode
  2. Abra o VS Code e instale as extensões:
    • Python (ms-python.python)
    • Pylance (ms-python.vscode-pylance)
    • Black Formatter (ms-python.black-formatter) – opcional, mas recomendado
  3. Abra a Pallet (Ctrl+Shift+P) → Python: Select Interpreter → escolha o Python 3.x (depois apontaremos para o venv do projeto).
📁 Tópico 4 – Criando o projeto e o ambiente virtual (venv)
  1. Crie a pasta do projeto:
    mkdir C:\Projetos\desktop-flet
    cd C:\Projetos\desktop-flet
  2. Abra essa pasta no VS Code (Arquivo → Abrir pasta...).
  3. Crie o ambiente virtual:
    # PowerShell
    py -m venv .venv
    # Ativar (PowerShell):
    . .\.venv\Scripts\Activate.ps1
    # ou (CMD):
    .venv\Scripts\activate
    # Atualizar pip:
    python -m pip install --upgrade pip
  4. Selecione o interpretador do projeto: Ctrl+Shift+P → Python: Select Interpreter → escolha o que aponta para .venv.
Ao ativar o venv, o prompt mostra (.venv). Tudo que instalar com pip ficará isolado nesta pasta.
📦 Tópico 5 – Instalando o Flet com pip
(.venv) C:\Projetos\desktop-flet> pip install flet
# (opcional) salvar dependências
(.venv) > pip freeze > requirements.txt

Se ocorrer erro de permissão/SSL, veja o Tópico 9 – Problemas comuns.

👋 Tópico 6 – “Hello, Flet!” (primeiro app)
  1. Crie o arquivo main.py na raiz do projeto e cole:
    import flet as ft
    
    def main(page: ft.Page):
        page.title = "Hello, Flet!"
        page.window_width, page.window_height = 800, 500
    
        titulo = ft.Text("Clique no botão para alterar o texto")
        contador = ft.Text("Cliques: 0")
        clicks = 0
    
        def on_click(e):
            nonlocal clicks
            clicks += 1
            titulo.value = "Olá, Flet! 🎉"
            contador.value = f"Cliques: {clicks}"
            page.update()
    
        page.add(
            ft.Column(
                [
                    titulo,
                    ft.ElevatedButton("Clique aqui", on_click=on_click),
                    contador,
                ],
                alignment=ft.MainAxisAlignment.CENTER,
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                expand=True,
            )
        )
    
    if __name__ == "__main__":
        ft.app(target=main)
  2. Execute no terminal integrado do VS Code:
    (.venv) C:\Projetos\desktop-flet> python main.py
Se tudo deu certo, abrirá uma janela nativa com o texto e o botão. Clique e veja a UI se atualizar!

Conceitos usados: Page, Controls (Text, ElevatedButton, Column), eventos e page.update().

🏗️ Tópico 7 – Estrutura de pastas recomendada
desktop-flet/
  .venv/                # ambiente virtual (não commitar)
  app/
    ui/                 # telas e componentes
    services/           # regras de negócio
    data/               # persistência (repos, conexões)
    assets/             # imagens, ícones, etc.
  main.py               # ponto de entrada
  requirements.txt
  .gitignore
  README.md

Esta separação prepara o terreno para as próximas semanas (menus, rotas, persistência e projeto final).

.gitignore sugerido:
.venv/
__pycache__/
*.pyc
*.pyo
*.pyd
.env
.vscode/
build/
dist/
*.spec
🐞 Tópico 8 – Executando e depurando no VS Code (launch.json)

Crie uma configuração de depuração para rodar com F5:

  1. Abra a aba Executar e Depurar (Ctrl+Shift+D) → Criar um arquivo launch.json → Python.
  2. Substitua por:
    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Python: main.py (venv)",
          "type": "python",
          "request": "launch",
          "program": "${workspaceFolder}\\main.py",
          "console": "integratedTerminal",
          "justMyCode": true
        }
      ]
    }
  3. Defina o interpretador do projeto para o .venv (Ctrl+Shift+P → Python: Select Interpreter). Agora, F5 executa seu app.
Use breakpoints (F9) para pausar o código e inspecionar variáveis durante o clique do botão.
🧯 Tópico 9 – Problemas comuns no Windows (e soluções)
  • “python não é reconhecido”: abra um novo terminal; use py em vez de python; reinstale marcando “Add python.exe to PATH”.
  • “pip não é reconhecido”: use py -m pip install <pacote>; verifique py -m ensurepip --upgrade.
  • Erro ao ativar venv no PowerShell: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned e reabra o terminal.
  • “No module named flet”: ative o venv; confirme com where python e pip show flet; instale no venv certo.
  • Permissões (WinError 5): evite instalar em C:\Program Files; use pastas do usuário.
  • Caminho com espaços/acentos: prefira nomes simples (ex.: C:\Projetos).
  • Janela não abre: veja mensagens no terminal; garanta que não há bloqueios do antivírus.
✅ Tópico 10 – Boas práticas, Git e requirements.txt
  1. Crie o repositório e primeiro commit:
    git init
    git add .
    git commit -m "Semana 3: projeto Flet inicial"
  2. Salve dependências e reproduza o ambiente:
    pip freeze > requirements.txt
    # Em outra máquina:
    py -m venv .venv
    . .\.venv\Scripts\Activate.ps1
    pip install -r requirements.txt
  3. Documente no README.md como rodar o projeto (comandos e capturas).
🧩 Tópico 11 – Extensões úteis e formatação automática
  • Python + Pylance (tipos/auto-complete).
  • Black Formatter: formatação consistente (PEP 8).
    // .vscode/settings.json
    {
      "python.defaultInterpreterPath": ".venv\\Scripts\\python.exe",
      "python.analysis.typeCheckingMode": "basic",
      "editor.formatOnSave": true,
      "python.formatting.provider": "black"
    }
  • isort (opcional): organiza imports.
⏩ Tópico 12 – Atalhos de produtividade no VS Code
  • Terminal integrado: Ctrl+`
  • Executar/Depurar: F5
  • Ponto de parada: F9
  • Paleta de Comandos: Ctrl+Shift+P
  • Formatar documento: Shift+Alt+F (ou salvar com Black)
  • Múltiplos cursores: Alt+clique
🛠️ Prática Guiada – Semana 3
  1. Crie C:\Projetos\desktop-flet, inicie o venv e instale flet.
  2. Implemente o “Hello, Flet!” do Tópico 6 e rode com python main.py.
  3. Adapte: adicione um TextField para o nome e um botão “Saudar”. Ao clicar, exiba “Olá, <nome>!” no centro da tela.
  4. Crie um contador de cliques separado, com IconButton (ícone de +) e um Text mostrando o total.
  5. Organize em uma Column centralizada; ajuste window_width e window_height.
  6. Gere requirements.txt e um README.md com passos de execução.
Tire prints do app funcionando (saudação + contador) e anexe na entrega.
📝 Tarefas / Entrega – Semana 3
  • Envie um PDF chamado Desktop_Semana03_NomeSobrenome.pdf contendo:
    • Print do terminal com venv ativo + pip show flet.
    • Print do app rodando: saudação por nome + contador de cliques.
    • Trecho do requirements.txt (contendo flet).
    • Resumo (5–8 linhas): como você configurou o ambiente e o que aprendeu.
  • Prazo: domingo 23:59.
📏 Rubrica (0–10)
Critério Descrição Pontos
Ambiente venv ativo, Flet instalado e documentado 0–2,0
Hello, Flet! App abre janela nativa sem erros 0–2,0
Interação Saudação com TextField + botão 0–2,5
Contador IconButton incrementando valor na tela 0–2,0
Documentação requirements.txt + resumo claro 0–1,5
Total 10,0
Trabalhos com prints incoerentes ou sem evidências do venv serão devolvidos para correção.