Bom primeiramente precisamos instalar o Node.js e npm, abordamos a instalação do Node.js na postagem sobre Angular 2, após concluído vamos instalar agora o ionic e cordova, para isso precisaremos abrir o terminal ou cmd. Com o terminal aberto digite:

$ npm install -g ionic cordova

O parâmetro -g significa que os seguintes pacotes serão instalados globalmente em nossa máquinas.

Feito isso podemos criar nosso projeto, mas antes iremos abordar alguns comando que usaremos no decorrer da série:

$ ionic start  #usado para criar um novo projeto no diretório corrente

$ ionic serve  #iniciara um servidor onde será exibido no navegador a sua aplicação

$ ionic serve -l  #faz exatamente o mesmo do serve com um adicional, é exibido como aplicativo 
ficará em android e ios

$ ionic upload #subira sua aplicação para o servidor do ionic, onde será possível vermos a 
aplicação no celular com a aplicação ionic view

$ ionic platform add android_ou_ios #com esse comando você adiciona a plataforma que deseja buildar 
futuramente

$ ionic plugin add nome_do_plugin #podemos adicionar alguns plugin que venhamos precisar

$ ionic run android_ou_ios #constrói e roda a aplicação no dispositivo conectado ou no emulador*

*Obs: Para rodar aplicação ios é necessário um sistema operacional da apple, com xcode.

Esses são alguns comandos que utilizaremos conforme formos avançando na construção da aplicação.

Vamos colocar a mão na massa agora. Acesse o terminal ou cmd e escreva o seguinte comando

$ ionic start nome_do_projeto template

No lugar de template substitua pelo template que você preferir, sendo eles blank, tabs e sidemenu, com blank será criado um projeto sem template, com o tabs será criado um template usando as tabs e usando sidemenu será criado um projeto com um menu lateral, no nosso caso começaremos com o blank (Aqui escolhi o nome do projeto como appvila).

Acesse a pasta onde está nossa aplicação:

$ cd appvila/

Agora vamos executar para vê se está tudo certo com nossa aplicação:

$ ionic serve -l

Deverá abrir o seu navegador padrão com a seguinte tela:

Caso não abra automaticamente, abra o navegador de sua preferência e digite a seguinte URL http://localhost:8100/ionic-lab, essa URL será mostrada no seu terminal após você executar ionic serve -l.

Vamos agora abrir o projeto no seu editor de texto preferido, no meu caso estou utilizando o visual code. O projeto apresenta a seguinte estrutura de pastas:

Essa é a estrutura padrão de uma aplicação gerada pelo ionic CLI (Imagem 2), mas vamos mudar essa arquitetura para uma mais adequada ao meu ver e bem modularizada, vamos usar a seguinte arquitetura:

No diretório www vamos ter 4 subdiretórios, sendo eles, app, img, lib e styles. No diretório app vai ser onde estaremos modularizando a aplicação, todos as telas e componentes serão representados por pastas contendo um arquivo referente a view, outro ao controller e um referente ao service, no nosso casa iniciamos com 2 diretórios sendo eles menu e posts, sendo menu referente ao menu da nossa aplicação e posts onde será exibido todos as nossas postagens.

 Como nossa aplicação consumirá da API do WordPress, vamos construir um blog utilizando o WordPress onde iremos instalar alguns plugins necessários para ser consumido pela nossa aplicação. Aqui vou assumir que vocês tenham instalado o PHP e MySQL em seus computadores. Primeiro passo é baixar o wordpress aqui, após concluir o download copie o arquivo baixado para o diretório appvila dentro do diretório onde o servidor HTTP Apache coloca os arquivos que serão exibidos no browser. Extraia os arquivos dentro do diretório (Imagem 4 e Imagem 5).

Podemos agora apagar o arquivo wordpress-*.zip, vamos acessar a URL http://localhost/appvila no nosso browser ao teclar enter vamos ser redirecionado para a página de instalação do wordpress (Imagem 6), nela iremos avançar, apertando no botão let’s go! 

Vamos para a próxima tela onde nela iremos estar configurando o nosso banco de dados, mas antes precisamos criar um banco de dados, podemos criar através do phpmyadmin acessando a URL http://localhost/phpmyadmin (Imagem7), feito isso voltaremos a configurar o banco de dados da nossa aplicação wordpress(Imagem 8) com os respectivos campos, nome do banco de dados(Database name), usuário(Username), senha(Password), endereço do banco de dados(Database Host) e  prefixo das tabelas(Table Prefix).

Se tudo ocorrer bem veremos a seguinte tela(Imagem 9), isso significa que podemos rodar e instalar apertando o botão Run the install:

Feito isso, seremos redirecionado para a tela de instalação onde iremos configurar o titulo do site, usuario, senha e email respectivamente (Imagem 10), com tudo preenchido clique em Install WordPress.

Com tudo configurado, vamos à tela de login(Imagem 11) para acessar o painel do wordpress(Imagem 12).

Vamos acessar a página do WP REST API e fazer o download do mesmo. Quando concluir o download acesse o diretório onde o plugin foi baixado, copie o arquivo e cole no diretório wp-content/plugin da sua aplicação wordpress(appvila) e descompacte o arquivo. Vá ao browser e acesse http://localhost/appvila/wp-admin/ (Imagem 12) clique no menu Plugins e irá ser exibida a tela(Imagem 13) de gerenciamento de plugins, iremos localizar o plugin WP REST API e clicar em ativar(activate).

Se tudo der certo ao acessarmos a URL http://localhost/appvila/wp-json/ iremos ver a seguinte tela(Imagem 14), isso significa que a API do nosso blog está funcionando e podemos acessar ele de nossa aplicação.

Isso é tudo que iremos ver nessa parte 1, acho que ficou um pouco longo, mas queria mostrar o passo-a-passo de forma detalhada e que fosse bem compreendida por vocês. Qualquer dúvida postem nos comentários, estarei acompanhando, no final de semana estarei colocando a primeira parte no nosso repositório do github que no momento se encontra vazio.

Até mais pessoal o/.