Como já mencionei anteriormente o Ionic é mais que um framework, pois além disso ele também é uma ferramenta que estende funções do Apache Cordova trazendo mais recursos ao desenvolvedor. Acho que a melhor definição para o ionic é aquela que a própria empresa atribui. Eles dizem que o Ionic é uma SDK Web para para construção de aplicativos híbridos. Mas porque SDK ? Porque além das funcionalidades disponíveis o Ionic possui sua própria biblioteca de estilos e componentes para interface de usuário, assim como são os SDKs do iOS e Android.
A estrutura de um aplicativo construído com Ionic é composta pelos elementos ilustrados na imagem abaixo:
Ionic: toda a parte de UI e os controles de reconhecimento de plataforma para definição de componente a apresentar. Isto porque, para alguns componentes, o Ionic tem uma versão para cada plataforma tentando se aproximar da UI nativa do dispositivo
AngularJS: onde todas a funcionalidades são criadas, todo o comportamento e ações são construídas e também onde todos os dados são gerenciados
WebView (Apache Cordova): é através da webview que o Cordava realiza a comunicação do codigo javascript com os plugins da plataforma permitindo o acesso aos recursos do dispositivo.
Neste detalhamento acima ficou parecendo que o Ionic fica só na parte de UI, mas não é só isso, pois o Ionic, por ser também a plataforma sobre a qual estaremos desenvolvendo, traz consigo uma série de recursos para facilitar toda a construção do aplicativo.
Veremos a seguir como iniciar na construção de uma aplicativo, quais passos devemos seguir, o que precisaremos instalar.
Veremos a seguir como iniciar na construção de uma aplicativo, quais passos devemos seguir, o que precisaremos instalar.
O que precisamos ?
Para iniciar precisaremos instalar o NODE.JS que é basicamente uma runtime javascript, ou seja, ele permite rodar programas em javascript sem estar num browser, mas utilizando o motor do browser para realizar esta função. O nodejs será usado para instalação dos recursos necessários na construção do aplicativo, ele não é utilizado diretamente na programação ou execução do nosso app. Com o nodejs todas as operações serão realizadas em linha de comando pelo console (Linux) ou janela cmd (Windows)
Acesse o site https://nodejs.org e baixe o node específico para o S.O. de seu computador.
A versão L.T.S do nodejs deve ser suficiente, que hoje está na 4.5.0
Feita a instalação do node, vamos verificar se está tudo ok. Abra o console se estiver no linux ou o "cmd" se estiver no Windows e primeiramente verifique se o node está instalado corretamente, digite
Outra instalação necessária é a da SDK para qual será feira a geração do aplicativo. Trabalharemos com Android, uma vez que este está disponível para todas as plataformas, mas caso você tenha um mac, basta baixar o XCode e a SDK do iOS estará junto.
Baixe e instale apenas a SDK Android ou se preferir baixe e instale o Android Studio que já vem com a SDK. Ambos estão disponíveisem https://developer.android.com/studio/index.html.
Depois de instalar a SDK, faça a atualização da versão do Android através do SDK Manager, que pode ser acessado pela interface do Android Studio ou executando o programa "SDK Manager" na pasta do SDK.
No SDK Manager, na pasta Tools, faça a instalação ou atualização das últimas versões do "Android SDK Tools", "Android SDK Platform-tools" e "Android SDK Build-tools". Na pasta Android 'X' (API YZ) faça a instalação de todos os itens do maior 'X' disponível, isto vai garantir que você terá todos os recursos disponíveis da última versão da plataforma. Na pasta Extras recomendo que você instale ao menos os itens "Android Support Library" e "Google Play services"
Agora que já temos a SDK instalada e atualizada podemos partir para a instalação do Ionic. Para isso é simples, basta digitar no console ou cmd
Enfim temos o projeto do aplicativo criado, mas ainda não vamos programar, pois eu gostaria de apresentar mais uma ferramenta muito útil e a primeira ferramenta online do Ionic que veremos. Será o Creator, um prototipador de aplicativos que permite ao desenvolvedor, após construir o protótipo e validar com seu cliente, fazer download do projeto criado e Voilà, tem-se o código do projeto para dar início à programação, com todas as telas e navegação construída.
Para criar seu protótipo, acesse https://creator.ionic.io/app/login , faça seu cadastro e acesse. A maior parte dos serviços online do ionic são pagos, mas possuem um acesso gratuito com uso limitado. No caso do Creator, a limitação para o acesso free é o número de projetos que pode ser criado, no caso apenas um, e alguns recursos da ferramenta como a inclusão de mapas no protótipo.
Dê um nome para seu novo projeto, escolha o template e clique em "Create Projetct". Mesmo que você tenha criado seu projeto com template blank na sua máquina, aqui você pode definir qual será seu modelo realmente.
Já temos bastante coisa para fazer e várias instalações para executar, então vou encerrando este post por aqui e no próximo veremos como construir nosso protótipo no Ionic Creator, baixar o código fonte que ele disponibiliza e aplicar ao projeto que criamos no computador. Até mais e obrigado!
node --versionCaso tenha como resposta a versão do node recém instalada então está ok.
Outra instalação necessária é a da SDK para qual será feira a geração do aplicativo. Trabalharemos com Android, uma vez que este está disponível para todas as plataformas, mas caso você tenha um mac, basta baixar o XCode e a SDK do iOS estará junto.
Baixe e instale apenas a SDK Android ou se preferir baixe e instale o Android Studio que já vem com a SDK. Ambos estão disponíveisem https://developer.android.com/studio/index.html.
Depois de instalar a SDK, faça a atualização da versão do Android através do SDK Manager, que pode ser acessado pela interface do Android Studio ou executando o programa "SDK Manager" na pasta do SDK.
No SDK Manager, na pasta Tools, faça a instalação ou atualização das últimas versões do "Android SDK Tools", "Android SDK Platform-tools" e "Android SDK Build-tools". Na pasta Android 'X' (API YZ) faça a instalação de todos os itens do maior 'X' disponível, isto vai garantir que você terá todos os recursos disponíveis da última versão da plataforma. Na pasta Extras recomendo que você instale ao menos os itens "Android Support Library" e "Google Play services"
Agora que já temos a SDK instalada e atualizada podemos partir para a instalação do Ionic. Para isso é simples, basta digitar no console ou cmd
npm install -g cordova ionic
Este comando fará a instalação dos módulos node do Ionic e do Cordova, que apesar de trabalharem juntos tem a instalação separada. Por enquanto é disso que precisamos, agora vamos criar nosso projeto de aplicativo e para isso, voltamos ao console ou cmd, acessamos a pasta onde queremos que o projeto seja criado e digitamos o comando abaixo:
ionic start meuProjetoMobile blankO comando ionic start faz a criação do projeto e copia todos os arquivos necessários. A palavra meuProjetoMobile é o nome do projeto, mas não se preocupe pois o nome do projeto não é necessariamente o nome final do aplicativo, depois podemos alterar e eu mostrarei como fazer isto. Já a palavra blank define qual o template do Ionic utilizaremos, estes templates são modelos de interface para o aplicativo e estão disponíveis as interfaces com abas (tabs), menu lateral (sidemenu) e em branco (blank).
comando executado no cmd
Enfim temos o projeto do aplicativo criado, mas ainda não vamos programar, pois eu gostaria de apresentar mais uma ferramenta muito útil e a primeira ferramenta online do Ionic que veremos. Será o Creator, um prototipador de aplicativos que permite ao desenvolvedor, após construir o protótipo e validar com seu cliente, fazer download do projeto criado e Voilà, tem-se o código do projeto para dar início à programação, com todas as telas e navegação construída.
Para criar seu protótipo, acesse https://creator.ionic.io/app/login , faça seu cadastro e acesse. A maior parte dos serviços online do ionic são pagos, mas possuem um acesso gratuito com uso limitado. No caso do Creator, a limitação para o acesso free é o número de projetos que pode ser criado, no caso apenas um, e alguns recursos da ferramenta como a inclusão de mapas no protótipo.
Dê um nome para seu novo projeto, escolha o template e clique em "Create Projetct". Mesmo que você tenha criado seu projeto com template blank na sua máquina, aqui você pode definir qual será seu modelo realmente.
Já temos bastante coisa para fazer e várias instalações para executar, então vou encerrando este post por aqui e no próximo veremos como construir nosso protótipo no Ionic Creator, baixar o código fonte que ele disponibiliza e aplicar ao projeto que criamos no computador. Até mais e obrigado!
Nenhum comentário:
Postar um comentário