quinta-feira, 2 de junho de 2016

Ionic Cordova AngularJS NodeJS e NPM

O Ionic Framework é um conceito de desenvolvimento de aplicações híbridas, ou seja sem preocupar-se com o a plataforma em questão para desenvolvimento. Ionic possui componentes de desenvolvimento do Cordova (Componentes de integrações de recursos nativos dos dispositivos) e AngularJS (Componentes Web e JS), para execução do mesmo é necessário ter instalado o NodeJS (Server de execução) e NPM (Node Package Manager (Gerenciador de Pacotes do Node)).

 Para instalar o Cordova e o Ionic no Linux64 basta rodar os seguintes comandos:

$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ npm install -g cordova ionic


 Ao tentar intalar o Ionic (último comando ($ npm install -g cordova ionic)) obtive o seguinte erro de instalação :

make: g++: Command not found
src/libsass.target.mk:134: recipe for target 'Release/obj.target/libsass/src/libsass/src/ast.o' failed
make: *** [Release/obj.target/libsass/src/libsass/src/ast.o] Error 127
make: Leaving directory '/usr/lib/node_modules/ionic/node_modules/node-sass/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/lib/node_modules/ionic/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12)
gyp ERR! System Linux 4.4.0-22-generic
gyp ERR! command "/usr/bin/nodejs" "/usr/lib/node_modules/ionic/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/lib/node_modules/ionic/node_modules/node-sass
gyp ERR! node -v v6.2.0
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok
Build failed
/usr/lib
└── cordova@6.1.1

npm ERR! Linux 4.4.0-22-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "cordova" "ionic"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! code ELIFECYCLE

npm ERR! node-sass@3.4.2 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@3.4.2 postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/{$USER}/npm-debug.log


Para solucionar o problema bastou executar o seguinte comando:

$ sudo apt-get install node-gyp

 Após a instalação sem erros, o Ionic disponibiliza por default 3 layout pré prontos das aplicações, basta acessar a pasta local onde você pretende ter os fontes do Ionic, e rodar os comandos abaixo listados, esses comendos irão criar uma estrutura de pasta dentro do diretorio selecionadosão elas:

#Layout em Branco
$ ionic start myApp blank

#Layout em Abas
$ ionic start myApp tabs


#Layout de Menu Laterais
$ ionic start myApp sidemenu

Após a criação da estruta de seu layout você deve acessar a pasta e rodar o seguinte comando :

#Inicia o server com seu template selecionado:
$ ionic serve 

#Inicia o server para exibir no modelo de celular:
$ ionic serve --lab

Imagem execução server (NodeJS) com layout (sidemenu)


Fontes utilizadas:
http://ionicframework.com/ (Acessado em 02/06/2016)
http://nodebr.com/o-que-e-a-npm-do-nodejs/ (Acessado em 02/06/2016);
http://tableless.com.br/introducao-ao-ionic-framework/ (Acessado em 02/06/2016);

Nenhum comentário:

Postar um comentário