Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Programación móvil para superhéroes

656 views

Published on

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

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Programación móvil para superhéroes

  1. 1. Presentadopor: IsaacGonzález Programaciónmóvil parasuperhéroes
  2. 2. • Ionic Framework • Angular • Javascript • HTML5 • CSS3 • API REST de Marvel
  3. 3. • Plataforma para el desarrollo de aplicaciones móviles con HTML5 • Cordova para compilar aplicaciones • Vistas con AngularJS Optimizado
  4. 4. 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)
  5. 5. <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>
  6. 6. • Angular- https://www.codeschool.com/courses/shapi ng-up-with-angular-js • Ionic Playground - http://play.ionic.io/
  7. 7. 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
  8. 8. HTTP [GET] JSON
  9. 9. • 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
  10. 10. 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)); };
  11. 11. 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(); }]);
  12. 12. <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>
  13. 13. • 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
  14. 14. • 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
  15. 15. Isaac González @isaacagh http://inercy.com André Peregrina @andreperegrina http://certuit.com
  16. 16. @izack91 isaac_gonzalez@outlook.com IsaacGonzález
  17. 17. Siguelaconversaciónycomentaenredessocialesconelhashtag #SGVirtual

×