Coronavírus Dashboard

Exibição dos Dados de Óbitos e Casos de Covid-19 nos países Brazil, Canada e Australia.

SOBRE | TECNOLOGIAS | DEPENDÊNCIAS | INICIALIZAÇÃO | BANCO DE DADOS | SCREENSHOTS | VÍDEO | MELHORIAS | CONTATO

📜 Sobre

Coronavirus Dashboard é um sistema que permite o usuário obter informações sobre os casos de mortes e confirmados que foram afetados pela Covid-19.
Ele fornece dados sobre o número de casos confirmados e mortes em três países específicos.

Deploy: https://coronavirus-dashboard.000webhostapp.com/
Inspiração: Front-end inspirado no site Coronavírus Brasil

🛠️ Tecnologias

• XAMPP
• PHP
• MySQL
• JavaScript
• CSS
• HTML
• Chart.js

📦 Dependências

• XAMPP Control Panel v3.3.0: Utilizado para criar um ambiente de desenvolvimento local.
• PHP v8.2.12: Linguagem utilizada no backend.
• MySQL: Banco de Dados para guardar os horários e datas de acesso.
• JavaScript, CSS3, HTML5: Construção da interface para o usuário.
• Chart.js 4.4.2: Biblioteca JavaScript para criação de gráficos e visualizações de dados.

Instalação

Composer

composer install

Chart.js

npm install chart.js

⚙️ Como Inicializar e Configurar

Para rodar o projeto localmente, é necessário ter os seguintes programas instalados:

• PHP
• XAMPP
• Composer

Caso não os tenha, recomendo seguir a ordem dos tutoriais:

• Como instalar XAMPP: LINK

• Como instalar PHP e Composer: LINK

OBS: No tutorial de instalação do Composer, é importante utilizar o caminho do arquivo correto.
Assim como está descrito: C:\xampp\php\php.exe*

Dependências Instaladas? Vamos rodar:

• Abra o XAMPP e clique no botão start dos serviços Apache e MySQL

• Com os serviços rodando, abra o diretório local C:\xampp\htdocs e clone o projeto:

$ git clone https://github.com/kellymoreira/Coronavirus-Dashboard.git

Importante
Tenha certeza de abrir o arquivo coronavirus-dashboard na localização: C:\xampp\htdocs\coronavirus-dashboard

Com tudo funcionando, digite no navegador:
http://localhost/coronavirus-dashboard/

🗃️ Banco de Dados

phpMyAdmin foi utilizado para administrar os dados de acesso aos logs:

• Data e horário do último acesso (dd/mm/aaaa - hh:mm:ss)
• Qual país foi consultado (Brazil, Australia ou Canada)

Configurando:

Crie um arquivo .env com as informações específicas do Banco de Dados criado

DB_HOST=host
DB_NAME=database
DB_USER=user
DB_PASSWORD=password

SQL preview

CREATE TABLE `covid_19`.`access_records` (
`id` INT NULL AUTO_INCREMENT , 
`access_date_time` DATETIME NOT NULL , 
`country` VARCHAR(50) NOT NULL , 
PRIMARY KEY (`id`)) ENGINE = InnoDB;

Para a conexão funcionar corretamente, vale ressaltar a importância de possuir uma senha configurada.
Quando acessado o Banco de Dados de início, não há uma senha pré-configurada. Caso não possuir, assista esse vídeo para configurar uma: LINK

📸 Screenshots

🎥 Vídeo Preview

video-preview.mp4

💡 Melhorias em mente

• Interface: Separar 'Países Disponíveis' e 'Dados do País' em duas colunas.
• Apariçãos dos Dados: Ao invés do padrão ser 'Brazil', mostrar primeiro que o usuário deve escolher um país, e então mostrar os dados.
• Barra de Navegação: Adicionar uma barra de navegação no canto superior direito.
• Responsividade: Organizar de maneira mais precisa como o site é visualizado por diferentes dispositivos

☎️ Contato