DEV Community

Isaac Batista
Isaac Batista

Posted on

Hello World - O Primeiro Projeto

EEEEEESTAMOS DE VOLTA!!!

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

Comemoração

Sem mais enrolação, vamos lá.

Primeiros passos:

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

Terminal executando os comandos

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

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

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

Mensagem de sucesso no terminal

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

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

Aplicativo rodando no navegador

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

Top comments (0)