programación móvil para superhéroes

Presentado por:Isaac González

Programación móvil para superhéroes

• Ionic Framework• Angular

• Javascript

• HTML5

• CSS3

• API REST de Marvel

• Plataforma para el desarrollo de aplicaciones móviles con HTML5

• Cordova para compilar aplicaciones

• Vistas con AngularJS Optimizado

Module• Es un contendor para las diferentes partes de la aplicación (Controladores, servicios, filtros, etc..)

Service• Es donde se encuentra lógica de negocios independiente de la vista

Controller• Es donde se encuentra la lógica de negocios de la vista.

Scope• Es un objeto que hace referencia al modelo de la aplicación

Directives• Extensiones para HTML personalizadas (ng-repeat, ng-model y ng-click)

<ion-list>

<ion-item ng-repeat="superheroe in superheroes"href="#/app/superheroe/{{superheroe.id}}">

<div class="list card">

<div class="item ">

<h2>{{superheroe.name}}</h2>

</div>

<div class="item item-image">

<img src="{{superheroe.thumbnail.path + '.'+ superheroe.thumbnail.extension}}">

</div>

</div>

</ion-item>

</ion-list>

• Angular-https://www.codeschool.com/courses/shaping-up-with-angular-js

• Ionic Playground - http://play.ionic.io/

1. No se cuenta con un ambiente de desarrollo en Android o iOS configurado

2. Configuración del ambiente1. NodeJS2. NPM3. Android/iOS4. Cordova

3. Permisos Android

4. jQuery Offline

5. Run con Android Studio

HTTP [GET] JSON

• API REST JSON• API – Interfaz de Programación de Aplicaciones

• REST - Transferencia de Estado Representacional

• JSON – Notación para Objetos de JavaScript

• Información acerca de • Personajes

• Comics

• Creadores

• Eventos

• Series

• Historias

this.getTopTenCharacters = function() {

var data = {

ts: apiMarvelConfigService.marvelTimeStamp,

apikey: apiMarvelConfigService.marvelPublicKey,

hash: apiMarvelConfigService.marvelHash,

limit: "10",

orderBy: "-modified"

};

var params = "?" + $.param(data); // jQuery

return ($http.get(apiMarvelConfigService.marvelUrlAPI + '/characters' + params).then(handleSuccess, handleError));

};

marvelApp.controller(‘SuperheroesCtrl', [

'$scope', '$http', '$log', 'apiMarvelCharactersService',

function($scope, $http, $log, apiMarvelCharactersService) {

$scope.superheroes = [];

$scope.refreshTopTenSuperHeroes = function() {

apiMarvelCharactersService.getTopTenCharacters()

.then(function(superheroes) {

$scope.superheroes = superheroes;

});

}

$scope.refreshTopTenSuperHeroes();

}]);

<ion-list>

<ion-item ng-repeat="superheroe in superheroes" href="#/app/superheroe/{{superheroe.id}}">

<div class="list card">

<div class="item ">

<h2>{{superheroe.name}}</h2>

</div>

<div class="item item-image">

<img src="{{superheroe.thumbnail.path + '.'+ superheroe.thumbnail.extension}}">

</div>

</div>

</ion-item>

</ion-list>

• Documentación no clara• Timestamp - Date.now();

• Hash - md5(timestamp + private_key + public_key);

• Envío de parámetrosvar data = {…};

var params = "?" + $.param(data);

• Información incompleta

• Filtrado de información

• Ionic es de gran valor para aplicaciones ligeras y rápidas de utilizar

• Rápido (y más barato) de desarrollar• Curva de aprendizaje media• Falta madurar

• Documentación• Ejemplos en línea

• Muestra gran promesa

Isaac González

@isaacagh

http://inercy.com

André Peregrina

@andreperegrina

http://certuit.com

@izack91

isaac_gonzalez@outlook.com

Isaac González

Sigue la conversación y comenta en redes sociales con el hashtag

#SGVirtual