[www.openode.io] Enfin, un bon hébergeur pour publier ULTRA facilement des applications NODE.JS

nodeeeeee

Introduction


Avant 2018, on pouvait créer nos applications NODE.JS assez facilement en LOCAL .

Mais lorsque venait le moment de publier notre application en ligne, c’était assez la galère,il fallait soit acheter un serveur dédié assez cher, soit effectuer des méthodes complexes avec cloudant ou autres Aws pour arriver à placer son app en ligne .

Openode.io : Une seule commande, cela fonctionne de suite !


Depuis 2018, openode.io est arrivé, et enfin, ça marche et c’est facile !! Depuis le temps qu’on attendait ça !!

On s’inscrit sur openode.io, on a de suite un environnement prêt, suffit juste de lui donner un nom, c’est vraiment TROP SIMPLE ! Cette société serait basée au Texas.

En local, dans notre pc, on se rends dans le répertoire de notre site node.js .

Ensuite, on télécharge avec GIT leur programme de gestion hyper simple qui nous donne quelques commandes supplémentaires dans CMD(La ligne de commande Windows).

Une fois qu’on a installé leur programme, il suffit de taper dans notre répertoire :

openode deploy

pour envoyer l’intégralité de notre site en ligne, ça marche de suite !

Voici un exemple de moi, qui envoie mon application node.js en ligne :

deploy.jpg

Le programme deploy surveille que notre fichier package.json contient de bonnes versions de librairies :

Exemple :

{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.15.2",
"mysql": "^2.16.0",
"mongoose": "^5.2.6",
"morgan": "^1.1.1"

},
"scripts": {
"start": "node index.js"
}
}

Ici , je charge la lib mongoose pour pouvoir me connecter à un base de données MONGODB et la lib mysql pour pouvoir aussi me connecter à une base de données MYSQL, tout cela en JS (le langage le plus coool et flexiiible!).

Et oui, cela veut dire qu’on peut désormais coder tout en JS, aborder des bdd relationnelles quand même, et déployer de façon ultra simple, c’est carrément TROP COOL !

Voici les 2 autres fichiers de mon app, just pour info (On voit que j’exécute des requêtes SQL dans le Javascript …)  :

index.js :


 var app = require('express')();
 var http = require('http').Server(app);
 var port = process.env.PORT || 3000;
 var mongoose = require('mongoose');
 var mysql = require('mysql');
 var morgan = require('morgan'); // log requests to the console (express4)</code>

 var connection = mysql.createConnection({
     host: 'sql.free.fr',
     user: 'nicolas.huleux',
     password: 'xxxxxxx',
     database: 'nicolas_huleux'
 });

 connection.connect(function(err) {
     // connected! (unless `err` is set)

 });

 connection.query('SELECT * from acteurs', function(err, rows, fields) {
     if (!err)
         console.log('The solution is: ', rows);
     else
         console.log('Error while performing Query.');
 });

 app.get('/', function(req, res) {
     res.sendFile(__dirname + '/index.html');
 });

 http.listen(port, function() {
     console.log('listening on *:' + port);
 });

Et là, index.html, un formulaire bateau, pas encore fonctionnel

<!doctype html>
<html>
  <head>
    <title>form</title>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
	
	 <form action="action_page.php">
		  <div class="imgcontainer">
			<img src="img_avatar2.png" alt="Avatar" class="avatar">
		  </div>

		  <div class="container">
			<label for="uname"><b>Username</b></label>
			<input type="text" placeholder="Enter Username" name="uname" required>

			<label for="psw"><b>Password</b></label>
			<input type="password" placeholder="Enter Password" name="psw" required>

			<button type="submit">Login</button>
			<label>
			  <input type="checkbox" checked="checked" name="remember"> Remember me
			</label>
		  </div>

		  <div class="container" style="background-color:#f1f1f1">
			<button type="button" class="cancelbtn">Cancel</button>
			<span class="psw">Forgot <a href="#">password?</a></span>
		  </div>
		</form> 

  </body>
</html>

Conclusion :
On peut désormais coder tout en NODE.JS et publier des démos sur son blog super facilement, sans acheter une serveur dédié, c’est TROP BIEN . Si on veut, plus besoin d’utiliser PHP en back end il existe des tas de libs qui permette à node de se connecter aux bases relationnelles, y compris sans faire de SQL avec par exemple KNEX.JS (https://stackoverflow.com/questions/5818312/mysql-with-node-js) :

KNEX.JS

KnexJs can be used as an SQL query builder in both Node.JS and the browser. I find it easy to use. Let try it – Knex.js

$ npm install knex--save# Then add one of the following(adding a--save) flag:
  $ npm install pg
$ npm install sqlite3
$ npm install mysql
$ npm install mysql2
$ npm install mariasql
$ npm install strong - oracle
$ npm install oracle
$ npm install mssql


var knex = require('knex')({
    client: 'mysql',
    connection: {
        host: '127.0.0.1',
        user: 'your_database_user',
        password: 'your_database_password',
        database: 'myapp_test'
    }
});

You can use it like this

knex.select('*').from('users')

or

knex('users').where({
    first_name: 'Test',
    last_name: 'User'
}).select('id')
Publicités

[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  :


Lire la suite

[AngularJs + Php MYSQL ] Une table Html infinite scroll simple, sur base de donnée

angularjsphp_1_

Introduction


Avec Angularjs 1.6 , on ne télécharge pas tout un modèle de données lorsqu’il est très grand. Par exemple, pour, afficher toute une table de log de 150 MO, évidemment, on ne charge pas toute la table d’un seul coup dans la mémoire vive, ce serait bien trop couteux. Dans d’autres cas, dans le cadre d’une vue spéciale dans une application, on peut envisager de télécharger tout le modèle de données ( Par exemple, 500 utilisateurs)

L’idée de l’infinite Scroll sur base de donnée


L’idée étant d’afficher les 20 premiers enregistrements de la table, puis ensuite, lorsque l’on atteints le bas de la page, charger les 20 suivants, puis ainsi de suite, de cette manière, l’utilisateur a la sensation d’être en temps réel.

Le problème


Lire la suite

[AngularJs + Php-SQL] Astuce : Copier-Coller des CRUDS pour aller plus vite.

angularjsphp_1_logo-mysql-170x170_400x400

Introduction


Dans les applications informatique, le CRUD revient tout le temps.

Il s’agit de faire de la Creation/Lecture/Mise à jour/Suppression.

L’idée est donc de faire du copié-collé d’un crud standard, puis de changer uniquement le nom du modèle de données, en faisant « controle+h » dans notepad, afin d’aller beaucoup plus vite.

Note : Java Hibernate permettrait de faire cela encore plus simplement( méthode comin’ soon ), sans compter les méthodes de création automatiques des POJO, mais ce n’est pas le sujet de ce post … Là on est sur du back end PHP-MYSQL

Un exemple en temps réel dans une App !


Dans mon application RdvJuristes, j’ai un Crud sur les personnes :

http://nicolash.org/rdvj/index.html#/personnes

crd1.jpg

 

Il est évident que je ne vais pas me retaper tout le code pour créer un CRUD sur les juristes :

http://nicolash.org/rdvj/index.html#/juristes

crd2.jpg

On comprends qu’on a affaire à 2 modèles de données relativement similaires, que l’on peut copier-coller, puis, ensuite adapter à notre convenance.

Lire la suite

[HighCharts] Elaborer une statistique simple avec High Charts dans une application SAAS.

highcharts-logo

Introduction


Dans l’application RdvJuristes, je décide de calculer la somme des notes de frais de tous les rendez vous de la semaine en cours, puis de les afficher dans un graphique High Charts en barres.

Technologie utilisée


  • Highcharts
  • Php-Mysql en technologie PDO pour le back end
  • AngularJs pour le front end

Ordonnancement


  1. Examiner la conception de la base de donnée relationnelle.
  2. Elaborer la requête SQL
  3. Concevoir le Back End
  4. Concevoir le Front End
  5. Tester.

Lire la suite

[Java + AngularJS] Une application de gestion d’élèves partagée avec Eclipse, AngularJs et Java,Jersey,Maven + Mysql en Back end. Un Français Intégral pour ce système CRUD à Services WEB!

maisonSommaire


  • Introduction
  • Une photo de la micro application
  • Le but de l’application
  • Le matériel nécessaire
  • Les liens utiles en Anglais
  • On crée le projet dans Eclipse
  • On construit le Front End
  • On crée notre table SQL  » eleves »
  • On crée notre classe Pojo « eleve »
  • On construit la classe Back End des Web Services CRUD (Lire, Créer, Editer, Supprimer)
  • On construit la classe Back End DAO(Data Access Object) qui actionne MYSQL
  • On construit la classe connexion qui permet la connexion à la base  de données.
  • On teste l’application
  • Points non traités dans cette doc.
  • Conclusion .

Introduction javalogo-mysql-170x170_400x400angularjs


Vous l’attendiez depuis longtemps, voici enfin une micro-application CRUD (Lire, Créer, Editer, Supprimer) totalement exposée, en Français intégral, combinant  Angularjs en Front End, et Java en Back end, le tout pointant sur une base de données relationelle  Mysql.

L’autre nom utilisé pour cette technologie Back end serveur est « Service Web » ou « Web Services » en Anglais.

Elaborée suite à l’analyse de plusieurs forums en Anglais, cette solution entièrement Francophone est simple et robuste et s’ajoute aux solutions Full Stack AngularJs + Php Sql(Le système le plus fiable et clair) ainsi que Angularjs + noSql

Avec cette solution, on bénéficie d’une part de l’organisation très structurée de Java pour le Back End avec les classes, et d’autre part  de la facilité d’AngularJS ( Avec par exemple le Super 2 ways binding et la multitude de librairies Front end de AngularJs pour le front end).

Java étant très utilisé dans l’embarqué, cette technique permet une communication optimisée entre le navigateur et divers matériels (Domotique, robotique etc …)

Ceci nous donne un couple gagnant pour les applications à sgbd relationels. AngularJs étant d’une flexibilité et d’une simplicité extrême. Aucune limitation dans ce système, Jointures SQL, librairiesde type NVD3.js pour les graphes, Bootstrap pour les CSS, Elaboration de Statistiques  et j’en passe !

exp Comme d’habitude, j’utilise les mots les plus simples ainsi que l’état initial des choses pour expliquer le fonctionnement de cette micro application, cependant, les concepts sont ensuite expandables à l’infini pour de grosses applications complexes.

Il faut rappeler qu’un CRUD se doit d’être réduit à sa plus simple expression lorsqu’il est expliqué, ainsi qu’à ses 4 fonctions primaires :

Lire, Créer, Editer, Supprimer.

Une photo de la micro application


 microapp.jpg

Lire la suite

#7f4614, #a65b1a, #bf691e, #d9cfb8, #f0e5cc, #fff, #ffffff

[AngularJs + Php] Organiser un système automatique d’Emailing dans une application.

angularjslogo-php

Introduction


Dans ce post, je décris mes 2 méthodes pour faire de l’EMAILING avec AngularJs en front end et PHP en back end, attention je ne prétends pas que cela soit les solutions les meilleures, néanmoins je les ait testées fonctionnelles.

C’est assez compliqué à expliquer et je ne prétends pas faire une procédure bien structurée, mais juste un pense bête qui peut inspirer …

email-logo.png

L’Emailing permet d’envoyer un email personnalisé à tous les utilisateurs d’une application ;ou à certains groupes d’utilisateurs d’une application, qui auront été filtré sur la base d’un critère au préalable .

Certains systèmes peuvent être très simples, d’autres très complexes au niveau des critères.

Voici un exemple typique du besoin de faire de l’emailing dans les applications WEB modernes :

‘ Mince le prof de maths est absent demain, il faut que j’envoie un Email à tous les élèves du cours de maths pour qu’ils sachent que demain, il ne sera pas là, vite, je vais dans mon application WEB pour le faire !’

Sommaire :


  1. Technologies employées.
  2. La méthode naïve: faire une boucle dans le Front end.
  3. Filtrer les étudiants à emailer en fonction d’un critère …
  4. La méthode sure: faire une boucle  dans le Back End.
  5. Permettre d’ajouter une pièce jointe à l’emailing.

1. Technologies employées :



  • Le framework angularJs 1.5  pour le front end.
  • Php 7.0 pour gérer notre back-end (C’est le langage Serveur).
  • La librairie phpmailer (A télécharger !), qui va permettre à notre serveur d’envoyer les Emails.
  • Les données sont échangées au format JSON entre le front end et le back end, ce sont des tableaux d’objets JSON normalisés ou alors un objet json unique (En l’occurence : Email destinataire (data.email) et contenu du formulaire ($scope.formData) pour l’exemple 2.)
  • Pour commencer, on peut déjà se baser sur ce très bon tuto en Anglais pour envoyer un seul EMAIL avec la technologie AngularJS/Php

Lire la suite