A melhor forma de fazer seus projetos e testes, ou aprender desenvolvimento web, é usando um servidor local.
Dessa forma, você vai poder testar seus projetos na sua máquina e, quando estiver pronto, é só fazer o deploy para um servidor online (como os da Weblink, Hostinger, etc.)
Neste tutorial, você vai ver como configurar uma instalação local do Apache, MySQL e PHP, e algumas ferramentas de produtividade, como o Git e o NPM. Vamos usar o XAMPP, para fazer isso.
Antes de Começar
Para montar o seu ambiente de desenvolvimento, você precisará fazer alguns downloads:
- Baixar o XAMPP
- Baixar o Git
- Baixe um Editor de Textos (recomendo o Atom ou o VS Code)
- Baixe o Node.js
Os passos desse tutorial são feitos para ambientes Windows, mas podem servir também para Linux.
Instale o XAMPP
O XAMPP é um pacote com softwares livres que executam um Servidor Web, porém em menor escala e sem as configurações de segurança. Por ser menor, ele é perfeito para instalar no PC.
Para começar o seu server você já pode instalar o XAMPP.
A instalação é simples, como qualquer outro programa (Next, Next, talvez outro Next e Finish Him! ). Não há necessidade de modificar o setup padrão. Então, ficará a teu critério comentar sobre estes passos.
O XAMPP funciona principalmente com o Apache, como Servidor Web, PHP e Perl como linguagens, e o Maria DB para servir os Bancos de Dados (antes era o MySQL).
Com esses itens você pode criar sites e sistemas web do zero, ou instalar um WordPress, Joomla, Drupal, Yii, Laravel, MediaWiki, e vários outros CMS para criar seus sites.
Execute o XAMPP
Após a instalação terminar, execute o XAMPP.
Observe os softwares que o XAMPP tem, e que são interessantes para nós:
- Apache – é o servidor web em si. Ele trata as requisições dos sites e sistemas locais;
- MariaDB – o gerenciador de banco de dados. É equivalente ao MySQL. Esse é o sistema responsável pelo armazenamento dos dados dos projetos;
- PHP – é a linguagem utilizada pelo XAMPP, e roda junto com o Apache.
Inicie o Servidor Web, clique no botão Start, ao lado de Apache.
(Opcional) Inicie também o Banco de Dados, clicando no botão Start, também.
Se o servidor web (Apache) não tiver sido iniciado, você vai ver um erro no browser.
Nesse caso, funcionou normalmente. O tempo em amarelo é o tempo para iniciar as conexões com os Servidores. Isso fará com que as conexões se iniciem gerando uma porta de nº 80,443 para o Servidor Web Apache e para o Servidor de dados MySQL a porta gerada de nº 3306.
Com os dois serviços sendo executados.
Quando aparecer a legenda verde com o text running o servidor web estará executando. Você pode verificar acessando o endereço http://localhost.
Se aparecer a tela do XAMPP, deu tudo certo.
Instale o Git e o Git Bash
O Git é o principal programa de controle de versão atualmente, e ele traz o Git Bash, que você irá usar como linha de comando.
É importante aprender a versionar seus códigos, para manter o registro de alterações e gerenciar conflitos ou voltar versões, em casos de bugs.
O Git Bash vai servir como terminal de linha de comando, para você, caso esteja usando Windows. No Linux, não precisa ter o Git Bash.
A melhor forma de trabalhar com Web é através da linha de comando. É tudo uma questão de prática no dia-a-dia.
Instale um Bom Editor de Textos
O Atom e o VS Code são editores para desenvolvimento. Eles possuem várias ferramentas de produtividade, como o Emmet.
Um editor de textos desse tipo é muito útil para alterar scripts CSS, marcações HTML, algumas configurações e até para fazer um temas ou plugins por completo.
Você pode instalar vários plugins para agilizar certas tarefas, principalmente no Atom. Ele também permite visualizar a árvore de pastas, e mostra os status dos arquivos no Git.
Instale o Node.js e o NPM
Por fim, o Node.js é um framework de desenvolvimento para JavaScript.
Ele também vem com o NPM, que será o gerenciador de pacotes, e automatiza praticamente tudo. Aos poucos, você vai aprender a fazer várias coisas com o Node.
Usando o NPM, você vai poder instalar, ou criar, vários scripts de automatização, e usar ferramentas como o Webpack, ou o Gulp, para verificar seus arquivos CSS e Js e encontrar problemas de sintaxe, possíveis erros, e compactar tudo.
Além disso, você pode começar a aprender a criar sistemas web com Javascript e Node.js, também. Mas, essa parte fica para outro dia.
Próximos Passos…
Nesse tutorial, você viu como ter um ambiente de desenvolvimento web profissional, com umservidor web, um banco de dados, controle de versão, linha de comando e gerenciamento de pacotes.
O seu processo de desenvolvimento vai ficar mais rápido, já que não há necessidade de uploads, e nem de esperar que as páginas carreguem, e você não fica dependendo de uma conexão com a internet.
Esse ambiente fica similar aos servidores da Weblink (a Weblink faz parte do grupoHostinger), que são os servidores que eu uso. Assim, na hora de fazer o deploy (ou seja,transferir para o servidor online), você evitará problemas de execução e erros no site, ou no sistema.
É importante que o seu ambiente local seja o mais parecido possível com o ambiente de produção, que pode ser uma hospedagem comum, ou uma VPS, por exemplo.
A partir daqui, você pode começar a criar seus sites, e sistemas web, com PHP, HTML & CSS e Javascript.
Até a Próxima!
0 comentários:
Postar um comentário