doc/book/en/MERGE_ME-tut-create-gae-app.en.txt
changeset 10491 c67bcee93248
parent 10490 76ab3c71aff2
child 10492 68c13e0c0fc5
equal deleted inserted replaced
10490:76ab3c71aff2 10491:c67bcee93248
     1 .. -*- coding: utf-8 -*-
       
     2 
       
     3 .. _tutorielGAE:
       
     4 
       
     5 Tutoriel : créer votre première application web pour Google AppEngine
       
     6 =====================================================================
       
     7 
       
     8 Ce tutoriel va vous guider pas à pas a construire une apllication web 
       
     9 de gestion de Blog afin de vous faire découvrir les fonctionnalités de
       
    10 *CubicWeb*.
       
    11 
       
    12 Nous supposons que vous avec déjà suivi le guide :ref:`installationGAE`.
       
    13 
       
    14 
       
    15 Créez une nouvelle application
       
    16 ------------------------------
       
    17 
       
    18 Nous choisissons dans ce tutoriel de développer un blog comme un exemple
       
    19 d'application web et nous allons expliciter toutes les étapes nécessaires
       
    20 à sa réalisation.  
       
    21 
       
    22 ::
       
    23   
       
    24   cubicweb-ctl newgapp blogdemo
       
    25 
       
    26 `newgapp` est la commande permettant de créer une instance *CubicWeb* pour
       
    27 le datastore.
       
    28 
       
    29 Assurez-vous que votre variable d'environnement ``PYTHONPATH`` est correctement
       
    30 initialisée (:ref:`installationGAE`)
       
    31 
       
    32 Définissez un schéma
       
    33 --------------------
       
    34 
       
    35 Le modèle de données ou schéma est au coeur d'une application *CubicWeb*.
       
    36 C'est là où vous allez devoir définir le type de contenu que votre application
       
    37 devra gérer.
       
    38 
       
    39 Commençons par un schéma simple que nous améliorerons progressivemment.
       
    40 
       
    41 Une fois votre instance ``blogdemo`` crée, vous trouverez un fichier ``schema.py``
       
    42 contenant la définition des entités suivantes : ``Blog`` and ``BlogEntry``.
       
    43 
       
    44 ::
       
    45 
       
    46   class Blog(EntityType):
       
    47       title = String(maxsize=50, required=True)
       
    48       description = String()
       
    49 
       
    50   class BlogEntry(EntityType):
       
    51       title = String(maxsize=100, required=True)
       
    52       publish_date = Date(default='TODAY')
       
    53       text = String(fulltextindexed=True)
       
    54       category = String(vocabulary=('important','business'))
       
    55       entry_of = SubjectRelation('Blog', cardinality='?*')
       
    56 
       
    57 
       
    58 Un ``Blog`` a un titre et une description. Le titre est une chaîne 
       
    59 de caractères requise par la classe parente EntityType and ne doit
       
    60 pas excéder 50 caractères. La description est une chaîne de 
       
    61 caractères sans contraintes.
       
    62 
       
    63 Une ``BlogEntry`` a un titre, une date de publication et du texte
       
    64 étant son contenu. Le titre est une chaîne de caractères qui ne 
       
    65 doit pas excéder 100 caractères. La date de publication est de type Date et a
       
    66 pour valeur par défaut TODAY, ce qui signifie que lorsqu'une 
       
    67 ``BlogEntry`` sera créée, sa date de publication sera la date
       
    68 courante a moins de modifier ce champ. Le texte est une chaîne de
       
    69 caractères qui sera indexée en plein texte et sans contraintes.
       
    70 
       
    71 Une ``BlogEntry`` a aussi une relation nommée ``entry_of`` qui la
       
    72 relie à un ``Blog``. La cardinalité ``?*`` signifie que BlogEntry
       
    73 peut faire partie de zero a un Blog (``?`` signifie `zero ou un`) et
       
    74 qu'un Blog peut avoir une infinité de BlogEntry (``*`` signifie
       
    75 `n'importe quel nombre incluant zero`). 
       
    76 Par soucis de complétude, nous rappellerons que ``+`` signifie
       
    77 `un ou plus`.
       
    78 
       
    79 Lancez l'application
       
    80 --------------------
       
    81 
       
    82 Définir ce simple schéma est suffisant pour commencer. Assurez-vous 
       
    83 que vous avez suivi les étapes décrites dans la section installation
       
    84 (en particulier visitez http://localhost:8080/_load en tant qu'administrateur
       
    85 afin d'initialiser le datastore), puis lancez votre application avec la commande ::
       
    86    
       
    87    python dev_appserver.py BlogDemo
       
    88 
       
    89 puis dirigez vous vers http://localhost:8080/ (ou si c'est plus facile
       
    90 vous pouvez utiliser la démo en ligne http://lax.appspot.com/).
       
    91 [FIXME] -- changer la demo en ligne en quelque chose qui marche (!)
       
    92 
       
    93 .. image:: images/lax-book.00-login.en.png
       
    94    :alt: login screen
       
    95 
       
    96 Après vous être authentifié, vous arrivez sur la page d'accueil de votre 
       
    97 application. Cette page liste les types d'entités accessibles dans votre
       
    98 application, en l'occurrence : Blog et Articles. Si vous lisez ``blog_plural``
       
    99 et ``blogentry_plural`` cela signifie que l'internationalisation (i18n)
       
   100 n'a pas encore fonctionné. Ignorez cela pour le moment.
       
   101 
       
   102 .. image:: images/lax-book.01-start.en.png
       
   103    :alt: home page
       
   104 
       
   105 Créez des entités système
       
   106 -------------------------
       
   107 
       
   108 Vous ne pourrez créer de nouveaux utilisateurs que dans le cas où vous
       
   109 avez choisi de ne pas utiliser l'authentification Google.
       
   110 
       
   111 
       
   112 [WRITE ME : create users manages permissions etc]
       
   113 
       
   114 
       
   115 
       
   116 Créez des entités applicatives
       
   117 ------------------------------
       
   118 
       
   119 Créez un Blog
       
   120 ~~~~~~~~~~~~~
       
   121 
       
   122 Créons à présent quelques entités. Cliquez sur `[+]` sur la
       
   123 droite du lien Blog. Appelez cette nouvelle entité Blog ``Tech-Blog``
       
   124 et tapez pour la description ``everything about technology``,
       
   125 puis validez le formulaire d'édition en cliquant sur le bouton
       
   126 ``Validate``.
       
   127 
       
   128 
       
   129 .. image:: images/lax-book.02-create-blog.en.png
       
   130    :alt: from to create blog
       
   131 
       
   132 En cliquant sur le logo situé dans le coin gauche de la fenêtre,
       
   133 vous allez être redirigé vers la page d'accueil. Ensuite, si vous allez 
       
   134 sur le lien Blog, vous devriez voir la liste des entités Blog, en particulier
       
   135 celui que vous venez juste de créer ``Tech-Blog``.
       
   136 
       
   137 .. image:: images/lax-book.03-list-one-blog.en.png
       
   138    :alt: displaying a list of a single blog
       
   139 
       
   140 Si vous cliquez sur ``Tech-Blog`` vous devriez obtenir une description
       
   141 détaillée, ce qui dans notre cas, n'est rien de plus que le titre
       
   142 et la phrase ``everything about technology``
       
   143 
       
   144 
       
   145 .. image:: images/lax-book.04-detail-one-blog.en.png
       
   146    :alt: displaying the detailed view of a blog
       
   147 
       
   148 Maintenant retournons sur la page d'accueil et créons un nouveau
       
   149 Blog ``MyLife`` et retournons sur la page d'accueil, puis suivons
       
   150 le lien Blog et nous constatons qu'à présent deux blogs sont listés.
       
   151 
       
   152 .. image:: images/lax-book.05-list-two-blog.en.png
       
   153    :alt: displaying a list of two blogs
       
   154 
       
   155 Créons un article
       
   156 ~~~~~~~~~~~~~~~~~
       
   157 
       
   158 Revenons sur la page d'accueil et cliquons sur `[+]` à droite du lien
       
   159 `articles`. Appellons cette nouvelle entité ``Hello World`` et introduisons
       
   160 un peut de texte avant de ``Valider``. Vous venez d'ajouter un article
       
   161 sans avoir précisé à quel Blog il appartenait. Dans la colonne de gauche
       
   162 se trouve une boite intitulé ``actions``, cliquez sur le menu ``modifier``.
       
   163 Vous êtes de retour sur le formulaire d'édition de l'article que vous 
       
   164 venez de créer, à ceci près que ce formulaire a maintenant une nouvelle
       
   165 section intitulée ``ajouter relation``. Choisissez ``entry_of`` dans ce menu,
       
   166 cela va faire apparaitre une deuxième menu déroulant dans lequel vous
       
   167 allez pouvoir séléctionner le Blog ``MyLife``.
       
   168 
       
   169 Vous auriez pu aussi, au moment où vous avez crée votre article, sélectionner
       
   170 ``appliquer`` au lieu de ``valider`` et le menu ``ajouter relation`` serait apparu.
       
   171 
       
   172 .. image:: images/lax-book.06-add-relation-entryof.en.png
       
   173    :alt: editing a blog entry to add a relation to a blog
       
   174 
       
   175 Validez vos modifications en cliquant sur ``Valider``. L'entité article
       
   176 qui est listée contient maintenant un lien vers le Blog auquel il 
       
   177 appartient, ``MyLife``.
       
   178 
       
   179 .. image:: images/lax-book.07-detail-one-blogentry.en.png
       
   180    :alt: displaying the detailed view of a blogentry
       
   181 
       
   182 Rappelez-vous que pour le moment, tout a été géré par la plate-forme
       
   183 *CubicWeb* et que la seule chose qui a été fournie est le schéma de
       
   184 données. D'ailleurs pour obtenir une vue graphique du schéma, exécutez
       
   185 la commande ``laxctl genschema blogdemo`` et vous pourrez visualiser
       
   186 votre schéma a l'URL suivante : http://localhost:8080/schema
       
   187 
       
   188 .. image:: images/lax-book.08-schema.en.png
       
   189    :alt: graphical view of the schema (aka data-model)
       
   190 
       
   191 
       
   192 Change view permission
       
   193 ~~~~~~~~~~~~~~~~~~~~~~
       
   194 
       
   195 
       
   196 
       
   197 Conclusion
       
   198 ----------
       
   199 
       
   200 Exercise
       
   201 ~~~~~~~~
       
   202 
       
   203 Create new blog entries in ``Tech-blog``.
       
   204 
       
   205 What we learned
       
   206 ~~~~~~~~~~~~~~~
       
   207 
       
   208 Creating a simple schema was enough to set up a new application that
       
   209 can store blogs and blog entries. 
       
   210 
       
   211 What is next ?
       
   212 ~~~~~~~~~~~~~~
       
   213 
       
   214 Although the application is fully functionnal, its look is very
       
   215 basic. In the following section we will learn to create views to
       
   216 customize how data is displayed.
       
   217 
       
   218