.. -*- coding: utf-8 -*-

.. _tutorielGAE:

Tutoriel : créer votre première application web pour Google AppEngine

=====================================================================

Ce tutoriel va vous guider pas à pas a construire une apllication web 

de gestion de Blog afin de vous faire découvrir les fonctionnalités de

`CubicWeb`.

Nous supposons que vous avec déjà suivi le guide :ref:`installationGAE`.

Créez une nouvelle application

------------------------------

Nous choisissons dans ce tutoriel de développer un blog comme un exemple

d'application web et nous allons expliciter toutes les étapes nécessaires

à sa réalisation.  

::

  cubicweb-ctl newgapp blogdemo

`newgapp` est la commande permettant de créer une instance `CubicWeb` pour

le datastore.

Assurez-vous que votre variable d'environnement ``PYTHONPATH`` est correctement

initialisée (:ref:`installationGAE`)

Définissez un schéma

--------------------

Le modèle de données ou schéma est au coeur d'une application `CubicWeb`.

C'est là où vous allez devoir définir le type de contenu que votre application

devra gérer.

Commençons par un schéma simple que nous améliorerons progressivemment.

Une fois votre instance ``blogdemo`` crée, vous trouverez un fichier ``schema.py``

contenant la définition des entités suivantes : ``Blog`` and ``BlogEntry``.

::

  class Blog(EntityType):

      title = String(maxsize=50, required=True)

      description = String()

  class BlogEntry(EntityType):

      title = String(maxsize=100, required=True)

      publish_date = Date(default='TODAY')

      text = String(fulltextindexed=True)

      category = String(vocabulary=('important','business'))

      entry_of = SubjectRelation('Blog', cardinality='?*')

Un ``Blog`` a un titre et une description. Le titre est une chaîne 

de caractères requise par la classe parente EntityType and ne doit

pas excéder 50 caractères. La description est une chaîne de 

caractères sans contraintes.

Une ``BlogEntry`` a un titre, une date de publication et du texte

étant son contenu. Le titre est une chaîne de caractères qui ne 

doit pas excéder 100 caractères. La date de publication est de type Date et a

pour valeur par défaut TODAY, ce qui signifie que lorsqu'une 

``BlogEntry`` sera créée, sa date de publication sera la date

courante a moins de modifier ce champ. Le texte est une chaîne de

caractères qui sera indexée en plein texte et sans contraintes.

Une ``BlogEntry`` a aussi une relation nommée ``entry_of`` qui la

relie à un ``Blog``. La cardinalité ``?*`` signifie que BlogEntry

peut faire partie de zero a un Blog (``?`` signifie `zero ou un`) et

qu'un Blog peut avoir une infinité de BlogEntry (``*`` signifie

`n'importe quel nombre incluant zero`). 

Par soucis de complétude, nous rappellerons que ``+`` signifie

`un ou plus`.

Lancez l'application

--------------------

Définir ce simple schéma est suffisant pour commencer. Assurez-vous 

que vous avez suivi les étapes décrites dans la section installation

(en particulier visitez http://localhost:8080/_load en tant qu'administrateur

afin d'initialiser le datastore), puis lancez votre application avec la commande ::

   python dev_appserver.py BlogDemo

puis dirigez vous vers http://localhost:8080/ (ou si c'est plus facile

vous pouvez utiliser la démo en ligne http://lax.appspot.com/).

[FIXME] -- changer la demo en ligne en quelque chose qui marche (!)

.. image:: images/lax-book.00-login.fr.png

   :alt: login screen

Après vous être authentifié, vous arrivez sur la page d'accueil de votre 

application. Cette page liste les types d'entités accessibles dans votre

application, en l'occurrence : Blog et Articles. Si vous lisez ``blog_plural``

et ``blogentry_plural`` cela signifie que l'internationalisation (i18n)

n'a pas encore fonctionné. Ignorez cela pour le moment.

.. image:: images/lax-book.01-start.fr.png

   :alt: home page

Créez des entités système

-------------------------

Vous ne pourrez créer de nouveaux utilisateurs que dans le cas où vous

avez choisi de ne pas utiliser l'authentification Google.

[WRITE ME : create users manages permissions etc]

Créez des entités applicatives

------------------------------

Créez un Blog

~~~~~~~~~~~~~

Créons à présent quelques entités. Cliquez sur `[+]` sur la

droite du lien Blog. Appelez cette nouvelle entité Blog ``Tech-Blog``

et tapez pour la description ``everything about technology``,

puis validez le formulaire d'édition en cliquant sur le bouton

``Validate``.

.. image:: images/lax-book.02-create-blog.fr.png

   :alt: from to create blog

En cliquant sur le logo situé dans le coin gauche de la fenêtre,

vous allez être redirigé vers la page d'accueil. Ensuite, si vous allez 

sur le lien Blog, vous devriez voir la liste des entités Blog, en particulier

celui que vous venez juste de créer ``Tech-Blog``.

.. image:: images/lax-book.03-list-one-blog.fr.png

   :alt: displaying a list of a single blog

Si vous cliquez sur ``Tech-Blog`` vous devriez obtenir une description

détaillée, ce qui dans notre cas, n'est rien de plus que le titre

et la phrase ``everything about technology``

.. image:: images/lax-book.04-detail-one-blog.fr.png

   :alt: displaying the detailed view of a blog

Maintenant retournons sur la page d'accueil et créons un nouveau

Blog ``MyLife`` et retournons sur la page d'accueil, puis suivons

le lien Blog et nous constatons qu'à présent deux blogs sont listés.

.. image:: images/lax-book.05-list-two-blog.fr.png

   :alt: displaying a list of two blogs

Créons un article

~~~~~~~~~~~~~~~~~

Revenons sur la page d'accueil et cliquons sur `[+]` à droite du lien

`articles`. Appellons cette nouvelle entité ``Hello World`` et introduisons

un peut de texte avant de ``Valider``. Vous venez d'ajouter un article

sans avoir précisé à quel Blog il appartenait. Dans la colonne de gauche

se trouve une boite intitulé ``actions``, cliquez sur le menu ``modifier``.

Vous êtes de retour sur le formulaire d'édition de l'article que vous 

venez de créer, à ceci près que ce formulaire a maintenant une nouvelle

section intitulée ``ajouter relation``. Choisissez ``entry_of`` dans ce menu,

cela va faire apparaitre une deuxième menu déroulant dans lequel vous

allez pouvoir séléctionner le Blog ``MyLife``.

Vous auriez pu aussi, au moment où vous avez crée votre article, sélectionner

``appliquer`` au lieu de ``valider`` et le menu ``ajouter relation`` serait apparu.

.. image:: images/lax-book.06-add-relation-entryof.fr.png

   :alt: editing a blog entry to add a relation to a blog

Validez vos modifications en cliquant sur ``Valider``. L'entité article

qui est listée contient maintenant un lien vers le Blog auquel il 

appartient, ``MyLife``.

.. image:: images/lax-book.07-detail-one-blogentry.fr.png

   :alt: displaying the detailed view of a blogentry

Rappelez-vous que pour le moment, tout a été géré par la plate-forme

`CubicWeb` et que la seule chose qui a été fournie est le schéma de

données. D'ailleurs pour obtenir une vue graphique du schéma, exécutez

la commande ``laxctl genschema blogdemo`` et vous pourrez visualiser

votre schéma a l'URL suivante : http://localhost:8080/schema

.. image:: images/lax-book.08-schema.fr.png

   :alt: graphical view of the schema (aka data-model)

Change view permission

~~~~~~~~~~~~~~~~~~~~~~

Conclusion

----------

Exercise

~~~~~~~~

Create new blog entries in ``Tech-blog``.

What we learned

~~~~~~~~~~~~~~~

Creating a simple schema was enough to set up a new application that

can store blogs and blog entries. 

What is next ?

~~~~~~~~~~~~~~

Although the application is fully functionnal, its look is very

basic. In the following section we will learn to create views to

customize how data is displayed.