Projeto de Sistemas-2024.1 _ Universidade Federal do Tocantins - Palmas, 2024 _ Desenvolvimento do aplicativo Cronos
- Front-End
- Documentação
- Créditos
- Repositório de Front End
Este é o repositório que armazena o front-end do app Cronos.
- Pode ser acessada por:
- O cronos pode ser encontrado em:
- O cronos pode ser baixado em:
- O design do Cronos está logo abaixo:
Nesta seção você verá a documentação de como ajustar o ambiente de desenvolvimento para rodar o front-end do aplicativo na sua máquina local, e também no seu celular.
Esta seção contém as informações para você rodar este projeto tanto no seu computador quanto no seu telefone, siga passo a passo de forma metódica para que você não tenha problemas ao fazer algo errado.
Obs.: Não nos responsabilizamos pelo que você fizer de errado ou por problemas técnicos, o procedimento feito aqui pode abrir portas na rede do seu computador e a proteção do mesmo depende somente de você, tenha cuidado.
Nesta seção estão contidos os pré-requisitos necessários para rodar o projeto em máquina local.
Para dar o git clone do repositório, você precisará ter o gitbash instalado na sua máquina.
Link para instalar o Git:
Tutorial para instalar o Git (Créditos aos criadores):
Para o funcionamento do projeto na sua máquina, você deve ter o XAMPP ou outra ferramenta de host para o php instalado no seu computador, não é obrigatório o uso do XAMPP, mas este projeto recomenda a utilização do mesmo ao fazer o clone deste repositório.
Link para instalar o XAMPP: link
Siga passo à passo para conseguir rodar seus projetos tanto no seu computador quanto no seu celular.
- O primeiro passo para rodar o projeto na sua máquina é instalar o XAMPP, você pode fazer isto visitando:
Instalar o XaMPP - Com o instalador baixado neste site, você deve seguir os seguintes passos:
-
Abrir o instalador: Você pode fazer isto clicando 2 vezes no arquivo que você baixou no site:
-
Apertar no botão Next:
-
Marcar todas as caixas de instalação e apertar em Next:
-
Apertar em Next:
-
Deixar a linguagem padrão e apertar em Next:
-
Apertar em Next:
-
Agora, espere o processo finalizar, e quando isto ocorrer, aperte em concluir sem desmarcar nada, então siga para o próximo tópico.
- Agora, faremos diversas configurações no aplicativo para que ele rode na rede local.
-
Na tela inicial, a primmeira coisa que você fará é clicar no x vermelho ao lado do apache e no x vermelho ao lado do MySQL, então clique em yes, sua tela deverá ficar assim:
-
Agora, aperte em config ao lado do apache:
-
Escolha a primeira opção, com o nome de:
Apache (httpd.conf)
-
No bloco de notas que abrir, aperte ctrl + f e digite "Listen":
-
Troque a porta do Listen que não possui uma # por 8221, assim como no exemplo:
-
Aperte ctrl + s e feche o bloco de notas, agora, na tela inicial do XAMPP, aperte em config:
-
Na tela que abrir, aperte em Service Port and Settings:
-
Troque a main port por 8221, como no exemplo e aperte em save:
-
Aperte em save novamente:
- Tecle windows e digite Windows Defender Firewal e aperte enter ou siga o caminho:
Painel de Controle\Sistema e Segurança\Windows Defender Firewall
-
Na tela que abrir, aperte em Permitir um aplicativo ou recurso atraves do Windows Defender Firewall:
-
Na tela que abrir, procure por Apache HTTP Server e Apache HTTP Monitor:
-
Se você não encontrar aperte em Permitir outro Aplicativo:
-
Aperte em procurar:
-
Entre na pasta que você instalou o xampp, entre na pasta apache, entre na pasta bin e selecione httpd.exe:
Caminho:
C:\xampp\apache\bin\httpd.exe
-
Aperte em abrir e depois em adicionar:
-
Faça os mesmos passos para adicionar ApacheMonitor.exe:
-
Marque as caixas destacadas para ambos:
-
Aperte em OK:
-
Aperte em configurações avançadas:
-
Aperte em Regras de Entrada:
-
Procure por todos os nomes que começam com Apache:
-
Aperte no primeiro:
-
Se não estiver habilitado, aperte em habilitar regra, de forma que sua tela fique assim:
-
Agora repita este processo para todo o bloco de processos do Apache e feche todas as janelas do painel de controle e reinicie sua máquina.
-
Após reiniciar, abra o XAMPP e aperte em start:
-
Entre no seu navegador e digite na caixa de URL:
localhost:8221
-
A tela que abrirá será esta:
-
Você instalou o XAMPP com sucesso.
-
Para acessar o XAMPP pelo seu telefone é bem simples, o primeiro passo que você fará é abrir o seu terminal.
-
Na linha de comando, digite:
ipconfig -
Procure por este bloco:
-
Pegue o seu IPV4 (O que estiver na frente da linha):
-
Seu IPV4 deve ser um número do tipo:
19.3.0.254
- Digite o seu número de IPV4 (O do seu terminal) na URL do navegador do seu telefone e na frente dele coloque ":8221", veja o exemplo:
19.3.0.254:8221
- Após digitar isso no navegador do seu telefone, aperte enter e veja a tela renderizar!
- Você tem acesso ao seu XAMPP pelo seu telefone!!
- Para fazer seus projetos e acessá-los, é simples, vá até onde você instalou o xampp e entre em htdocs, o caminho deverá ser semelhante a este:
C:\xampp\htdocs\
- Crie em htdocs uma pasta chamada html e entre nela:
C:\xampp\htdocs\html
- Abra o gitBash nesta pasta e digite na linha de comando:
git clone https://github.com/Cronos-Develop/Front-End.git
- Quando o processo terminar, vá até o navegador do seu computador e digite:
http://localhost:8221/html/
- Entre na pasta que aparecer e veja o site renderizar, e caso você não queira ver este projeto, você é livre para criar o seu.
- Para entrar no projeto pelo seu telefone, depois de fazer o git clone, entre no navegador do seu telefone e digite seu ip com a porta com o adicional /html, assim como no exemplo:
19.3.0.254:8221/html/
- Abra a pasta que aparecer e veja o site renderizar.
Aqui estão os sites visitados necessários para criar esta documentação.
- No caso de Usuários de Windows, é interessante desabilitar o UAC, para isto, basta rodar no CMD como administrador os seguintes comandos:
REG ADD HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System /V EnableLUA /T REG_DWORD /D 0 /F [Enter]
secedit /configure /cfg %windir%\inf\defltbase.inf /db defltbase.sdb /verbose [Enter]
RD /S /Q "%WinDir%\System32\GroupPolicyUsers" [Enter]
RD /S /Q "%WinDir%\System32\GroupPolicy" [Enter]
gpupdate /force [Enter]
- Após rodar os comandos, reinicie seu computador.
- Mas se você quer buscar direto da fonte e de outras formas, aqui está a referência:
- Desabilitar UAC
- Para fazer tal feito, basta ter seguido o tutorial da documentação, mas se você preferir assistir um vídeo:
- Acessar Local Host com Celular
- Aqui constam as playlists recomendadas para que se assista e se entenda o projeto.
- Este é o curso de HTML da CFB cursos que recomendamos, ele é bem rápido, mas o foco é profissional.
- Playlist HTML
- Este é o curso de CSS3 da CFB cursos que recomendamos.
- Playlist CSS
- Este é o curso de JavaScript da CFB cursos que recomendamos, ele é muito legal e muito didático para o aprendizado.
- Playlist JavaScript
- Todos os direitos de Copywriting dos contaúdos de terceiros aqui registrados estão reservados para os criadores dos conteúdos referenciados nesta documentação.