Cocinando Ricas Apps con Javascript

Cocinando Ricas Appscon Javascript

Alberto Luebbert M.@almsx

albertoluebbert@ideashappy.comwww.ideashappy.com

Menú del DíaMenú del Día

● 1.- ¿De qué va esto?1.- ¿De qué va esto?

● 2.- Javascript2.- Javascript

● 3.- Características3.- Características

● 4.- Demos4.- Demos

¿De qué va esto?¿De qué va esto?

● ¿Para que aprender Javascript?¿Para que aprender Javascript?

● MóvilMóvil

● WebWeb

● ServidorServidor

● Lenguaje SCRIPT.Lenguaje SCRIPT.

¿Quién soy yo?¿Quién soy yo?

● Alberto Luebbert M.Alberto Luebbert M.

CEO en ideas HappyCEO en ideas Happy

www.ideashappy.comwww.ideashappy.com

Usuario GNU Linux desde el 2002Usuario GNU Linux desde el 2002

Usuario Debian desde el 2003Usuario Debian desde el 2003

Entusiasta promotor desde el 2004Entusiasta promotor desde el 2004

openSUSE Ambassador desde el 2010openSUSE Ambassador desde el 2010

Atlantista de toda la vida ñ_ñAtlantista de toda la vida ñ_ñ

Ing. En Sistemas Computacionales TESOEMIng. En Sistemas Computacionales TESOEM

Miembro fundador de Comunidades:Miembro fundador de Comunidades:

Generando Maldad, SUSEMXGenerando Maldad, SUSEMX

Coordinador FLISOL EDOMEX 2006-2010Coordinador FLISOL EDOMEX 2006-2010

Project Leader Hi ldebrandoProject Leader Hi ldebrando

En el principio...En el principio...

var form = document.forms[0];var form = document.forms[0];

if(form.txtNombre.length == 0){if(form.txtNombre.length == 0){

alert(“Falta el nombre”);alert(“Falta el nombre”);

return false;return false;

}}

}}

Hoy en dia...Hoy en dia...

Hoy en dia...Hoy en dia...

¿Donde empleare Javascript?¿Donde empleare Javascript?

Móvil - Titanium AppceleratorWeb – (jQuery)Servidor - NodeJS

MóvilesMóviles

var win = Titanium.UI.createWindow({backgroundColor: '#003366',title: 'Hola mundo en javascript'

});

var btn = Titanium.UI.createButton({Title: 'Presioname',Width: 200,Height: 50,

});win.add(btn)

win.open();

MóvilesMóviles

var win = Titanium.UI.createWindow({backgroundColor: '#003366',title: 'Hola mundo en javascript'

});

var btn = Titanium.UI.createButton({Title: 'Presioname',Width: 200,Height: 50,

});win.add(btn)

win.open();

Móviles - CommonJSMóviles - CommonJS

● Hoja.jsHoja.js

exports.ventana = {exports.ventana = {

self: {self: {

BackgroundColor: '#003366',BackgroundColor: '#003366',

Title: 'Hola Mundo'Title: 'Hola Mundo'

}}}}

exports.boton = {exports.boton = {

self: {self: {

width: 200,width: 200,

height: 50,height: 50,

title: 'presioname'title: 'presioname'

}}}}

● Win.jsWin.js

function home(){function home(){

var est = require('ui/handheld/Hoja');var est = require('ui/handheld/Hoja');

var self = Ti.UI.createWindow(var self = Ti.UI.createWindow(

est.ventana.self);est.ventana.self);

var btn = Ti.UI.createButton(var btn = Ti.UI.createButton(

est.boton.self);est.boton.self);

return self;return self;

}}

module.exports = Home;module.exports = Home;

Conexión a BD con JavascriptConexión a BD con Javascript

var DB_NAME = '4dm.db';

exports.createBase = function() {

var db = Ti.Database.open(DB_NAME);

var err;

try{

db.execute('CREATE TABLE IF NOT EXISTS noticias(id INTEGER PRIMARY KEY, titulonoticia TEXT, fechanoticia TEXT, noticiacompleta TEXT, url TEXT)');

}

catch(err){

alert(“Algun error”);

}

db.close();

};

var db = require('/ui/BD');var db = require('/ui/BD');

db.crearBase();db.crearBase();

Conexión a BD con JavascriptConexión a BD con Javascript

var DB_NAME = '4dm.db';

exports.createBase = function() {

var db = Ti.Database.open(DB_NAME);

var err;

try{

db.execute('CREATE TABLE IF NOT EXISTS noticias(id INTEGER PRIMARY KEY, titulonoticia TEXT, fechanoticia TEXT, noticiacompleta TEXT, url TEXT)');

}

catch(err){

alert(“Algun error”);

}

db.close();

};

var db = require('/ui/BD');var db = require('/ui/BD');

db.crearBase();db.crearBase();

Algunas apps hechas con AppceleratorAlgunas apps hechas con Appcelerator

Geolocalización con jQueryGeolocalización con jQuery

Geolocalización con jQueryGeolocalización con jQuery

function obtenerPosicion(location){

var posicion = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)

var mapa = new google.maps.Map(mapDiv, {

zoom: 16,

center: position,

mapTypeId: google.maps.MapTypeId.HYBRID

});

var marka = new google.maps.Marker({

position: position,

map: map

});

new google.maps.Geocoder().geocode({

location: posicion},

obtenerPosicion);

Hola mundo en Node.jsHola mundo en Node.js

var http = require('http');http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('¡Hola Mundo!\n');}).listen(8081); console.log('Servidor ejecutándose en http://127.0.0.1:8081/');

Generar JSON en Node.JSGenerar JSON en Node.JS

var contacto = {var contacto = {

id: 1,id: 1,

lastName: "Pérez",lastName: "Pérez",

firstName: "Martin"firstName: "Martin"

};};

var texto =var texto =

JSON.stringify(contacto);JSON.stringify(contacto);

Contacto{Contacto{

"id":1,"id":1,

"lastName":"P%eu%rez","lastName":"P%eu%rez",

"firstName":"Martin""firstName":"Martin"

}}

Mucha más informaciónMucha más información

● Generando MaldadGenerando Maldad

www.generandomaldad.comwww.generandomaldad.com

www.facebook.com/generandomaldadwww.facebook.com/generandomaldad

twitter: @generandomaldadtwitter: @generandomaldad

● Ejemplo de jQueryEjemplo de jQuery

https://github.com/hdragomir/Odeon-Labs--https://github.com/hdragomir/Odeon-Labs--Geolocation-with-Google-MapsGeolocation-with-Google-Maps

Cocinando Ricas Appscon Javascript

Alberto Luebbert M.@almsx

albertoluebbert@ideashappy.comwww.ideashappy.com