Como Criar um Aplicativo com Framework 7 (atualizado 2020)

Como criar um aplicativo Cordova + Framework 7 – atualizado 2020.

Preparando o ambiente de desenvolvimento Cordova + Framework7

Os passos descritos abaixo devem ser executados uma única vez em seu computador, não sendo necessário executá-los novamente sempre que precisar criar um novo aplicativo. Os passos a seguir criam apenas o ambiente de desenvolvimento, é a partir dele que iremos, em um segundo momento, criar nossos aplicativos.

1. Faça a instalação padrão do Node.JS + NPM. Se você já tiver algum sofware de servidor local em seu computador como o XAMP, Vertigo ou simulares, acesse – https://nodejs.org/en/download/ e prefira a versão LTS – Recomendada para a maioria dos usuários. Mas se você não tem nenhum software de servidor local já instalado, eu recomendo que instale o Laragon que já oferece os serviços do Apache, PHP, MySQL, Node.JS e NPM tudo em um só instalador.
2. Embora não seja obrigatório, eu recomendo que reinicei o seu computador após a instalação.
3. Abra o prompt de comando e verifique se o Node e o NPM foram instalados corretamente executando os seguintes comandos; node -v e npm -v.
   Se ao acaso os comandos retornarem erro, localize o Node.JS no menu iniciar do Windows, execute-o e mantenha o prompt do Node.JS aberto.
4. Em seguida, instale o Cordova com o comando npm install –g cordova
5. Instale o F7 com suporte ao Cordova com o comando npm install -g framework7-cli

Criando seu primeiro aplicativo

Agora que preparamos o ambiente, vamos criar nosso primeiro app, para isso precisamos primeiro criar uma pasta na qual iremos salvar o nosso aplicativo, considerando que irei salvar em D:\Prof.Anderson\PAM\CordovaApp, irei utilizar este caminho para os comandos a seguir.

1. 1. Acesse o disco no qual sua pasta foi criada, bastando digitar o nome do disco e em seguida acessar a pasta usando o comando cd;
   2. Agora instale o F7 na pasta usando o comando framework7 create --ui, após executar este comando será carregado no seu navegador padrão uma página de personalização da instalação do F7
      1. Em App Type selecione a opção Cordova app.
      2. Em Starter template escolha Tabbed Views (Tabs)
      3. Em Bundler, selecione No Bundler
         
   3. Agora, clique em Create App e aguarde alguns minutinhos, aproveite para lavar aquele copo sujo que você deixou na pia da cozinha;

Após finalizar, acesse a passa www do seu projeto e abra o arquivo index.html no seu navegador favorito.

Como executar o aplicativo corretamente?

Dar um duplo-clique sobre o arquivo html definitivamente não é a melhor forma de executar seu aplicativo, o ideal é executar o comando npm run start ainda no console. Isso irá fazer com seu aplicativo seja executado sobre um servidor HTTP, permitindo assim troca de dados com servidores externos, essencial para aplicativos que trocam dados usando jSon.

Você também pode usar o recurso de Live Preview do Brackets ou instalar a extensão Live Server no Visual Studio Code.