Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
DelphiNouvellesTech Partner

RADoween : développement d’applications Web Full-Stack avec Delphi et TMS

radoween in action 2

Du concept au lancement en seulement cinq jours

Le 14 octobre, Atanas a envoyé un e- mail à Bruno avec une idée d’  application Web basée sur TMS WEB Core pour organiser le concours de costumes d’Halloween de notre partenaire interne. L’objectif était de créer une simple page Web où les membres de l’équipe pourraient soumettre des photos de leurs costumes d’Halloween, puis tout le monde pourrait voter pour ses favoris.

Oh, et nous en avions besoin dès que possible pour avoir le temps de l’utiliser.

L’idée est simple, mais comme tout programmeur expérimenté peut vous le dire, il y a beaucoup de questions techniques et d’exigences à satisfaire :

  • Pouvez-vous prendre des photos à partir de l’application Web ou simplement les télécharger ?
  • Configuration du back-end pour stocker les données
  • Communication du front end vers le back end
  • Empêcher les votes indésirables
  • Une interface administrative pour tout

Surtout dans le développement web, il est courant de diviser les développeurs en deux catégories :  front-end  et  back-end . La raison en est que, le plus souvent, deux langages de programmation complètement différents sont nécessaires. Le front-end fonctionne sur JavaScript (avec WebAssembly qui continue de prendre de l’ampleur), tandis que le back-end fonctionne sur différents langages : PHP, C#, Java, Python, Perl, etc.

La blague courante dans le développement de logiciels est que le front-end est impressionnant, mais le back-end est effrayant. D’un point de vue conceptuel, un développeur front-end construit la partie que l’utilisateur voit, ce qui rend l’interface utilisateur et l’esthétique de la conception importantes. En revanche, le développeur back-end crée uniquement la partie que les autres développeurs voient. Idéalement, les deux parties sont bien conçues, mais maintenant je suis dans les mauvaises herbes et j’ai oublié le but de cet article de blog.

Lorsque vous prenez tous les logiciels et outils utilisés pour créer une application, cela s’appelle la pile. La plupart pile web commun est LAMP, un acronyme qui indiquait initialement  L inux,  A Pache,  M ySQL,  P HP, mais elle est incomplète car elle suppose JavaScript est la seule solution pour le navigateur en.

L’une des raisons pour lesquelles Node.js était si populaire est qu’il permettait aux développeurs d’utiliser JavaScript sur le back-end ainsi que sur le front-end. Cela a rendu le concept d’une pile complète plus populaire : il ne serait plus nécessaire d’avoir deux ensembles de compétences et langages de programmation différents : tout le monde peut simplement utiliser JavaScript partout !

Eh bien, JavaScript n’est pas le seul langage de programmation à pile complète. Dans mon esprit, Delphi a conceptualisé le développement full-stack avec ses architectures client-serveur. Au lieu d’utiliser PHP ou Java (tous deux sortis la même année que Delphi) pour le back-end, puis autre chose pour le front-end, Delphi a tout fait dans le même IDE avec le même langage de programmation.

En 1995, la plupart des applications Web n’étaient que du HTML statique (les feuilles de style en cascade ne sont même apparues qu’en 1996, et il leur a fallu un certain temps pour s’adapter). Et bien que JavaScript soit né en 1995 avec Delphi, PHP, Java et de nombreux autres langages de programmation modernes, il n’avait toujours pas été adopté à grande échelle. Aujourd’hui, la plupart des pages Web font un usage intensif de JavaScript. Parfois, il y a plus de code JavaScript que le reste du HTML, du CSS et des images combinés.

D’accord, c’était une plongée intéressante dans les piles, les frontaux, les backends et l’histoire du développement Web, mais qu’est-ce que tout cela a à voir avec Halloween ? Heureux que vous ayez posé la question : Delphi est toujours un outil de développement full-stack fabuleusement productif pour le développement d’applications Web grâce à la puissance du front-end TMS WEB Core et du back-end TMS XData, et l’application Web RADoween en est un excellent exemple.

En probablement moins de temps qu’il ne m’en a fallu pour écrire ce qui précède, l’équipe de TMS Software impliquée avec TMS WEB Core et TMS XData, c’est-à-dire Bruno Fierens, Wagner Landgraf et Bradley Velghe avait une preuve de concept permettant aux utilisateurs de télécharger une image, d’utiliser le appareil photo de l’appareil, remplissez leurs coordonnées, affichez la liste des soumissions précédentes, partagez une soumission, votez et triez…

Capture d’écran de l’application de preuve de concept, avant que la logique de l’interface utilisateur ne soit couplée à un modèle HTML

Capture d’écran de la liste de soumission dans l’application de validation de principe. Le vote via un clic sur la citrouille était déjà dans le prototype.

Cela peut sembler simple, mais la beauté réside dans la complexité cachée. En seulement cinq jours ouvrables, une idée d’application Web a été entièrement réalisée et déployée en direct, le tout avec une seule pile et sans avoir besoin de combiner différents langages de programmation ou équipes de développement.

radoween in action 7036244
RADoween en action – donner mon meilleur visage effrayant
Il offre également la possibilité d’installer localement en tant qu’application Web progressive sur les appareils mobiles (iOS et Android) ainsi que sur les appareils de bureau exécutant le navigateur Chrome.

Jetons un coup d’œil aux différentes parties de cette pile Web basée sur Delphi.

IDE Delphi

Il s’agit de l’IDE et du langage utilisé pour créer à la fois l’application client Web, c’est-à-dire le front-end et le back-end, le serveur API REST. Pour cela, ces deux produits ont été installés dans l’IDE Delphi :

TMS WEB Core : framework de composants pour le client web + compilateur Object Pascal vers JavaScript (transpiler) et un Object Pascal RTL pour le navigateur. Les composants visuels utilisés sont étonnamment simples : TWebCamera, quelques composants TWebEdit et TWebComboBox, le TWebContinuousScrollControl pour afficher la liste des entrées de manière incrémentielle, le composant TWebShare pour avoir accès à la feuille de partage du périphérique.

Le look & feel de l’application RADoween est principalement créé via HTML5 et CSS3. TMS WEB Core offre un mécanisme de liaison unique pour connecter la logique de l’interface utilisateur à un modèle HTML. Vous trouverez tout sur TMS WEB Core ici :  https://www.tmssoftware.com/site/tmswebcoreintro.asp 

TMS XData : serveur API REST basé sur le code Delphi natif. Avec TMS XData, vous pouvez créer facilement des points de terminaison d’API REST robustes et rapides et également les documenter pour le développeur front-end via l’interface utilisateur Swagger. TMS XData peut éventuellement tirer parti de l’ORM Aurelius qui rend le serveur API REST également abstrait de la base de données. Cela signifie que vous pouvez facilement choisir la base de données à laquelle coupler le serveur principal.

Le serveur TMS XData REST a été déployé sur Amazon Web Services (AWS). Vous pouvez tout trouver sur TMS XData ici :  https://www.tmssoftware.com/site/tmsbizintro.asp 

Vous voulez en savoir plus sur la façon dont Delphi et TMS permettent le développement rapide d’applications full-stack sur le Web ? Assurez-vous de rejoindre Bruno pour sa session à la DelphiCon :  Thriller : une application Web Delphi en 5 jours de travail  le mardi 16 novembre 2021 à 14 h 00 CST. L’inscription est gratuite pour DelphiCon, et vous avez accès à toutes les autres sessions incroyables.

Le code source complet est disponible sur GitHub et sera partagé lors de la session DelphiCon. Si vous n’utilisez pas déjà les composants uniques de Delphi ou de TMS Software, vous pouvez obtenir un essai gratuit dès maintenant et commencer à diffuser vos idées plus rapidement sur le Web.

Consultez l’article de blog de TMS Software sur le projet qui comprend une vidéo

See What's New in 12.2 Athens See What's New in 12.2 Athens Dev Days of Summer 2-24

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

À propos de l'auteur

Directeur de Delphi Consulting pour GDK Software USA. De nombreux brevets liés aux logiciels, notamment le déverrouillage par balayage et par motif et le moteurs de recherche. Premiers badges Delphi Argent et Or sur Stack Overflow Ancien défenseur des développeurs pour Embarcadero Technologies. Fan de longue date de programmation, notamment avec Delphi. Auteur, podcasteur/YouTuber, improvisateur, conférencier, père et ami.

Leave a Reply

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

IN THE ARTICLES