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