[Firebase] Requêtes SQL converties en Firebase noSql.

Firebase

Introduction


Firebase est une base de données géniale de Google en ligne comparable à MongoDb mais avec pleins de fonctionnalités  supers du style Auth, sécurité etc …

Firebase est pas mal pour créer des maquettes d’applications rapidement par exemple ou pour développer dans l’urgence une petite application temporaire (6 mois d’utilisation.).

Par contre c’est du stock d’objets JSON, du coup on peut pas requêter en SQL dessus.

Comment requêter sur Firebase  ?


Regarder le blog de ces personne qui ont converti des rqts SQL communes en rqts Firebase:

https://firebase.googleblog.com/2013/10/queries-part-1-common-sql-queries.html
https://firebase.googleblog.com/2014/11/firebase-now-with-more-querying.html

Publicités

[Application 58 ] Scanne ton employé : Les dernières choses à faire …

scannelastIntroduction


Suite à la création des fonctionnalités relativement simple, il reste un certain nombre de fonctionnalités complexes à créer et à gérer .

Des choses comme par exemple, activer l’enregistrement direct lors de l’édition sans re-générer la carte code barre, sont plus compliquées à réaliser qu’il n’y parait.

De même que la gestion de l’identification, ou d’éventuels groupes d’utilisateurs.

La Liste


  • Créer le système Front End qui scanne les employés et le relier à la page d’accueil pour savoir qui est présent en temps réel dans l’entreprise : Temps approximatif de codage : 5h00
  • Créer un onglet de notations et d’avis à propos des employés pour le service RH, avec notations par curseurs ou par étoiles, et il faut que cela soit paramétrable: Temps approximatif de codage 3h00
  • Créer un système d’identification Firebase qui permette uniquement aux administrateurs de supprimer des élèments :  Temps approximatif de codage 3h00
  • Etablissement d’un calendrier des scans, avec ouverture de la fiche Employé sur clic : Temps approximatif de codage 2h00
  • Très important : Tester l’application avec 5000 objets json Employes, grâce à http://www.json-generator.com : Temps approximatif de codage 5h00
  • Mettre en place Oc-LazyLoading pour faire du lazy Loading des librairies, et utiliser D3.js : Temps approximatif de codage 6h00
  • Compresser(Et éventuellement crypter en ligne) le code JS (Modification nécessaire de la syntaxe des controleurs angular avec [] …
  • Ajouter le loader Ajax
  • Crypter le code barre avant l’impression de la carte(Générer le code barre différemment.)

 

Fonctionnalités Tape à l’oeil :

  • Très important : Finalisation de la création de groupes par glissé déposé : ajout de la possibilité de supprimer un employé dans le groupe, et de la possibilité d’éditer les membres d’un groupe, tentative d’activation sur appareil mobile  Temps approximatif de codage : 8h00
  • Créer une carte Google Map répertoriant les employés avec des marqueurs Temps approximatif de codage : 3h00
  • Possibilité d’envoyer des emails aux employés à travers l’application, et leur carte code barre, avec phpMailer Temps approximatif de codage : 5h00
  • Création de cartes pour tout un groupe d’un seul coup(Batch) Temps approximatif de codage : 3h00
  • Améliorer le design de la carte générée : Temps approximatif de codage : 8h00
  • Ajouter d’autres statistiques graphiques et les trier par onglets ou menu… Temps approximatif de codage : 20h00

 

Fonctionnalités méga-difficiles à implémenter :

  • Créer un Système de fall back complet sur MYSQL(ou sur MOngoDb avec node.js) au cas ou Firebase ne fonctionne plus, avec un système de sauvegarde automatisée de la base Firebase:Temps approximatif de codage : 35h00 voir plus
  • Ouvrir une porte avec un robot magnétique, lorsque le scan est ok !

Bugs :

 

  • Lors de l’update d’un employé, la date d’inscription ne doit pas être modifiée.

[Java] un système qui ressemble à AngularJs : JSF El

Introduction


Toujours intéressé par UML, et la prog objet, je suis actuellement sur le système JSF qui ressemble pas mal à AngularJs 1.5 dans l’esprit.

Exemple en français sympa :


http://www.objis.com/formation-java/tutoriel-jsf-2-managed-bean-expression-el-jsf.html

Codes fonctionnels :


A venir

[MEAN] Créer une application MEAN

Introduction


Une bonne Méthode pour commencer avec MEAN.

(MongoDB, Express, Angular , Node).

https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

C’est plus compliqué que de gérer Firebase , mais cela fonctionne.

Ce qui est génant avec  Firebase, c’est qu’on ne peut pas gérer son propre serveur pour faire du noSql, alors qu’avec MongoDb, on peut monter son propre serveur.

appppp

Comment faire ?



  • Installer MongoDb, s’assurer qu’il fonctionne avec le logiciel Mongovue :Sans titre 2.jpg
  • Installer la stack MEAN et suivre la méthode en Anglais.

Voici l’arborescence de l’application :

 

Sans titre 4.jpg

Sous le répertoire PUBLIC, on trouve le controleur angularJS core.js , et la vue principale index.html :

Sans titre 6

 

Le code :



Package.json, c’est ce qui permet d’installer les dépendances une fois qu’on la créé on lance une commande npm install dans le répertoire de l’app, et cela installe automatiquemeent toutes les dépendances, un peu comme bower :

{
"name" : "node-todo",
"version" : "0.0.0",
"description" : "Simple todo application.",
"main" : "server.js",
"author" : "Scotch",
"dependencies" : {
"body-parser" : "^1.4.3",
"express" : "^4.13.4",
"method-override": "^2.1.3",
"mongoose" : "^4.4.12",
"morgan" : "^1.1.1"
}
}

Server.js permet de configurer

. Les dépendences et libs annexes
. moongose qui se connecte à mongodb
. l’écoute du serveur http et sur quel port
. L’api qui gére les données sur mongoDb en fonction du nom du modèle de données

// server.js

    // set up ========================
    var express  = require('express');
    var app      = express();                               // create our app w/ express
    var mongoose = require('mongoose');                     // mongoose for mongodb
    var morgan = require('morgan');             			// log requests to the console (express4)
    var bodyParser = require('body-parser');    			// pull information from HTML POST (express4)
    var methodOverride = require('method-override'); 		// simulate DELETE and PUT (express4)

    // configuration =================

    mongoose.connect('mongodb://localhost/myapp');     // connect to mongoDB database on modulus.io

    app.use(express.static(__dirname + '/public'));                 // set the static files location /public/img will be /img for users
    app.use(morgan('dev'));                                         // log every request to the console
    app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
    app.use(bodyParser.json());                                     // parse application/json
    app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
    app.use(methodOverride());

    // Le serveur va se mettre à écouter avec cette commande (Taper node server.js dans la ligne de commande windows, sous le bon répertoire) ======================================
    app.listen(8080);
    console.log("L app écoute sur le port 8080 dans les navigateurs");
	
	
	
	 // definire le modèle de données qui s'apelle todo qui veut dire "chose à faire" =================
    var Todo = mongoose.model('Todo', {
        text : String
    });
	

	// routes ======================================================================
	
	// application -------------------------------------------------------------
    app.get('*', function(req, res) {
        res.sendfile('./public/index.html'); //Charge la seule vue, c est angular qui s occupe du routing en front end
    });
	
    // api ---------------------------------------------------------------------
    // obtenir tous les todo
    app.get('/api/todos', function(req, res) {

        // utiliser moongoose pour obtenir tous les todo dans la database
        Todo.find(function(err, todos) {

            // if there is an error retrieving, send the error. nothing after res.send(err) will execute
            if (err)
                res.send(err)

            res.json(todos); // Retourne tous les todo au format json
        });
    });

    // Créer un todo et retourner tous les todo après création
    app.post('/api/todos', function(req, res) {

        // create a todo, information comes from AJAX request from Angular
        Todo.create({
            text : req.body.text,
            done : false
        }, function(err, todo) {
            if (err)
                res.send(err);

            // get and return all the todos after you create another
            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });

    });

    // supprimer un todo
    app.delete('/api/todos/:todo_id', function(req, res) {
        Todo.remove({
            _id : req.params.todo_id
        }, function(err, todo) {
            if (err)
                res.send(err);

            // get and return all the todos after you create another
            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });
    });

	
	   

Core.js qui est le controleur de index.html :

// public/core.js
var scotchTodo = angular.module('scotchTodo', []);

function mainController($scope, $http) {
    $scope.formData = {};

    // Quand on exécute la page, montrer toutes les choses à faire
    $http.get('/api/todos')
        .success(function(data) {
            $scope.todos = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    // Quand on soumets le formulaire ajouter, transmettre la chose à faire à l'api node
    $scope.createTodo = function() {
        $http.post('/api/todos', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // Supprimer le contenu du formulaire pour que l'utilisateur puisse en utiliser un autre.
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    // Supprimer une chose à faire après l'avoir vérifié.
    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id)
            .success(function(data) {
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

}

Index.html qui est la vue principale:

<!-- index.html -->
<!doctype html>

<!-- ASSIGNER LE MODULE ANGULAR  -->
<html ng-app="scotchTodo">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- OptimizeR la vue mobile -->

    <title>Node/Angular Todo App</title>

    <!-- LIBS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- charger la lib bootrsap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #todo-list              { margin-bottom:30px; }
    </style>

    <!-- LIBS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.js"></script>

</head>
<!--  EXECUTER LE CONTROLLER AND OBTENIR TOUTES LES CHOSES A FAIRE -->
<body ng-controller="mainController">
    <div class="container">

        <!-- HEADER ET COMPTE DE CHOSES A FAIRE -->
        <div class="jumbotron text-center">
            <h1>J'ai plein de trucs à faire <span class="label label-info">{{ todos.length }}</span></h1>
        </div>

        <!-- LISTE DE CHOSES A FAIRE -->
        <div id="todo-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">

                <!-- LOOPER SUR LES  TODOS IN $scope.todos -->
                <div class="checkbox" ng-repeat="todo in todos">
                    <label>
                        <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                    </label>
                </div>

            </div>
        </div>

        <!-- FORM POUR CREER UNE CHOSE A FAIRE -->
        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="Je veux un toutou" ng-model="formData.text">
                    </div>

                    <!-- createToDo() WILL CREATE NEW TODOS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Ajouter</button>
                </form>
            </div>
        </div>

    </div>

</body>
</html>

#todo-list

[Java] Faire du Crud avec Java sur Mysql. Utiliser le Crud dans une Jsp.

Introduction


Faire du créer/Lire/Mettre à jour/Supprimer sur une base Mysql avec Java.

Utiliser le Crud dans une JSP.

Source :


Pure Jsp James Goodwill Sams année 2000

Format de la table SQL :


tble

Prérequis


  • Serveur Web Tomcat 8.0
  • Eclipse
  • Un serveur Mysql avec une base de données nommée « feedback » dessus et un utilisateur root avec le mot de passe root. Le serveur doit être accessible sur le port 3306.
  • Dans Eclipse, créer un Nouveau Dynamic Web Project ( file/new/) dans Eclipse appelé projetWeb4
  • Toujours dans Eclipse, faire un glissé déposé du fichier JAR mysql connector dans le répertoire WEB-INF/lib du projetWeb4 ( Le mysql Connector est a récupérer sur le site Java ou mysql)

Sommaire :


  1. Lire une table Mysql
  2. Ecrire un enregistrement dans une table Mysql
  3. updater un enregistrement dans une table Mysql
  4. Supprimer un enregistrement dans Mysql
  5. Utiliser le Crud dans une JSP.

Lire la suite

[Java] Créer une table sur un serveur Mysql

Java_logo

Introduction


Aujourd’hui, je vais créer une classe Java qui permet la création d’une table sql appelée ‘Titles’, avec des noms en anglais, sur mon serveur de base de données relationnelle MYSQL.

Le code est testé et fonctionnel, malhereusement, je n’ai pas le temps de le traduire.

Prérequis


  • Serveur Web Tomcat 8.0
  • Eclipse
  • Un serveur Mysql avec une base de données nommée « feedback » dessus et un utilisateur root avec le mot de passe root. Le serveur doit être accessible sur le port 3306.
  • Dans Eclipse, créer un Nouveau Dynamic Web Project ( file/new/) dans Eclipse appelé projetWeb4
  • Toujours dans Eclipse, faire un glissé déposé du fichier JAR mysql connector dans le répertoire WEB-INF/lib du projetWeb4 ( Le mysql Connector est a récupérer sur le site Java ou mysql)
  • Créer une classe nommée CreateTablesApp

 

Le code :



package projetWeb4;
import java.sql.*;

public class CreateTablesApp {

	public void createTables(){
		Connection con = null;

		try{
//			Charge le driver class file
			 Class.forName("com.mysql.jdbc.Driver");
             con = DriverManager.getConnection("jdbc:mysql://localhost:3306/feedback","root","root");

//             Créer le statement
             Statement s = con.createStatement();

//             Créer une table
             s.executeUpdate("CREATE TABLE Titles " + "(title_id INTEGER,title_name VARCHAR(50), " + "rating VARCHAR(5),price FLOAT,quantity INTEGER," +  "type_id INTEGER, category_id INTEGER)");

		}

         catch(SQLException sqle){
        	 System.err.println(sqle.getMessage());
         }

		catch(ClassNotFoundException cnfe){

			System.err.println(cnfe.getMessage());
		}
		finally{
			try{
				if(con!= null){
					con.close();
				}

			}
			catch(SQLException sqle){
				 System.err.println(sqle.getMessage());
			}

		}

}

	public static void main(String[] args){
		CreateTablesApp createTablesApp = new CreateTablesApp();
		createTablesApp.createTables();

	}

}

Pour l’exécuter, cliquer droit sur la classe CreateTablesApp.java puis sur « RUN AS JAVA APPLICATION »

java1

Ensuite, je vais contrôler dans MysqlWorkbench, et je vois que la table a bien été créée :

jv2

[Java] Créer un Bean Exemple 2

Java_logo

Introduction


Avec le livre Pure Jsp de Sams en anglais datant de 2000. Ca date d’il y a 20 ans.

On ne comprends pas la différence entre PARAM, PROPERTY et NAME .

Le code :



La JSP :


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Example de Jsp avec un Bean </title>
</head>


<body>

<!-- Annoncer que le langage de script  c'est java. <%-- <%@ page langage="java" %>  --%>
<%-- <%@ page import="Decompte" %> --%> -->


<!-- Instantier le bean decompte avec un id de counter  -->
<jsp:useBean id="c" scope="session" class="projetWeb3.Decompte" ></jsp:useBean>

<jsp:setProperty name="c" property="count" param="count" ></jsp:setProperty>

<%

out.println("Decompte du code scriplet"+ c.getCount() +" <BR>");



%>

<jsp:getProperty property="count" name="c"></jsp:getProperty></BR>





</body>
</html>

La classe Bean :

package projetWeb3;

public class Decompte {

//	Initialiser le bean sur création :
		int count = 25;
		
//		Constructeur des parametres
//		public Counter(){
//			
//			
//		} 
		
//	GEtter de propriétés
		public int getCount(){
//			incrémenter le decompte propriété a chaque request
			count++;
			return this.count;
		}

//Setter de propriété
		public void setCount(int count){
			this.count = count;
		}





}