global_436645539

Integrando: PhoneGap e AngularJs

Continuando a serie desenvolvimento mobile com Ionic, Angulajs, Cordova, Phonegap(Cordova ), começando pelo Cordova é o coração do Phonegap a base dele.

O Apache Cordova é um projeto open source que permite que envelopar um projeto Web em um App para vários Sistemas Operacionais Mobile como iOS, Android, Windows Phone, Firefox OS, Amazon Fire, Blackberry e etc. Phonegap é uma versão do Cordova criada pela Adobe com algumas alterações para funcionar com suas ferramentas como o Phonegap Build e outras mais.

1-) Vamos começar criando nosso projeto com o phonegap desta vez, bom as vantagens de se criar o projeto utilizando o phonegap são, poder utilizar a Phonegap Build e o PhoneGap Developer.

$ phonegap create myApp
$ cd myApp
$ phonegap platform add android
$ phonegap build android 

2-) Baixe e instale o PhoneGap Developer em seu dispositivo móvel , com ele economizamos o processo de  ter que ficar reinstalando o aplicativo ou usar um emulador pesado no micro:

$ phonegap serve

Na saída do comando será exibido o ip e a porta que foi ativado o serviço de livereload, abra o aplicativo e configure o aplicativo, mande conectar.

A partir de agora a cada alteração que o projeto tiver será atualizado automaticamente no seu celular.

3-) O Phonegap Build, é um ambiente remoto onde podemos fazer build de nossos aplicativos em várias plataformas, iOS, Android, WindowsPhone entre outras.

– Acesse build.phonegap.com e faça o cadastro na plataforma de  build da Adobe.

Quando tiver seu login e senha, você precisa fazer login via terminal, para isso, rode o comando e entre com seu usuário e senha.

$ phonegap remote login
$ phonegap remote build android

Em instantes seu aplicativo estará na plataforma de build da Adobe.

4-) Agora iremos configurar o AngularJs, primeiro vamos fazer o download no site oficial:

$ cd myApp/www/js
$ mv angular-1.4 angular

5-) No seu index.html, inclua o angular:

<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>

6-) Vamos criar algo simples, crie o arquivo js/app.js e inclua este código:

var app = angular.module("app", []);
app.controller("IndexController", function ($scope) {
    $scope.message = "AngularJS!";      
});

7-) No index.html, ficará assim:

<!DOCTYPE html>

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />      
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Vamos la</title>
    </head>
    <body>
        <div class="app" ng-controller="IndexController">

            <div id="deviceready" class="blink">
                <p class="event listening">Acessando</p>
                <div class="event received">
                    Pronto....
                    <h1>{{message}}</h1>
                    <input type="text" ng-model="message"/>
                </div>
            </div>
         </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/angular/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Na execução no celular veremos um input e um label populado com a informação declarada na controller do angularjs se alteramos o valor no input o label será automaticamente atualizado.

8-) Como um plus vou mostrar como criar um serviço simples de notificação, primeiro iremos criar uma factory que irá chamar a funcionalidade que emite um alerta na tela, segue o código:

app.factory("NotificationService", function () {
     return {
           alert: function (message, title, buttonText, buttonAction) {
               navigator.notification.alert(message,
                   function () {
                       $rootScope.$apply(function () {
                           buttonAction();
                       })
                   },
                   title,
                   buttonText);
           }
       }
});

9-) Injetamos o serviço criado em nossa controller e adicionaremos um botão no index.html:

var app = angular.module("app", []);
app.controller("IndexController", function ($scope,NotificationService) {
    $scope.message = "AngularJS!";

    $scope.showAlert = function () {
            NotificationService.alert("You caused an alert.", "Alert", "Ok", function () {
                $scope.message = "You clicked it!"
            })
        };
});
<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Vamos la</title>
    </head>
    <body>
        <div class="app" ng-controller="IndexController">

            <div id="deviceready" class="blink">
                <p class="event listening">Acessando</p>
                <div class="event received">
                    Pronto....
                    <h1>{{message}}</h1>
                    <input type="text" ng-model="message"/>
                </div>
            </div>

            <button class="btn" ng-click="showAlert()">Exibir</button>

        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/angular/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

 

 

 

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s