Hello World - O Primeiro Projeto
Tags: framework7, mobile, javascript
Published: 2020-04-01 03:33:33

EEEEEESTAMOS DE VOLTA!!!

Depois desse break pra respirar vamos COMEÇAR nosso PRIMEIRO APP com Framework7!!11!!


![Comemoração](https://media.giphy.com/media/ZUomWFktUWpFu/giphy.gif)

Sem mais enrolação, vamos lá.

Primeiros passos:

 - Crie uma pastinha para o projeto
 - Rode o comando: *framework7 create*

![Terminal executando os comandos](https://dev-to-uploads.s3.amazonaws.com/i/t2ldfkizht8zsowytie6.png)

Se seu CLI estiver atualizado você estará no mesmo passo que eu. 

Por outro lado você receber um erro sobre versão desatualizada, use primeiro: *npm install framework7-cli -g*

Agora que todos estão no mesmo barco, vamos responder esse formulário sobre que tipo de aplicativo queremos fazer.

Sem muitas complicações vamos estar respondendo assim:

![Terminal respondendo formulário](https://dev-to-uploads.s3.amazonaws.com/i/ka5lj366ph21zj2jd4dn.png)

Qualquer erro, use o atalho *Ctrl + C* pra cancelar a operação.

Vamos às explicações de forma bem rápida:

- Simple Web App será um aplicativo que não vai depender de SDKs e outras ferramentas para começarmos a trabalhar. Ele será puramente um App de browser.
- Nome do projeto, você pode chamar até de Uber se quiser.
- Framework7 Core é a versão do Framework7 sem nenhuma outra lib de interface como React ou Vue, apenas JS puro.
- Single View é um template de layout mais simples.
- Webpack é a lib que vai estar gerenciando nossas builds e o servidor de desenvolvimento (veremos o que isso quer dizer mais na frente).
- CSS acho que vocês conhecem. Não precisamos ter que lidar com outra coisa nesse momento, mas vai de sua preferência.
- Cor principal do tema do APP.
- Incluir *fonts* (ícones) no projeto.

Agora vai ser iniciado o processo de instalação de dependências, estruturação das pastas, etc.

Como pode demorar uns minutos, aproveite pra beber um copo d'água ;)

![Gato bebendo água](https://media.giphy.com/media/bgSq9hOt5hUcg/giphy.gif)

E agora............  Se você está vendo essa mensagem:

![Mensagem de sucesso no terminal](https://dev-to-uploads.s3.amazonaws.com/i/l7h4smuqwivjc2yhztce.png)

Projeto criado com sucesso!

Chegou a hora mais esperada, vamos rodar o projeto pra ver uma coisa concreta pelo menos né?

Alguns de vocês devem estar pensando que vamos abrir procurar algum arquivo como o *index.html* e abri-lo manualmente, mas nananinanão.

Vamos agora entrar na pasta do projeto e executar o comando *npm start*. Esse comando vai iniciar nosso servidor de desenvolvimento.

![Terminal executando npm start](https://dev-to-uploads.s3.amazonaws.com/i/jk9go0i4c5uzbmiqjwg4.png)

Nosso aplicativo em desenvolvimento estará rodando no endereço *http://localhost:8080*.

![Aplicativo rodando no navegador](https://dev-to-uploads.s3.amazonaws.com/i/bghzv2ubavy4tpgk9jaz.png)

*Dica*: ative o modo responsivo do seu navegador e selecione os dispositivos pra ver os estilos específicos pra cada plataforma: iOS, Android e Desktop.

Show de bola, galera. Agora vocês podem dar uma explorada em tudo que já vem prontinho pra ser usado nessa página e quem sabe ter umas ideias, ein?

Próxima aula FINALMENTE a gente brinca no código! Até lá!

![Bob esponja dizendo até logo](https://media.giphy.com/media/l1J3CbFgn5o7DGRuE/giphy.gif)