1 00:00:00,600 --> 00:00:02,910 Salut. Donc bienvenue dans ce cours. 2 00:00:03,320 --> 00:00:05,930 Là, ce que je vais vous montrer c'est 2 aspects, je ne 3 00:00:06,130 --> 00:00:07,890 vais pas aller en profondeur dedans, de toute façon vous 4 00:00:08,090 --> 00:00:11,420 allez les faire lors des exercices avec Tiny blog. 5 00:00:11,620 --> 00:00:13,160 C'est, qu'est-ce qu'on peut faire une fois qu'on a des 6 00:00:13,360 --> 00:00:16,070 données qu'on a décrites pour faire du développement web? 7 00:00:16,440 --> 00:00:19,450 Et comment est-ce que Seaside fait du REST, c'est un des 8 00:00:19,650 --> 00:00:20,460 frameworks pour faire du REST en Pharo. 9 00:00:20,660 --> 00:00:22,010 Vous allez voir, c'est relativement élégant. 10 00:00:22,380 --> 00:00:24,230 Donc commençons par le premier sujet. 11 00:00:24,740 --> 00:00:27,940 Magritte c'est un framework qui fait l'hypothèse de dire 12 00:00:28,140 --> 00:00:31,360 : si vous décrivez vos données, à ce moment-là je vais 13 00:00:31,560 --> 00:00:33,190 pouvoir générer des choses basées sur ces données. 14 00:00:33,550 --> 00:00:35,350 Je vais pouvoir par exemple générer des formulaires, 15 00:00:35,550 --> 00:00:38,000 générer des interfaces graphiques. Et c'est ce que je vais vous montrer. 16 00:00:38,190 --> 00:00:39,680 Donc là en particulier, dans le cours, je vais vous 17 00:00:39,880 --> 00:00:42,000 montrer comment est-ce qu'on peut générer des composants 18 00:00:42,200 --> 00:00:44,030 Seaside, qui vont vous permettre de faire des 19 00:00:44,230 --> 00:00:45,680 applications Web plus rapidement. 20 00:00:46,450 --> 00:00:49,180 Ok donc si on voit, par exemple, on a une classe, la classe Address. 21 00:00:49,380 --> 00:00:51,720 Donc ça c'est des adresses en Suisse. 22 00:00:51,920 --> 00:00:53,050 Qu'est-ce que c'est qu'une adresse ? 23 00:00:53,250 --> 00:00:57,820 C'est une rue, un endroit, un code postal et puis un 24 00:00:58,020 --> 00:00:58,780 canton par exemple. 25 00:00:59,760 --> 00:01:04,390 J'ai une instance qui décrit une rue particulière, donc 26 00:01:04,590 --> 00:01:05,480 rien de spécifique. 27 00:01:05,680 --> 00:01:07,200 C'est juste de la programmation, juste standard. 28 00:01:07,480 --> 00:01:10,590 maintenant ce que Magritte va faire, Magritte va décrire 29 00:01:10,790 --> 00:01:12,950 les champs de cette classe de la manière suivante. 30 00:01:13,150 --> 00:01:14,950 On va avoir une description de chaîne qui va nous dire: 31 00:01:15,150 --> 00:01:16,290 ça, c'est le nom de la rue. 32 00:01:16,600 --> 00:01:19,800 Donc ce qui est plus intéressant c'est la description du code postal. 33 00:01:20,000 --> 00:01:22,040 Le code postal en Suisse, déjà premièrement on dit que 34 00:01:22,240 --> 00:01:25,270 une adresse n'est valide que si le code postal est spécifié. 35 00:01:25,470 --> 00:01:27,560 Si je ne spécifie pas de code postal je vais dire que l'adresse 36 00:01:27,760 --> 00:01:30,400 n'est pas valide. Et en Suisse, les codes postaux 37 00:01:30,600 --> 00:01:34,000 commencent entre 1 000 jusqu'à 9 999. 38 00:01:34,190 --> 00:01:38,120 Et donc là, on le décrit dans la description et on va 39 00:01:38,320 --> 00:01:40,250 pouvoir prendre en compte cette information pour faire de 40 00:01:40,450 --> 00:01:41,720 la validation automatique de formulaires. 41 00:01:42,000 --> 00:01:45,050 Bon après pour l'endroit on va dire qu'il est requis et 42 00:01:45,250 --> 00:01:48,450 puis que c'est place. Et l'autre chose par exemple en 43 00:01:48,650 --> 00:01:50,690 Suisse, vous avez 26 cantons, ce qu'on va dire c'est que 44 00:01:50,930 --> 00:01:53,740 le canton c'est un énuméré, donc c'est pour ça qu'on a un 45 00:01:53,940 --> 00:01:56,370 single option description, il est requis, on veut qu'il 46 00:01:56,570 --> 00:01:58,740 soit à trier et les options vont être listées. 47 00:01:58,940 --> 00:02:01,630 Donc on va donner la liste, l'énumération de tous les 48 00:02:01,830 --> 00:02:03,270 cantons suisses, il ne pourra pas y en avoir un autre. 49 00:02:03,880 --> 00:02:06,870 Une fois qu'on a fait ça qu'est-ce qu'on va pouvoir faire avec Magritte? 50 00:02:07,070 --> 00:02:09,740 Alors comment on le décrit en Pharo ? 51 00:02:10,000 --> 00:02:13,210 On va donner ce genre, on va dire: j'ai une description Street. 52 00:02:13,410 --> 00:02:15,670 La description Street, c'est une stream description. 53 00:02:15,870 --> 00:02:20,030 Elle a cette étiquette, cette priorité. 54 00:02:20,310 --> 00:02:23,680 Pour les nombres, je vais dire: c'est une description de nombres. 55 00:02:25,050 --> 00:02:27,600 Je vais avoir une autre priorité, une étiquette. 56 00:02:27,800 --> 00:02:31,720 Je dis qu'elle est requise et puis je vais donner mes valeurs de borne. 57 00:02:32,550 --> 00:02:33,780 Maintenant qu'est-ce que je peux faire avec ça? 58 00:02:34,000 --> 00:02:35,620 La première des choses que je peux faire, je ne vais pas 59 00:02:35,820 --> 00:02:37,280 aller dans le détail du code, mais ce que je peux faire 60 00:02:37,480 --> 00:02:39,040 je peux écrire un tout petit programme qui est en fait un 61 00:02:39,240 --> 00:02:41,100 interprète, qui va me générer des rapports. 62 00:02:41,540 --> 00:02:43,850 Ça veut dire que là, étant donné une adresse, je prends 63 00:02:44,050 --> 00:02:46,770 une adresse, j'ai ce petit programme qui va me générer 64 00:02:47,510 --> 00:02:51,330 par exemple un petit rapport qui va dire: la rue, elle s'appelle 65 00:02:51,530 --> 00:02:56,200 Schutzenmattstrasse. La ville ça va 66 00:02:56,400 --> 00:02:59,460 être Berne, le canton c'est Berne et le code postal 2012. 67 00:02:59,660 --> 00:03:02,910 Donc je vais pouvoir utiliser le fait que mes données 68 00:03:03,110 --> 00:03:06,200 sont décrites pour pouvoir générer des rapports. 69 00:03:06,940 --> 00:03:09,000 Donc là c'était le plus débile qu'on puisse faire. 70 00:03:09,360 --> 00:03:13,220 Mais donc ce qu'on va faire maintenant avec Seaside, je 71 00:03:13,420 --> 00:03:14,950 vais créer un composant visuel Web. 72 00:03:15,490 --> 00:03:19,490 Donc là, je dis: tu es un objet adresse, je veux te voir 73 00:03:19,690 --> 00:03:20,500 comme un composant. 74 00:03:20,700 --> 00:03:22,180 Donc ça ça va générer cette partie-là. 75 00:03:24,820 --> 00:03:27,460 Je vais ajouter une forme pour faire de la validation, 76 00:03:27,660 --> 00:03:29,050 donc ça ça va m'ajouter le Save et Cancel. 77 00:03:30,350 --> 00:03:32,750 Et je vais faire un call donc je vais l'afficher à l'écran. 78 00:03:33,390 --> 00:03:35,020 Et donc ce que vous voyez c'est que là je n'ai pas 79 00:03:35,220 --> 00:03:38,810 manipulé, je n'ai même pas utilisé le DSL de Seaside pour 80 00:03:39,010 --> 00:03:41,590 décrire mes composants Web, ils sont générés automatiquement. 81 00:03:42,250 --> 00:03:43,190 Et ça c'est super puissant. 82 00:03:44,000 --> 00:03:45,860 Donc je voulais vous montrer, par exemple, la société 83 00:03:46,060 --> 00:03:50,070 Cuve, qui est une société qui fait une gestion de portfolios aux U. 84 00:03:50,270 --> 00:03:52,470 S, tout ce que vous voyez à l'écran c'est tout fait avec 85 00:03:52,670 --> 00:03:55,620 Seaside et avec Magritte. Tous les rapports en fait sont 86 00:03:55,820 --> 00:04:00,400 générés automatiquement. Et ça, ça a un gain de productivité sérieux. 87 00:04:01,640 --> 00:04:05,050 Donc l'idée de ce cours, c'était vraiment de vous donner 88 00:04:05,250 --> 00:04:07,600 l'intuition de qu'est-ce qu'on peut faire quand on a des 89 00:04:07,800 --> 00:04:11,190 données qui sont décrites et en particulier dans la 90 00:04:11,390 --> 00:04:13,000 génération de composants Web. 91 00:04:13,950 --> 00:04:15,510 Donc vous en ferez dans Tiny blog. 92 00:04:15,810 --> 00:04:17,240 Maintenant ce que je vais vous montrer c'est que Seaside 93 00:04:19,260 --> 00:04:22,430 a aussi une couche REST, pour faire de la communication 94 00:04:22,630 --> 00:04:25,260 client/serveur sans passer forcément par des composants 95 00:04:25,460 --> 00:04:29,830 visuels, et donc l'intégration de REST dans Seaside est vraiment élégante. 96 00:04:30,120 --> 00:04:33,070 On va annoter en fait des objets de notre domaine et on 97 00:04:33,270 --> 00:04:37,070 va avoir une conversion entre les paramètres d'URL et les 98 00:04:37,270 --> 00:04:38,460 méthodes Smalltalk ou Pharo. 99 00:04:39,910 --> 00:04:40,670 Donc comment on fait ? 100 00:04:41,730 --> 00:04:44,540 Pour vous donner une idée de la complexité, en fait ce qu'on 101 00:04:44,740 --> 00:04:48,040 fait c'est que on va définir ce qu'on appelle un filtre, 102 00:04:48,240 --> 00:04:51,620 donc là je définis Tiny blog REST fulFilter qui est une 103 00:04:51,820 --> 00:04:55,010 sous-classe de WARestfulfilter, peu importe. 104 00:04:55,210 --> 00:04:57,660 Et puis la chose intéressante c'est que je vais ajouter 105 00:04:57,860 --> 00:05:00,360 un filtre quand je crée mon application là en bas. 106 00:05:00,560 --> 00:05:02,240 Donc ça vous le verrez dans l'exercice de toute façon. 107 00:05:03,070 --> 00:05:05,170 Et maintenant, imaginons que je veuille par exemple avoir 108 00:05:05,370 --> 00:05:09,920 toute la liste de tous les blogs que j'ai sur mon serveur Tiny blog. 109 00:05:11,110 --> 00:05:12,050 Comment je vais exprimer ça ? 110 00:05:12,250 --> 00:05:13,700 Je vais exprimer ça de la manière suivante. 111 00:05:13,900 --> 00:05:18,270 Je vais définir une méthode dans la classe Restfulfilter, 112 00:05:19,200 --> 00:05:23,800 qui s'appelle listAll, et qui correspond en fait à l'encre 113 00:05:24,150 --> 00:05:25,220 que je vais utiliser. 114 00:05:26,330 --> 00:05:31,000 Et je lui dis: toi tu as un get pour le protocole rest 115 00:05:31,230 --> 00:05:32,930 et tu vas me générer du texte mais sous forme Json. 116 00:05:33,480 --> 00:05:34,760 Et là, je vais écrire ce que je vais faire. 117 00:05:34,960 --> 00:05:37,150 Donc là, je lui dis: je crée une stream Pharo. 118 00:05:38,150 --> 00:05:41,180 Dans cette stream je vais prendre tous les blogs qui sont 119 00:05:41,380 --> 00:05:44,190 disponibles, je vais prendre chacun des blogs, donc vous 120 00:05:44,390 --> 00:05:46,700 voyez encore un itérateur. Je vais prendre chacun des 121 00:05:46,900 --> 00:05:49,030 blogs et puis je vais le convertir en Javascript et je 122 00:05:49,230 --> 00:05:50,270 vais les séparer par des virgules. 123 00:05:51,400 --> 00:05:53,660 Et donc j'obtiens bien ce que je voulais. 124 00:05:53,860 --> 00:05:57,370 Donc maintenant on voudrait faire quelque chose d'un petit peu plus avancé. 125 00:05:58,020 --> 00:06:00,620 Imaginons que moi je veuille trouver un blog. 126 00:06:00,820 --> 00:06:03,450 Je veux trouver donne-moi le blog qui correspond à un titre. 127 00:06:04,510 --> 00:06:07,590 Donc là je vais utiliser, par exemple le post et puis je 128 00:06:07,790 --> 00:06:11,320 veux dire: je veux ce blog post en donnant le titre à côté. 129 00:06:11,520 --> 00:06:12,940 Donc comment est-ce que je vais faire? 130 00:06:13,140 --> 00:06:15,390 Je vais définir une méthode Post qui prend un titre en 131 00:06:15,590 --> 00:06:18,140 paramètres, et j'ai la notion de chemin. 132 00:06:18,340 --> 00:06:21,300 Donc je vais dire: attention, quand dans l'URL vous avez 133 00:06:21,500 --> 00:06:26,330 http quelque chose post avec quelque chose 134 00:06:26,530 --> 00:06:29,690 ici, ce quelque chose ça sera le titre et c'est ce qu'on 135 00:06:29,890 --> 00:06:32,390 voit ici avec les parenthèses. 136 00:06:35,650 --> 00:06:37,240 Et là, de la même manière, je dis: attention ça va 137 00:06:37,440 --> 00:06:39,390 produire du texte qui est formaté sous forme Json. 138 00:06:40,160 --> 00:06:43,010 Et donc vous voyez, donc là, ce que je fais c'est que j'appelle 139 00:06:43,210 --> 00:06:44,290 les fonctionnalités de Tiny blog. 140 00:06:44,490 --> 00:06:47,240 Je dis: est-ce que tu as un post avec un titre qui est 141 00:06:47,440 --> 00:06:49,430 spécifié en paramètres ? 142 00:06:49,630 --> 00:06:51,620 Oui. Si c'est vide, je rends une erreur et puis sinon ce 143 00:06:51,820 --> 00:06:56,000 que je fais, je vais le mettre dans ma stream et je rends ma stream. 144 00:06:56,170 --> 00:06:59,000 Donc il y a d'autres choses, je vais juste montrer rapidement. 145 00:06:59,180 --> 00:07:01,050 Si je veux faire un search ça sera pareil. 146 00:07:01,760 --> 00:07:05,940 Si dans mon URL, je 147 00:07:06,440 --> 00:07:08,540 tape "search title" et que je mets une valeur, 148 00:07:09,060 --> 00:07:12,570 automatiquement ça sera matché, donc mon titre ce sera la même chose. 149 00:07:12,770 --> 00:07:13,930 Et donc j'aurai mon titre ici. 150 00:07:15,530 --> 00:07:19,930 Donc voilà la manière en fait de faire du REST dans Seaside. 151 00:07:20,130 --> 00:07:22,170 Ça veut dire que dans Seaside vous pouvez avoir vos 152 00:07:22,370 --> 00:07:24,160 composants graphiques, et d'un autre côté vous allez 153 00:07:24,360 --> 00:07:26,930 avoir la possibilité d'exposer vos fonctionnalités de 154 00:07:27,130 --> 00:07:28,710 votre domaine via une API REST. 155 00:07:29,020 --> 00:07:33,000 Alors là je vous ai montré que des get mais en fait vous 156 00:07:33,200 --> 00:07:36,700 avez l'API, vous avez toutes les fonctionnalités REST qui 157 00:07:36,900 --> 00:07:39,190 sont disponibles, comme delete, post, get et puis les autres. 158 00:07:40,410 --> 00:07:41,790 Ce que je vous ai montré aussi c'est que Seaside, 159 00:07:42,000 --> 00:07:44,100 finalement, couplé avec Magritte, vous permet de faire 160 00:07:44,300 --> 00:07:47,230 des formulaires extrêmement puissants et rapidement, et 161 00:07:47,430 --> 00:07:48,480 que c'est bien intégré. 162 00:07:49,150 --> 00:07:51,670 Donc sinon, il y a une autre solution pour faire du REST. 163 00:07:51,870 --> 00:07:54,220 Les gens utilisent souvent Teapot, qui est une surcouche 164 00:07:54,420 --> 00:07:57,430 as in pour faire du REST, pour faire des prototypes très 165 00:07:57,630 --> 00:08:00,260 rapides, pour voir si leur API REST fonctionne. 166 00:08:00,960 --> 00:08:03,150 Donc là, vous pouvez aussi vous amuser avec, c'est un 167 00:08:03,350 --> 00:08:06,180 petit package et il y a une doc de Web enterprise book.