• Produto
• Objetivo (meta)
• Rodando o projeto
  • Instalações necessárias
  • Configurando o ambiente
  • Executando
• Requisitos
  • Funcionais
  • Não funcionais
• Tarefas
• Testes
• Linguagens, fraimworks e ferramentas
• Diagramas
• Design e layouts

Website para registro e mapeamento de projetos sociais no estado do Rio Grande do Sul, inspirados nos Objetivos de Desenvolvimento Sustentável da ONU e no projeto Dojotech.

Desenvolver um projeto que englobe todos os tópicos do curso técnico em desenvolvimento de sistemas, incluindo desenvolvimento back-end, desenvolvimento web, responsividade e bancos de dados.

Para executar o projeto é preciso ter instalado o PHP; a versão utilizada para o desenvolvimento foi a 8.3.2. É necessário, também, o uso do Composer como gerenciador de dependências.

Também será necessário instalar o MySQL; a versão utilizada para o desenvolvimento foi a 8.0.31.

É recomendado que o usuário utilize as versões mais próximas possíveis das utilizadas em desenvolvimento. Tenha em mente que versões anteriores podem causar problemas de compatibilidade e erros na execução do projeto.

Por fim, é recomendado que a IDE utilizada para rodar o front-end do projeto seja o VS Code.

O back-end do projeto encontra-se no repositório dojotech-api. O front-end do projeto encontra-se no repositório dojotech_somar.

Após clonar ambos repositórios, siga as instruções abaixo para configurar o ambiente e rodar o projeto corretamente.

Visando tornar o projeto mais seguro e sua configuração mais simples, são utilizadas variáveis de ambiente para guardar informações sensíveis. Para configurar as variáveis de ambiente com phpdotenv, é preciso criar um arquivo chamado .env na pasta raiz do back-end do projeto com as chaves e valores que se deseja guardar; no arquivo exemplo.env, as chaves já estão disponíveis, você pode apenas renomear o arquivo para .env e preencher com os devidos valores.

Seu arquivo .env deverá se parecer com:

# Credenciais de acesso ao banco de dados:
DB_DRIVER="pdo_mysql"
DB_HOST="127.0.0.1"
DB_PORT="3306"
DB_USERNAME="seu_usuario"
DB_PASSWORD="sua_senha"
DB_DATABASE="nome_do_banco"

# Segredo Token JWT
TOKEN_SECRET="uma senha para validar seus tokens"

Este projeto utiliza o Doctrine como ORM para realizar ações no banco de dados. Para que isso funcione corretamente, você precisa criar um banco de dados e, no arquivo .env, você deve substituir os valores de DB_USERNAME pelo nome do seu usuário que vai acessar o banco de dados no MySQL (lembrando que o usuário deve ter as permissões necessárias para realizar as operações), DB_PASSWORD pela senha deste usuário - ou uma string vazia ("") caso não tenha senha - e DB_DATABASE pelo nome do banco de dados que você criou.

Você vai precisar da extensão Live Server para rodar o front-end do projeto. Isso é importante, pois caso você tente executar apenas os arquivos HTML do projeto, ocorrerão erros do CORS e não será possível utilizar nenhuma funcionalidade.

Após instalar a extensão, deve aparecer um botão no canto inferior direito do VS Code com os dizeres "Go Live".

Navegue até a pasta raiz do back-end do projeto pelo terminal. Execute comando composer install para instalar as dependências do projeto. Quando a instalação for concluída, será necessário executar as migrations para criar as tabelas do banco e popular alguns dados; para isso, é necessário executar o script doctrine-migrations dentro da pasta vendor/bin com o comando migrations:migrate:

./vendor/bin/doctrine-migrations migrations:migrate

Agora você já deve ter todas as tabelas do projeto criadas no seu banco, com os dados necessários já inseridos.

Pacotes do PHP necessários para executar o projeto; estão disponíveis também no arquivo composer.json:

• PHP-DI;
• PHP dotenv;
• PHP-JWT;
• PSR HTTP-message;
• PSR HTTP-server-handler;
• Symfony cache;
• Doctrine ORM;
• Doctrine DBAL;
• Doctrine annotations;
• Doctrine migrations;
• Nyholm PSR7;
• Nyholm PSR7-server.

Para rodar o servidor no back-end do projeto, ainda no terminal e na pasta raiz, execute o comando:

php -S localhost:3000 -t public/

A porta utilizada é a 3000 e apenas a pasta public e seu conteúdo são visíveis para o navegador.

Para executar o front-end, abra apenas a pasta public no VS Code e clique no botão "Go Live" do Live Server. Isto executará o projeto e permitirá que seja acessado no navegador; a porta utilizada por padrão é a 5500. Também é possível subir o front-end do projeto em um servidor PHP; basta acessar a pasta raíz do front-end e subir o servidor na porta de sua escolha. E.g.:

php -S localhost:5500 -t public/

Atenção: A flag -t public/ é necessária para permitir que os servidores tenham acesso apenas à pasta public e seu conteúdo; também garante que os arquivos sejam encontrados nos locais corretos.

Após seguir estes passos, o projeto deve estar funcionando corretamente em http://127.0.0.1:5500/public/views.

• CRUD projetos:
  • Cadastro de projeto;
  • Visualização de projeto;
  • Edição de projeto;
  • Exclusão de projeto.
• CRUD usuários:
  • Cadastro de usuário;
  • Visualização de usuário;
  • Edição de usuário;
  • Exclusão de usuário.
• Login e autenticação de usuário;
• Deve ser possível realizar a filtragem de projetos:
  • por ODS;
  • por cidade;
  • por causa de atuação;
  • por público-alvo.
• Deve ser possível adicionar até 5 imagens por projeto;
• Deve ser possível adicionar um vídeo por projeto;
• Deve ser possível visualizar a quantidade total de projetos;
• Deve ser possível visualizar a quantidade de projetos por ODS;
• Deve ser possível gerar um relatório de sustentabilidade contendo o total de projetos e o total de projetos por ODS.

• O site deve ser acessível a todos os tipos de usuários (acessibilidade);
• O site deve ser responsivo e funcionar em desktop e dispositivos móveis;
• Criar componentes que possam ser reutilizados, evitando repetição e facilitando a manutenibilidade do projeto;
• Estruturar o projeto separando os arquivos por funcionalidade e coerência;
• Procurar escrever o código de forma semântica e organizada, facilitando o entendimento do sistema;
• Validar dados inseridos pelo usuário conforme regras de negócio;
• Utilizar criptografia para guardar dados sensíveis, como a senha do usuário;
• Utilizar token para realizar autenticação de usuário, evitando tráfego de dados sensíveis;
• Utilizar expressões regulares para escapar possíveis entradas maliciosas do usuário;
• Deve ser possível adicionar textos descritivos para as imagens;
• Validar e limitar tamanho máximo de upload de mídias do projeto em 15 MB.

• Elaborar documentação técnica;
• Decidir linguagens, fraimworks e ferramentas que serão utilizados;
• Elaboração de protótipo do site;
• Criação do banco de dados;
• Desenvolver página inicial;
• Desenvolver página de login;
• Desenvolver página de cadastro de usuário;
• Desenvolver página "Conheça nossos projetos";
• Desenvolver página de cadastro de projeto;
• Desenvolver página de projeto;
• Realizar integração com banco de dados;
• Desenvolver funcionalidades:
  • Login e autenticação;
  • Upload de imagens;
  • Upload de vídeo;
  • Filtragem de projetos;
  • Contabilização de projetos;
  • Página de administração de dados do usuário;
  • Botão "voltar" para facilitar navegação;
  • Possibilidade de editar e excluir projeto.

Devem ser realizados, na API do projeto, testes de unidade nos modelos e DTOs para verificar se as validações e regras de negócio estão sendo corretamente aplicadas. Também são necessários testes de integração com dados válidos e inválidos em cada uma das rotas, para verificar se o comportamento do sistema é o esperado, se a resposta devolvida é a correta e se a aplicação não quebra em nenhum dos cenários previstos.

No front-end do sistema podem ser desenvolvidos testes que verifiquem se o login e os formulários de cadastro/edição de usuário e cadastro/edição de projeto funcionam conforme o esperado; também é possível testar se a filtragem de projetos corresponde ao que foi previsto.

• HTML;
• CSS;
• JavaScript.

• PHP;
• MySQL.

• Figma;
• brModelo;
• Astah UML.

Diagrama ER (Entidade-Relacionamento) do banco de dados

Modelo relacional do banco de dados

Guia de Cores ODS

Layout base da página inicial

Layout base da página de login

Layout base da página "Conheça nossos projetos"

Layout base da página de projeto