|
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.fr.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.fr.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.fr.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.fr.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.fr.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.fr.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.fr.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.fr.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.fr.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 |