k33g/m33ki.quick.start.md

## m33ki.quick.start.md

      
    Raw
  

              m33ki.quick.start.md
            
          
    #Quick Start
##First

Mettre à jour sa distribution m33ki (je n'ai plus que 2 templates, le générateur a sauté, je l'ai externalisé, j'ai revu la couche Mongodb)

##Créer le squelette M33ki

tapez m33ki
donner le nom de l'application (faudra que je pense à le mettre en paramètre ça fera gagner une étape)
choisir 1 (Golo application)

Affichage dans le terminal:
k33g_org@k33g-orgs-MacBook-Pro:~/Dropbox/Public$ m33ki

   _____  ________ ________  __   .__
  /     \ \_____  \\_____  \|  | _|__|
 /  \ /  \  _(__  <  _(__  <|  |/ /  |
/    Y    \/       \/       \    <|  |
\____|__  /______  /______  /__|_ \__|
        \/       \/       \/     \/
  WebApp server Golo powered (c) @k33g_org

OS : mac os x
Application name?>myapp
Creating myapp application
1- copy /Users/k33g_org/Dropbox/Public/TYPEUNSAFE/m33ki/jars to /Users/k33g_org/Dropbox/Public/myapp
2- copy /Users/k33g_org/Dropbox/Public/TYPEUNSAFE/m33ki/libs to /Users/k33g_org/Dropbox/Public/myapp

reading configuration file
What kind of application ?
1- Golo Skeleton project
2- Hybrid project (Java + Golo)
number?>1
Creating Golo Skeleton project ...

myapp application has been created
Last steps :
- type : cd myapp

Now, to start the application just type : ./go.sh
Have fun!

##Générer une application
C'est là où tout change, et il va falloir que je documente.
Tu as besoin de mon nouveau générateur qui peut servir à générer tout et n'importe quoi : en fait on peut lui faire des plugins (ou generators). Il s'appelle Hi et il vient avec un generator d'exemple qui génère des "M33ki apps" (pour le moment full Golo, mais les versions hybrides vont arriver ce WE).
###Installer Hi
# 1- clone hi repository in a directory
git clone https://github.com/k33g/hi.git

# 2- edit .bashrc
pico ~/.bashrc

# 3- Then :
export PATH=$PATH:$HOME/directory/hi

###Pré-requis
Il te faut :

Bower (pour télécharger les frameworks js) https://github.com/bower/bower (donc npm et node), mais du coup je ne suis pas obligé de les fournir (et gérer les versions avec mon generateur)
je crois que c'est tout

###Utiliser le générateur m33kig
(oui il y a bien un g à la fin, g pour Golo)
cd myapp
hi m33kig

Alors à ce moment là il redemande le nom de l'application (ça peut être n'importe quoi en fait, pas d'incidence sur la structure du projet) :
.__    .__                       ._.
|  |__ |__|   _____ _____    ____| |
|  |  \|  |  /     \\__  \  /    \ |
|   Y  \  | |  Y Y  \/ __ \|   |  \|
|___|  /__| |__|_|  (____  /___|  /_
     \/           \/     \/     \/\/
HI Generator (c) 2014-2015 @k33g_org

=== m33ki golo webapp generator ===
Application name? my very nice app

Tu valides, ça mouline (Bower va télécharger les dépendances), ça crée aussi les répertoires nécessaires.
Si tout va bien tu devrais avoir l'arborescence suivante :
|____
| |____app
| | |____controllers # golo controllers
| | |____libs
| | |____models # golo models
| | |____routes # golo routes
| |____jars
| |____libs
| |____public
| | |____js
| | | |____bower_components
| | | | |____backbone
| | | | |____bootstrap
| | | | |____jquery
| | | | |____react
| | | | |____underscore
| | | |____components # view component (front side)
| | | |____models # Backbone models and collections
| | | |____modules

###Création des modèles mongo et des routes
Par exemple, on veut créer un modèle Human :

Tapez hi m33kig:mgmc:Human : mgmc : pour mongo model collection

Puis renseigner le nom de la base de donnée (mydb), la collection mongo (humans) :
.__    .__                       ._.
|  |__ |__|   _____ _____    ____| |
|  |  \|  |  /     \\__  \  /    \ |
|   Y  \  | |  Y Y  \/ __ \|   |  \|
|___|  /__| |__|_|  (____  /___|  /_
     \/           \/     \/     \/\/
HI Generator (c) 2014-2015 @k33g_org

=== m33ki golo webapp generator ===
MongoDb Database name? mydb
MongoDb Collection Name? humans
MongoDb Model, Collection, Routes and Controller have been generated.

Plusieurs fichiers ont-été générés :

app/models/Human.golo
app/controllers/Humans.golo
app/routes/Humans.routes.golo
le fichier app/routes/routes.golo a été mis à jour automatiquement (c'est lui qui charge toutes les routes)

Ce qui veut dire que tu peux lancer la commande pour créer d'autres modèles et d'autres routes
A ce stade là, tu disposes de tous les services REST nécessaires pour faire du CRUD avec tes modèles.
Ne pas oublier de lancer la base Mongodb avant
###Création des modèles et collection Backbone (côté Front)
C'est ce qui va nous permettre de lancer des requêtes à partir du navigateur

Tapez : hi m33kig:bbmc:Human

Là il va demander un peu plus de choses

valeurs par défaut : firstName:"john", lastName:"doe"

Affichage dans le terminal :
.__    .__                       ._.
|  |__ |__|   _____ _____    ____| |
|  |  \|  |  /     \\__  \  /    \ |
|   Y  \  | |  Y Y  \/ __ \|   |  \|
|___|  /__| |__|_|  (____  /___|  /_
     \/           \/     \/     \/\/
HI Generator (c) 2014-2015 @k33g_org

=== m33ki golo webapp generator ===
Default values (ie: first:'',last'')? firstName:"john", lastName:"doe"
Model and Collection have been generated.

Plusieurs fichiers ont-été générés :

public/js/models/HumanModel.js
public/js/models/HumansCollection.js
Et le fichier public/js/all.scripts.js a été mis à jour automatiquement (il charge tous les scripts js)

Il est possible d'ores et déjà de tester même sans IHM :


lancer la base mongod, lancer l'application ./go.sh


ouvrir http://localhost:8888/ avec un navigateur (Chrome pour jouer avec la console c'est plus sympa)


ouvrir la console du navigateur et commencer à s'amuser
var bob = new HumanModel({firstName:"Bob", lastName:"Morane"}) //valider
var jane = new HumanModel({firstName:"Jane", lastName:"Doe"}) // valider
bob.save()
jane.save()


En tapant bob.id ou jane.id on s'apperçoit qu'un id unique leur a bien été affecté (en fait on a fait une requête POST)
Maintenant raffraîchir la page (pour être sûr que je ne triche pas) et toujours dans la console du navigateur :
var humans = new HumansCollection()
humans.fetch().done(function(){ console.log(humans.toJSON()); })

Et on retrouve bien nos 2 Humans
###Création de l'IHM
####Afficher les Humans
Par exemple, on veut un composant grille (table) que l'on appellera HumansTable qui utilise le modèle Human
Dans le Terminal : hi m33kig:rt:HumansTable:Human
Puis répondre à une seule question : les champs que l'on souhaite afficher

.__    .__                       ._.
|  |__ |__|   _____ _____    ____| |
|  |  \|  |  /     \\__  \  /    \ |
|   Y  \  | |  Y Y  \/ __ \|   |  \|
|___|  /__| |__|_|  (____  /___|  /_
     \/           \/     \/     \/\/
HI Generator (c) 2014-2015 @k33g_org

=== m33ki golo webapp generator ===
Fields (ie: firstName, lastName)? firstName, lastName
Table has been generated.

Le fichier suivant a été généré :

public/components/HumansTable.js
le fichier all.scripts.js a été mis à jour

ouvrir public/js/main.js et ajouter ceci en fin de fichier :
  	React.renderComponent(
  		<HumansTable pollInterval={500}/>,
  		document.querySelector('HumansTable')
  	);

On explique au navigateur que l'on crée une instance du composant HumansTable, que l'on va aller interroger les données toutes les 500 ms et qu'on la rattache au tag <HumansTable>.
Ouvrir public/index.html et ajouter <HumansTable></HumansTable> dans la page :
  <div class="container">
    <!-- some components here -->
    <HumansTable></HumansTable>
  </div>

Et là tu peux aller raffraichir ta page. Et si tout s'est bien passé, on retrouve Bob et Jane et on peut même les supprimer.
####Saisir des Humans
Toujours dans le terminal : hi m33kig:rf:HumanForm:Human
Et exactement le même principe que pour la grille :
    .__    .__                       ._.
    |  |__ |__|   _____ _____    ____| |
    |  |  \|  |  /     \\__  \  /    \ |
    |   Y  \  | |  Y Y  \/ __ \|   |  \|
    |___|  /__| |__|_|  (____  /___|  /_
         \/           \/     \/     \/\/
    HI Generator (c) 2014-2015 @k33g_org
    
    === m33ki golo webapp generator ===
    Fields (ie: firstName, lastName)? firstName, lastName
    Form has been generated.

Le fichier suivant a été généré :

public/components/HumanForm.js
le fichier all.scripts.js a été mis à jour

Dans main.js ajouter :
	React.renderComponent(
		<HumanForm/>,
		document.querySelector('HumanForm')
	);

Dans index.html
  <div class="container">
    <!-- some components here -->
    <HumanForm></HumanForm>
    <HumansTable></HumansTable>
  </div>

Raffraîchir, on peut saisir de nouveaux Humans