Node JS

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

compartir las tareas de servidor web y programación entre Apache y PHP. Es un

ambiente donde todo tiene lugar en un folder y sabemos dónde se encuentra el

root de nuestro proyecto, dónde 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

usarán 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 definirán el nombre de su proyecto, la versión de su

proyecto, qué librerías están usando y muchas cosas más.

{

"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 podrán usar npm para instalar todas sus librerías (llamadas dependencias) con un manejador de paquetes que viene instalado por default con Node llamado NPM (node package manage) el cuál será su fiel acompañante el resto de su desarrollo con Node. Para instalar las dependencias del proyecto tienen que usar la siguiente instrucción:

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 aplicación. 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 dirección http://localhost:3000/ que

aparece un bonito "hello world".

Sin importar qué tan grandes sean sus proyectos de node, siempre seguirán este

mismo proceso.

Herramientas Node

Express. Un framework que te provee un robusto conjunto de funcionalidades para

construir páginas individuales y múltiples, generando aplicaciones web híbridas.

Socket.IO. Los famosos "Sockets", que te permiten crear aplicaciones en tiempo real a

través de la gestión de conexiones, funcionales en cualquier dispositivo y navegador,

incluyendo móviles.

Stylus. Un compilador CSS que te permite trabajar de forma más sintetizada y práctica.

Recomendada por Mejorándola.

Jade. Un motor de plantillas para aplicaciones NodeJS. Combina la potencia y flexibilidad

del código HTML con una sintaxis agradable y limpia.

Meteor. Una plataforma que va construyendo la aplicación en tiempo real con el

navegador.

odeJS tiene multitud de módulos que nos facilitan el desarrollo ágil de aplicaciones web.

Hoy nos vamos a centrar en dos módulos. 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 también las plantillas Jade. Puedes encontrar toda la información de Express

en su páginan oficial

Jade

Jade son las plantillas que usa por defecto. Puedes encontrar toda la información de estas

plantillas en su página oficial página oficial

Una vez creada la aplicación, se habrán creado los siguientes ficheros y directorios:

package.json Sirve para definir la aplicación, el nombre de la misma, su versión y que

dependencias vamos a usar, en este caso es importante poner express y jade con sus

correspondientes versiones (npm info express versión)

app.js En él, nos encontraremos las llamadas a los diferentes módulos, la configuración

para lanzar la aplicación, el puerto por el que va a escuchar (por defecto el 3000), el

mapeo de rutas y muchas cosas más.

public/ Son los archivos que los usuarios finales tienen libre acceso, como los Javascript,

CSS, imágenes o vídeos.

routes/ Una vez mapeadas las rutas querremos que hagan algo, es aquí dónde

programaremos que hacer en cada caso. views/ Como su nombre indica, va almacenar

las plantillas (archivos con extensión .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 página principal sería de la siguiente forma:

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

En este caso es app.get porque se envía mediante la URL (GET), si se enviase la información a través de un formulario POST, pasaría a app.post. El primer parámetro '/', se refiere a la ruta, en este caso al ser la página principal

sería así, si quisiésemos añadir una nueva para un enlace href="/quienessomos", sería app.get('/quienessomos'). El segundo parámetro routes.index, se refiere quién 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 sería al revés.

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 pasaríamos al paso 3 o redireccionar a otra página que volveríamos 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 quién se va encargar de esta ruta es routes.index. Es una función que tiene dos parámetros que nos va a permitir recibir parámetros 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 parámetro el título que va a tener la página.

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

3. Views: renderizar plantilla. Si se desea conocer más 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 sesión y mostrándole los

diferentes usuarios que estan conectados, y si ya existe ese usuario que muestre

una página con el error que ese usuario ya esta siendo utilizado. Es un ejemplo

sencillo pero que recomiendo realizar para ir aprendiendo los conceptos básicos

de NodeJS.

PHONEGAP Y JQUERY MOBILE

CREANDO UNA APLICACIÓN NATIVACON PHONEGAP

PUBLICADO EN JUNIO 21, 201240 COMENTARIOS

PhoneGap es una propuesta de licencia OpenSource (código abierto), basada en JavaScript, que permite crear aplicaciones para dispositivos móviles utilizandoHTML5 y CSS3. Esta nueva tecnología 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 acelerómetro, cámara, 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 identificación”, pues se conocen planes de cambiar su nombre, debido a que esta tecnología fue adquirida por la compañía Adobe, y ellos desean re-nombrar esta herramienta como “Cordova”.

MANOS A LA OBRA. Explicaremos cómo llevar a cabo una aplicación nativa en las principales plataformas móviles Android, Windows Phone e IOS.

Así que primero realizaremos el clásico “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 versión de Eclipse Classic aunque sirve desde la versión 3.4 hacia adelante.

Descargar e instalar el SDK de Android Descargar e instalar el plugin ADT Descargar la última versión 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 raíz del proyecto debemos crear 2 nuevos directorios

/ Libs activos / www

Copiar archivos

copiar el archivo Córdoba-1.7.0.jar dentro de Libs, Córdoba-1.7.0.js dentro de activos / www Copiar xml carpeta de la descarga anterior a Córdoba / RES

Para cargar los nuevos archivos dentro de la solución del proyecto apretamos (F5)

Editar el archivo principal de su proyecto de Java se encuentra en el src carpeta en Eclipse:

Añadir 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 código que teníamos anteriormente agregando el script.

<script type="text/javascript" charset="utf-8" src="cordova-

1.7.0.js">

</script>

Para probar nuestro código hacemos click derecho al proyecto y ejecutamos la aplicación.

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 código html que teníamos anteriormente, agregando el script.

<script type="text/javascript" charset="utf-8" src="cordova-

1.7.0.js">

</script>

Para probar nuestro código simplemente ejecutamos la aplicación 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í también existe una limitante la cual es que se debe trabajar sobre un MAC, y además es necesario tener la certificación 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 solución

y abrimos la carpeta con el nombre “www”, debemos arrastrar a esta solución (específicamente donde está el nombre que nosotros le damos en el explorador de la solución) y nos aparecerá una ventana donde debemos seleccionar donde dice crear referencias de carpetas para las carpetas de agregado o en inglés

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 código html que teníamos anteriormente, agregando el script.

<script type="text/javascript" charset="utf-8" src="cordova-

1.7.0.js">

</script>

Para probar nuestro código simplemente seleccionamos que tipo de dispositivo queremos usar y ejecutamos la aplicación (en la parte superior izquierda del Xcode).