Devops

Projeto-FrontEnd

FullStack [Itaguaçu] Módulo 1 - Projeto Avaliativo

INTRODUÇÃO

A LABPharmacy Inc, uma renomada empresa do ramo farmacêutico, está expandindo a sua rede de lojas. Por conta da expansão, o time de gestão necessita da criação de um sistema online, intitulado Pharmacy Central System, para gerenciamento de medicamentos e farmácias. O seu perfil chamou a atenção dos gestores para a criação do protótipo front-end do sistema que deverá ser codificado em React.

OBJETIVO

Criar um protótipo front-end do sistema Pharmacy Central System, utilizando React.

Minha solução da proposta

Sei que gerenciar um estabelecimento com alta escalabilidade pode ser um grande desafio. Foi por isso que desenvolvi uma aplicação que pode ser rapidamente reconfigurada para atender às necessidades específicas do seu negócio

Com a Yoruzinho, poderá gerenciar facilmente sua empresa, desde o controle de estoque até outros pontos de vendas, tudo em uma plataforma intuitiva e flexível, aqui o ceu e o limite!.

Com sua interface amigável, consegue controlar seu negócio com facilidade e precisão, economizando tempo e recursos valiosos, imagine economizar tempo e dinheiro ao gerenciar o seu negócio utilizando os dispositivos que você e seus colaboradores já possuem. Com a Yoruzinho, isso é possível!

Desenvolvi uma solução responsiva, adaptada para telas grandes e pequenas, que permite que você e sua equipe gerenciem o seu negócio de forma fácil e prática a partir de qualquer dispositivo com acesso à internet. Por isso, aquele celular esquecido na gaveta pode ser transformado em um ponto de gestão eficiente e ágil.

O melhor de tudo é que a Yoruzinho é altamente escalável, permitindo que adicione novos estabelecimentos e produtos sem qualquer dificuldade. Assim, poderá expandir seu negócio com confiança, sem se preocupar com a complexidade de gerenciar múltiplos pontos de venda.

Se você está procurando uma solução completa e integrada para a gestão do seu estabelecimento, experimente a Yoruzinho e descubra como ela pode transformar a gestão do seu negócio de forma simples e eficiente.

Nome do app

Yoruzinho Gestão

Yoruzinho é uma palavra composta , Yoru de "yoruga" que e uma gíria uruguaia e significa uruguaio, e zinho pelo diminutivo do português , em homenagem ao minha querida terra natal e ao Brasil,para o projeto final do curso , a Yoruzinho está configurada para trabalhar com farmácias e medicamentos e chama-se Pharmacy Central System, mas isso pode ser facilmente configurado de acordo com a sua atividade no mercado.

Deploy

Visite a demo!

Como utilizar

Vamos clonar o repositório para nosso PC

Abra um terminal e execute os seguintes comandos...

git clone [email protected]:Luis-Vilar/Projeto-FrontEnd.git

É necessário ter uma chave SSH. Se não tiver, siga o tutorial no seguinte link:

cd Projeto-FrontEnd/Yoruzinho

yarn

yarn dev

Você deverá receber uma saída do terminal com o endereço local para acessar o site, como o seguinte:

-$ yarn dev -yarn run v1.22.19 $ vite VITE v4.2.1 pronto em 1127 ms

Local: http://localhost:5173/

Network: use --host to expose

press h to show help

Abra seu navegador e copie e cole o endereço (por padrão é http://localhost:5173/)

Você deverá ver uma tela como a seguinte:

O e-mail pode ser qualquer um, desde que tenha um formato válido. Ainda não há suporte para usuários cadastrados.

A senha deve possuir 8 ou mais caracteres e pelo menos uma letra maiúscula ou minúscula

Se você fizer o login corretamente, será redirecionado para a próxima tela, onde teremos um mapa com as farmácias cadastradas.

Nos ícones que aparecem no mapa, ao clicar, será renderizado um modal com todas as informações cadastradas. Também há um hiperlink que, caso tenha um celular cadastrado e possua WhatsApp, você será redirecionado para um novo chat com o número cadastrado. Segue a próxima imagem.

Nos formulários de cadastro, os campos são controlados. Há alguns opcionais e outros obrigatórios. No entanto, como pode ser visto, eles fornecem feedback. No formulário de estabelecimento, quando o CEP é inserido, as informações de bairro, cidade, estado e logradouro são carregadas automaticamente.

Quando estiver na lista de medicamentos, você poderá realizar uma busca pelo nome do medicamento. Basta digitar algumas letras e clicar no botão buscar e o sistema renderizará todos os medicamentos que contenham essas letras em seu nome. Veja a imagem abaixo como exemplo:

Resultado de uma busca com a palavra 'as':

Ao clicar em "ver mais", aparecerá um modal com todas as informações do medicamento, como na seguinte imagem:

Criando uma API e configurando nosso app para consumi-la.

Crie uma conta na REPLIT

Vamos criar um novo repl com Node.js

Edita o arquivo index.js ele deve ficar exatamente igual que a seguinte imagem :

Cria um arquivo de nome db.json ele deve ficar exatamente igual a seguinte foto :

Click en Run

ficara assim

Copie a URL que aparece na aba WebView.. ela e o endereço do seu API, observe a seguinte foto

Pronto! seu API esta no AR!, so falta configurar a variável no código do projeto que clono anteriormente

Por favor, abra o seu editor de preferência e modifique a variável "url" presente no arquivo ContextProvider.jsx localizado na pasta "context". Certifique-se de que a variável esteja envolta por aspas, como por exemplo "https://sua_url.repl.co". Após realizar a modificação, salve o arquivo e abra um terminal.

Para criar o deployment e rodar o servidor localmente, execute os seguintes comandos:

• Execute o comando "yarn build" para criar o build do aplicativo.

• Em seguida, execute o comando "yarn preview" para rodar o servidor localmente.

Certifique-se de que os comandos estejam sendo executados corretamente, seguindo as instruções indicadas na seguinte foto :

Após executar o comando adequado, será possível acessar o endereço que está sendo exibido no terminal, por padrão http://localhost:4173, por meio de um navegador web. Nesse endereço, você poderá visualizar o build do aplicativo e realizar testes, como adicionar estabelecimentos e produtos, para verificar se os dados estão sendo corretamente cadastrados no API. Caso esteja tudo correto, você poderá fazer o upload do seu aplicativo para um serviço de hospedagem online.Se você possuir conhecimentos técnicos, poderá fazer um fork deste repositório e hospedá-lo na Netlify ou no serviço de Hosting que você preferir para disponibilizar seu aplicativo online de forma fácil e eficiente., a Netlify também oferece a opção de Build Manual. Para isso, basta subir apenas a pasta dist, que é criada ao executar o comando yarn build. Recomendamos a utilização da Netlify devido à sua eficiência e facilidade de uso, segue o tutorial no YouTube :

Tecnologias utilizadas

• React : é uma biblioteca de JavaScript para a criação de interfaces de usuário interativas. O React é utilizado em todo o seu projeto para fornecer uma experiência de usuário fluida e dinâmica.

• React Bootstrap : uma biblioteca de componentes do React que se integra com o Bootstrap. É utilizado para criar componentes personalizados, como botões e cartões, que se ajustam ao estilo visual do Bootstrap.

• React Leaflet : uma biblioteca de componentes do React que se integra com o Leaflet. É utilizado para criar mapas interativos em seu aplicativo web.

• React Router DOM : uma biblioteca do React para a criação de rotas em um aplicativo web. É utilizado para criar rotas dinâmicas em seu aplicativo e permitir a navegação entre as diferentes páginas.

• Styled Components : uma biblioteca do React para a criação de componentes personalizados e estilizados com CSS. É utilizado para fornecer estilos personalizados aos componentes do seu aplicativo web.

• Vite é uma ferramenta de construção de projetos de front-end que permite a criação rápida e fácil de aplicativos web modernos. É utilizado em seu projeto para gerenciar o desenvolvimento local e a criação de builds otimizadas para produção.

• Replit é uma plataforma online que permite aos desenvolvedores escrever, executar e colaborar em projetos de programação em várias linguagens de programação, incluindo Python, JavaScript, Ruby e muitas outras.

• Netlify é uma plataforma de hospedagem de sites e aplicativos que permite aos desenvolvedores hospedar seus projetos na web de forma rápida e fácil.

• Git é um sistema de controle de versão distribuído de código aberto e gratuito. É utilizado em seu projeto para gerenciar o versionamento do código e permitir que você e sua equipe trabalhem em conjunto no desenvolvimento do aplicativo.