¿Estás harto de esas intensas discusiones hasta altas horas de la noche a cerca de personajes de comics? ¿Harto de que tus amigos se burlen de ti por tu falta de conocimiento de superhéroes? Este webinar te mostrará la aplicación móvil para lo que siempre quisiste saber de Marvel y nunca te atreviste a preguntar. Vamos a presentar el proceso de desarrollo de la aplicacion móvil, sus ventajas y desventajas en términos de rendimiento y costos para el cliente contra el desarrollo de una aplicación nativa. La aplicación consumirá el API REST de Marvel, proporcionando a los asistentes las bases para el consumo de API's públicos o privados en su organización. Tecnologías: Ionic Framework Angular Javascript HTML5 CSS3 El API de Marvel Objetivos: Darles a los asistentes la herramienta que les permita imponer su conocimiento en discusiones de comics con sus amigos, familiares o conocidos. Descripción general del funcionamiento de aplicaciones móviles híbridas Consumo de API's mediante aplicaciones móviles Proporcionar el conocimiento necesario para saber si estas tecnologías son las adecuadas para tu siguiente proyecto.

1. Presentadopor:
IsaacGonzález
Programaciónmóvil
parasuperhéroes

3. • Ionic Framework
• Angular
• Javascript
• HTML5
• CSS3
• API REST de Marvel

5. • Plataforma para el desarrollo de
aplicaciones móviles con HTML5
• Cordova para compilar aplicaciones
• Vistas con AngularJS Optimizado

6. 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)

7. <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>

8. • Angular-
https://www.codeschool.com/courses/shapi
ng-up-with-angular-js
• Ionic Playground - http://play.ionic.io/

9. 1. No se cuenta con un ambiente de
desarrollo en Android o iOS
configurado
2. Configuración del ambiente
1. NodeJS
2. NPM
3. Android/iOS
4. Cordova
3. Permisos Android
4. jQuery Offline
5. Run con Android Studio

10. HTTP [GET] JSON

11. • 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

12. 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));
};

13. 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();
}]);

14. <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>

15. • Documentación no clara
• Timestamp - Date.now();
• Hash - md5(timestamp + private_key + public_key);
• Envío de parámetros
var data = {…};
var params = "?" + $.param(data);
• Información incompleta
• Filtrado de información

16. • 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

17. Isaac González
@isaacagh
http://inercy.com
André Peregrina
@andreperegrina
http://certuit.com

18. @izack91
isaac_gonzalez@outlook.com
IsaacGonzález

19. Siguelaconversaciónycomentaenredessocialesconelhashtag
#SGVirtual