destaque

Mobile: Criando uma Aplicação Mobile do Catálogo de Imóveis com Ionic

Nesta série de artigos criamos um catálogo de imóveis onde utilizamos o PHP e o framework Phreeze para construção do Backend como visto neste artigo Artigo 1 – Criando o Backend e criamos um Frontend utilizando o AngularJS com um tema Bootstrap conforme podemos ver no artigo Artigo 2 – Criando o Frontend .

Como último artigo deste nosso catálogo de imóveis vamos criar a aplicação Mobile para visualização e pesquisa de imóveis no mesmo serviço que utilizamos no Backend e Frontend. Utilizei como tecnologia mobile o framework Ionic que é um framework voltado para o desenvolvimento de aplicativos híbridos, com a facilidade de utilização de tecnologias web para o desenvolvimento de aplicações para dispositivos móveis.

Mas o que são aplicações Híbridas?

Há dois tipos de aplicações para dispositivos móveis no mercado, as nativas e as hibridas. Nativas são as aplicações que utilizam como tecnologia de desenvolvimento a linguagem especifica de determinado sistema operacional. Se você for desenvolver nativamente para iOS, você deverá utilizar a linguagem Swift, a linguagem oficial de programação da Apple.

O problema é que com a quantidade de sistemas para dispositivos móveis presentes no mercado tais como Windows Phone, Android e iOS por exemplo, desenvolver aplicações para cada um desses sistemas pode se tornar algo inviável devido ao custo de desenvolvimento e manutenção caso o desenvolvedor conheça apenas uma linguagem de programação nativa.

As aplicações hibridas buscam centralizar todo o desenvolvimento em um único repositório e a compilação e empacotamento da aplicação fica dependendo apenas do sistema operacional compatível para tal tarefa. Se você for compilar a aplicação para iOS, deverá possuir um PC com o sistema operacional da Apple. No caso do Windows Phone, a exigência é um PC rodando Windows 8 com visual studio 2015 e por fim, no caso do Android será necessário a instalação do Android Studio.

Os aplicativos híbridos utilizam basicamente html, css e javascript no seu desenvolvimento. Isso é possível pois a aplicação roda dentro de uma webview que simula um navegador web no dispositivo em forma de aplicação nativa. É quase impossível diferenciar um aplicativo hibrido de um nativo visto que com os frameworks atuais, é possível utilizar todos os recursos do dispositivo como por exemplo localização, microfone, notificações, acelerômetro e câmera.

Para se ter ideia, há pouco tempo atrás o aplicativo do Facebook baixado nas lojas era hibrido. O mesmo só foi reconstruído de forma nativa pois devido a seu grande processamento e utilização, ele seria mais performático se construído desta forma.

Com base nessas informações, é possível observar que de um modo geral, para a maioria das aplicações, o uso hibrido de desenvolvimento pode se tornar um aliado na concepção de novas apps.

Criando nossa Aplicação

Para criar a nossa aplicação, primeiramente você deve baixar e instalar o nodejs visitando este site NodejsNodejs. No site você poderá entender melhor o nodejs visto que nosso foco é desenvolver uma aplicação mobile.

Após instalar o nodejs, abra o terminal e digite o comando abaixo para instalarmos o ionic framework e Apache Cordova.

npm install –g cordova ionic

 

Aguarde, este processo pode demorar alguns minutos. Após a conclusão da instalação, você deve fechar e abrir novamente o terminal para que os comandos do Ionic e do Cordova estejam disponíveis no terminal.

Agora vamos criar nosso primeiro projeto no Ionic. O Ionic possui três “modelos” de aplicativos. É possível gerar três tipos de aplicação por default conforme exemplo abaixo extraído do site Iniciando com Ionic

blank-app

ionic start [suaApp] blank

tabs-app

ionic start [suaApp] tabs

menu-app

ionic start [suaApp] sidemenu

Vamos agora criar nosso projeto. Escolhi usar o template com menu onde teremos uma página principal com informações da aplicação e total de imóveis cadastrados além da lista de imóveis com a possibilidade de busca de imóveis e detalhamento de cada um.

F:\socialApp>ionic start appImoveis sidemenu

Vá ao diretório do aplicativo criado e digite o comando:

F:\socialApp\appImoveis>ionic serve –lab

Veja que é exibido um “emulador” no navegador com duas interfaces referentes a um aparelho Android e outro aparelho “rodando” iOS conforme a Figura 1. O uso deste recurso, facilita e agiliza o desenvolvimento visto que é possível verificar o resultado das modificações no código em tempo real.

Figura 1

Figura 1. Aplicação gerada com menus.

Já temos nossa aplicação criada com um menu e alguns exemplos de código, criei desta forma apenas para demonstrar a facilidade do uso do Ionic para criar a aplicação mobile.

Veja que conforme a Figura 2, o Ionic gera a aplicação baseada em AngularJS, sendo assim, já estamos familiarizados com o desenvolvimento. Mãos à obra!

Figura2

Figura 2. Estrutura gerada.

Vamos ajustar nossa aplicação modelo para deixarmos com o código realmente necessário para nossa aplicação renomeando os arquivos e excluindo os arquivos desnecessários para nossa app.

Passo 1: Renomeie o arquivo search.html para home.html. Ele será nosso arquivo de entrada da aplicação.

Passo 2: Renomeie o arquivo playlists.html para imoveis.html. Este arquivo será responsável pelo carregamento da lista de imóveis do nosso app.

Passo 3: Renomeie o arquivo playlist.html para imovel.html. Quando clicarmos em um item da lista, este arquivo será chamado e irá detalhar nosso imóvel.

Passo 4: Exclua o arquivo login.html e browse.html.

Passo 5: Abra o arquivo menu.html e modifique o mesmo para exibir apenas os itens Home e Imóveis. Modifique também as rotas dos itens. Seu menu ficará conforme código abaixo:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-balanced">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">

<h1 class="title">Menu</h1>

    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/home">
          Home
        </ion-item>
        <ion-item menu-close href="#/app/imoveis">
          Imóveis
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Passo 6: Abra o arquivo app.js. Vamos modificar as rotas para os novos arquivos além de mudar o nome das rotas adequando-as as nossas necessidades. Também criei as URLs de acesso as APIs que vou utilizar neste exemplo.

//Inicio a aplicacao informando os modulos utilizados que sao controle e services.
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

  //Crio uma constante para inserir aqui as urls utilizadas nos meus services
  .constant("apiUrl",(function() {
    var resource = 'http://www.ticarpa.com.br/demo/imoveis/';
    return {
      //Note que desta vez inseri o filtro na aplicacao
      RETORNA_IMOVEIS: resource + "api/imovels?filter=:filtro",
      RETORNA_IMOVEL: resource + "api/imovel/:id"
    }
  })())

  //Metodo de inicio da aplicacao. Padrao da criacao da app
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

  //Configuracao das rotas
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    //Rota inicial apontando para o menu que e o template padrao da app
    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

    //Rota para pagina home
  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'templates/home.html'
      }
    }
  })

    //Rota para lista de imoveis
   .state('app.imoveis', {
      url: '/imoveis',
      views: {
        'menuContent': {
          templateUrl: 'templates/imoveis.html',
          controller: 'ImoveisCtrl'
        }
      }
    })

    //Rota para o detalhe do imovel. Note que passo o id do imovel selecionado
  .state('app.imovel', {
    url: '/imovel/:id',
    views: {
      'menuContent': {
        templateUrl: 'templates/imovel.html',
        controller: 'ImovelCtrl'
      }
    }
  });
  // Quando entrar na aplicacao ou der algum erro redirecionara para esta rota
  $urlRouterProvider.otherwise('/app/home');
});

Passo 7: Abra o arquivo imoveis.html e inclua o código abaixo. Basicamente este código disponibiliza a lista de imóveis com a opção de busca através de um campo texto. Ao clicar em um imóvel, os detalhes do mesmo será exibido.

<ion-view title="Imóveis">

  <div class="bar bar-subheader item-input-inset">
    <div class="item-input-wrapper">
      <i class="icon ion-ios7-search placeholder-icon"></i>
      <input id="textoBusca" type="search" placeholder="Buscar" ng-model="textoBusca" autocorrect="off" >
      <button class="button button-clear" ng-click="limparBusca()">X</button>
    </div>
    <button class="button button-clear" ng-click="buscar()">Buscar</button>
  </div>

  <ion-content class="has-header has-subheader">
    <ion-list>
      <ion-item ng-repeat="imovel in imoveis.rows" type="item-text-wrap" class="item item-thumbnail-left"
                href="#/app/imovel/{{imovel.id}}">
        <img src="{{imovel.imagem}}"/>
        {{imovel.titulo}}
        <p>{{imovel.descricao}}</p>
      </ion-item>
    </ion-list>
  </ion-content>

</ion-view>

Passo 8: Edite o arquivo imóvel.html e modifique o arquivo para o código a seguir. Veja que neste caso, o imóvel selecionado será exibido com as informações do mesmo.

<ion-view title="Detalhe do Imóvel">
  <ion-content has-header="true" padding="true">
    <div class="list card">
      <div class="item item-divider">
        <h2 style="text-align: center;">{{imovel.titulo}}</h2>
      </div>
      <div class="item item-body">
        <img class="full-image" src="{{imovel.imagem}}">
        <p>
          {{imovel.descricao}}
        </p>
      </div>
      <div class="item">
        <h3  style="text-align: center;">Valor: R$ {{imovel.valor}}</h3>
      </div>
    </div>
      <div class="list card">
        <a class="item item-icon-left" href="tel: {{imovel.telefoneContato}}"><i class="icon ion-android-call"></i>Ligar<p>{{imovel.telefoneContato}}</p></a>
        <a class="item item-icon-left" href="sms: {{imovel.telefoneContato}}"><i class="icon ion-chatbox-working"></i>SMS<p>{{imovel.telefoneContato}}</p></a>
        <a class="item item-icon-left" href="mailto: {{imovel.emailContato}}"><i class="icon ion-email"></i>Email<p>{{imovel.emailContato}}</p></a>
      </div>
  </ion-content>
</ion-view>

Passo 9: Abra o arquivo controller.js. Basicamente vamos utilizar o código criado no tutorial de AngularJS. Comentei o código para um melhor aprendizado. Em caso de dúvidas, comente no final deste artigo.

//Inicio o modulo de controle
angular.module('starter.controllers', [])


  //Controle padrao da app
  .controller('AppCtrl', function($scope) {

  })

  //Controle para lista de imoveis
  .controller('ImoveisCtrl', function ($rootScope, $stateParams, $scope, ImoveisService) {
    //Campo de busca de imoveis
    $scope.textoBusca = "";

    //Realizo a limpeza do campo e busco de novo
    $scope.limparBusca = function () {
      $scope.textoBusca = "";
      $scope.imoveis = ImoveisService.query();
    }

    //Realizo a busca passando o texto da busca
    $scope.buscar = function () {
      $scope.imoveis = ImoveisService.query({filtro: $scope.textoBusca});
    }

    //Caso nao seja selecionado a busca este sera o metodo padrao de busca
    $scope.imoveis = ImoveisService.query();
  })

  //Controle referente ao detalhe do imovel
  .controller('ImovelCtrl', function($scope, $stateParams, ImovelService) {

    //Metodo da busca de imovel padrao
    $scope.imovel = ImovelService.show({id: $stateParams.id});
  });

Passo 10: Edite o arquivo services.js. Veja que ele é praticamente idêntico ao exemplo do AngularJS onde criamos um Frontend.

//Inicio o modulo de servico utilizando o ngResource para as chamadas http
angular.module('starter.services', ['ngResource'])

    //Realiza busca de imoveis
    .factory('ImoveisService', function ($resource, apiUrl) {
      return $resource(apiUrl.RETORNA_IMOVEIS, {}, {
        query: { method: 'GET'}
      })
    })

    //Realiza a busca do imovel
    .factory('ImovelService', function ($resource, apiUrl) {
      return $resource(apiUrl.RETORNA_IMOVEL, {}, {
        show: { method: 'GET' }
      })
    });

Nossa estrutura ficou conforme figura 3.

figura 3

Figura 3. Estrutura Modificada.

Vamos ver como ficou nosso exemplo rodando. Digite o comando:

F:\socialApp\appImoveis>ionic serve –lab

O resultado pode ser observado nas imagens abaixo.

figura4
Figura5
Figura6
Figura7

Vamos agora, melhorar de forma bem básica nossa página Home. Coloquei meu nome e meu avatar na parte superior da página inicial. Inseri um ícone na parte central e uma breve descrição da aplicação na parte central. Na parte inferior, inseri um botão para redirecionar para meu site.

<ion-view view-title="App Imóveis Exemplo">
  <ion-content>
    <div class="list card">

      <div class="item item-avatar">
        <img src="img/avatar.jpeg">
        <h2>Tiago Carpanese</h2>
        <p>Autor Deste Tutorial</p>
      </div>

      <div class="item item-body">
        <img class="full-image" src="img/home_icon.png">
        <p>
          Esta é uma aplicação exemplo para demonstrar o uso do Ionic Framework para construir aplicações híbridas.
          Todas as informações aqui presentes são fictícias.
        </p>
        <a href="http://www.ticarpa.com.br" class="button button-block button-balanced">
          Visite o Site
        </a>
      </div>

    </div>
  </ion-content>
</ion-view>

Como uso o verde para meus exemplos, mudei as cores do header e do meu botão para a class “balanced” e o resultado pode ser conferido na Figura 8.

Figura8

Figura 8. Home

Por último, resolvi inserir o botão de compartilhamento social. Para isto, siga os seguintes passos.

Passo 1: Adicione o plugin Social Sharing do Apache Cordova. Na linha de comando, digite:

F:\socialApp\appImoveis>cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

Passo 2: Adicione o ngCordova com o comando abaixo:

F:\socialApp\appImoveis>bower install ngCordova

Passo 3: Inclua as libs do Social Sharing e do ngCordova conforme abaixo no index.html

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/cordova-plugins/js/SocialSharing.js"></script>

Passo 4: Inclua a função que chamará o compartilhamento nativo do celular. Seu controller.js ficará assim:

//Inicio o modulo de controle e uso o ngCordova que sera usado no compartilhamento
angular.module('starter.controllers', ['ngCordova'])


  //Controle padrao da app
  .controller('AppCtrl', function($scope) {

  })

  //Controle para lista de imoveis
  .controller('ImoveisCtrl', function ($rootScope, $stateParams, $scope, ImoveisService) {
    //Campo de busca de imoveis
    $scope.textoBusca = "";

    //Realizo a limpeza do campo e busco de novo
    $scope.limparBusca = function () {
      $scope.textoBusca = "";
      $scope.imoveis = ImoveisService.query();
    }

    //Realizo a busca passando o texto da busca
    $scope.buscar = function () {
      $scope.imoveis = ImoveisService.query({filtro: $scope.textoBusca});
    }

    //Caso nao seja selecionado a busca este sera o metodo padrao de busca
    $scope.imoveis = ImoveisService.query();
  })

  //Controle referente ao detalhe do imovel
  .controller('ImovelCtrl', function($scope, $stateParams, ImovelService, $cordovaSocialSharing) {

    //Funcao que realiza o compartilhamento ao clicar no botao nao realizei tratamento de erros
    $scope.compartilhar = function (mensagem, assunto, imagem, link) {
      $cordovaSocialSharing
        .share(mensagem, assunto, imagem, link) // Share via native share sheet
        .then(function(result) {
        }, function(err) {
        });
    }

    //Metodo da busca de imovel padrao
    $scope.imovel = ImovelService.show({id: $stateParams.id});
  });

Passo 5: Inclua o botão chamando a função de compartilhamento passando os parâmetros. Seu imovel.html ficará assim:

<ion-view title="Detalhe do Imóvel">
  <ion-content has-header="true" padding="true">
    <div class="list card">
      <div class="item item-divider">
        <h2 style="text-align: center;">{{imovel.titulo}}</h2>
      </div>
      <div class="item item-body">
        <img class="full-image" src="{{imovel.imagem}}">
        <p>
          {{imovel.descricao}}
        </p>
      </div>
      <div class="item">
        <h3  style="text-align: center;">Valor: R$ {{imovel.valor}}</h3>
      </div>
    </div>
      <div class="list card">
        <a class="item item-icon-left" href="tel: {{imovel.telefoneContato}}"><i class="icon ion-android-call"></i>Ligar<p>{{imovel.telefoneContato}}</p></a>
        <a class="item item-icon-left" href="sms: {{imovel.telefoneContato}}"><i class="icon ion-chatbox-working"></i>SMS<p>{{imovel.telefoneContato}}</p></a>
        <a class="item item-icon-left" href="mailto: {{imovel.emailContato}}"><i class="icon ion-email"></i>Email<p>{{imovel.emailContato}}</p></a>
      </div>
      <div style="text-align: center;">
        <button class="button button-outline icon-right ion-share button-balanced" ng-click="compartilhar(imovel.descricao, imovel.titulo, imovel.imagem, 'http://www.ticarpa.com.br')">
          Compartilhar
        </button>
      </div>
  </ion-content>
</ion-view>

Vamos agora realizar o teste da nossa aplicação no emulador do android. Para isso, siga os passos.

Passo 1: Adicione a plataforma Android. Você deve ter o Android Studio instalado no seu computador. Caso você não tenha, baixe e instale clicando aqui Android SDK

Passo 2: Adicione a plataforma na sua aplicação. No terminal digite:

F:\socialApp\appImoveis>ionic platform add android

Passo 3: Empacote a aplicação com o comando abaixo:

F:\socialApp\appImoveis>ionic build android

Passo 4: Simule um cellular android no seu PC digitando:

F:\socialApp\appImoveis>ionic emulate android

Por fim, vamos deixar a nossa aplicação mais profissional criando a imagem de abertura da aplicação e o ícone da mesma. Utilizei os templates do Ionic para esta tarefa, você pode baixar o template para o ícone aqui Icon.psd e o do splash (tela inicial da app) aqui Splash.psd. Você pode baixar os arquivos prontos nestes links: Splash.png e Icon.png.

Coloque as imagens na pasta appImoveis/resources e digite o comando abaixo:

F:\socialApp\appImoveis>ionic resources

O Ionic irá gerar as imagens e ícones em diferentes tamanhos para que de acordo com cada dispositivo, os ícones e splashes se adeque a resolução da tela.

Por fim, vou compilar e testar minha aplicação no meu dispositivo.

Para compilar vamos usar novamente o comando:

F:\socialApp\appImoveis>ionic build android

Recebi a mensagem de sucesso com a localização da minha aplicação. Vou instalar a mesma com o cabo de dados.


BUILD SUCCESSFUL

Total time: 7.476 secs

Built the following apk(s):

F:\socialApp\appImoveis\platforms\android\build\outputs\apk\android-debug.apk

Note que no detalhe do imóvel é possível clicar nos links de chamada, sms e e-mail fazendo com que a aplicação chame as funcionalidades nativas do celular como a discagem de chamadas, envio de SMS e cliente de e-mail.

Abaixo, seguem as imagens das capturas realizadas do meu dispositivo.

Você pode baixar a aplicação no seu Android pelo link Baixar App Android e o código fonte Baixar Código Fonte

Finalizamos aqui mais um tutorial encerrando esta série. Criamos nosso Backend utilizando o Phreeze PHP em poucos minutos, depois criamos nosso Frontend utilizando AngularJS e Bootstrap e por fim nossa aplicação para dispositivos móveis. Espero que tenham gostado e em caso de dúvidas não deixem de comentar.

Tiago Carpanese
Tiago Carpanese
Criador deste site, apaixonado por tecnologia, busco contribuir para a segregação do conhecimento. Não deixe de curtir este site no Facebook clicando em Curtir na Barra da Direita. Siga-me no Twitter para ficar por dentro das novidades. Não deixe de comentar !
  • hpabrasil

    Ola amigo gostaria de implementar no meu banco de imoveis do meu site terias como mostrar a api que utilizas ? Obrigado e aguardo

  • edusalazar

    Boa Tarde, Tiago achei o seu tutorial fantástico é justamente o que estava procurando seguir o passo a passo e estava indo bem mais, me perdi e me deparei com algumas dificuldades.
    Thiago gostaria de desenvolver uma app no mesmo estilo dessa do app Imoveis mas com alguns recursos a mais tipo na parte das imagem colocar opção de varias imagens do imóvel, na parte do contato mais números de telefones visando que as imobiliárias geralmente tem varias opções de contatos a pergunta que não quer cala é você tem algum tutorial ou curso para desenvolver um app nesse formato ? Agradeço a paciência.

    • Tiago Carpanese

      Mas você quer ter isso na web também ou só aplicativo? Não tenho curso ainda. Posso fazer algo parecido se for aplicativo. Porém demoraria uns dias pois estou no meio de um tutorial de finanças pessoais.

      • edusalazar

        Oi thiago como vai ? Então seria na web para que eu possa alimenta, ( alterar ) conforme a necessidade, sei que o amigo é bastante o culpado mas se poder me auxiliar eu te agradeço.

        Se der pra fazer uma adaptação desse projeto do app imóveis par que possamos guanhar tempo acredito q fica mais fácil

        Thiago em relação ao custo dessa adaptação, fique tranquilo estou disposto a recompesa-lo pelo seu serviço, preciso apenas que o amigo me passe o valor e pra quando você poderá fazer, obrigado pela atenção.

        Em 04/01/2016 18:13, “Disqus” escreveu:

  • Francisco Diniz

    Tiago, primeiramente, parabéns pelo tutorial! Totalmente didático, claro, bem escrito e direto ao ponto! Resolveu alguns dos problemas dos tutoriais que existem por aí!
    Recomendo sempre colocar bem no início do tutorial qual o resultado final, para que as pessoas saibam bem do que se trata.

    Uma dúvida sobre o sistema de login feito no Phreeze… qual a senha para o usuário ‘admin’, por favor?
    Tentei senha ‘admin’ e não deu certo. Tentei o mesmo para ‘demo’ e não deu certo.

    No mais, obrigado e parabéns mais uma vez!

    • Tiago Carpanese

      Olá amigo.

      Para ambos os casos a senha é “pass”

      Usuário de Admin:
      Usuário: admin
      Senha: pass

      Abraço

      • Francisco Diniz

        Muito obrigado, Tiago!

  • Rodrigo Luan

    acrescentei alguns campos no banco, agora o app não lê os dados, mesmo não alterando os campos ja existentes, eu teria que fazer alguma modificação em outros arquivos?
    OBS: quando eu linko no seu site, funciona, ja chequei o caminho do banco, mas o banco nao é o mesmo nome

  • Paulo

    Olá! Eu digito ionic serve –lab, mas não abre o emulador. Excluí o primeiro APP criado. Criei outro com outro nome. Mas, mesmo assim, não abre. Eu acesso http://localhost:8100 e exibe a página, mas não o emulador. O que pode estar ocorrendo?

    • Tiago Carpanese

      Olá.
      Então o comando é: ionic serve –lab

      Note que são dois sinais de menos e não apenas um. Tente assim.

      Abraço

  • Emanoel

    Obrigado e parabéns.
    Pretende lançar outro tutorial neste tema?

    • Tiago Carpanese

      Bom Dia. O Ionic encontra-se na versão 2 em fase beta. Estou finalizando uma aplicação starter para o Ionic utilizando a plataforma OSclass como Backend. A aplicação está bem completa porém, ela será vendida na Loja do Ionic como Starter.

      Após isso, realizarei a construção de um novo tutorial voltado para o uso de SQLite.

      Vou postar a starter aqui assim que terminar.

  • Roosevelt Ferreira Junior

    Tiago, boa tarde.
    Infelizmente não consigo passar do passo 10.
    Você falou para editar o services.js mas eu não tinha o arquivo e criei como você citou acima.
    Quando tento rodar a aplicação, ela apresenta vários erros:

    ionic.bundle.js:13443 Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
    Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
    Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
    Error: [$injector:nomod] Module ‘ngResource’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.5.3/$injector/nomod?p0=ngResource

    Isso aqui ainda é pouco, mas acredito que o erro seja justamente ao instanciar os módulos.

    O que faço?

    Obrigado!

  • Itamar PS

    Tiago, eu seguir todos os passos do tutorial, comparei o código com o seu e a página do app quando carrega está sempre em branco. Acredito que faltou algum detalhe mais eu não conseguir identificar

    • Tiago Carpanese

      Veja no console do chrome, ele vai mostrar o erro.

  • Iago Campos

    Tentei fazer a aplicação e não mostrou os dados cadastrados no app. Para ver se eu estava cometendo algum erro, baixei todos os seus códigos pronto e executei, quando pesquisa o que você cadastrou como exemplo, executa e mostra todos os imóveis quando eu mudo a “var resource” para minha url não aceita, o app de celular não mostra os dados cadastrados.Por favor ajude, o que pode ser? Tenho que mudar mais alguma coisa para que ele busque os dados dentro do meu servidor?

    • Tiago Carpanese

      Você liberou o CORS filter da sua URL? Qual o erro do console?

      • Alexandre dos Santos

        Olá Tiago,

        Acho que estou com o mesmo problema do Iago, testando o app no ionic serve funciona direito, porem quando executo o app pelo celular não carrega os dados.
        Tem alguma dica?

        *Estou utilizando as tuas APIS

  • Benevalter Bento Jr

    Olá Tiago,
    Ja possuo uma base de dados com as informações que preciso, e ja tenho um cadastro de usuários do meu site, consigo utilizar nesse app? Outra coisa, como coloco login e cadastro para os meus usuários aproveitando minha base?
    Agradeço se puder me ajudar.

    • Tiago Carpanese

      No caso, teria que fazer um app amigo. Este é um start para começar a entender. Porém, recomendo o Ionic 2 para criar um novo aplicativo, é muito mais tranquilo e a performance é incomparável.

  • Cristiano Mendes

    no app.js estou tentando colocar a minha url com o exemplo criado funciona tudo, mas no app não lista, parece que não está consumindo o jSon, troco http://www.ticarpa.com.br/demo/imoveis/ pela minha url mas não da cereto, tem alguma coisa de diretório? o composer.json fica na raiz do app mesmo?