Este documento presenta información sobre aplicaciones multiplataforma y tecnologías relacionadas. Se discuten conceptos como aplicaciones de página única, frameworks como AngularJS, herramientas como Ionic y características de AngularJS como directivas, filtros y servicios. El documento también incluye ejemplos de código para ilustrar estos conceptos.
Presentación de charla efectuada en el evento Encuentro Social de Desarrolladores organizado por el grupo Desarrolladores Habana. Trata sobre desarrollo para aplicaciones móviles empleando las tecnologías Ionic y Apache Cordova.
Aplicaciones Mobile con AngularJS y Ionic framework Marcos Reynoso
Presentación de la charla "Aplicaciones Mobile con AngularJS y Ionic Framework" realizada el día 27 de marzo de 2014 para el grupo de meetup de AngularJS de Buenos Aires.
Desarrollo de apps móviles con Apache CordovaSoftware Guru
Con la amplia variedad de dispositivos, plataformas y funcionalidades existentes en el mundo de dispositivos móviles, se ha vuelto muy difícil para los desarrolladores el crear aplicaciones de forma rápida, así como de dar mantenimiento a estas en las diferentes combinaciones de plataformas (iOS, Android, Windows, etc.). Así mismo, poner las aplicaciones en las manos de los usuarios hace que esto sea un tarea casi imposible en un periodo de tiempo corto.
Apache Cordova provee un conjunto de APIs para crear aplicaciones móviles híbridas usando tecnologías Web que pueden accesar funciones nativas, tales como la cámara, contactos, acelerómetro, red, etc.
En esta sesión, Victor Sosa demostrará como se puede crear una aplicación móvil de una forma rápida que es capaz de ser usada en diferentes dispositivos y plataformas y que además usará funciones nativas. También compartirá buenas prácticas y recomendaciones para proyectos de desarrollo de aplicaciones basadas en Apache Cordova.
Presentación de charla efectuada en el evento Encuentro Social de Desarrolladores organizado por el grupo Desarrolladores Habana. Trata sobre desarrollo para aplicaciones móviles empleando las tecnologías Ionic y Apache Cordova.
Aplicaciones Mobile con AngularJS y Ionic framework Marcos Reynoso
Presentación de la charla "Aplicaciones Mobile con AngularJS y Ionic Framework" realizada el día 27 de marzo de 2014 para el grupo de meetup de AngularJS de Buenos Aires.
Desarrollo de apps móviles con Apache CordovaSoftware Guru
Con la amplia variedad de dispositivos, plataformas y funcionalidades existentes en el mundo de dispositivos móviles, se ha vuelto muy difícil para los desarrolladores el crear aplicaciones de forma rápida, así como de dar mantenimiento a estas en las diferentes combinaciones de plataformas (iOS, Android, Windows, etc.). Así mismo, poner las aplicaciones en las manos de los usuarios hace que esto sea un tarea casi imposible en un periodo de tiempo corto.
Apache Cordova provee un conjunto de APIs para crear aplicaciones móviles híbridas usando tecnologías Web que pueden accesar funciones nativas, tales como la cámara, contactos, acelerómetro, red, etc.
En esta sesión, Victor Sosa demostrará como se puede crear una aplicación móvil de una forma rápida que es capaz de ser usada en diferentes dispositivos y plataformas y que además usará funciones nativas. También compartirá buenas prácticas y recomendaciones para proyectos de desarrollo de aplicaciones basadas en Apache Cordova.
Cada vez más personas y empresas invierten sus esfuerzos en tener presencia en dispositivos móviles. Pero a la hora de abordar esta figura surge siempre la misma pregunta: ¿Versión web móvil o aplicación nativa? ¿Cuáles son sus ventajas? ¿Y sus inconvenientes? ¿Te interesaría conocer las consideraciones que son necesarias a tener en cuenta para tomar estas decisiones?
introduccion a xamarin en donde se explica me se realiza el desarrollo de aplicaciones comunmente con las herramientas ya conocidas versus como se desarrolla en xamarin de una manera sencilla y facil
Conocimiento general de Xamarin como herramienta para crear aplicaciones nativas multiplataforma desde Visual Studio además de ver distintas opciones Xamarin Classic y Xamarin.Forms.
Vamos a celebrar el lanzamiento de Visual Studio 2017!. Nada mejor que contar con varias sesiones cortas y directas donde veremos las principales novedades en el IDE además de novedades en C# 7, Xamarin, etc.
En esta sesión conocemos como hacer pruebas unitarias y de interfaz de aplicaciones móviles multiplataforma con Xamarin. Además, conocemos y probamos Test Cloud y hacemos un breve introducción a Visual Studio Mobile Center.
Code Blast 2012 - Fast Mobile PrototypingINSIGNIA4U
Fast Mobile Prototyping
Code Blast 2012 en el marco de charlas de por la Semana de la Ingeniería de la Universidad Tecnológica Nacional, Facultad Regional Tucumán.
Juan Francisco Roldán mostró las herramientas que utilizamos en Insignia para hacer prototipado rápido de aplicaciones mobile usando el stack html5.
Vemos cómo con Visual Studio Online podemos gestionar el ciclo de vida completo de nuestro proyecto con metodologías ágiles, así como gestionar nuestro código fuente y automatizar la compilación o las pruebas incluidas desde recientemente Apps Xamarin.
Esta presentación muestra una introducción a la generación de webApps modernas utilizando un stack de tecnologías basadas en Javascript, como NodeJs, MongoDB, AngularJS, API REST. A través de un ejemplo el instructor mostrará como crear aplicaciones Web utilizando el potencial de Javascript.
Cada vez más personas y empresas invierten sus esfuerzos en tener presencia en dispositivos móviles. Pero a la hora de abordar esta figura surge siempre la misma pregunta: ¿Versión web móvil o aplicación nativa? ¿Cuáles son sus ventajas? ¿Y sus inconvenientes? ¿Te interesaría conocer las consideraciones que son necesarias a tener en cuenta para tomar estas decisiones?
introduccion a xamarin en donde se explica me se realiza el desarrollo de aplicaciones comunmente con las herramientas ya conocidas versus como se desarrolla en xamarin de una manera sencilla y facil
Conocimiento general de Xamarin como herramienta para crear aplicaciones nativas multiplataforma desde Visual Studio además de ver distintas opciones Xamarin Classic y Xamarin.Forms.
Vamos a celebrar el lanzamiento de Visual Studio 2017!. Nada mejor que contar con varias sesiones cortas y directas donde veremos las principales novedades en el IDE además de novedades en C# 7, Xamarin, etc.
En esta sesión conocemos como hacer pruebas unitarias y de interfaz de aplicaciones móviles multiplataforma con Xamarin. Además, conocemos y probamos Test Cloud y hacemos un breve introducción a Visual Studio Mobile Center.
Code Blast 2012 - Fast Mobile PrototypingINSIGNIA4U
Fast Mobile Prototyping
Code Blast 2012 en el marco de charlas de por la Semana de la Ingeniería de la Universidad Tecnológica Nacional, Facultad Regional Tucumán.
Juan Francisco Roldán mostró las herramientas que utilizamos en Insignia para hacer prototipado rápido de aplicaciones mobile usando el stack html5.
Vemos cómo con Visual Studio Online podemos gestionar el ciclo de vida completo de nuestro proyecto con metodologías ágiles, así como gestionar nuestro código fuente y automatizar la compilación o las pruebas incluidas desde recientemente Apps Xamarin.
Esta presentación muestra una introducción a la generación de webApps modernas utilizando un stack de tecnologías basadas en Javascript, como NodeJs, MongoDB, AngularJS, API REST. A través de un ejemplo el instructor mostrará como crear aplicaciones Web utilizando el potencial de Javascript.
Buenas prácticas en el desarrollo para Android.
Consejos sobre:
- Organización del código
- Trucos en programación Java
- Reutilización
- Rendimiento
- Compartición de datos
- Usabilidad
- Etc.
Web search engines are constantly being developed in order to answer to user needs. This development process focuses not only on lexical pattern matching, but also on processing the sense of the query. There are two ways of doing this. The first is to extract content through Natural Language Processing (NLP); the second is to assign semantic descriptors from controlled languages. Therefore, the technological options available are either free text analysis, or semantic annotation. In the first case human interaction is essential; in the second one the quality of semantic retrieval by means of NLP is still under discussion. Although these solutions represent contrasting positions in the traditional debate on this matter, these methodologies are now mixing. In fact, semantic Web search engines need many pages to be annotated (which requires an enormous effort), so NLP represents an important help for automatic or semi-automatic annotation. At the same time, the precision of text analysis can be optimized by techniques of assignment applied by users and professionals. In conclusion, the trend is the development of collective knowledge systems that improve as more people participate, as they are based on human contributions. All of this will possibly be integrated by chunking, clustering, parsing, spell-checker and other NLP algorithms.
Preparé este material para un Taller de Redes Sociales que he organizado en varias ocasiones para trabajar con las familias del alumnado de centros educativos.
Las fuentes de origen del material multimedia están en la parte final de cada presentación.
Jona Oboza of SMILDS.com.ph shared their experience in rolling out social e-commerce service to SMEs. This was presented at Carl Duisberg Association of the Philippines E-Commerce Project Planning & E-Store Creation Workshop last November 19, 2010 at Oxford Suites Makati City.
Cómo integrar AngularJS con una instalación de Drupal 7 a través de views y services o cómo agregarle a una web estándar las características de una aplicación HTML5.
An evening with ... Ionic Framework Meetup Arkhotech
Ionic es un framework de desarrollo híbrido móvil de amplio uso en la industria. Entre sus principales características se destacan el desempeño, integración con AngularJS, similitud de interfaces finales con las nativas y el soporte a integración de hardware vía Apache Cordova.
En este meetup usamos un proyecto real Ionic creado para uno de nuestros clientes, para analizar todo el proceso de construcción (de más de 3 meses), conociendo las principales características de la implementación y todos las experiencias que enfrentamos en este reto de equipo. Revisaremos todo lo que hicimos: la estructura de equipo, tecnologías, método de trabajo, obstáculos, etc. compartiendo con los asistentes el caso de éxito de una experiencia real.
Curso de test driven development usando AngularJS, Jasmine, Karma, Protractor, y Gulp para automatizar todo.
Codigo del proyecto de ejemplo:
https://github.com/rodrigopivi/angularComponentStarter
Una introducción a AngularJS. Presentación base de una charla/curso para Intel, Costa Rica. Marzo del 2014. Presenta una introducción a los conceptos principales para empezar a utilizar AngularJS en el desarrollo de aplicaciones Web.
2. Índice
Jueves
Viernes
- Apps híbridas
- Diferencia entre nativas e híbridas
- Cómo funciona
- Ventajas e inconvenientes
- Ejemplos
- Historia
- Programar - prueba de los conceptos
- Otras herramientas y tecnologías
- Single Page Applications
- Frameworks
- Herramientas de trabajo
- AngularJS
- Ionic Framework
- Repaso general
3. Single Page Applications
Modelo tradicional
http://adrianalonso.es/2015/02/single-page-app-vs-multi-page-app/
El modelo SPA
La navegación entre páginas genera una petición
al servidor que devuelve el nuevo html a mostrar
por el navegador.
El cliente solicita páginas, y el servidor las crea y
las devuelve en cada petición.
Sólo se utiliza una página html en todo el proceso,
solicitando al servidor únicamente los datos que se
mostrarán en esta página.
El cliente solicita la página una vez y al navegar
realiza peticiones al servidor únicamente de los
datos, siendo el cliente (navegador) el que
construye el resultado final.
4. Ventajas
- La navegación y el renderizado se realiza en el cliente
—> Liberación de carga en servidor.
- Se evita solicitar o recargar elementos que no cambian en la navegación (headers, footers, etc.)
—> Renderizado de interfaz de usuario más rápido.
- Las llamadas al servidor se hacen sólo de los datos que se necesitan.
—> A través de servicios web y peticiones asíncronas.
- El cacheo y almacenamiento de datos temporales se realiza en el cliente.
—> Liberación de mantener sesiones en servidor.
- División total del front-end y el back-end.
—> El front-end podemos usarlo tanto para web como en app híbrida
- Parte de la lógica de programación pasa del servidor al cliente.
—> Liberación de procesamiento en servidor.
Single Page Applications
5. Inconvenientes
- Carga inicial puede ser mayor
—> Necesidad de obtener todos los elementos de la interfaz para mostrarlos posteriormente.
- Totalmente basado en Javascript. Si no está habilitado en el navegador, no funcionará.
—> Para Apps híbridas esto no afecta.
- Parte de la lógica de programación pasa del servidor al cliente.
—> Hay que tener cuidado de no pasar partes críticas de seguridad.
Single Page Applications
10. Frameworks
¿Por qué elegir sólo uno?
+
MVW Framework
Model
View
Whatever
Arquitectura
=
Maquetación y diseño
11. Herramientas de trabajo
npm gruntbower yeoman
Gestor de
paquetes
Gestor de
dependencias
Automatizador
de tareas
Generador de
proyectos
12. Herramientas de trabajo
¡Manos a la obra!
Instalar tecnologías necesarias
$ npm install -g grunt-cli bower yo generator-karma generator-angular
Crear y acceder a carpeta de la nueva app
$ mkdir demo && cd demo
Crear aplicación angular con yeoman
$ yo angular demo
13. Herramientas de trabajo
app/
WebApp generada con AngularJS como framework. Lo
veremos luego
bower_components/
Dependencias de la aplicación obtenidas con BOWER
node_modules/
Paquetes necesarios para la aplicación obtenidos con NPM
14. Herramientas de trabajo
bower.json
Archivo que contiene las dependencias de la aplicación
{
"name": "demo",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"angular-animate": "^1.3.0",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "demoApp"
}
Se instalan mediante $ bower install
15. Herramientas de trabajo
package.json
Archivo que contiene los paquetes necesarios para el
proyecto
{
"name": "demo",
"version": "0.0.0",
"dependencies": {},
"repository": {},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^2.0.0",
…
"load-grunt-tasks": "^3.1.0",
"time-grunt": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "grunt test"
}
}
Se instalan mediante $ npm install
16. Herramientas de trabajo
package.json
Archivo que contiene los paquetes necesarios para el
proyecto
{
"name": "demo",
"version": "0.0.0",
"dependencies": {},
"repository": {},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^2.0.0",
…
"load-grunt-tasks": "^3.1.0",
"time-grunt": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "grunt test"
}
}
Se instalan mediante $ npm install
• version Coincidir versión exacta
• >version Debe ser mayor que la versión
• >=version Mayor o igual
• <version Menor
• <=version Menor o igual
• ~version Aproximadamente igual a la versión
• ^version Compatible con la versión
• 1.2.x Cualquier versión1.2.0, 1.2.1, etc., pero no 1.3.0
• http://... Versión de la URL ofrecida
• * Cualquier versión
• "" Cualquier versión también
• version1 - version2 Igual que >=version1 <=version2
• range1 || range2 Condicional
• git... Versión del repo git ofrecido
• user/repoVersión del repo GitHub ofrecido
• tag Una versión especifica tagged / etiquetada en git
• path/path/path Ruta local
19. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
Toda App es un módulo
20. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
A su vez una App puede dividirse en varios
módulos, y utilizar módulos externos o de
terceros
21. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
Cada módulo puede configurarse de forma
individual
22. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
La navegación en la App se gestiona a través
de rutas que enlazan vista y controlador
23. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
La vista es el
código HTML que
se muestra
24. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
En el controlador se encuentra
la lógica de la aplicación
25. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
El scope permite
la comunicación
entre vista y
controlador
26. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
Las directivas
permiten extender
el código HTML
27. AngularJS
Estructura
root / app module
module
config
routes
view controller
directives services
scope
…
Los servicios permiten
organizar y compartir código y
funcionalidades en distintas
partes de la aplicación
31. AngularJS
Controllers
angular.module(‘demoApp’).controller(‘MainCtrl’, [‘$scope’, function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
// Código Javascript aquí. Lógica de presentación
$scope.miFunction = function() {
// También puede haber funciones invocadas desde la vista
}
$scope.on(‘destroy’, function() {
// Código que se ejecuta al destruirse el controlador
});
}]);
app/scripts/controllers/main.js
37. AngularJS
Data binding
¡Manos a la obra!
• Crear nuevo controlador y vista
• Añadirlos en el route de la app
• Compartir scope y valores entre controlador y vista
• Invocar funciones del controlador desde la vista
44. AngularJS
Services
app.factory(‘profile’, function() {
return {
“name”: “Anonymous”,
“login”: function() { … },
“logout”: function() { … }
}
}
app.service(‘profile’, function() {
this.name = “Anonymous”;
this.login = function() { … };
this.logout = function() { … };
}
app.controller(…., function($scope, registration) {
$scope.title = registration.title;
});
app.config(function($provide) {
$provide.provider(‘registration’, function() {
var type;
return {
setType: function(value) { type = value; },
$get: function() {
return {
title: ‘Service from Provider: ‘ + type
}
}
};
});
});
app.config(function(registrationProvider) {
registrationProvider.setType(‘Angular’);
});
Factory Service Provider
La forma más sencilla.
Devuelve una simple API con métodos
Parecido a factory pero devuelve una
clase completa
(objetos deben ser instanciados)
Es como un factory “configurable”. Es el tipo
más completo y a la vez complejo.
45. AngularJS
$http $http( {
method: ‘GET’,
url: ‘/unaURLCualquiera’,
params: objetoParams,
data: objetoOString,
headers: objetoHeaders,
cache: true,
timeout: 3000
})
.success(function(data, status, headers, config) {
// Ejecutar aquí el código cuando la petición se ha resuelto
})
.error(function(data, status, headers, config) {
// Ejecutar aquí el código cuando la petición ha fallado
});
46. AngularJS
$http $http( {
method: ‘GET’,
url: ‘/unaURLCualquiera’,
params: objetoParams,
data: objetoOString,
headers: objetoHeaders,
cache: true,
timeout: 3000
})
.success(function(data, status, headers, config) {
// Ejecutar aquí el código cuando la petición se ha resuelto
})
.error(function(data, status, headers, config) {
// Ejecutar aquí el código cuando la petición ha fallado
});
Métodos rápidos:
$http.get - $http.post - $http.put - $http.head - $http.delete - $http.json
Se puede sobreescribir la configuración por defecto mediante $httpProvider en la
configuración de la aplicación o módulo: $httpProvider.defaults.headers.XXXX = YYYY;
47. AngularJS
Directives, services, filters
¡Manos a la obra!
• Crear un servicio que devuelva un listado de datos (JSONArray)
• Utilizar ngRepeat para mostrar los resultados en la vista
• Filtrar los resultados con un filtro propio
• Sustituir el servicio por una petición a
http://jsonplaceholder.typicode.com/
49. Ionic Framework
Prototipar, maquetar y diseñar aplicaciones
web de forma sencilla y rápida
¡Manos a la obra!
Dos opciones:
- Nuevo proyecto:
$ yo ionic demo
- Proyecto existente:
$ bower install ionic —save
$ grunt wiredep
50. AngularJS
Buenas prácticas
• html5mode(true) —> URLs bonitas + SEO
• Directivas siempre como atributos —> soporte navegadores
• No modificar NUNCA el DOM en el controller —> hacerlo en la directiva (link)
• Evitar llamar a funciones del $scope en ng-repeat —> Demasiadas llamadas
• Utilizar ngIF en vez de ngShow cuando se pueda —> no modifica el DOM
• Usar one-time bindings (con ::) —> {{::miScopedVariable}}
• Utilizar siempre promesas —> Olvidarnos de los callbacks
• Utilizar $digest en vez de $apply —> $apply llama al digest desde el rootScope
• No utilizar funciones en los bindings —> son invocadas en cada digest