programación móvil para superhéroes
TRANSCRIPT
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
Sigue la conversación y comenta en redes sociales con el hashtag
#SGVirtual