Hello World - O Primeiro Projeto

EEEEEESTAMOS DE VOLTA!!!

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

Sem mais enrolação, vamos lá.

Primeiros passos:

• Crie uma pastinha para o projeto
• Rode o comando: framework7 create

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:

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 ;)

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

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.

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

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á!