[Js Es 6] [Cloudant][Big Data] MonEtablissement : Une application sans code serveur de type CRUD.

monetablissement.jpg

cloudant

Introduction


Je désire faire une application absolument sans code serveur, qui fasse du CRUD (Créer, lire, éditer, supprimer).

Et oui c’est désormais possible en activant CORS dans l’interface CLOUDANT et avec la super technologie couchDb !

Autant dire que c’est le top pour faire des maquettes rapides !

Ici, je vais faire une micro application BIG DATA qui permet de modifier un des 13989 organismes de formations français .

NOTE IMPORTANTE : POUCHDB propose une syntaxe incroyablement plus simple, qui cache tous les appels ajax, on va donc refaire la même micro app avec POUCHDB dans un post suivant. Ce post est réalisé à titre informatif, pour quelqu’un qui voudrait attaquer la base cloudant directement avec du jquery AJAX .

Photo de l’app :


app10.jpg

Notes


la Bdd couchDb dispose d’une super API $.couch qui permet de faire du CRUD, seulement, n’ayant pas réussi , pour l’instant, à la plugger avec CLOUDANT, je propose ici une app sans cette api.

Les données de l’app


La liste publique des organismes de formation est disponible à cet url :

https://www.data.gouv.fr/fr/datasets/liste-publique-des-organismes-de-formation-l-6351-7-1-du-code-du-travail/

On importe tout ces data JSON dans la base de données cloudant (Chercher la méthode d’import sur le WEB), puis on va élaborer un formulaire CRUD dessus .

Tester l’application en ligne :


L’app est à tester sur CE LIEN

Tout d’abord, notre formulaire index.html qui sera notre seule vue du coup  :


<html >
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exo cloudant</title>
        
		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
            <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
			<link type="text/css" rel="stylesheet" href="style.css" />
			
			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>

<!-- La page HTML générale -->
<body style="background-color:tan" >
   <div id="app"  >
	<div class="row" style="margin-top:10px; " >
		<div class="card col-md-6 " >  
			 <div class="card-header">Les établissements </div>
			   <div class="card-body cardspe" id="card"  > </div>
	
			<div class="card-footer ">Filtres
				<button  onclick="lireDix()"class="btn float-right btn-primary"  >10 de plus</button>
			</div>
		</div>



	   <div class="card col-md-6"  id="div1">  
			<div class="card-header">Détails</div>
			<div class="card-body cardspe" id="detail"  ></div>
			<div class="card-footer ">
				<button onclick="valider()" class="btn float-right btn-primary"  >Valider</button>
			</div>
        </div>
	
		
    </div>
</body>


<script src="app.js"></script>



Remarquer qu’on ne charge pas beaucoup de librairies . On peut voir qu’il y a 2 fonctions, valider() qui va nous permettre de valider l’édition du formulaire, et lireDix() qui va nous permettre de lire 10 établissements supplémentaires à chaque fois .

Le fichier app.js est chargé en fin de script, et c’est lui qui va piloter notre vue index.html , on reste’ dans un pseudo format MVC, sans se prendre la tête.

Notre fichier APP.JS


Il peut paraitre impressionnant aux premiers abords, mais il ne fait que du CRUD AJAX sur IBM Cloudant.

On se sert de l’API http de IBM cloudant pas par le biais de CURL, mais par le biais de Jquery AJAX .

Quels notes  :

  • lireDix() affiche les établissements 10 par 10
  • editer(id) récupère un établissement à l’aide de son ID cloudant et crée le formulaire(template) en conséquence, grâce à JS ES6
  •  valider() récupère le contenu des champs du formualire puis les envoie à Cloudant

*

/* ON spécifie l URL sur IBM CLOUDANT sans identification grâce à CORS */
var remoteURL = "https://1c54473b-be6e-42d6-b914-d0ecae937981-bluemix:8eeedbe180c1ce90cdc3ae37b9e74af7368b21a37b531aae819929d3405c7d22@1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements/"
var urlPrefix = "https://1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements";
var USERNAME = "1c54473b-be6e-42d6-b914-d0ecae937981-bluemix";
var PASSWORD = "8eeedbe180c1ce90cdc3ae37b9e74af7368b21a37b531aae819929d3405c7d22";

/*  On Sette les variables pour le scrolling */
skip = 0; // Le nombre de documents à éviter de lire lors de chaque clics, il est incrémenté suite à chaque clic sur le bouton . skip veut dire 'éviter'
limit = 10; // La limite de document qu'on veut lire à chaque clic sur le boutton
count = 0; // Cette variable sert à déterminer qu'on a pas encore cliqué une première fois.

//LECTURE - READ
function lireDix() {

    // Algoritme pour le scroll, on ne peux pas afficher les 15 000 établissements d'un seul coup ! On incrémente les établissements de 10 en 10 , donc on ne va pas relire les 10 d'avant, d'ou le skip !
    if (skip > 0 || count == 1) {
        skip += 10;
    } else {
        count = 1;
    }


    /* Requête ajax qui lit les établissements 10 par 10 */
    $.ajax({
        url: remoteURL + '_all_docs?' + 'skip=' + skip + '&' + 'limit=' + limit + '&include_docs=true' + '&latest=true',
        data: {format: 'json'},
        error: function() { alert('Erreur réseau');},
        dataType: 'jsonp',
        success: function(data) {
            console.log(data.rows);
            var html = data.rows;
            for (x = 0; x < data.rows.length; x++) {
                var l = data.rows[x].doc._id;
                $("#card").append("<div><button onclick=' editer(\"" + l + "\")' > Edition</button>  " + data.rows[x].doc.nom + "<br></div>");
            }
        },
        type: 'POST'
    });

}

// EDITER - UPDATE
function editer(id) {

	//  On récupère l'id du document pour pouvoir aller le récupèrer ensuite sur ibm cloudant
	var query = {
        "selector": {
            "_id": id
        }
    };
	
	// On lit le document sur ibm cloudant et on crée le formuliaire avec ses datas.
    $.ajax({
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(query),
        dataType: 'json',
        crossDomain: true,
        xhrFields: {'withCredentials': true},
        beforeSend: function(xhr) {
			xhr.setRequestHeader('Authorization', 'Basic ' + btoa(USERNAME + ":" + PASSWORD));
        },
        url: urlPrefix + '/_find',
		success: function(data) {
            console.log(data.docs[0]);
			var mesDatas = data.docs[0];
            creerFormulaire(mesDatas);
        },
        error: function(data) {
            console.log(data);
        }
    });

}




// VALIDER UN UPDATE ET ENVOYER LE DOCUMENT SUR IBM CLOUDANT
function valider() {
    
	// On récupère les var dans les champs du formulaire
	var formulaire = $('form').serializeArray();

	// On convertit ça en objet JSON
    var etablissementObject = {};

    $.each(formulaire,
	function(i, v) {
		etablissementObject[v.name] = v.value;
	});

	//	On envoit le document updaté sur IBM CLOUDANT, on fait donc un UPDATE du document à l'aide de son ID
	   $.ajax({
        type: "PUT",
        contentType: "application/json",
        data: JSON.stringify(etablissementObject),
        dataType: 'json',
        crossDomain: true,
        xhrFields: {'withCredentials': true},
        beforeSend: function(xhr) {
			xhr.setRequestHeader('Authorization', 'Basic ' + btoa(USERNAME + ":" + PASSWORD));
        },
        url: urlPrefix + '/'+etablissementObject._id,
		success: function(data) {
            console.log(data);
			
        },
        error: function(data) {
            console.log(data);
        }
    });
	
	
}


function creerFormulaire(mesDatas) {


    $("#detail").empty(); // On vide le précédent formulaire.
	
    // On crée le template formulaire avec  template en JS ES6, c'est très pratique .
    var str = `
				<form id="form" >
					<h3 style ="background:grey">❤ ${mesDatas.nom}</h3><br>
					<div class="form-group row">
					  <label for="example-text-input" class="col-2 col-form-label">Identifiant Cloudant</label>
					  <div class="col-10">
						<input class="form-control" value="${mesDatas._id}"  name="_id" id="_id" readonly ></input>
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input" class="col-2 col-form-label">Revision Cloudant</label>
					  <div class="col-10">
						<input class="form-control" value="${mesDatas._rev}"  name="_rev" id="_rev" readonly ></input>
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input" class="col-2 col-form-label">Nom</label>
					  <div class="col-10">
						<input class="form-control" value="${mesDatas.nom}"  name="nom" id="nom"></input>
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input" class="col-2 col-form-label">adresse</label>
					  <div class="col-10">
						<input class="form-control" value="${mesDatas.adresse}"  name="adresse" id="adresse"></input>
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input" class="col-2 col-form-label">telephone</label>
					  <div class="col-10">
						<input class="form-control" value="${mesDatas.telephone}"  name="telephone" id="telephone"></input>
					  </div>
					</div>
					<div class="form-group row">
					  <label for="example-text-input" class="col-2 col-form-label">Type</label>
					  <div class="col-10">
						<input class="form-control" value="${mesDatas.type_detablissement}"  name="type_detablissement" id="type_detablissement"></input>
					  </div>
					</div>
				 </form>
			`;


    $("#detail").append(str);

}

function trouver() {

 var query = {
        "selector": {
            "cp": 24000
        }
    };
    $.ajax({
        type: "POST",

        contentType: "application/json",
        data: JSON.stringify(query),
        dataType: 'json',
        crossDomain: true,
        xhrFields: {
            'withCredentials': true // tell the client to send the cookies if any for the requested domain
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('Authorization', 'Basic ' + btoa(USERNAME + ":" + PASSWORD));
        },
        url: urlPrefix + '/_find',

        success: function(data) {
            console.log(data);
        },
        error: function(data) {
            console.log(data);
        }
    });


}



lireDix();

Conclusion


On a désormais la faculté de commencer à créer des applications maquettes en très peu de temps sur Cloudant, avec tous les avantages du BIG DATA (Réplications, requêtes complexes).

Cependant, la requête _find et le map reduce seront traitées dans un prochain post.

Le code POUCHDB est plus facile :

/* Créer la base locale pouchDb */
var db = new PouchDB('https://xxxx3b-be6e-42d6-b914-d0ecae937981-bluemix:xxxx180c1ce90cdc3ae37b9e74af7368b21a37b531aae819929d3405c7d22@xxxx473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/etablissements');

db.info().then(function (info) {
  console.log(info);
})

/*  On Sette les variables pour le scrolling */
skip = 0; // Le nombre de documents à éviter de lire lors de chaque clics, il est incrémenté suite à chaque clic sur le bouton . skip veut dire 'éviter'
limit = 10; // La limite de document qu'on veut lire à chaque clic sur le boutton
count = 0; // Cette variable sert à déterminer qu'on a pas encore cliqué une première fois.

//LECTURE - READ
function lireDix() {

    // Algoritme pour le scroll, on ne peux pas afficher les 15 000 établissements d'un seul coup ! On incrémente les établissements de 10 en 10 , donc on ne va pas relire les 10 d'avant, d'ou le skip !
    if (skip > 0 || count == 1) {
        skip += 10;
    } else {
        count = 1;
    }

	db.allDocs({include_docs: true,limit:10, skip:skip}, function(err, doc) {
			// On crée un boutton pour chaque document
            for (x = 0; x < doc.rows.length; x++) {
                var l = doc.rows[x].doc._id;
                $("#card").append("
<div> Edition  " + doc.rows[x].doc.nom + "
</div>
");
            }
	});

}

// EDITER - UPDATE
function editer(id) {
	// On lit le document sur la base de données à partir de son ID, puis on crée le formulaire en conséquence.
	db.get(id).then(function (doc) {
		   creerFormulaire(doc);
	});

}

// VALIDER UN UPDATE ET ENVOYER LE DOCUMENT SUR IBM CLOUDANT
function valider() {

	// On récupère les var dans les champs du formulaire
	var formulaire = $('form').serializeArray();

	// On convertit ça en objet JSON
    var etablissementObject = {};

    $.each(formulaire,
	function(i, v) {
		etablissementObject[v.name] = v.value;
	});

	db.put(etablissementObject);

}

function creerFormulaire(mesDatas) {

    $("#detail").empty(); // On vide le précédent formulaire.

    // On crée le template formulaire avec  template en JS ES6, c'est très pratique .
    var str = `
				
<h3 style="background:grey;color:white;">❤ ${mesDatas.nom}</h3>
<div class="form-group row">
					  Identifiant Cloudant

						</div>
</div>
<div class="form-group row">
					  Revision Cloudant

						</div>
<div class="form-group row">
					  Nom

						</div>
<div class="form-group row">
					  adresse

						</div>
<div class="form-group row">
					  telephone

						</div>
<div class="form-group row">
					  Type

						</div>

			`;

    $("#detail").append(str);

}
 
Publicités