Graylinx-tfg

From jderobot
Jump to: navigation, search

Proyect Card[edit]

Proyect Name: ClassCity

Author: Mario Fernández Guerrero. [mariofg4@gmail.com]

Academic Year: 2015/2016

Degree: Degree in Audiovisual Systems and Multimedia Engineering.

GitHub Repositories [source code]

Tags: Angular2, Express, MongoDB, NodeJS, HTML5, CSS, Typescript, JavaScript, Bootstramp, AWS.

Technology: Angular2, Express, MongoDB, NodeJS

""Repository"": Git

State Developing


Videos APP CLASSCITY[edit]

Modelo Profesor Classcity --> https://www.youtube.com/watch?v=WQcViAKy4m0&feature=youtu.be

Modelo Alumno Classcity --> https://www.youtube.com/watch?v=uAWQGguuR7c&feature=youtu.be

Launch an EC2 instance in Amazon Web services[edit]

Step 1. Create Key Pairs

Key Pairs are used to securely log into AWS services. We will create a Key Pair to access our EC2 instance.

1. To create new Key Pairs, navigate to the AWS Console, then click EC2.

2. On the left pane, click Key Pairs, then click Create Key Pair

3. Enter a name for your key, then click Create Key Pair. The Key Pair will be automatically downloaded. You should move this key to a different directory.

Important- You will need to change the permissions of this key to read only, refer the code below:

 chmod 400 youKeyName.pem

Step 2. Launch an EC2 instance with Bitnami

In this step, we will launch an EC2 instance from an Amazon Machine Image (AMI). With AMI, you can spin up an EC2 instance that is ready for development without much configuration. Bitnami provides a preconfigred MEAN image, which we will use to quickly get set up.

1. First, navigate to AWS console, click on AWS Marketplace.

2. Search for MEAN powered by Bitnami, then select the 64-bit AMI to continue.

3. Under Pricing Details, to get the best delivery speed, pick a region that is closest to you, then click Continue.

4. For the Security Group choose Create new based on seller settings

5. Ensure you have the following Connection Methods:

      1.SSH, My IP
      2.HTTP, Anywhere
      3.HTTPS, Anywhere

6. Under Key Pair, select the Key Pair you created in Step 1.

7. Finally, click Launch with 1-click, to launch the instance.

Step 3. Connect to Your EC2

To SSH to your instance, you will need your instance Public IP and the Key Pair you created. First, let’s retrieve your Public IP for your instance. 1. Inside EC2, click Instances, select the newly launched instance from previous step, then click Connect. 2. On the popup, copy the code under Example, as shown in the picture below: 3. In your terminal, navigate to the directory where your Key Pair is saved, then paste the code last step. Here is what a successful connection looks like:

Step 4. Get a domain free.

Go to https://my.freenom.com and sign up. You search a domain that is free. In our case the domain chosen is www.classcity.tk Once created our domain we get started the configuration. You must change the nameservers and select use custom nameservers.

Step 5. Configurate CloudFront.

First, you watch the video (https://www.youtube.com/watch?v=JbQbwum196gGo) and after you go to CloudFront to you Finish setting CloudFront up

Step 6. Configurate RouteS3.

Go to routeS3 and créate record set. You must configurate adequately, you can watch how it is confiurated in the next link. https://www.youtube.com/watch?v=E5MYky95atE (In the minute 17)

Step 7. Get started Certificate Manager

Go to console AWS and then to manager certificate. Add your domain and an email will be sent to your domain account. In our case admin@classcity.tk. Finally we validate the ssl certificate from AWS.

Step 8. Create a classic load balancer

Go to console AWS and then to load balancer. Create Load Balancer, When we have the load balancer created edit listeners on the HTTPS port and change the ssl certificate that we have previously generated.

Step 9. Create a proxy in Apache2 who it redirects url

We edit the apache configuration file called httpd.conf so that when it arrives requests of type / app / * redirect to localhost: 8080

ProxyPassMatch ^/app/(.*)$ http://localhost:8080/$1
ProxyPass /app/(.*)$ http://localhost:8080/
ProxyPassReverse /app/(.*)$ http://localhost:8080/

And when it arrives request of type /socket/* redirect to localhost:8000

ProxyPassMatch ^/socket/(.*)$ http://localhost:8000/$1
ProxyPass /socket/(.*)$ http://localhost:8000/
ProxyPassReverse /socket/(.*)$ http://localhost:8000/

Stack MEAN production Amazon Web services[edit]

You need create an account in amazon web services.

When you have a instance in amazon, then we will connect with ssh to the instance.

sudo ssh -i ~/.ssh/keypair.pem root@ipinstance

We need to clone the repository in remote

rooti@ip:~$ sudo git clone https://github.com/RoboticsURJC-students/2016-tfg-Mario-Fernandez.git 

Install dependencies

rooti@ip:~$ cd 2016-tfg-Mario-Fernandez
rooti@ip:~/2016-tfg-Mario-Fernandez$ sudo npm install

Run Angular2 with angular-ci

rooti@ip:~~/2016-tfg-Mario-Fernandez$ sudo npm run build

A new folder has been create "./dist". This folder must to be copy in our apache server.

rooti@ip:~~/2016-tfg-Mario-Fernandez$ sudo cp -r ./dist/* ../httdocs

Now you can put in your browser the domain of our instance. https://ec2-52-....compute-1.amazonaws.com/

We already have angular2 running on amazon...

Go to backend and install dependecies.

rooti@ip:~~/2016-tfg-Mario-Fernandez$ cd backend
rooti@ip:~/2016-tfg-Mario-Fernandez/backend$ sudo npm install

The first in the backend is run data base with "screen" because we want that keep running when the ssh connection finish.  :

rooti@ip:~/2016-tfg-Mario-Fernandez/backend$ sudo mkdir data
rooti@ip:~/2016-tfg-Mario-Fernandez/backend$ sudo screen mongod --dbpath ./data

Now we go to run express, with "screen" too.

rooti@ip:~/2016-tfg-Mario-Fernandez/backend$ sudo node server.js screen

You have the steps of how to configure your dns domain in the following url:

http://docs.aws.amazon.com/elasticloadbalancing/latest/classic/elb-getting-started.html#getting-started-prerequisites

Developing a M.E.A.N app[edit]

The acronym MEAN comes from (M)ongo + (E)xpress + (A)ngular + (N)ode

The first stage is to clone our git repository in local.

git clone https://github.com/RoboticsURJC-students/2016-tfg-Mario-Fernandez.git

Dependencies are installed both for the backend and the frontend.

cd ~/2016-tfg-Mario-Fernandez
npm install

cd  ~/2016-tfg-Mario-Fernandez/backend
npm install

Following, a folder is created in 2016-tgf-Mario-Fernandez/backend, where our database will be stored.

mkdir ~/2016-tfg-Mario-Fernandez/backend data

Once we already have this folder, the database is started up through the following instruction:

mongod --dbpath ./data

When the database is working, another folder, called uploads, and which will be used to store the user's photographies, is created in the same directory where ./data where created.

mkdir ~/2016-tfg-Mario-Fernandez/backend uploads

Now we have everything ready to start up the server, so go to ~/2016-tfg-Mario-Fernandez/backend and execute the server code.

node server.js

Once the backend is running, angular is started, which is the framework that controls the fronted.

cd ~/2016-tfg-Mario-Fernandez
npm start

This instruction will let us have our app running in the 3000 port, so if using the navigator we make a get request to localhost:3000, we will see our app.

Now that we have everything running, we could play with the app and check how it interacts with our server.

Next we are going to analyze each of the modules forming our app, starting with the database.

MongoDB: Lo primero que vamos a analizar en nuestra base de datos es la implementación de modelos. MongoDB: The first we have to analyze in our database is the implementation of models.

loginalumno.js

var mongoose = require('mongoose');
var Schema   = mongoose.Schema;
var Alumno = mongoose.model('Alumno');

var loginSchema  = new Schema({
  email:         { type: String },
  password:     { type: String },
  data:    { type: Schema.ObjectId, ref: "Alumno"},
});
module.exports = mongoose.model('LoginAlumno', loginSchema);

If we observe the loginalumno.is code, three parts can be differentiated: the first one the importation of models already created, the second one the creation of schema and the third one the exportation of this model to be able to use it whenever. Inside the models folder we have another three files that follows the same methodology as loginalumno.is.

Following with the part related to the database to know how to write and read data. For this purpose we have controllers, that are files js which import the models and export functions that will be invoked with the file server.js. This allows the controllers to read and write data in the database.

exports.getallprofesores = function(req, res){
      DataProfesor.find({}, function(err, dataprof){
		      res.status(200).jsonp(dataprof);
      });
};

For example, the getallprofesors function just returns all registered teachers in a file .jsonp which will be later analyze by the front.

Lately, I am going to describe the server code:

The fist thing we can observe in server.js is the importation of libraries that will be used later on:

var http = require('http'),

   express         = require('express'),
   mongoose        = require('mongoose'),
   path            = require('path');
   bodyParser      = require('body-parser'),
   multer          = require('multer'),
   path            = require('path');

var app = express(); var mongoose = require('mongoose'); </pre>

Connect with the already started database

mongoose.connect('mongodb://localhost/classcity');
var db = mongoose.connection;

The following code lines process the reception of files.

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads')
  },
  filename: function (req, file, cb) {
    console.log(file.fieldname);
    var name = file.fieldname + '-' + Date.now() + '.jpg';
    cb(null, name)
  }
})
var upload = multer({ storage: storage });

Controllers importation

var Ctrlalumno = require('./controllers/contalumno');
var Ctrlprofesor = require('./controllers/contprofesor');
var socketServer = require('./controllers/socket');

Routes treatment

var users = express.Router();
var img = express.Router();

Open mongo

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('Connected to Database');
});

Parser body

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'bower_components')));

Errors controller

app.use(function(err, req, res, next) {
  if (err.name === 'StatusError') {
    res.send(err.status, err.message);
  } else {
    next(err);
  }
});

The following code lines are used in server.js to keep the security of knowing who is sending us data.

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

Received files are stored

app.use(multer(upload).single('file'));

Server sockets

socketServer.start();

Routes

app.use('/', users);
app.use("/uploads", express.static(__dirname + '/uploads'), img);

img.route('/:id')
  .get(Ctrlprofesor.getimg)

img.route('/')
  .post(Ctrlprofesor.postimg)

users.route('/registeralumno')
  .post(Ctrlalumno.registeralumno);

users.route('/loginalumno')
  .post(Ctrlalumno.loginalumno);

users.route('/registerprofesor')
  .post(Ctrlprofesor.registerprofesor);

users.route('/loginprofesor')
  .post(Ctrlprofesor.loginprofesor);

users.route('/profesores')
  .get(Ctrlprofesor.getallprofesores)
  .post(Ctrlprofesor.queryprofesores)

users.route('/detail/:id')
  .get(Ctrlprofesor.getdetail)

Start server

app.listen(3001, function() {
  console.log("Node server running on http://localhost:3001");
});

COOKIES learning[edit]

The main use of cookies is to solve the problem of lack of state in navigating through the web pages . With cookies, small pieces of information are recorded in the browser allowing identify this through different pages of the same site and even during visits between different days. Really cookies are text strings that are sent from the server to the client ( browser) and stored in this , then the browser sends these cookies to the server allowing customer identification on the server.


1º The cookie is sent to your browser from the server and if it accepts it remains there.

2ºThe pages ask the cookie to the browser ...

3º The browser sends , allowing identification of the user by the server.

4º Then we will see how to use cookies for our benefit.

Setcookie( ) defines a cookie that is sent along with the rest of the header information .

function setCookie(name,compra){
      document.cookie = name + "=" + JSON.stringify(compra);
}

Then, we create a function that returns the value of a specified cookie:

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    //save the cookie in a array
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        //we take the first space that always takes the cookie
        while (c.charAt(0)==' '){
          c = c.substring(1); 
        }
        //we are left with the product (value) of each name.
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return null;
}

Last, we create the function that checks if a cookie is set. If the cookie is set it will display a greeting. If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie, by calling the setCookie function:

function checkCookie(){
  user = document.getElementById("name_user").value;
  var products = getCookie(user);
  Show_Car(products);

}

To display the contents of our cookie , we have done our function Show_Car(content), being content of argument that return the function getCookie(user); ;

function Show_Car(content){
    var products = JSON.parse(content);
    var i;
    console.log(products);
    var carrito = products.carrito;
    console.log(carrito);
    var out = "<table>";
    for(i = 0; i < carrito.length; i++) {
        out += "<tr><td>" + 
        user +
        "</td><td>" +
        carrito[i].compra.nombre +
        "</td><td>" +
        carrito[i].compra.cantidad +
        "</td></tr>";
    }
    out += "</table>";
    console.log(out);
    document.getElementById("elementos").innerHTML = out;
}


Example cart consists of the following:

Once we have implemented the three main functions to use the cookie. We implement in our site a botton that allows us to add the item to our shopping cart This botton has associated the onclick event, that invoke to the function add(id);

function add(id){
    var element = document.getElementById(id);
    var article = {nombre: element.name, quantity:'1'};
    var content = getCookie(user);
    if (content == null){
      var obj = {purchase: articulo};
      var list =[obj];
      var car = {carrito:list};
      setCookie(user,car);
    }else{
      products = JSON.parse(content);
      var carrito = products.carrito;
      Othermore(carrito, articulo);  
      setCookie(user,products);
    }
}

I also made a function to tell us the item number you want to buy--> Othermore(carrito, articulo);

// This function will take care of adding the selected product +1
function Othermore(carrito, articulo) {
    var newarticule= true;
    for(i = 0; i < carrito.length; i++) {
        if (carrito[i].compra.nombre == articulo.nombre){
          carrito[i].compra.cantidad++;
          newarticule = false;
        }
    }
    if (newarticule){
      carrito.push({compra:articulo});
      products = {carrito:carrito};
      console.log("-->>> Se añadio el nuevo elemento: "+JSON.stringify(products));
    }
}

GOOGLE WEBSERVICE learning[edit]

The first thing you have to do to use webservice is get a key. [[1]]. You can get this key in this link.

Once that you have a key you can use the different service of google.

The first Service: You can get a map from the latitude and longitude. This is the most basic service that has google.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

Other service is Geolocation

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

 

APIs REST learning[edit]

Arquitectura REST

REST, abreviatura de Representational State Transfer, o Transferencia de Estado Representacional (pedazo de palabro) es un estilo de arquitectura para diseñar aplicaciones en red. Una API podría considerarse REST si su arquitectura se ajusta a ciertas reglas o restricciones.

La idea que transciende tras una REST es ofrecer una alternativa sencilla para tecnologías complejas como CORBA, RPC o SOAP. Para conseguirlo REST utiliza HTTP. REST nos permite crear servicios y aplicaciones que pueden ser usadas por cualquier dispositivo o cliente que entienda HTTP.

La REST API es mucho más efectiva gracias a HTTP (Hyper Text Transfer Protocol). El motivo de que esto sea así es que este protocolo permite compartir información entre un cliente (portátil, teléfono móvil, tableta, etc.) y un servidor.

Cómo crear un API REST usando Node.js, Express y MongoDB

El primer paso es crear un directorio en tu entorno local para la aplicación, e iniciar un repositorio para guardar los cambios.

$ mkdir node-api-rest-example
$ cd node-api-rest-example
$ git init

El primer código que necesitamos escribir en una aplicación basada en Node es el archivo package.json. Éste archivo nos indica que dependencias vamos a utilizar en ella. Este archivo va en el directorio raíz de la aplicación:

{
 "name": "node-api-rest-example",
 "version": "2.0.0",
 "dependencies": {
 "mongoose": "~3.6.11",
 "express": "^4.7.1",
 "method-override": "^2.1.2",
 "body-parser": "^1.5.1"
 }
}

Y ahora para descargar las dependencias escribimos lo siguiente en la consola y NPM (el gestor de paquetes de Node) se encargará de instalarlas.

$ npm install

Nuestro servidor Node.js

Con todo listo, podemos comenzar a codear de verdad. Creamos un fichero llamado app.js en el directorio raíz que será el que ejecute nuestra aplicación y arranque nuestro server. Crearemos en primer lugar un sencillo servidor web para comprobar que tenemos todo lo necesario instalado, y a continuación iremos escribiendo más código.

var express = require("express"),  
    app = express(),
    bodyParser  = require("body-parser"),
    methodOverride = require("method-override");
    mongoose = require('mongoose');

app.use(bodyParser.urlencoded({ extended: false }));  
app.use(bodyParser.json());  
app.use(methodOverride());

var router = express.Router();

router.get('/', function(req, res) {  
   res.send("Hello World!");
});

app.use(router);

app.listen(3000, function() {  
  console.log("Node server running on http://localhost:3000");
});

Las primeras líneas se encargan de incluir las dependencias que vamos a usar, algo así como los includes en C o PHP, o los import de Python.

Importamos Express para facilitarnos crear el servidor y realizar llamadas HTTP. Con http creamos el servidor que posteriormente escuchará en el puerto 3000 de nuestro ordenador.

Con bodyParser permitimos que pueda parsear JSON.

Con methodOverride() nos permite implementar y personalizar métodos HTTP.

Podemos declarar las rutas con app.route(nombre_de_la_ruta) seguido de los verbos .get(), .post(), etc… y podemos crear una instancia para ellas con express.Router().

En este primer ejemplo vamos hacer que sólo reciba una petición GET del navegador y muestre en el mismo la frase Hello World

Para ejecutar este pequeño código sólo tienes que escribir en consola lo siguiente y abrir un navegador con la url http://localhost:3000

$ node app.js
Node server running on http://localhost:3000  

Si todo va bien, esto es lo que se verá:

Creando los modelos de nuestra API REST

En esta parte vamos a crear un modelo usando Mongoose para poder guardar la información en la base de datos siguiendo el esquema.

Como base de datos vamos a utilizar MongoDB. MongoDB es una base de datos Open Source NoSQL orientada a documentos tipo JSON, lo cual nos viene que ni pintado para entregar los datos en este formato en las llamadas a la API.

Para este ejemplo vamos a crear una base de datos de series de TV, por tanto vamos a crear un modelo (Archivo: models/tvshow.js) que incluya la información de una serie de TV, como pueden ser su título, el año de inicio, país de producción, una imagen promocional, número de temporadas, género y resumen del argumento:

//File: models/tvshow.js
var mongoose = require('mongoose'),  
    Schema   = mongoose.Schema;

var tvshowSchema = new Schema({  
  title:    { type: String },
  year:     { type: Number },
  country:  { type: String },
  poster:   { type: String },
  seasons:  { type: Number },
  autor:  { type: String },
  genre:    { type: String, enum:
  ['Drama', 'Fantasy', 'Sci-Fi', 'Thriller', 'Comedy']
        },
  summary:  { type: String }
});

module.exports = mongoose.model('TVShow', tvshowSchema);  

Cómo relacionar tus modelos en MongoDB

MongoDB es una base de datos no relacional, es decir no es como las típicas bases de datos SQL (MySQL, Oracle, PostgreSQL, etc...) donde existen relaciones entre una tabla y otra. Veamos un ejemplo clásico.

Imaginemos que nuestra base de datos de series de TV, queremos que tenga una tabla con las series y otra con los autores. El campo autor en la tabla de series, apuntaría a un ID o clave primaria de un autor de la tabla autores.

En MongoDB podemos hacer algo parecido, por medio de referencias y el método populate de MongoDB.

Sigamos con el ejemplo anterior. Un modelo autor en Node.js usando mongoose sería tal que así:

var mongoose = require('mongoose');  
var Schema = mongoose.Schema;

var autorSchema = new Schema({  
    nombre: String,
    biografia: String,
    fecha_de_nacimiento: Date,
    nacionalidad: String
});

module.exports = mongoose.model('Autor', autorSchema);  

Por lo que nuestro modelo tvshow cambiaría a:

//File: models/tvshow.js
var mongoose = require('mongoose'); 
var Schema   = mongoose.Schema;
var Autor = mongoose.model('Autor');

var tvshowSchema = new Schema({  
  title:    { type: String },
  year:     { type: Number },
  country:  { type: String },
  poster:   { type: String },
  seasons:  { type: Number },
  autor: { type: Schema.ObjectId, ref: "Autor" } 
  genre:    { type: String, enum:
  ['Drama', 'Fantasy', 'Sci-Fi', 'Thriller', 'Comedy']
        },
  summary:  { type: String }
});

module.exports = mongoose.model('TVShow', tvshowSchema);  

Si nos fijamos, para el campo autor en el modelo libro hemos usado el tipo Schema.ObjectId y la referencia al modelo Autor. Esto nos permitirá establecer la relación entre un campo de una tabla y otra.

Todo esto nos sirve para relacionar ambos modelos y en caso de que nos llegue una petición, poder enviar toda la información.

Con esto ya podemos implementar la conexión a la base de datos en el archivo app.j* añadiendo las siguientes líneas:

var mongoose = require('mongoose');  
mongoose.connect('mongodb://localhost/tvshows');  

Quedando así el código de app.js:

var express  = require("express"),  
    app      = express(),
    http     = require("http"),
    server   = http.createServer(app),
    mongoose = require('mongoose');

app.use(bodyParser.urlencoded({ extended: false }));  
app.use(bodyParser.json());  
app.use(methodOverride());

var router = express.Router();

router.get('/', function(req, res) {  
   res.send("Hello World!");
});

app.use(router);

mongoose.connect('mongodb://localhost/tvshows', function(err, res) {  
  if(err) {
    console.log('ERROR: connecting to Database. ' + err);
  }
  app.listen(3000, function() {
    console.log("Node server running on http://localhost:3000");
  });
});

Para que esto funcione en nuestro entorno local, necesitamos tener instalado MongoDB. Dependiendo de vuestro sistema operativo de hace de una forma u otra. Aquí tenéis la documentación oficial. Si tienes Mac, se instala de la misma manera que Node.js:

$ brew update
$ brew install mongodb

Una vez hecho esto, para poder iniciar MongoDB debes ejecutar en otra terminal:

$ mongod -dbpath ~/node-api-rest-example/data --port 27017
...
2016-04-13T13:26:59.747+0200 I NETWORK  [initandlisten] waiting for connections on port 27017 

Con Mongo arrancado ya podemos ejecutar la aplicación como en la parte anterior con node app.js desde la terminal, si todo va bien tendremos algo en la pantalla como esto:

$ node app.js
Node server running on http://localhost:3000  
Connected to Database  

Ahora desde otra terminal, podemos entrar al shell de MongoDB y comprobar que la base de datos se ha creado correctamente. Para ello ejecutamos el comando mongo

$ mongo
MongoDB shell version: 2.4.1  
connecting to: test  
> use tvshows
switched to db tvshows  
> show dbs
local    0.078125GB  
tvshows    (empty)  
>_

Ya tenemos todo configurado y listo para albergar los datos, sólo nos queda crear las rutas que definirán las llamadas a la API para poder guardar y consultar la información

Implementando los controladores de nuestas rutas o endpoints

los controladores de las rutas de nuestro API los vamos a crear en un archivo separad que llamaremos controllers/tvshows.js. Gracias a exports conseguimos modularizarlo y que pueda ser llamado desde el archivo principal de la aplicación. El código de a continuación es el comienzo del archivo con la primera función que será la que devuelva todos los registros almacenados:

//File: controllers/tvshows.js
var mongoose = require('mongoose');  
var TVShow  = mongoose.model('TVShow');

//GET - Return all tvshows in the DB
exports.findAllTVShows = function(req, res) {  
    TVShow.find(function(err, tvshows) {
    if(err) res.send(500, err.message);

    console.log('GET /tvshows')
        res.status(200).jsonp(tvshows);
    });
};

De esta manera tan sencilla, al llamar a la función findAllTVShows se envia como respuesta toda la colección de tvshows almacenada y en formato JSON. Si queremos que sólo nos devuelva un registro con un identificador único, tenemos que crear una función tal que la siguiente:

//GET - Return a TVShow with specified ID
exports.findById = function(req, res) {  
    TVShow.findById(req.params.id, function(err, tvshow) {
    if(err) return res.send(500. err.message);

    console.log('GET /tvshow/' + req.params.id);
        res.status(200).jsonp(tvshow);
    });
};

Con las funciones find() y findById() podemos buscar en la base de datos a partir de un modelo. Ahora desarrollaré el resto de funciones que permiten insertar, actualizar y borrar registros de la base de datos. La función de a continuación sería la correspondiente al método POST y lo que hace es añadir un nuevo objeto a la base de datos:

//POST - Insert a new TVShow in the DB exports.addTVShow = function(req, res) {

   console.log('POST');
   console.log(req.body);
   var tvshow = new TVShow({
       title:    req.body.title,
       year:     req.body.year,
       country:  req.body.country,
       poster:   req.body.poster,
       seasons:  req.body.seasons,
       genre:    req.body.genre,
       summary:  req.body.summary
   });
   tvshow.save(function(err, tvshow) {
       if(err) return res.status(500).send( err.message);
   res.status(200).jsonp(tvshow);
   });

};

Primero creamos un nuevo objeto tvshow siguiendo el patrón del modelo, recogiendo los valores del cuerpo de la petición, lo salvamos en la base de datos con el comando .save() y por último lo enviamos en la respuesta de la función.

La siguiente función nos permitirá actualizar un registro a partir de un ID. Primero buscamos en la base de datos el registro dado el ID, y actualizamos sus campos con los valores que devuelve el cuerpo de la petición:

//PUT - Update a register already exists
exports.updateTVShow = function(req, res) {  
    TVShow.findById(req.params.id, function(err, tvshow) {
        tvshow.title   = req.body.petId;
        tvshow.year    = req.body.year;
        tvshow.country = req.body.country;
        tvshow.poster  = req.body.poster;
        tvshow.seasons = req.body.seasons;
        tvshow.genre   = req.body.genre;
        tvshow.summary = req.body.summary;

        tvshow.save(function(err) {
            if(err) return res.status(500).send(err.message);
      res.status(200).jsonp(tvshow);
        });
    });
};

Y por último para completar la funcionalidad CRUD de nuestra API, necesitamos la función que nos permita elminar registros de la base de datos y eso lo podemos hacer con el código de a continuación:

//DELETE - Delete a TVShow with specified ID
exports.deleteTVShow = function(req, res) {  
    TVShow.findById(req.params.id, function(err, tvshow) {
        tvshow.remove(function(err) {
            if(err) return res.status(500).send(err.message);
      res.status(200).send();
        })
    });
};

Como puedes ver, usamos de nuevo el método .findById() para buscar en la base de datos y para borrarlo usamos .remove() de la misma forma que usamos el .save() para salvar.

Ahora tenemos que unir estas funciones a las peticiones que serán nuestras llamadas al API. Volvemos a nuestro archivo principal, app.js y declaramos las rutas, siguiendo las pautas de Express v.4

var TVShowCtrl = require('./controllers/tvshows');

// API routes
var tvshows = express.Router();

tvshows.route('/tvshows')  
  .get(TVShowCtrl.findAllTVShows)
  .post(TVShowCtrl.addTVShow);

tvshows.route('/tvshows/:id')  
  .get(TVShowCtrl.findById)
  .put(TVShowCtrl.updateTVShow)
  .delete(TVShowCtrl.deleteTVShow);

app.use('/api', tvshows);  

El archivo completo controllers/tvshows.js sería el siguiente:

//File: controllers/tvshows.js
var mongoose = require('mongoose');
var TVShow  = mongoose.model('TVShow');

//GET - Return all tvshows in the DB
exports.findAllTVShows = function(req, res) {
	TVShow.find(function(err, tvshows) {
    if(err) res.send(500, err.message);

    console.log('GET /tvshows')
		res.status(200).jsonp(tvshows);
	});
};

//GET - Return a TVShow with specified ID
exports.findById = function(req, res) {
	TVShow.findById(req.params.id, function(err, tvshow) {
    if(err) return res.send(500, err.message);

    console.log('GET /tvshow/' + req.params.id);
		res.status(200).jsonp(tvshow);
	});
};

//POST - Insert a new TVShow in the DB
exports.addTVShow = function(req, res) {
	console.log('POST');
	console.log(req.body);

	var tvshow = new TVShow({
		title:    req.body.title,
		year: 	  req.body.year,
		country:  req.body.country,
		poster:   req.body.poster,
		seasons:  req.body.seasons,
		genre:    req.body.genre,
		summary:  req.body.summary
	});

	tvshow.save(function(err, tvshow) {
		if(err) return res.send(500, err.message);
    res.status(200).jsonp(tvshow);
	});
};

//PUT - Update a register already exists
exports.updateTVShow = function(req, res) {
	TVShow.findById(req.params.id, function(err, tvshow) {
		tvshow.title   = req.body.petId;
		tvshow.year    = req.body.year;
		tvshow.country = req.body.country;
		tvshow.poster  = req.body.poster;
		tvshow.seasons = req.body.seasons;
		tvshow.genre   = req.body.genre;
		tvshow.summary = req.body.summary;

		tvshow.save(function(err) {
			if(err) return res.send(500, err.message);
      res.status(200).jsonp(tvshow);
		});
	});
};

//DELETE - Delete a TVShow with specified ID
exports.deleteTVShow = function(req, res) {
	TVShow.findById(req.params.id, function(err, tvshow) {
		tvshow.remove(function(err) {
			if(err) return res.send(500, err.message);
      res.status(200);
		})
	});
};

Probando nuestro API REST en el navegador

A continuación voy a probar una herramienta online que nos permite jugar con las llamadas al API y poder consultar y almacenar datos para probarla y ver su funcionamiento un poco más claro.

Para ello nos dirijimos a postman, que permite hacer lo que queremos de una manera visual y sencilla.

Antes de probarlo, debemos tener mongo y el servidor node de nuestra app corriendo. Una vez hecho esto introducimos los siguientes datos para hacer una llamada POST que almacene un registro en la base de datos.

Target: http://localhost:3000/api/tvshow (Dónde está ejecutándose la aplicación y la llamada al método POST que hemos programado)

Content-Type: application/json (en los dos input que nos dan)

Request-Payload: Aquí va el cuerpo de nuestra petición, con el objeto JSON siguiente (por ejemplo):

{
  "title": "LOST",
  "year": 2004,
  "country": "USA",
  "poster": "http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_SY317_CR17,0,214,317_.jpg",
  "seasons": 6,
  "genre": "Sci-Fi",
  "summary": "The survivors of a plane crash are forced to live with each other on a remote island, a dangerous new world that poses unique threats of its own."
}

Pulsamos SEND y si todo va bien, la petición se realizará y abajo de la aplicación REST Console veremos algo como esto:

¿Cómo comprobamos si se ha guardado en nuestra base de datos? Muy sencillo, en nuestro terminal ejecutamos el Shell de mongo con el comando mongod e introducimos los siguiente comandos:

Graylynx@Macgraylynx-2 ~/TFG/node-api-rest-example $ mongo                                                                                                [ruby-2.0.0p648]
MongoDB shell version: 3.2.4
connecting to: test
> show dbs
local    0.000GB
tvshows  0.000GB
> use tvshows
switched to db tvshows
> show collections
tvshows
> db.tvshows.find()
{ "_id" : ObjectId("570e81f50d96c9a3b0000001"), "title" : "LOST", "year" : 2004, "country" : "USA", "poster" : "http://ia.media-imdb.com/images/M/MV5BMjA3NzMyMzU1MV5BMl5BanBnXkFtZTcwNjc1ODUwMg@@._V1_SY317_CR17,0,214,317_.jpg", "seasons" : 6, "genre" : "Sci-Fi", "summary" : "The survivors of a plane crash are forced to live with each other on a remote island, a dangerous new world that poses unique threats of its own.", "__v" : 0 }

Y ahí la tenemos, puedes probar a introducir alguna más, para tener mayor contenido con el que probar. Una vez introduzcas varios registros, puedes probar a llamarlos a través de la petición GET que hemos preparado: http://localhost:3000/api/tvshows la cuál te mostrará algo parecido a esto:

También podemos llamar a un sólo registro gracias a la petición GET tvshows/:id que programamos, si ejecutamos por ejemplo http://localhost:3000/api/tvshow/570e81f50d96c9a3b0000001 nos devolverá un único objeto:

Los métodos restantes PUT y DELETE funcionan de manera parecida al POST sólo que hay que pasarte el valor del ID del objeto que queremos actualizar o borrar. Te invito a que lo pruebes en la Tutorial de NodeJS, creando un API REST - Postman.

Con esto tendríamos el funcionamiento básico y programación de lo que sería una API REST. Como puedes ver es bastante sencillo y utilizas Javascript en todas partes, como lenguaje de servidor (Node), como formato de datos (JSON) y como base de datos (MongoDB).

Todo el código utilizado está subido en el repositorio que he creado en GitHub, te animo a descargarlo, probarlo y modificarlo para aprender :)

MySQL learning[edit]

SQL is a standard language for accessing databases.

To build a web site that shows data from a database, you will need:

1º An RDBMS database program (i.e. MS Access, SQL Server, MySQL)

Lo primero para tener una pagina web con bases de datos necesitamos de un programa donde podamos crear tablas de datos. La instalación de MySQL, puede dar problemas sobre todo en sistemas operativos diferentes a Linux. Mi consejo es que empeceis a usar el instalador llamado Homebrew. Hombrew es una herramienta que facilita mucho al desarrollador. Una vez instalado,[[2]] simplemente con la instruccion
brew install MySQL

Somos capaces de tener instalados MySQL es nuestro ordenador. Cuando ya tengamos MySQL lo primero que tenemos que hacer es arrancarlo:

    mysql.server start
        Starting MySQL
        ..... SUCCESS! 

Una vez arrancado nuestro MySQL, comenzamos a crear nuestra base de datos para la aplicación de prueba que vamos a realizar.

    mysql -uroot
    mysql> 

Ya estamos preparados para crear la tabla de base de datos: Creamos una base de datos llamada my_db, dentro de ella crearemos una tabla de una columna denominada palabra y cuyo tamaño máximo por celda será de 100 caracteres.

    mysql> CREATE DATABASE my_db;;
    mysql> use my_db;
    mysql> CREATE TABLE FirstTable(words varchar(255));

Una vez que ya tenemos nuestras tabla creada ya podemos empezar a desarrollar nuestra aplicación. Por último añadir some of The Most Important SQL Commands

SELECT - extracts data from a database

UPDATE - updates data in a database

DELETE - deletes data from a database

INSERT INTO - inserts new data into a database

CREATE DATABASE - creates a new database

ALTER DATABASE - modifies a database

CREATE TABLE - creates a new table

ALTER TABLE - modifies a table

DROP TABLE - deletes a table

CREATE INDEX - creates an index (search key)

DROP INDEX - deletes an index

2º To use a server-side scripting language, like JavaScript in the programming environment NodeJS.

Primero antes de usar la base de datos creada, empezaremos instalando el módulo de MySQL Para conectar una aplicación Node.js debemos tener el módulo de MySQL instalado, así que vamos a entrar dentro de nuestra carpeta de node desde la consola. En mi caso:

cd C:\Program Files\nodejs

Y vamos a instalar este nuevo módulo para que esté disponible en nuestros futuros proyectos:

npm install mysql

//Llamamos al modulo mysql
var mysql = require('mysql');

//Creamos array con palabra que luego insertaremos en nuestra base de datos.
var list_words= [' Caress ', ' bee ', ' attack ' , 'bind '
                           'Down' , ' down ', ' banking ', ' bed '
                           ' Singer ' , 'bed' , ' dressing room ' , " truck "
                           ' Daily ', ' diamond ', ' Daily ' , 'day '
                           ' John ', ' Viking ', ' next ' , 'market' , ' cream '
                           ' Cold ' , 'cat' , 'dog' , ' person '];

Conexión con MySQL

Ahora vamos a crear un nuevo proyecto al que yo simplemente llamaré conexion_mysql, y dentro de éste un archivo insert_data.js. Al cual vamos editar con el siguiente código:

var connection = mysql.createConnection({
  user     : "root",
  database : "my_db",
  host     : "127.0.0.1",
  port: 3306
});

En realidad el puerto no es obligatorio, pero para estar más seguro yo lo puse como valor 3306, que es por donde funciona en mi máquina.

Luego sí, intentamos conectar mediante el método connect():

connection.connect(function(error){
   if(error){
      throw error;
   }else{
      console.log('Conexion correcta.');
   }
});

Truncamos la tabla para no duplicar contenido de nuestra base de datos

connection.query('truncate table FirstTable',function(error,result){
	if(!error){
		console.log("truncate is OK ... nn");    
	}else{
		console.log("Error truncate ... nn");    
	}
});

Consultas

Empezaremos realizando un INSERT en nuestra tabla:

Como vemos en este ejemplo, utilizamos el método .query(), el cual recibirá tres parámetros. El primero será la consulta, y el segundo serán los valores de entrada; si no hay ninguno, entonces le pasamos un array vacío. Y finalmente un callback que se disparará cuando se obtenga la respuesta, al cual le pasamos dos parámetros, el error, si hubo alguno, y el resultado de la respuesta:

for(var i=0;i<list_words.length;i++){
	var palabra = list_words[i];
	console.log(palabra);
	var query = connection.query('INSERT INTO FirstTable set words = ?',[palabra],function(err,result){ 
		if(!error){
		     console.log(result);   
		}else{
		     throw error;  
		}
	});
}

Este método tendrá un parámetro de tipo callback, que a su vez recibirá el error, si hubo alguno al intentar conectarse con la base de datos.

Y finalmente desconectamos la base de datos MySQL:

connection.end();

Una vez que ya tenemos la base de datos creada, empezamos a desarrollar el cliente y el servidor.

Cliente:

Nuestro cliente va consistir simplemente en:

    <p>Introducir palabra</p>
    <input id='search' type='text' placeholder="search words" onkeyup="send_data()"></input>
    <div id="list">
        <ul id="items"></ul>
    </div>

Cuando introduzcamos letras en nuestro input se realizara una petición AJAX que consistirá simplemente en:

    function send_data(){
	var data = $("#search").val();
	if(data.length > 2){
	    var xhttp = new XMLHttpRequest();
  	    xhttp.onreadystatechange = function(){
	        if (xhttp.readyState == 4 && xhttp.status == 200) {
	    	    var words = JSON.parse(xhttp.responseText).palabras;
	    	    $("li").remove();
	    	    for(var i=0;i < words.length;i++){
	    	        $('#items').append('<li>'+words[i]+'</li>');
	            }
	        }
  	    };
	xhttp.open("POST", "http://localhost:3000/", true);
  	xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  	xhttp.send('word='+data);
	}
	if(palabra.length < 2){
		$("li").remove();
	}
   }

Servidor:

Nuestro servidor tendra que ser capaz de procesar este envio de nuestro cliente, buscando en nuestra base de datos creada y devolver el resultado para que el cliente pueda obtener el resultado de su busqueda. Nuestro servidor consistira en:

server.js

Volveremos a establecer la conexión con la base de datos ya creada

var connection = mysql.createConnection({
  user     : "root",
  database : "my_db",
  host     : "127.0.0.1",
  port: 3306
});

Comprobamos que la conexión con la base de datos sea correcta.

connection.connect(function(err){
	if(!err){
	    console.log("Database is connected ... localhost:3306");    
	}else{
	    console.log("Error connecting database ... nn");    
	}
});

Por último vemos como buscar en nuestra base de datos conforme a la petición AJAX que nos llega del cliente:

app.post("/",urlencodedParser,function(req,res){
	var word = req.body.word;
	word = word+"%";
	connection.query('SELECT * from FirstTable where words like ?',[word], function(err, rows, fields) {
  	if (!err){
    	    var items_BD = rows;
    	    var list=[];
    	    for(item in items_BD){
    		list.push(rows[item].words);
    	    }
    	    var obj_list = {palabras:list};
    	    res.send(JSON.stringify(obj_list));
  	}else{
    	    console.log('Error while performing Query.');
  	}
	});
});

MongoDB learning[edit]

MongoDB Advantages

Any relational database has a typical schema design that shows number of tables and the relationship between these tables. While in MongoDB there is no concept of relationship

Advantages of MongoDB over RDBMS

1º Schema less : MongoDB is document database in which one collection holds different different documents. Number of fields, content and size of the document can be differ from one document to another.

2º Structure of a single object is clear

3º No complex joins

4º Deep query-ability. MongoDB supports dynamic queries on documents using a document-based query language that's nearly as powerful as SQL

5º Tuning

6º Ease of scale-out: MongoDB is easy to scale

7º Conversion / mapping of application objects to database objects not needed

8º Uses internal memory for storing the (windowed) working set, enabling faster access of data


Why should use MongoDB

1º Document Oriented Storage : Data is stored in the form of JSON style documents

2º Index on any attribute

3º Replication & High Availability

4º Auto-Sharding

5º Rich Queries

6º Fast In-Place Updates

7º Professional Support By MongoDB


START UP

1º Install MongoDB

    ~/ brew install mongodb

2º Instal dependencies archive package.json

2.1. Create archive package.json.

 {
  "name": "proyect_mongo",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
      "body-parser": "~1.13.2",
      "cookie-parser": "~1.3.5",
      "express": "~4.13.1",
      "kerberos": "~0.0.17",
      "mongodb": "~2.0.33"
  }
}

2.2 Install dependencies.

     ~/my_proyect_mongo npm install 

3 Run data base.

    ~/my_proyect_mongo mkdir data
    ~/ mongod --dbpath=/myproyect/data --port 27017

4 Coneccting to MongoDB (NodeJS MongoDB driver API)

Admin--> new Admin() Create a new Admin instance (INTERNAL TYPE, do not instantiate directly)

Methods:

addUser(username, password, options, callback); --Add a user to the database.

authenticate(username, password, callback); --Authenticate a user against the server.

listDatabases(callback); --List the available databases

logout(callback) --Logout user from server, fire off on all connections and remove all auth info

removeUser(username, options, callback) --Remove a user from a database

validateCollection(collectionName, options, callback) --Validate an existing collection

MongoClient

var MongoClient = require('mongodb').MongoClient;

MongoClient.connect(url, options, callback)

Insert Data:

//insert(docs, options, callback);
//insertMany(docs, options, callback)
//insertOne(docs, options, callback)

var insertWord = function(db, callback) {
   db.collection('mycollection').insertOne({name: "Hello_World" }, function(err, result) {
        console.log("Inserted a document into the collection.");
        callback();
  });
};

Find Data:

//find(query)
//findAndModify(query, sort, doc, options, callback)
//findAndRemove(query, sort, options, callback)
//findOne(query, options, callback)
//findOneAndDelete(filter, options, callback)
//findOneAndReplace(filter, replacement, options, callback)
//findOneAndUpdate(filter, update, options, callback)

var findWord = function(db, callback) {
   //{$regex : palabra}--> let find this strings in our data base
   var cursor =db.collection('mycollection').find({"name" : {$regex : palabra}});
   cursor.toArray(function(err, result) {
      assert.equal(err, null);
      if (result != null) {
         for(var i=0;i<result.length;i++){
          console.log(result[i].name);
        }
      } else {
         callback();
      }
   });
};

Delete Data:

var removeWord = function(db, callback) {
   db.collection('mycollection').deleteOne(palabra, function(err, results) {
         console.log(results);
         callback();
      }
   );
};

Connecting with Mongo:

  MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  findWord(db, function() {
      db.close();
  });
  });

AJAX learning[edit]

¿What is AJAX? short for asynchronous JavaScript and XML. AJAX is a set of web development techniques using many web technologies on the client-side to create asynchronous Web applications. This makes it possible to make changes to the page without having to reload the entire page.

The following example AJAX application consists of four main sections:

1º Instantiate the XMLHttpRequest object: All applications made ​​with AJAX, must first instantiate the XMLHttpRequest object, which is the key object that allows communication with the server in the background , without reloading pages. The implementation of the XMLHttpRequest object depends on the browser, so it is necessary to use a simple discrimination based on browser that is running the code. (Firefox, Safari, Opera, Internet Explorer 7 y 8) implement the object XMLHttpRequest, while Internet Explorer 6 and previous) implement the objeto XMLHttpRequest how a object of kind ActiveX.

if(window.XMLHttpRequest) {
    XMLHttpRequest = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

2º Preparing the response function: Once the instance of the XMLHttpRequest object, the function that is responsible for processing the server response is prepared.

XMLHttpRequest.onreadystatechange = displayContent;

displayContent(). The reference to the function is indicated by its name without parentheses , as otherwise they would be running the function and storing the returned in the onreadystatechange property value.

3º The request to the server. After preparing the application to the server response , the HTTP request is made to the server.

XMLHttpRequest.open('GET', 'http://localhost/prueba.txt', true);
XMLHttpRequest.send(null);

4º Process the response: Finally, when the server response is received, the application automatically executes the function established above.

function displayContent() {
  if(XMLHttpRequest.readyState == 4) {
    if(XMLHttpRequest.status == 200) {
      alert(XMLHttpRequest.responseText);
    }
  }
} 

The object XMLHttpRequest have a lot of properties. The following shows a list of all the properties of XMLHttpRequest:

Properties -------> Description

readyState ------> Numeric value ( integer) that stores the status of the request

responseText --> The contents of the server response as a string

responseXML --> The response of the server in XML format.

status ------------> The HTTP status code returned by the server ( 200 for a correct answer , 404 for "Not Found ", error 500 for a server, etc.)

statusText ------> The HTTP status code returned by the server in the form of string : "OK" , "Not Found" , "Internal Server Error" , etc.

The following shows a list of all the methods of XMLHttpRequest:

Methods --------------------------------------------> Description

abort() -----------------------------------------------> Stops the request

getAllResponseHeaders() ----------------------------> Returns a string with all the heads of the server response

getResponseHeader("head") -------------------------> Returns a string with the contents of the requested header

onreadystatechange ---------------------------------> This method is called whenever there is a change of state, usually it is related to a function Javascript.

open("metodo", "url") --------------------------------> Provides the necessary parameters for the request, The parameters required are the HTTP method and the destination URL

send(content) ---------------------------------------> Making the HTTP request to the server. content can be how: a string , a byte array or an XML DOM object.

setRequestHeader("cabecera", "valor") --> It lets custom headers in the request. Important: You should call the open () method before setRequestHeader ()


In the request to the server. The XMLHttpRequest object can send parameters with the GET method and the HTTP POST method. The main difference between both methods is that using the POST method can send parameter in the body of the request while GET method you can send parameters concatenate to the URL.

The GET method is used when accessing a resource that depends on the information provided by the user. GET method is limited data (512 bytes).

The POST method is used in operations that create , delete or update information.

XMLHttpRequest.onreadystatechange = displayContent;
XMLHttpRequest.open("POST", "http://localhost/", true);
XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var query_string = create_query_string();
XMLHttpRequest.send(query_string);
function create_query_string() {
  var date = document.getElementById("birth_date");
  var phone = document.getElementById("phone");
  //The encodeURIComponent () function replaces all characters can not be used directly in the URL for their hexadecimal representation.
  //The decodeURIComponent () does the inverse transformation. 
  return "birth date=" + encodeURIComponent(date.value) +
         "&phone=" + encodeURIComponent(telefono.value) +
         "&nocache=" + Math.random();
}

The XMLHttpRequest object allows sending parameters other alternative means to traditional query string. You can make a request to the server sending the parameters in XML format.

XMLHttpRequest.onreadystatechange = displayContent;
XMLHttpRequest.open("POST", "http://localhost/", true);
XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var xml_ parameters = create_xml();
XMLHttpRequest.send(xml_ parameters);
function create_xml() {
  var date = document.getElementById("birth_date");
  var phone = document.getElementById("phone");
  var xml = "<parameters>";
  xml += "<birth_date>" + fecha.value + "<\/birth_date>";
  xml += "<phone>" + phone.value + "<\/phone>";
  xml += "<\/parameters>";
  return xml;
}

The send( ) method of XMLHttpRequest object allows sending a text string and an XML document, however, today don't exist a robust method and can be used in most browsers for creating complete XML documents. The solution is a string representing an XML document.

<parameters>
  <result>True</result>
</parameter>

Process the response. When we receive a request of server with JSON format, we use the property responseText that lets see the contents of the server response as a string.


var response_json = XMLHttpRequest.responseText;
var object_json = eval("("+response_json+")");
var result = objet_json.parameter.result;
document.getElementById("solution").value = result;

Process the response. When we receive a request of server with XML format, we use the property responseXML that lets see the response of the server in XML format.

var xml = XMLHttpRequest.responseXML;
var parameters = xml.getElementsByTagName("parameters")[0];
var result = parameters.getElementsByTagName("result")[0].firstChild.nodeValue;
document.getElementById("solution").value = result;