Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Étapes de développement d&#39;une application web — Biologeek — David Larlet</title>
  7. <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20070112-etapes-de-developpement-d-une-application-web">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Étapes de développement d&#39;une application web</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <p>Il est temps que je vous dévoile un peu ce que je vais faire ces prochains mois. Je ne suis probablement pas habilité à vous livrer les détails donc je vais rester assez évasif (pour le moment ?) mais l'objectif est de développer une application web qui sera utilisée dans les laboratoires. C'est un domaine très vaste donc les contraintes de flexibilité sont énormes, chaque laboratoire ayant son propre mode de fonctionnement. C'est aussi ce qui rend cette aventure passionnante :-).</p>
  45. <p>Puisque je pars quasiment de rien, il y a bien une application existante en Java mais nous avons décidé de réaliser une nouvelle application plutôt qu'une refonte, il va falloir repartir de zéro. Voici les étapes retenues pour l'avant projet&nbsp;:</p>
  46. <ul>
  47. <li><strong>capitalisation de l'expérience acquise</strong>&nbsp;: même si l'écriture est «&nbsp;from scratch », il ne faut pas sous-estimer le travail déjà réalisé et en tirer les bonnes conclusions relatives à chacune des étapes de la conception, de la vente, de l'intégration, de l'utilisation,... Il s'agit de faire un bilan pour pouvoir ensuite décider des orientations à chacun de ces niveaux.</li>
  48. <li><strong>définition du logiciel</strong>&nbsp;: l'étape la plus importante. À partir de la capitalisation, arriver à établir les objectifs du logiciel à chacun des niveaux. Tenir compte de l'analyse de la concurrence faite préalablement pour identifier la clientèle à approcher et les besoins utilisateurs. Ne pas oublier de tenir compte des contraintes inhérentes au domaine couvert, au budget et au planning.</li>
  49. <li><strong>prioritisation des fonctionnalités</strong>&nbsp;: établir la liste ordonnée des fonctionnalités à implémenter pour être opérationnel au plus tôt, planifier les différentes releases. Cette étape est réalisée en parallèle de l'étude des concepts fondamentaux.</li>
  50. <li><strong>étude des concepts fondamentaux</strong>&nbsp;: se concentrer sur le métier et sur les concepts qui lui sont propres pour arriver à une vision claire de la modelisation de l'application dans sa globalité.</li>
  51. <li><strong>réalisation des scénarios d'utilisation</strong>&nbsp;: chaque action courante est scénarisée avec les écrans ergonomiques associés, c'est ce qui tient lieu de cahier des charges pour la suite. Il faut donc que ce soit relativement détaillé. De plus, ce sont ces écrans qui seront utiles au graphiste pour qu'il réalise les maquettes. Il est important d'avoir le design le plus tôt possible car dans le cas d'une application web il est intimement lié au développement (même avec un <a href="http://www2.jeffcroft.com/blog/2007/jan/11/django-and-mtv/">modèle <abbr title="Model Template View">MTV</abbr></a>).</li>
  52. <li><strong>définition des itérations de développement</strong>&nbsp;: chaque cycle itératif se déroule en 3 ou 4 semaines, la dernière semaine étant consacrée aux tests et à la documentation. Exemple&nbsp;: gestion des utilisateurs.</li>
  53. </ul>
  54. <p>Une fois ce travail réalisé, j'estime 80% du travail fait (attention pas du temps). Il ne reste plus qu'à coder tout ça avec <a href="http://www.djangoproject.com/">Django</a> ;-). Bon concrêtement je dois avoir terminé ces étapes fin mars et j'ai peu d'expérience dans ce domaine (d'ailleurs il faudra que je relise <a href="http://gettingreal.37signals.com/toc.php">Getting Real</a>) donc si vous avez des suggestions/remarques à ce sujet elles sont les bienvenues (je tiens à préciser que je suis attaché aux méthodes de développement agile donc certaines solutions sont écartées d'office).</p>
  55. </div>
  56. </article>
  57. <footer>
  58. <h6 property="schema:datePublished">— 12/01/2007</h6>
  59. </footer>
  60. </section>
  61. <section>
  62. <div>
  63. <h3>Articles peut-être en rapport</h3>
  64. <ul>
  65. <li><a href="/david/biologeek/archives/20061130-le-developpement-web-se-porte-bien/" title="Accès à Le développement web se porte bien">Le développement web se porte bien</a></li>
  66. <li><a href="/david/biologeek/archives/20120131-resolutions-rediriger-economiser-et-debattre/" title="Accès à ★ Résolutions : rediriger, économiser et débattre">★ Résolutions : rediriger, économiser et débattre</a></li>
  67. <li><a href="/david/biologeek/archives/20110112-resolutions-decouvrir-concretiser-et-transmettre/" title="Accès à ★ Résolutions : découvrir, concrétiser et transmettre">★ Résolutions : découvrir, concrétiser et transmettre</a></li>
  68. </ul>
  69. </div>
  70. </section>
  71. <section>
  72. <div id="comments">
  73. <h3>Commentaires</h3>
  74. <div class="comment" typeof="schema:UserComments">
  75. <p class="comment-meta">
  76. <span class="comment-author" property="schema:creator">NiCoS</span> le <span class="comment-date" property="schema:commentTime">12/01/2007</span> :
  77. </p>
  78. <div class="comment-content" property="schema:commentText">
  79. <p>Disclaimer : Je n'ai pas lu en détail getting real, seulement quelques passages donc mon point de vue n'est pas forcément le plus pertinent.<br />
  80. <br />
  81. Pour ce que j'en ai lu (ainsi que du bouquin de Rails), c'est vrai que c'est très séduisant et qu'il y a de bonnes idées. Toutefois, je pense que c'est valable pour des projets pas trop gros et surtout au sein d'une équipe qui se connait parfaitement bien. J'ai pas dit non plus qu'il fallait faire 10.000 pages de specs hein, cela a aussi ses travers ;-)<br />
  82. <br />
  83. Je pense que tu as cité le principal et qu'avec du bon sens, tu devrais t'en sortir :-)<br />
  84. <br />
  85. ah oui et si tu fais &quot;chef de projet&quot; et dev à la fois, pense à relever la tête pour anticiper et voir si tu tiens tes délais &amp; co ;-)</p>
  86. </div>
  87. </div>
  88. <div class="comment" typeof="schema:UserComments">
  89. <p class="comment-meta">
  90. <span class="comment-author" property="schema:creator">Christian Fauré</span> le <span class="comment-date" property="schema:commentTime">13/01/2007</span> :
  91. </p>
  92. <div class="comment-content" property="schema:commentText">
  93. <p>Je te propose d'essayer de commencer sans plan ni méthode, juste en tournant autour du sujet et en prenant des notes très courtes (pense à ces amateurs d'art qui tournent autour d'une statue dans les musées). <br />
  94. Laisse toi l'occasion de suivre tes propres pensées dans la façon dont tu aborde la conception. Ainsi, n'hésite pas à passer du coq à l'âne si tu en éprouve le besoin.<br />
  95. Au bout d'un certain temps (vu ton planning pas plus de 10 j) le besoin de structurer la démarche se fera sentir car tu commenceras à tourner en rond et à revenir sur des sentiers que tu as déjà emprunté.<br />
  96. C'est à ce moment là que l'aspect méthodologique se posera avec acuité ; et pour cause tu en auras vraiment besoin pour avancer !<br />
  97. <br />
  98. Définir des méthodes et des cycles de conception avant de s'être plongé réellement dans le sujet est pour moi le meilleur moyen de perdre tout plaisir pour la suite d'un projet.<br />
  99. Et le plaisir, c'est quand même ce qui motive sur un projet non ? ;-)</p>
  100. </div>
  101. </div>
  102. <div class="comment" typeof="schema:UserComments">
  103. <p class="comment-meta">
  104. <span class="comment-author" property="schema:creator">Clément Pillias</span> le <span class="comment-date" property="schema:commentTime">13/01/2007</span> :
  105. </p>
  106. <div class="comment-content" property="schema:commentText">
  107. <p>Une chose n'est pas claire : à quel moment comptes-tu rencontrer l'utilisateur ?<br />
  108. <br />
  109. Je vois bien des scénarii d'utilisation, et je suppose que leur validation se ferra lors de la dernière étape (itérative), comme cela se fait souvent. Mais si c'est bien cela que tu as prévu, la consultation des utilisateurs arrive trop tard : elle doit être faite à chaque étape depuis la définition du logiciel.<br />
  110. <br />
  111. D'autre part, « Il ne reste plus qu'à coder tout ça avec Django » est une autre erreur : on ne choisit les outils à utiliser que tardivement dans le processus de développement, sinon tu risques de faire des choix motivés non pas par la qualité du programme, mais par la facilité de les réaliser avec les outils choisis. Particulièrement en fin de développement quand tu serra pressé par le temps...<br />
  112. <br />
  113. Sinon, bon courage !</p>
  114. </div>
  115. </div>
  116. <div class="comment" typeof="schema:UserComments">
  117. <p class="comment-meta">
  118. <span class="comment-author" property="schema:creator">Eftarjin</span> le <span class="comment-date" property="schema:commentTime">13/01/2007</span> :
  119. </p>
  120. <div class="comment-content" property="schema:commentText">
  121. <p>Que signifie &quot;méthodes de développement agiles&quot; ?<br />
  122. <br />
  123. PS: je n'ai pas lu Getting Real, mais je devrais peut être ...</p>
  124. </div>
  125. </div>
  126. <div class="comment" typeof="schema:UserComments">
  127. <p class="comment-meta">
  128. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">13/01/2007</span> :
  129. </p>
  130. <div class="comment-content" property="schema:commentText">
  131. <p>@NiCoS : merci pour tes conseils et tes encouragements :-).<br />
  132. <br />
  133. @Christian Fauré : en fait j'ai commencé le projet depuis le 2 janvier donc c'est déjà un peu le résultat de cette réflexion préalable (je suis dedans jusqu'au cou ! ;-)).<br />
  134. <br />
  135. @Clément Pillias : excellente remarques.<br />
  136. <br />
  137. &gt; à quel moment comptes-tu rencontrer l'utilisateur ?<br />
  138. <br />
  139. À plusieurs niveaux mais c'est effectivement une bonne chose de programmer ces rencontres. La première étape de capitalisation doit initier cette relation.<br />
  140. <br />
  141. &gt; D'autre part, « Il ne reste plus qu'à coder tout ça avec Django » est une autre erreur<br />
  142. <br />
  143. C'est vrai. Officiellement je choisirais le framework juste avant d'avoir défini les cycles itératifs mais officieusement je dois bien avouer que Django part avec un avantage certain : je connais très bien le framework et le langage.<br />
  144. <br />
  145. @Eftarjin : ça demande un billet à part entière, il y a pas mal de documentation sur le net là-dessus en attendant, la page de Wikipédia à ce sujet est bien faite : <a href="http://fr.wikipedia.org/wiki/M%C3%A9thode_agile" title="http://fr.wikipedia.org/wiki/M%C3%A9thode_agile" rel="nofollow">fr.wikipedia.org/wiki/M%C...</a></p>
  146. </div>
  147. </div>
  148. <div class="comment" typeof="schema:UserComments">
  149. <p class="comment-meta">
  150. <span class="comment-author" property="schema:creator">Aguillem</span> le <span class="comment-date" property="schema:commentTime">15/01/2007</span> :
  151. </p>
  152. <div class="comment-content" property="schema:commentText">
  153. <p>En lisant ce post, toute cette démarche et cette façon de faire me faisait penser à XP (eXtreme Programming), méthode de dev sur laquelle il faut que je me penche depuis un petit moment. Et c'est grâce à ton lien vers wikipedia que j'ai pu voir que XP faisait parti des différentes méthodes agiles.<br />
  154. Est-ce à ce méthode-même que tu t'appliques ? ou est-ce à une autre ?<br />
  155. N'ayant pas lu Getting Real non plus, je ne connais pas encore grand chose à tout ça.<br />
  156. En tout cas bonne chance pour la suite ;)<br />
  157. PS : Voici un lien vers un dossier sur l'eXtreme Programming si y en a que ça intéresse : <a href="http://www.design-up.com/articles/extreme-programming/dossierxp/index.html" title="http://www.design-up.com/articles/extreme-programming/dossierxp/index.html" rel="nofollow">www.design-up.com/article...</a></p>
  158. </div>
  159. </div>
  160. <div class="comment" typeof="schema:UserComments">
  161. <p class="comment-meta">
  162. <span class="comment-author" property="schema:creator">NiCoS</span> le <span class="comment-date" property="schema:commentTime">15/01/2007</span> :
  163. </p>
  164. <div class="comment-content" property="schema:commentText">
  165. <p>&quot;Django part avec un avantage certain : je connais très bien le framework et le langage.&quot;<br />
  166. <br />
  167. Pfff prétentieux - si tu le connaissais tant et si bien que ça, tu aurais résolu mon souci depuis des lustes ;-)<br />
  168. <br />
  169. Pour revenir à l'utilisateur, faut pas non plus tomber dans l'excès inverse à savoir lui présenter toutes les possibilités et à te mettre dans la mouise. Je pense qu'il faut privilégier une bonne prise en compte du/des besoins et ensuite lui proposer une réponse. C'est cette réponse qu'il faut éventuellement aménager avec l'utilisateur. Si tu commences à lui présenter toutes les possibilités, tu es cuit et ça va te bouffer tout ton temps.<br />
  170. <br />
  171. </p>
  172. </div>
  173. </div>
  174. <div class="comment" typeof="schema:UserComments">
  175. <p class="comment-meta">
  176. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">16/01/2007</span> :
  177. </p>
  178. <div class="comment-content" property="schema:commentText">
  179. <p>@Aguillem : bon il faut vraiment que je fasse un billet là-dessus :-)<br />
  180. <br />
  181. @NiCoS : oui je sais tu es todoisé ;-)<br />
  182. <br />
  183. Pour les utilisateurs tout dépend du projet je pense et de l'importance du client sur l'application, enfin la modération a toujours du bon.</p>
  184. </div>
  185. </div>
  186. <div class="comment" typeof="schema:UserComments">
  187. <p class="comment-meta">
  188. <span class="comment-author" property="schema:creator">bob la mouche</span> le <span class="comment-date" property="schema:commentTime">16/01/2007</span> :
  189. </p>
  190. <div class="comment-content" property="schema:commentText">
  191. <p>J'ai l'impression désagréable que tu cumules le chef de projet et le développement, le tout par une approche type XP.<br />
  192. <br />
  193. Est-ce que l'entreprise où tu es a l'expérience de ce type de développement? Si non c'est une lourde responsabilité pour toi. Il y a donc un risque important de dérapage lorsque l'on est pionnier, et surtout de problèmes techniques &quot;time consuming&quot; si tu es seul. Mais d'un autre côté s'il y a risque et que cela se passe bien cela peut être très favorable pour toi dans cette entreprise.<br />
  194. J'espère au moins qu'il y a d'autres développeurs dans cette boite.<br />
  195. <br />
  196. <br />
  197. </p>
  198. </div>
  199. </div>
  200. <div class="comment" typeof="schema:UserComments">
  201. <p class="comment-meta">
  202. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">16/01/2007</span> :
  203. </p>
  204. <div class="comment-content" property="schema:commentText">
  205. <p>&gt; Si non c'est une lourde responsabilité pour toi.<br />
  206. <br />
  207. Oui, je sais bien, mais c'est aussi une grande liberté que j'apprécie chaque jour. Après il faut faire attention à beaucoup de choses pour pas déraper en s'imposant une certaine rigueur.<br />
  208. <br />
  209. &gt; J'espère au moins qu'il y a d'autres développeurs dans cette boite.<br />
  210. <br />
  211. C'est le cas.</p>
  212. </div>
  213. </div>
  214. <div class="comment" typeof="schema:UserComments">
  215. <p class="comment-meta">
  216. <span class="comment-author" property="schema:creator">Christian Fauré</span> le <span class="comment-date" property="schema:commentTime">18/01/2007</span> :
  217. </p>
  218. <div class="comment-content" property="schema:commentText">
  219. <p>Pense aussi que ta stratégie de recette devra se faire AVANT les développements.</p>
  220. </div>
  221. </div>
  222. <div class="comment" typeof="schema:UserComments">
  223. <p class="comment-meta">
  224. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">19/01/2007</span> :
  225. </p>
  226. <div class="comment-content" property="schema:commentText">
  227. <p>Ok c'est noté, merci pour toutes vos remarques :-).</p>
  228. </div>
  229. </div>
  230. <div class="comment" typeof="schema:UserComments">
  231. <p class="comment-meta">
  232. <span class="comment-author" property="schema:creator">Ghouti</span> le <span class="comment-date" property="schema:commentTime">25/01/2007</span> :
  233. </p>
  234. <div class="comment-content" property="schema:commentText">
  235. <p>Bonjour étant informaticien, je me demande exactement l'étape developpement, <br />
  236. Essayer UWE,</p>
  237. </div>
  238. </div>
  239. <div class="comment" typeof="schema:UserComments">
  240. <p class="comment-meta">
  241. <span class="comment-author" property="schema:creator">Québecoicoicoi</span> le <span class="comment-date" property="schema:commentTime">26/01/2007</span> :
  242. </p>
  243. <div class="comment-content" property="schema:commentText">
  244. <p>&quot;&gt;Si non c'est une lourde responsabilité pour toi.<br />
  245. <br />
  246. Oui, je sais bien, mais c'est aussi une grande liberté que j'apprécie chaque jour&quot;<br />
  247. <br />
  248. Salut,<br />
  249. <br />
  250. Je suis un peu pessimiste devant tout cela car présentement c'est une situation où tu apprends seul et où il n'y a pas de procédure de développement mise en place (c'est ce qui sort de ton texte) et malheureusement je ne pense pas que cela est un bon environnement de travail.<br />
  251. <br />
  252. Bonne journée<br />
  253. <br />
  254. </p>
  255. </div>
  256. </div>
  257. <div class="comment" typeof="schema:UserComments">
  258. <p class="comment-meta">
  259. <span class="comment-author" property="schema:creator">Steevy from Mars</span> le <span class="comment-date" property="schema:commentTime">27/02/2007</span> :
  260. </p>
  261. <div class="comment-content" property="schema:commentText">
  262. <p>Alors, comment cela se passe? Tout se déroule comme attendu? </p>
  263. </div>
  264. </div>
  265. <div class="comment" typeof="schema:UserComments">
  266. <p class="comment-meta">
  267. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">27/02/2007</span> :
  268. </p>
  269. <div class="comment-content" property="schema:commentText">
  270. <p>Pas exactement... il faudra que je fasse un nouveau billet là-dessus d'ailleurs ;-)</p>
  271. </div>
  272. </div>
  273. <div class="comment" typeof="schema:UserComments">
  274. <p class="comment-meta">
  275. <span class="comment-author" property="schema:creator">Création sites web</span> le <span class="comment-date" property="schema:commentTime">18/05/2007</span> :
  276. </p>
  277. <div class="comment-content" property="schema:commentText">
  278. <p>Article intéressant !<br />
  279. <br />
  280. Merci pour cette méthodologie</p>
  281. </div>
  282. </div>
  283. </div>
  284. </section>
  285. <footer>
  286. <nav>
  287. <p>
  288. <small>
  289. Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
  290. </small>
  291. </p>
  292. </nav>
  293. </footer>
  294. </div>
  295. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  296. <script data-no-instant>InstantClick.init()</script>
  297. </body>
  298. </html>