Lab 2: Exercícios Práticos 🏋️‍♀️

# Verifique o ambiente docker compose ps # Teste os serviços curl http://localhost:3000 curl http://localhost:5000/health

# Entre no diretório frontend cd frontend # Crie novo projeto React npm create vite@latest . -- --template react-ts # Instale dependências npm install axios @mui/material @emotion/react @emotion/styled

// src/components/TaskList.tsx import { useState, useEffect } from 'react'; import axios from 'axios'; interface Task { id: number; title: string; completed: boolean; } export const TaskList = () => { const [tasks, setTasks] = useState<Task[]>([]); useEffect(() => { axios.get('http://localhost:5000/tasks') .then(response => setTasks(response.data)); }, []); return ( <div> {tasks.map(task => ( <div key={task.id}> <input type="checkbox" checked={task.completed} onChange={() => {/* TODO */}} /> {task.title} </div> ))} </div> ); };

# Entre no diretório backend cd backend # Crie o arquivo requirements.txt cat > requirements.txt << EOL flask==2.0.1 flask-sqlalchemy==2.5.1 psycopg2-binary==2.9.1 flask-cors==3.0.10 python-dotenv==0.19.0 EOL # Instale dependências pip install -r requirements.txt

# app.py from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy from flask_cors import CORS import os app = Flask(__name__) CORS(app) app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATABASE_URL') db = SQLAlchemy(app) class Task(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(100), nullable=False) completed = db.Column(db.Boolean, default=False) @app.route('/tasks', methods=['GET']) def get_tasks(): tasks = Task.query.all() return jsonify([{ 'id': task.id, 'title': task.title, 'completed': task.completed } for task in tasks]) @app.route('/tasks', methods=['POST']) def create_task(): data = request.get_json() task = Task(title=data['title']) db.session.add(task) db.session.commit() return jsonify({ 'id': task.id, 'title': task.title, 'completed': task.completed }), 201

-- database/init.sql CREATE TABLE IF NOT EXISTS task ( id SERIAL PRIMARY KEY, title VARCHAR(100) NOT NULL, completed BOOLEAN DEFAULT FALSE ); -- Dados iniciais INSERT INTO task (title) VALUES ('Aprender Docker'), ('Dominar Docker Compose'), ('Implementar CI/CD');

# Instale Alembic pip install alembic # Inicialize alembic init migrations # Crie primeira migration alembic revision -m "create_task_table"

# Instale dependências de teste npm install --save-dev vitest @testing-library/react # Crie teste npm test

# Instale pytest pip install pytest # Execute testes pytest tests/

# docker-compose.yml services: redis: image: redis:alpine ports: - "6379:6379"

# backend/logging_config.py import logging logging.basicConfig( level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s' )

# .github/workflows/ci.yml name: CI on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Build and test run: docker compose -f docker-compose.test.yml up --exit-code-from tests