Blog

Série Ionic:Integrando Ionic com sua app AngularJS

ionic-angular-opti

Olá Pessoal,

Vamos ver da forma mais simples como é fácil fazer uma integração com o back-end usando ionic + angularjs. Vou considerar que vc já sabe como criar uma app no ionic. Para o exemplo aqui vou usar o template sidemenu do ionic.

lets go…

Passo 1

Crie um projeto sidemenu do ionic

Passo 2
Vamos criar o controller e dizer pra ele chamar o serviço web, ou seja, nossa api. Lembre-se de ter o serviço rodando.
No arquivo controllers.js gerado pelo ionic que já vem no template adicione, após o controller já gerado:

.controller('MainCtrl', function($scope, $http) {
$scope.teste='mobile'
$http.get('http://www.seuwebservice.com/saldo/conta/1').then(function(resp) {
console.log('Success', resp);
$scope.teste = resp;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})

 

Passo 3
Considerando que vc manteve os nomes que veio no template, no arquivo playlits adicione:

<div ng-controller="MainCtrl">
Saldo Atual R$ {{teste.data.saldo}}
</div>

O código completo ficando assim:

 

<ion-view view-title="Camilo App">
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}

</ion-item>
<div ng-controller="MainCtrl">
Saldo Atual R$ {{teste.data.saldo}}
</div>
</ion-list>
</ion-content>
</ion-view>

Passo 4

Vamos testar, basta digitar:

ionic serve

Para testarmos no browser

Passo 5
Observe que me retornou o valor do saldo da conta de um serviço que possuo:

 

ionicappcamilo

Vale lembrar que o objetivo aqui é mostrar a integração e funcionamento. O ideal é que você tenha um Service do lado do angularJS usando um factory do ngResource. Manter os controllers separados dos services e cada um com suas responsabilidades é uma boa prática. Em breve faço um post usando o ngResouce.

O projeto está no meu github.com/camilolopes

https://github.com/camilolopes/workspaceAngularJs
Espero que tenham gostado, simples demais né?

abraço, see ya!!

Série Ionic:Instalando Ionic no Windows 7

ionic-angular-opti

Olá Pessoal,

Tenho iniciado projetos na area de mobile. E para começar estamos com um projeto ionic + angularjs. Como já usamos angularJs aqui em todos os projetos adicionar o Ionic, nossa nem sentirmos o impacto. Isso é muito bom, para quem já é desenvolvedor AngularJS.

lets go…

Starting…

Vamos fazer as coisas da maneira mais simples possível.Quem usa Windows, vai sempre sofrer qdo precisa instalar algum modulo NPM sempre acontece alguma zica. Para quem usa Linux dificilmente terá problemas.

Vou considerar que você já tem o NodeJS instalado. Se não tive, faça a instalação.

Passo 1
No caso do windows eu uso o Git Bash para executar comandos linux. Também vou considerar que tenha o gitbash instalado.

Passo 2

Crie uma pasta algo como ionic e em seguida entre na pasta

Passo 3

No gitbash digite npm update -g e aguarde por minutos que depender da sua conexão vai demorar bastante.

Passo 4
Após terminar o update vamos instalar o cordova

npm install -g cordova

Passo 5

Agora o ionic

npm install -g ionic

Passo 6

Se tudo deu certo vamos criar uma app simples

ionic start myapp sidemenu

sidemenu é o template que queremos usar

Passo 7
entre na pasta myapp e digite

ionic serve

Assim vamos testar app no browser. No chrome eu uso um pluggin chamado ripple que permite testar com interface mobile.

 

ionicappcamilo

Pronto criamos uma app com ionic, e agora é só modificar. Basta verificar na documentação e veja como é simples fazer alterações.

abraços,

See ya!!

Série Ionic: Um pouco sobre o Ionic + AngularJS

ionic-angular-opti

olá Pessoal,

Hoje vou falar rapidamente sobre esse cara aqui Ionic. Que tem ganhando bastante popularidade quando
se fala em desenvolvimento mobile hibrido. Mas, a pergunta o que esse cara faz de tão especial?

lets go…

Vamos entender…

Há ainda uma confusão sobre o que é o Ionic, ele é tão simples que não parece verdade. Vou explicar  nesse post de forma pratica com o que vivemos aqui na ITSLabs. Ter adotado o AngularJS no passado como nosso framework de front-end, hoje tivemos o ganho em desenvolver mobile com Ionic, pois não precisamos fazer quase nada para ter uma app mobile, claro só o trampo de desenhar a cara da app. Mas,  toda camada de serviço, já veio de graça da app web.

O Ionic…

Nada mais é que um framework front-end para mobile. Pense nele como um angular-ui, bootstrap. Ele é html e css e feito em cima angularjs, ou seja, se vc já desenvolve com angularjs, não nada que aprender, apenas usar o Ionic como vc usa o bootstrap ou angular-ui. Agora se vc nunca viu angularjs, terá que aprender o framework da Google para entender o que é um controller, services, factory etc. E dai saber como usar o Ionic, senão ficará perdido e achar tudo confuso. Mas, é muito mais simples que possa imaginar. Fizemos uma app aqui em menos 5 min, já integrando com o serviço no server.

Nosso cenário aqui

Para ficar mais claro, aqui na ITSLabs temos projeto com java no back-end + angularjs se comunicando via rest com jersey. E nada demais aqui. Quando pensamos em fazer app mobile, dai veio e agora? o que aproveitar? Com ionic aproveitamos tudo, desde os controllers e serviços que criamos no front-end, até o serviço rest que disponibilizamos, então só nos preocupamos em fazer o design, ver os componentes disponiveis no Ionic e ter mais de uma versão da app com diferente UX para validar qual seria mais apropriado para o perifl do usuário que estaria usando a versão. Fizemos tudo isso em minutos.

E como testar?

Ah, isso aqui parece uma piada. Tem uma app no Google Play chamado de Ionic View que permite testar sua app no celular, isso mesmo. Veja como funciona:

1. voce baixa o ionic view para o seu celular IOS ou Android

2. Cria a conta no Ionic View

3.Faz o upload da app do Ionic

4. Pronto. Agora é so usar clicando em view no IonicView

Ele irá simular a APP. Observe que não fizemos deploy pra iOS,mas conseguimos simular no Iphone por exemplo. O resultado no iOS não é diferente da app final. Porém, achei problemas no tablet Android 4.1 da Samsung na hora de simular pelo IonicView ele deixou zicado o front-end. Ainda não sei o motivo, mas ao fazer deploy no apk por exemplo está tudo certo.

Essa é a forma mais simples de testar se não quiser ter um simulador local na máquina.

Iai curtiu o Ionic view? Olha aqui nossa app:https://www.facebook.com/usecash

No meu Github.com/camilolopes tem um app de exemplo:

https://github.com/camilolopes/workspaceAngularJs

Conclusão

Eu confesso que estou gostando muito da experiência de desenvolvimento e preparei uma série que vou trazer nela o que estamos fazendo aqui na ITSLabs, pois tudo que estamos fazendo aqui vai para produção. Próximo posts da série vamos ver instalação,um pouco de mão na massa,e depois vamos chegar o grande momento de deploy e opções que temos de fazer isso pra colocar nosso app na store da vida.

abraço, see ya!!!

Série Continuous Integration: Build a partir da Tag Github

jenkinslogo

Olá Pessoal,

O post de hoje vamos ver como fazer um build no Jenkins a partir de uma tag  do Github. Vou considerar que você já como configurar o seu job no Jenkins com o Git/Github.

Lets go…

 

Starting…

Uma hora você vai precisar fazer um build de uma tag, versão estável. Então como fazer isso  no Jenkins?Você pode pensar que é apenas informar */tags/nomedatag É bem simples veja os passos:

Passo 1

Instale o plugin Git parameter Plugin no Jenkins

Passo 2

Marque a  opção  : This build is parameterized. Vou considerar que você já tem a tag criada no seu repositório Github

jenkinstaggithub

Agora preencha conforme a imagem acima, observe que no campo tag filter, é o nome da tag que você deu. Em Branch coloque */tags

Passo 3

Agora em source code  management deixei conforme a imagem a seguir:

jenkinsgittagsource

O ponto mais importante aqui é informar em branch o parâmetro ${tag} que acabamos de crair no passo anterior.

Passo 4

Salve as alterações

Passo 5

Clique em Build with parameter  e escolha a tag que acabou de criar.

jenkinsgithubcheckouttag

Pronto agora é aguardar o build ser concluído e verificar no console  que o código está sendo baixado a partir da tag

Vou ficando por aqui e espero que tenham gostado do post.

Abraços, see ya!!

Série Continuous Integration: Criando uma tag no github via Jenkins

 

jenkinslogo

olá Pessoal,

Hoje vamos ver como criar uma tag em nosso projeto e publicar no github. Considerando que você já tem o seu ambiente Jenkins funcionando.

Lets go..
Starting…

Primeiro passo é instalar o plugin Git Publisher.

Passo 2

Após ter instalado o plugin vá no seu projeto e clique em configuration. Em sourceCode Management clique em Advanced

jenkinsgittagsourcecode

No campo Name que deve está vazio, informe o nome que desejar, eu coloco o nome do projeto.

Passo 3

Adicione um Post-build Actions Step e escolher Git Publisher

jenkinsgitpublisher

Observe que podemos ter um create new tag ou update new tag. Se for uma nova tag escola create new tag. Informe em Tag to Push como será o nome da sua tag.

O ponto mais importante aqui que temos é informar o repositorio que é feito em Target remote name onde informar o nome que definimos nos campo Name em source
code.

Passo 4

Feito isso, salve as alterações e iniciei o build. Após a conclusão do build a tag será criada no github, vá no repositorio e veja se a tag foi criada em
releases

jenkinstaggithubreleased

Simples não? Agora vc tem a criação de tags para o github automatizada.

abraços,