Node JS

Cuando programamos en PHP el ambiente normal es xAMP donde tenemos que

compartir las tareas de servidor web y programacin entre Apache y PHP. Es un
ambiente donde todo tiene lugar en un folder y sabemos dnde se encuentra el
root de nuestro proyecto, dnde deben ir nuestros achivos (como index.php) y
nuestro .htaccess. Generalmente todo es cuesta abajo

En node no existe un root del proyecto ni un achivo .htaccess, lo cual suele
confundir mucho a primera vista. Otro factor que confunde mucho la primera vez
que entras a node, es que casi todo lo tienes que hacer en la terminal.

Nota importante: Cuando inicien su terminal de node, navegen al folder que
usarn para su proyecto.

Nodejs podr vivir en cualquier folder que deseen de su sistema operativo y en
ese folder requieren 2 archivos para empezar su proyecto: un archivo de
javascript al que pueden ponerle el nombre que deseen y un archivo de json
llamado package.json.

En el archivo de json definirn el nombre de su proyecto, la versin de su
proyecto, qu libreras estn usando y muchas cosas ms.
{
"name": "NombreDeTuApp",
"version": "0.0.1",
"dependencies": {
"express" : "3.0.3",
"jade" : "0.27.7",
"consolidate" : "0.5.0",
"socket.io" : "0.9.11"
}
}

Una vez que hayan hecho su archivo package.json podrn usar npm para instalar
todas sus libreras (llamadas dependencias) con un manejador de paquetes que
viene instalado por default con Node llamado NPM (node package manage) el cul
ser su fiel acompaante el resto de su desarrollo con Node.

Para instalar las dependencias del proyecto tienen que usar la siguiente
instruccin:


npm install

Deberan de tener un resultado como este



Y con eso podremos empezar a trabajar.

Lo siguiente que necesitamos es tener un archivo que inicie nuestra aplicacin. En
este caso le llamar server.js por que es un servidor web.
Pondremos el Hello world de ExpressJs


var express = require('express');var app = express();

app.get('/', function(req, res){
res.send('hello world');
});

app.listen(3000);console.log('Si ves esto ve a http://localhost:3000 \n Oprime
CTRL + C para apagar el servidor');
Una vez que esto este en nuestro archivo server.js pasaremos a nuestra terminal y
escribiremos:


node server.js

Y tendremos en pantalla


Si ves esto ve a http://localhost:3000/
Oprime CTRL + C para apagar el servidor

Podemos checar en nuestro browser en la direccin http://localhost:3000/ que
aparece un bonito "hello world".

Sin importar qu tan grandes sean sus proyectos de node, siempre seguirn este
mismo proceso.

Herramientas Node



Express. Un framework que te provee un robusto conjunto de funcionalidades para
construir pginas individuales y mltiples, generando aplicaciones web hbridas.

Socket.IO. Los famosos "Sockets", que te permiten crear aplicaciones en tiempo real a
travs de la gestin de conexiones, funcionales en cualquier dispositivo y navegador,
incluyendo mviles.

Stylus. Un compilador CSS que te permite trabajar de forma ms sintetizada y prctica.
Recomendada por Mejorndola.

Jade. Un motor de plantillas para aplicaciones NodeJS. Combina la potencia y flexibilidad
del cdigo HTML con una sintaxis agradable y limpia.

Meteor. Una plataforma que va construyendo la aplicacin en tiempo real con el
navegador.

odeJS tiene multitud de mdulos que nos facilitan el desarrollo gil de aplicaciones web.
Hoy nos vamos a centrar en dos mdulos. Express y Jade.

Express

Express es el Framework que vamos a utilizar para realizar aplicaciones web con NodeJS
y nos va a facilitar mucho las cosas y, por defecto, utiliza plantillas Jade , es por eso que
instalamos tambin las plantillas Jade. Puedes encontrar toda la informacin de Express
en su pginan oficial

Jade

Jade son las plantillas que usa por defecto. Puedes encontrar toda la informacin de estas
plantillas en su pgina oficial pgina oficial

Una vez creada la aplicacin, se habrn creado los siguientes ficheros y directorios:

package.json Sirve para definir la aplicacin, el nombre de la misma, su versin y que
dependencias vamos a usar, en este caso es importante poner express y jade con sus
correspondientes versiones (npm info express versin)

app.js En l, nos encontraremos las llamadas a los diferentes mdulos, la configuracin
para lanzar la aplicacin, el puerto por el que va a escuchar (por defecto el 3000), el
mapeo de rutas y muchas cosas ms.

public/ Son los archivos que los usuarios finales tienen libre acceso, como los Javascript,
CSS, imgenes o vdeos.

routes/ Una vez mapeadas las rutas querremos que hagan algo, es aqu dnde
programaremos que hacer en cada caso. views/ Como su nombre indica, va almacenar
las plantillas (archivos con extensin .jade)

Pasos fundamentales

Normalmente los tres pasos fundamentales son los siguientes:

1. Mapear la ruta: Es decir, cuando un usuario entra por primera vez en nuestra
pgina principal sera de la siguiente forma:


app.js app.get('/', routes.index);

En este caso es app.get porque se enva mediante la URL (GET), si se enviase la
informacin a travs de un formulario POST, pasara a app.post.

El primer parmetro '/', se refiere a la ruta, en este caso al ser la pgina principal
sera as, si quisisemos aadir una nueva para un enlace href="/quienessomos",
sera app.get('/quienessomos').

El segundo parmetro routes.index, se refiere quin se va encargar de realizar las
operaciones correspondientes a este mapeo, y es aqu cuando pasamos al paso
2.

Importante. Es muy importante poner el orden de los mapeos correctamente, es
decir, que funcionan por orden, si tenemos el siguiente ejemplo


app.get('/:mensaje',routes.mensajes);
app.get('/quienessomos',routes.somos);

Siempre que escribamos en la URL /quienssomos, va a tomarlo como que
estamos enviado quienessomos como variable, ya que al cumplirse la primera se
olvida de el resto. En el ejemplo anterior para que funcionase correctamente sera
al revs.


app.get('/quienessomos',routes.somos);
app.get('/:mensaje',routes.mensajes);

2. Routes: Aqu el archivo index.js se va encargar de hacer las operaciones
pertinentes para cada mapeo de rutas. Normalmente se pueden realizar dos
operaciones finales: Renderizar una plantilla y pasaramos al paso 3 o
redireccionar a otra pgina que volveramos al paso 1.


/"index.js */
exports.index = function(req, res){ res.render('index', { title: 'Bienvenido al
Chat' }); };

exports.index, en este caso es .index porque en app.js hemos dicho que quin se
va encargar de esta ruta es routes.index.

Es una funcin que tiene dos parmetros que nos va a permitir recibir parmetros
mediant URL, formularios o sesiones, o, renderizar o redireccionar entre otras
cosas a otras URLs.

En este ejemplo, estamos renderizando el archivo index.jade y le enviamos como
parmetro el ttulo que va a tener la pgina.


res.render('index', {title :'Bienvenido al Chat'});

3. Views: renderizar plantilla. Si se desea conocer ms las plantillas Jade, ir al
enlace que he puesto al comienzo de esta Wiki.

En este primer ejercicio, vamos a tratar de realizar un formulario inicial para que el
usuario ingrese su nick o nombre de usuario, y si no existe entre los usuarios
conectados que le deje pasar al chat creando una sesin y mostrndole los
diferentes usuarios que estan conectados, y si ya existe ese usuario que muestre
una pgina con el error que ese usuario ya esta siendo utilizado. Es un ejemplo
sencillo pero que recomiendo realizar para ir aprendiendo los conceptos bsicos
de NodeJS.

PHONEGAP Y JQUERY MOBILE

CREANDO UNA APLICACIN NATIVACON PHONEGAP
PUBLICADO EN JUNIO 21, 201240 COMENTARIOS
PhoneGap es una propuesta de licencia OpenSource (cdigo abierto), basada en
JavaScript, que permite crear aplicaciones para dispositivos mviles
utilizandoHTML5 y CSS3. Esta nueva tecnologa soporta el desarrollo de
aplicaciones para los sistemas Android, IOS, BlackBerry, Windows Phone y
Symbian.
Esta herramienta maneja APIs que permiten el acceso y control de elementos
como el acelermetro, cmara, contactos en el dispositivo, red, almacenamiento,
notificaciones, entre otras.
PhoneGap cuenta con dos grandes ventajas al momento del desarrollo: se pueden
ejecutar las aplicaciones en nuestro navegador web, sin depender de un simulador
dedicado a esta tarea, y por otra parte, tenemos la posibilidad de soportar
funciones sobre frameworks como Sencha Touch o JQuery Mobile.
Actualmente PhoneGap se encuentra en un proceso de re identificacin, pues se
conocen planes de cambiar su nombre, debido a que esta tecnologa fue adquirida
por la compaa Adobe, y ellos desean re-nombrar esta herramienta como
Cordova.

MANOS A LA OBRA.
Explicaremos cmo llevar a cabo una aplicacin nativa en las principales
plataformas mviles Android, Windows Phone e IOS.
As que primero realizaremos el clsico hola mundo con un simple html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Hola mundo en Phonegap</title>
</head>
<body>
<h1>HOLA MUNDO!</h1>
</body>
</html>
ANDROID
Para desarrollar en android lo haremos con el software Eclipse entonces:
Descargar e instale la ultima versin de Eclipse Classic aunque sirve desde
la versin 3.4 hacia adelante.
Descargar e instalar el SDK de Android
Descargar e instalar el plugin ADT
Descargar la ltima versin de Phonegap y extraiga su contenido. Vamos a
trabajar con el directorio de Android as que puede eliminar los otros
directorios dentro de la carpeta lib.
Luego de instalar los elementos anteriores, abrimos Eclipse y creamos Nuevo>
Proyecto de Android y completamos las ventanas con los datos que ocuparemos.
En el directorio raz del proyecto debemos crear 2 nuevos directorios
/ Libs
activos / www
Copiar archivos
copiar el archivo Crdoba-1.7.0.jar dentro de Libs,
Crdoba-1.7.0.js dentro de activos / www
Copiar xml carpeta de la descarga anterior a Crdoba / RES
Para cargar los nuevos archivos dentro de la solucin del proyecto apretamos (F5)
Editar el archivo principal de su proyecto de Java se encuentra en el src carpeta
en Eclipse:
Aadir import org.apache.cordova *.;
Cambie el de la clase se extienden desde la actividad de DroidGap
Vuelva a colocar la setContentView () de acuerdo con super.loadUrl (file :/ / /
android_asset / www / index.html);
Click derecho sobre AndroidManifest.xml y seleccione Abrir con> Editor XML y
Pegar los siguientes permisos entre el <uses-sdk/> y <application/> etiquetas.
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission
android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS
" />
<uses-permission
android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS"
/>
<uses-permission android:name="android.permission.RECORD_AUDIO"
/>
<uses-permission
android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission
android:name="android.permission.READ_CONTACTS" />
<uses-permission
android:name="android.permission.WRITE_CONTACTS" />
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS"
/>
<uses-permission
android:name="android.permission.BROADCAST_STICKY" />
Luego para finalizar entrar a assets/www y abrir el archivo index.html para luego
copiar el cdigo que tenamos anteriormente agregando el script.
<script type="text/javascript" charset="utf-8" src="cordova-
1.7.0.js">
</script>
Para probar nuestro cdigo hacemos click derecho al proyecto y ejecutamos la
aplicacin.
WINDOWS PHONE
El desarrollo en esta plataforma se realizar en SDK de Windows Phone con lo
cual programaremos en Visual Studio con lo cual una de las limitante para los que
no tengan un PC con windows especialmente de windows vista Servipack 2 hacia
adelante.
Abra Visual Studio Express para Windows Phone y crea un Nuevo proyecto,
seleccione CordovaStarter , coloque el nombre del proyecto que desee y aceptar.
Luego revisamos dentro de la carpeta assets/www en el explorador de soluciones
para abrir el archivo index.html y copiamos el cdigo html que tenamos
anteriormente, agregando el script.
<script type="text/javascript" charset="utf-8" src="cordova-
1.7.0.js">
</script>
Para probar nuestro cdigo simplemente ejecutamos la aplicacin en el emulador
que deseemos a que posee 2 uno con 256 mb y otro con 512 mb.
IOS
El desarrollo plataforma IOS la realizaremos sobre Xcode que la pueden
descargar desde la Mac App Store y con el directorio de Lib/ios de Cordova. Al
igual que en windows phone aqu tambin existe una limitante la cual es que se
debe trabajar sobre un MAC, y adems es necesario tener la certificacin de
developer de IOS.
Abrimos Xcode y creamos un nuevo proyecto basado en Cordova-based
Application.
Cuando nuestro proyecto ya est instalado realizamos click derecho a la solucin
y abrimos la carpeta con el nombre www, debemos arrastrar a esta solucin
(especficamente donde est el nombre que nosotros le damos en el explorador de
la solucin) y nos aparecer una ventana donde debemos seleccionar donde dice
crear referencias de carpetas para las carpetas de agregado
o en ingls
create folder references for any added folders
y colocamos Finalizar.
y para finalizar buscamos el archivo index.html que se encontrara dentro de la
carpeta www y copiamos el cdigo html que tenamos anteriormente, agregando
el script.
<script type="text/javascript" charset="utf-8" src="cordova-
1.7.0.js">
</script>
Para probar nuestro cdigo simplemente seleccionamos que tipo de dispositivo
queremos usar y ejecutamos la aplicacin (en la parte superior izquierda del
Xcode).