SlideShare uma empresa Scribd logo
1 de 7
Ionic Framework
Parte 1
Iniciando um Projeto mais Robusto
Instalação
• Download do Node.JS http://nodejs.org/download/
• Instale o Node.JS
• Abra o terminal (command line / prompt)
• Em caso de estar utilizando o Windows, recomendo que faça o
download do Git (terminal: Git Bash) ou utilize o Vagrant.
Deixarei estas duas alternativas para outro tutorial, caso não
conheçam.
• > npm install -g cordova ionic bower ios-sim
• Instalação do Cordova (base nativa para execução do app), Ionic
e Bower.
Criar App
• No terminal:
• > ionic start myApp [blank / tabs / sidemenu]
• > ionic platform add [android / ios / browser]
• > bower install ngCordova (biblioteca do Cordova para AngularJS)
• > ionic build [android / ios / browser]
• > ionic emulate [android / ios / browser]
• Possível erro na emulação do iOS:
• Solução:
• > cd platform/ios/cordova/
• > sudo chmod 777 emulate
Algumas Dicas
• O Ionic Framework utiliza AngularJS, ou seja, é extremamente interessante
conhecer pelo menos o básico deste Framework JS para utilizar
adequadamente a ferramenta.
• Sugiro não utilizar o jQuery (muito utilizado para web) pela lentidão que causa
no Web App.
• Fique atento à qualquer Framework de CSS que queira utilizar para, também,
não causar muita lentidão. Afinal, o usuário mobile é impaciente.
• Para desenvolver para iOS é necessário um Mac.
• O Ionic Framework possui sua própria documentação de layout:
• http://ionicframework.com/docs/components/
• http://ionicons.com
• http://ionicframework.com/html5-input-types/
Pull to Refresh
O Ionic possui uma facilidade enorme para inserir o Pull to Refresh no aplicativo. Digamos que seus
criadores já pensaram na sua necessidade.
Para o Front-End, logo após a abertura da tag <ion-list>, insira:
<ion-refresher pulling-text=“Pull to Refresh" on-refresh=“doRefresh()"></ion-refresher>
O atributo on-refresh fará a ligação com o controller do AngularJS para tratar quando o efeito é
executado. Portanto, no Back-End, no controller correspondente do template em que você inseriu a tag
acima, adicione, por exemplo:
$scope.doRefresh = function() {
$scope.playlists.unshift({title: 'Incoming todo ' + Date.now(), id: 7});
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply();
};
Onde, $scope.playlists é uma lista já definida no controller, como:
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
OBSERVAÇÃO VALIOSA: Seguindo o tutorial desde o início e criando o app como informei no estilo de
sidemenu, o aplicativo já possuirá uma função playlists de DEMO.
HTTPRequest
Vamos continuar utilizando o exemplo anterior das listas, em que incluímos o Pull to Refresh.
No Back-End, na função doRefresh, que é executada à interação do usuário, vamos executar um HTTPRequest que obterá
mais itens do Server-side e alimentar nossa lista.
Na declaração do controller, adicionaremos $http, feature do AngularJS responsável para a execução de GET e POST, como
parâmetro para a função.
.controller('PlaylistsCtrl', function($scope, $http) { … }
Iniciamos a função, em seguida incluiremos o código do HTTPRequest, ou Ajax, se preferir.
$scope.doRefresh = function() {
// Execute um HTTPRequest informando que está sendo enviado um JSON como parâmetro
// e aguardando um JSON como resposta
var httpResponse = $http.post("http://www.example.com", {
params: {
lastId: 6,
}
});
// Tratamento da resposta em caso de sucesso
httpResponse.success(function (data) {
// para cada item, adicione-o na lista
angular.forEach(data, function(item, key) {
$scope.playlists.push({
title: item.text,
id: item.id,
});
});
});
// Em seguida, formalize as modificações para as mesmas aparecerem no front-end
$scope.$broadcast('scroll.refreshComplete');
$scope.$evalAsync();
}
CONCLUSÃO
Espero que tenham gostado dessa primeira parte.
As dicas e funções Pull-to-Refresh e HTTPRequest são essenciais para qualquer projeto
que contenha listas e dependência de dados externos para alimentar o aplicativo. Ou seja,
praticamente a maioria.
Existem outras dicas válidas que virão no futuro.
Good Codes!
~ Alamo P. Saravali
@alamosaravali
http://fb.me/alamosaravali
https://br.linkedin.com/in/alamosaravali

Mais conteúdo relacionado

Mais procurados

Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Wennder Santos
 
Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e AlémAndre Baltieri
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UICleiton Francisco
 
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereCriando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereJuliano Martins
 
Testando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o KarmaTestando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o KarmaHenrique Limas
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao PhonegapLoiane Groner
 
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]Tiago Hillebrandt
 
Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...
Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...
Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...Renato Groff
 
Montando um ambiente de desenvolvimento WordPress utilizando Composer e GIT
Montando um ambiente de desenvolvimento WordPress utilizando Composer e GITMontando um ambiente de desenvolvimento WordPress utilizando Composer e GIT
Montando um ambiente de desenvolvimento WordPress utilizando Composer e GITLeo Baiano
 
APIs do Jeito Certo
APIs do Jeito CertoAPIs do Jeito Certo
APIs do Jeito CertoRavan Scafi
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework MobileIldyone Martins
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 

Mais procurados (20)

Ionic workshop
Ionic workshopIonic workshop
Ionic workshop
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)Curso: Desenvolvimento de aplicativos híbridos (dia 1)
Curso: Desenvolvimento de aplicativos híbridos (dia 1)
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
Angular 2, TypeScript e Além
Angular 2, TypeScript e AlémAngular 2, TypeScript e Além
Angular 2, TypeScript e Além
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphereCriando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
Criando um Web Service Restful com Jersey, Eclipse, JBoss, Tomcat, WebSphere
 
Testando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o KarmaTestando uma aplicação AngularJS utilizando o Karma
Testando uma aplicação AngularJS utilizando o Karma
 
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
 
Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...
Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...
Implementando APIs multiplataforma com ASP.NET Core 2.0 - Nerdzão Day #3 - No...
 
Apresentação rest api
Apresentação rest apiApresentação rest api
Apresentação rest api
 
BaaS com Firebase 3
BaaS com Firebase 3BaaS com Firebase 3
BaaS com Firebase 3
 
Montando um ambiente de desenvolvimento WordPress utilizando Composer e GIT
Montando um ambiente de desenvolvimento WordPress utilizando Composer e GITMontando um ambiente de desenvolvimento WordPress utilizando Composer e GIT
Montando um ambiente de desenvolvimento WordPress utilizando Composer e GIT
 
APIs do Jeito Certo
APIs do Jeito CertoAPIs do Jeito Certo
APIs do Jeito Certo
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 

Destaque

Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015Rangel Torrezan
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileWaldyr Felix
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicFelipe Blini
 
Offline apps Using Ionic Framework and PouchDB
Offline apps  Using Ionic Framework and PouchDBOffline apps  Using Ionic Framework and PouchDB
Offline apps Using Ionic Framework and PouchDBAlvaro Viebrantz
 
Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONICDan Jesus
 
Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!Eduardo Lieuthier
 
instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1Afonso Fernandes
 
Angularjs in mobile app
Angularjs in mobile appAngularjs in mobile app
Angularjs in mobile appYvonne Yu
 
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Intel Software Brasil
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicFelipe Renan Vieira
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoWilliam Ribeiro da Silva
 
[Geral] colaboradores engajamento
[Geral] colaboradores   engajamento[Geral] colaboradores   engajamento
[Geral] colaboradores engajamentoRangel Torrezan
 
Criando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkCriando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkJoão Gabriel Lima
 
Facilitando sua vida com WP Customizer
Facilitando sua vida com WP CustomizerFacilitando sua vida com WP Customizer
Facilitando sua vida com WP CustomizerEmerson Thompson
 
Contruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual StudioContruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual StudioWennder Santos
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5Rodrigo Cascarrolho
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache CordovaIvano Malavolta
 

Destaque (17)

Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
Desenvolvimento Mobile Hibrido com Ionic e Angular - TDC Floripa 2015
 
Ionic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento MobileIonic + Cordova para Desenvolvimento Mobile
Ionic + Cordova para Desenvolvimento Mobile
 
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e IonicCurso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
Curso de Desenvolvimento de Aplicativos Híbridos com PhoneGap/Cordova, e Ionic
 
Offline apps Using Ionic Framework and PouchDB
Offline apps  Using Ionic Framework and PouchDBOffline apps  Using Ionic Framework and PouchDB
Offline apps Using Ionic Framework and PouchDB
 
Porque você deveria usar IONIC
Porque você deveria usar IONICPorque você deveria usar IONIC
Porque você deveria usar IONIC
 
Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!Dafiti App Android: Um app robusto mas sem sair da moda!
Dafiti App Android: Um app robusto mas sem sair da moda!
 
instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1instalação do phonegap(cordova) no windows 8.1
instalação do phonegap(cordova) no windows 8.1
 
Angularjs in mobile app
Angularjs in mobile appAngularjs in mobile app
Angularjs in mobile app
 
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
 
Desenvolvimento Mobile com Ionic
Desenvolvimento Mobile com IonicDesenvolvimento Mobile com Ionic
Desenvolvimento Mobile com Ionic
 
Desmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbridoDesmistificando o desenvolvimento de mobile híbrido
Desmistificando o desenvolvimento de mobile híbrido
 
[Geral] colaboradores engajamento
[Geral] colaboradores   engajamento[Geral] colaboradores   engajamento
[Geral] colaboradores engajamento
 
Criando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic FrameworkCriando Aplicações Mobile Híbridas com Ionic Framework
Criando Aplicações Mobile Híbridas com Ionic Framework
 
Facilitando sua vida com WP Customizer
Facilitando sua vida com WP CustomizerFacilitando sua vida com WP Customizer
Facilitando sua vida com WP Customizer
 
Contruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual StudioContruindo Aplicações móveis com o Cordova e o Visual Studio
Contruindo Aplicações móveis com o Cordova e o Visual Studio
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 

Semelhante a Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto

Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.jsDenis Velrino
 
SpringSource Tool Suite, tc Server e dm Server
SpringSource Tool Suite, tc Server e dm ServerSpringSource Tool Suite, tc Server e dm Server
SpringSource Tool Suite, tc Server e dm ServerDr. Spock
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Frameworkelliando dias
 
Spring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosSpring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosphelypploch
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLIVanessa Me Tonini
 
Vapor 3: Reutilizando o model de backend para o seu app.
Vapor 3: Reutilizando o model de backend  para o seu app.Vapor 3: Reutilizando o model de backend  para o seu app.
Vapor 3: Reutilizando o model de backend para o seu app.Michel Anderson Lütz Teixeira
 
Escreva aplicações web assíncronas com python3 + tornado
Escreva aplicações web assíncronas com python3 + tornadoEscreva aplicações web assíncronas com python3 + tornado
Escreva aplicações web assíncronas com python3 + tornadoWilson Júnior
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
Preparar o ambiente para desenvolvimento angular
Preparar o ambiente para desenvolvimento angularPreparar o ambiente para desenvolvimento angular
Preparar o ambiente para desenvolvimento angularNize Costa
 
Dockerizando aplicações em uma fintech o bom, o mau e o feio as surpresas
Dockerizando aplicações em uma fintech  o bom, o mau e o feio as surpresasDockerizando aplicações em uma fintech  o bom, o mau e o feio as surpresas
Dockerizando aplicações em uma fintech o bom, o mau e o feio as surpresasRafael Gomes
 
Entre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando GearmanEntre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando GearmanElton Minetto
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com AngularElmano Cavalcanti
 
Dockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechDockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechRafael Gomes
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + FirebaseBruno Catão
 

Semelhante a Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto (20)

Desafio Rest API
Desafio Rest APIDesafio Rest API
Desafio Rest API
 
Aula Ruby
Aula RubyAula Ruby
Aula Ruby
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Python 08
Python 08Python 08
Python 08
 
SpringSource Tool Suite, tc Server e dm Server
SpringSource Tool Suite, tc Server e dm ServerSpringSource Tool Suite, tc Server e dm Server
SpringSource Tool Suite, tc Server e dm Server
 
TDC São Paulo 2019 - Vapor
TDC São Paulo 2019 - VaporTDC São Paulo 2019 - Vapor
TDC São Paulo 2019 - Vapor
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Spring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutosSpring Boot - Uma app do 0 a Web em 30 minutos
Spring Boot - Uma app do 0 a Web em 30 minutos
 
Web Services
Web ServicesWeb Services
Web Services
 
Desenvolvendo com Angular CLI
Desenvolvendo com Angular CLIDesenvolvendo com Angular CLI
Desenvolvendo com Angular CLI
 
Vapor 3: Reutilizando o model de backend para o seu app.
Vapor 3: Reutilizando o model de backend  para o seu app.Vapor 3: Reutilizando o model de backend  para o seu app.
Vapor 3: Reutilizando o model de backend para o seu app.
 
Escreva aplicações web assíncronas com python3 + tornado
Escreva aplicações web assíncronas com python3 + tornadoEscreva aplicações web assíncronas com python3 + tornado
Escreva aplicações web assíncronas com python3 + tornado
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Preparar o ambiente para desenvolvimento angular
Preparar o ambiente para desenvolvimento angularPreparar o ambiente para desenvolvimento angular
Preparar o ambiente para desenvolvimento angular
 
Dockerizando aplicações em uma fintech o bom, o mau e o feio as surpresas
Dockerizando aplicações em uma fintech  o bom, o mau e o feio as surpresasDockerizando aplicações em uma fintech  o bom, o mau e o feio as surpresas
Dockerizando aplicações em uma fintech o bom, o mau e o feio as surpresas
 
Entre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando GearmanEntre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando Gearman
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Ajax
AjaxAjax
Ajax
 
Dockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechDockerizando aplicações em uma Fintech
Dockerizando aplicações em uma Fintech
 
Ionic 2/3 + Firebase
Ionic 2/3 + FirebaseIonic 2/3 + Firebase
Ionic 2/3 + Firebase
 

Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto

  • 1. Ionic Framework Parte 1 Iniciando um Projeto mais Robusto
  • 2. Instalação • Download do Node.JS http://nodejs.org/download/ • Instale o Node.JS • Abra o terminal (command line / prompt) • Em caso de estar utilizando o Windows, recomendo que faça o download do Git (terminal: Git Bash) ou utilize o Vagrant. Deixarei estas duas alternativas para outro tutorial, caso não conheçam. • > npm install -g cordova ionic bower ios-sim • Instalação do Cordova (base nativa para execução do app), Ionic e Bower.
  • 3. Criar App • No terminal: • > ionic start myApp [blank / tabs / sidemenu] • > ionic platform add [android / ios / browser] • > bower install ngCordova (biblioteca do Cordova para AngularJS) • > ionic build [android / ios / browser] • > ionic emulate [android / ios / browser] • Possível erro na emulação do iOS: • Solução: • > cd platform/ios/cordova/ • > sudo chmod 777 emulate
  • 4. Algumas Dicas • O Ionic Framework utiliza AngularJS, ou seja, é extremamente interessante conhecer pelo menos o básico deste Framework JS para utilizar adequadamente a ferramenta. • Sugiro não utilizar o jQuery (muito utilizado para web) pela lentidão que causa no Web App. • Fique atento à qualquer Framework de CSS que queira utilizar para, também, não causar muita lentidão. Afinal, o usuário mobile é impaciente. • Para desenvolver para iOS é necessário um Mac. • O Ionic Framework possui sua própria documentação de layout: • http://ionicframework.com/docs/components/ • http://ionicons.com • http://ionicframework.com/html5-input-types/
  • 5. Pull to Refresh O Ionic possui uma facilidade enorme para inserir o Pull to Refresh no aplicativo. Digamos que seus criadores já pensaram na sua necessidade. Para o Front-End, logo após a abertura da tag <ion-list>, insira: <ion-refresher pulling-text=“Pull to Refresh" on-refresh=“doRefresh()"></ion-refresher> O atributo on-refresh fará a ligação com o controller do AngularJS para tratar quando o efeito é executado. Portanto, no Back-End, no controller correspondente do template em que você inseriu a tag acima, adicione, por exemplo: $scope.doRefresh = function() { $scope.playlists.unshift({title: 'Incoming todo ' + Date.now(), id: 7}); $scope.$broadcast('scroll.refreshComplete'); $scope.$apply(); }; Onde, $scope.playlists é uma lista já definida no controller, como: $scope.playlists = [ { title: 'Reggae', id: 1 }, { title: 'Chill', id: 2 }, { title: 'Dubstep', id: 3 }, { title: 'Indie', id: 4 }, { title: 'Rap', id: 5 }, { title: 'Cowbell', id: 6 } ]; OBSERVAÇÃO VALIOSA: Seguindo o tutorial desde o início e criando o app como informei no estilo de sidemenu, o aplicativo já possuirá uma função playlists de DEMO.
  • 6. HTTPRequest Vamos continuar utilizando o exemplo anterior das listas, em que incluímos o Pull to Refresh. No Back-End, na função doRefresh, que é executada à interação do usuário, vamos executar um HTTPRequest que obterá mais itens do Server-side e alimentar nossa lista. Na declaração do controller, adicionaremos $http, feature do AngularJS responsável para a execução de GET e POST, como parâmetro para a função. .controller('PlaylistsCtrl', function($scope, $http) { … } Iniciamos a função, em seguida incluiremos o código do HTTPRequest, ou Ajax, se preferir. $scope.doRefresh = function() { // Execute um HTTPRequest informando que está sendo enviado um JSON como parâmetro // e aguardando um JSON como resposta var httpResponse = $http.post("http://www.example.com", { params: { lastId: 6, } }); // Tratamento da resposta em caso de sucesso httpResponse.success(function (data) { // para cada item, adicione-o na lista angular.forEach(data, function(item, key) { $scope.playlists.push({ title: item.text, id: item.id, }); }); }); // Em seguida, formalize as modificações para as mesmas aparecerem no front-end $scope.$broadcast('scroll.refreshComplete'); $scope.$evalAsync(); }
  • 7. CONCLUSÃO Espero que tenham gostado dessa primeira parte. As dicas e funções Pull-to-Refresh e HTTPRequest são essenciais para qualquer projeto que contenha listas e dependência de dados externos para alimentar o aplicativo. Ou seja, praticamente a maioria. Existem outras dicas válidas que virão no futuro. Good Codes! ~ Alamo P. Saravali @alamosaravali http://fb.me/alamosaravali https://br.linkedin.com/in/alamosaravali