Criação de novo projeto com Ionic

 

    Sim meu amiguinho e amiguinha, no último post vimos como preparar o computador para programarmos em ionic, e hoje vamos criar nosso primeiro projeto!!! Vocês estão prontos? Então vamos lá!

    Abra o prompt de comando (ou cmd), geralmente quando você abre o prompt de comando, por padrão ele cai no seguinte endereço (no Windows):

c:\Users\NomeDoUsuário>_

    Estando neste endereço você estará dentro da pasta do seu usuário e na maioria das vezes não colocamos nada, diretamente, nesta pasta, desta forma vamos criar uma pasta na raiz (C:) apenas para organizar nossos futuros projetos, combinado?

    Desta forma dê o seguinte comando seguido sempre de um ENTER:

cd \

    Assim você estará na raiz (C:), agora vamos criar a pasta ao qual vamos colocar todos nossos projetos, lembrando que isto não é obrigatório e muito menos influencia no funcionamento do projeto, estamos apenas organizando nossas coisas, vamos ao comando:

md ionic

    Pronto, criamos a pasta ionic, agora entremos nela para começar a criação do nosso primeiro projeto

cd ionic

    Com isso o seu prompt estará assim: c:\ionic> , estando desta forma vamos criar nosso primeiro projeto com o comando abaixo:

ionic start primeiroprojeto blank --type=angular

    O comando acima cria o projeto, vamos entender melhor o comando. As palavras "ionic start" denotam ao ionic que queremos criar um projeto novo a próxima parte é o nome para o projeto, recomendo que não utilize acentuação, espaço, caracteres especiais (ex: #, $, @, etc.) e iniciar com números. A próxima parte do comando é o modelo com o qual queremos iniciar, que neste utilizamos o "blank" que criará um projeto em branco (falaremos em post's posteriores sobre isso com mais detalhes) e por fim temos "--type=angular" que aponta qual framework utilizaremos para nos auxiliar na geração de arquivos e a programação propriamente dita.

     Enfim o comando completo acima fará vários downloads e várias verificações até parar no seguinte questionamento:

 Create free ionic account?  

    Digite N e dê um enter e ele concluirá a criação do projeto. Agora precisamos entrar na pasta criada do nosso projeto, faça como abaixo:

cd primeiroprojeto

    E seu prompt ficará da seguinte forma: c:\ionic\primeiroprojeto> , vamos então ver a "cara" do nosso projeto dando o seguinte comando: 

ionic serve

    Abrirá a seguinte tela:

    Agora vamos preparar a tela do navegador para ficar parecida com a de um celular para podermos ver melhor como ele se portará em um dispositivo físico. 

    Clique com o botão direito do mouse em algum lugar da tela e aparecerá o seguinte menu igual a imagem abaixo, agora clique em "inspecionar elemento":

    A tela ficará da seguinte forma:

    Desta forma clique para deixar o layout responsivo o que já estaremos próximos de nosso objeto:

    

    Para finalizar vamos escolher um formato de celular para ver melhor nosso programa, clicando em Responsive, como na imagem abaixo e escolhendo um modelo de celular.

     

    Assim você conseguiu com sucesso inicializar seu projeto ionic e deixar o navegador pronto para começarmos a programar!!!

    Por hoje é só pessoal, grande abraço e Fiquem com Deus!!!