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.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
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.
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.
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).
Inteligencia artificial: Lo que usted necesita saber sobre el aprendizaje automático, robótica, aprendizaje profundo, Internet de las cosas, redes neuronales, y nuestro futuro
Excel para principiantes: Aprenda a utilizar Excel 2016, incluyendo una introducción a fórmulas, funciones, gráficos, cuadros, macros, modelado, informes, estadísticas, Excel Power Query y más
Ciberseguridad: Una Simple Guía para Principiantes sobre Ciberseguridad, Redes Informáticas y Cómo Protegerse del Hacking en Forma de Phishing, Malware, Ransomware e Ingeniería Social