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

RADoween: Desarrollo de aplicaciones web Full-Stack con Delphi y TMS

radoween-in-action-2

En funcionamiento desde el concepto hasta el lanzamiento en solo cinco días

El 14 de octubre, Atanas le envió un correo electrónico a Bruno con una idea para una  aplicación web con tecnología TMS WEB Core para ejecutar nuestro concurso interno de disfraces de Halloween para socios. El objetivo era crear una página web simple donde los miembros del equipo pudieran enviar fotos de sus disfraces de Halloween y luego todos pudieran votar por sus favoritos.

Ah, y lo necesitábamos lo antes posible para tener tiempo de usarlo.

La idea es simple, pero como cualquier programador experimentado puede decirle, hay muchas preguntas y requisitos técnicos que satisfacer:

  • ¿Puede tomar fotografías desde la aplicación web o simplemente cargarlas?
  • Configurar el back-end para almacenar los datos
  • Comunicación desde el front-end hasta el back-end
  • Prevención de votos no deseados
  • Una interfaz administrativa para todo

Especialmente en el desarrollo web, es común dividir a los desarrolladores en dos categorías:  front-end  y  back-end . La razón de esto es que, en la mayoría de los casos, se requieren dos lenguajes de programación completamente diferentes. El front-end se ejecuta en JavaScript (con WebAssembly aún cobrando impulso), mientras que el back-end se ejecuta en varios lenguajes: PHP, C #, Java, Python, Perl, etc.

La broma corriente en el desarrollo de software es que el front-end se ve impresionante, pero el back-end da miedo. Desde un punto de vista conceptual, un desarrollador front-end crea la parte que ve el usuario, lo que hace que la estética de la interfaz de usuario y el diseño sea importante. Por el contrario, el desarrollador de back-end solo crea la parte que ven otros desarrolladores. Idealmente, ambas partes están bien diseñadas, pero ahora estoy perdido y olvidé el propósito de esta publicación de blog.

Cuando se toma todo el software y las herramientas que se utilizan para crear una aplicación, se denomina pila. La pila web más común es LAMP, un acrónimo que inicialmente significaba  L inux,  A pache,  M ySQL,  P HP, pero está incompleto ya que asume que JavaScript es la única solución para el navegador.

Una de las razones por las que Node.js era tan popular es que permitía a los desarrolladores usar JavaScript tanto en el back-end como en el front-end. Esto hizo que el concepto de pila completa fuera más popular: ya no se necesitarían dos conjuntos de habilidades y lenguajes de programación diferentes: ¡todos pueden usar JavaScript en todas partes!

Bueno, JavaScript no es el único lenguaje de programación de pila completa. En mi opinión, Delphi conceptualizó el desarrollo de pila completa con sus arquitecturas cliente-servidor. En lugar de usar PHP o Java (ambos lanzados el mismo año que Delphi) para el back-end, y luego algo más para el front-end, Delphi hizo todo en el mismo IDE con el mismo lenguaje de programación.

En 1995, la mayoría de las aplicaciones web eran solo HTML estático (las hojas de estilo en cascada ni siquiera aparecieron hasta 1996, y tardaron un tiempo en ponerse al día). Y aunque JavaScript nació en 1995 junto con Delphi, PHP, Java y muchos otros lenguajes de programación modernos, todavía no había tenido una adopción generalizada. Hoy en día, la mayoría de las páginas web hacen un uso intensivo de JavaScript. A veces hay más código JavaScript que el resto de HTML, CSS e imágenes combinadas.

De acuerdo, esa fue una inmersión interesante en las pilas, los front-end, los back-end y la historia del desarrollo web, pero ¿qué tiene todo eso que ver con Halloween? Me alegro de que lo haya preguntado: Delphi sigue siendo una herramienta de desarrollo de pila completa fabulosamente productiva para el desarrollo de aplicaciones web gracias al poder del front-end TMS WEB Core y el back-end TMS XData, y la aplicación web RADoween es un gran ejemplo.

Probablemente en menos tiempo del que me tomó escribir lo anterior, el equipo de TMS Software involucrado con TMS WEB Core y TMS XData, es decir, Bruno Fierens, Wagner Landgraf y Bradley Velghe tuvo una prueba de concepto que permitía a los usuarios cargar una imagen, usar el cámara del dispositivo, complete sus datos, vea la lista de envíos anteriores, comparta un envío, vote y ordene …

Captura de pantalla de la aplicación de prueba de concepto, antes de que la lógica de la interfaz de usuario se acoplara a una plantilla HTML.

Captura de pantalla de la lista de envíos en la aplicación de prueba de concepto. Votar a través de un clic en la calabaza ya estaba en el prototipo.

Esto puede parecer simple, pero la belleza está en la complejidad oculta. En solo cinco días hábiles, una idea para una aplicación web se realizó y se implementó por completo en vivo, todo con una sola pila y sin necesidad de combinar diferentes lenguajes de programación o equipos de desarrollo.

radoween-in-action-7036244
RADoween en acción – dando mi mejor cara espeluznante
También ofrece la opción de instalarlo localmente como una aplicación web progresiva en dispositivos móviles (iOS y Android), así como en dispositivos de escritorio que ejecutan el navegador Chrome.

Echemos un vistazo a las diferentes partes de esta pila web impulsada por Delphi.

IDE de Delphi

Este es el IDE y el lenguaje utilizado para construir la aplicación cliente web, es decir, el front-end y el back-end, el servidor API REST. Para ello, se instalaron estos dos productos en el IDE de Delphi:

TMS WEB Core : framework de componentes para el cliente web + Object Pascal to JavaScript compiler (transpiler) y un Object Pascal RTL para el navegador. Los componentes visuales utilizados son sorprendentemente simples: TWebCamera, algunos componentes TWebEdit y TWebComboBox, TWebContinuousScrollControl para mostrar la lista de entradas de forma incremental, el componente TWebShare para tener acceso a la hoja de recursos compartidos del dispositivo.

La apariencia de la aplicación RADoween se crea principalmente a través de HTML5 y CSS3. TMS WEB Core ofrece un mecanismo de enlace único para conectar la lógica de la interfaz de usuario a una plantilla HTML. Puede encontrar todo sobre TMS WEB Core aquí:  https://www.tmssoftware.com/site/tmswebcoreintro.asp 

TMS XData : servidor API REST nativo basado en código Delphi. Con TMS XData puede crear puntos finales de API REST rápidos y robustos fácilmente y también documentar esto para el desarrollador front-end a través de la interfaz de usuario de Swagger. TMS XData puede aprovechar opcionalmente el Aurelius ORM que hace que el servidor API REST también se abstraiga de la base de datos. Esto significa que puede elegir fácilmente a qué base de datos acoplar el servidor back-end.

El servidor REST de TMS XData se implementó en Amazon Web Services (AWS). Puede encontrar todo sobre TMS XData aquí:  https://www.tmssoftware.com/site/tmsbizintro.asp 

¿Desea obtener más información sobre cómo Delphi y TMS llevan el desarrollo rápido de aplicaciones a la web? Asegúrese de unirse a Bruno para su sesión en DelphiCon:  Thriller: A Delphi Web App in 5 Work Days  el martes 16 de noviembre de 2021 a las 2 PM CST. El registro es gratuito para DelphiCon y tiene acceso a todas las demás sesiones increíbles.

El código fuente completo está disponible en GitHub y se compartirá durante la sesión de DelphiCon. Si aún no está utilizando los componentes únicos de Delphi o TMS Software, puede obtener una prueba gratuita ahora mismo y comenzar a llevar sus ideas a la web más rápido.

Consulte la publicación del blog de TMS Software sobre el proyecto, que incluye un video.


What's New for RAD Studio 11

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

Sobre el autor

Promotor jefe de desarrollo de Embarcadero Technologies.

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

IN THE ARTICLES