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

RADoween: Desenvolvimento de aplicativo da Web Full-Stack com Delphi e TMS

radoween-in-action-2

Instalado e funcionando do conceito ao lançamento em apenas cinco dias

Em 14 de outubro, Atanas enviou um e-mail a Bruno com uma ideia de um  aplicativo da web com TMS WEB Core para realizar nosso concurso interno de fantasias de Halloween. O objetivo era criar uma página da web simples onde os membros da equipe pudessem enviar fotos de suas fantasias de Halloween e, em seguida, todos poderiam votar em suas favoritas.

Ah, e precisávamos disso o mais rápido possível para que tivéssemos tempo de usá-lo.

A ideia é simples, mas como qualquer programador experiente pode lhe dizer, há uma série de questões técnicas e requisitos a serem satisfeitos:

  • Você pode tirar fotos do aplicativo da web ou apenas enviá-las?
  • Configurando o back-end para armazenar os dados
  • Comunicação do front-end para o back-end
  • Impedindo votos de spam
  • Uma interface administrativa para tudo

Principalmente no desenvolvimento web, é comum dividir os desenvolvedores em duas categorias:  front-end  e  back-end . A razão para isso é que, na maioria das vezes, são necessárias duas linguagens de programação completamente diferentes. O front end é executado em JavaScript (com WebAssembly ainda ganhando impulso), enquanto o back end é executado em várias linguagens: PHP, C #, Java, Python, Perl, etc.

A piada corrente no desenvolvimento de software é que o front-end parece impressionante, mas o back-end é assustador. Do ponto de vista conceitual, um desenvolvedor front-end constrói a parte que o usuário vê, tornando a interface do usuário e a estética do design importantes. Em contraste, o desenvolvedor de back-end cria apenas a parte que outros desenvolvedores veem. O ideal é que ambas as partes sejam bem projetadas, mas agora estou perdido e esqueci o propósito desta postagem do blog.

Quando você pega todo o software e as ferramentas usadas para construir um aplicativo, isso é conhecido como pilha. A pilha da web mais comum é LAMP, um acrônimo que inicialmente significava  L inux,  A pache,  M ySQL,  P HP, mas está incompleto, pois assume que o JavaScript é a única solução para o navegador interno.

Um dos motivos pelos quais o Node.js era tão popular é que permitia aos desenvolvedores usar JavaScript tanto no back-end quanto no front-end. Isso tornou o conceito de pilha completa mais popular: não seriam mais necessários dois conjuntos de habilidades e linguagens de programação diferentes: todos podem usar JavaScript em qualquer lugar!

Bem, JavaScript não é a única linguagem de programação full-stack. Em minha mente, a Delphi conceituou o desenvolvimento full-stack com suas arquiteturas cliente-servidor. Em vez de usar PHP ou Java (ambos lançados no mesmo ano do Delphi) para o back end e, em seguida, outra coisa para o front end, o Delphi fez tudo no mesmo IDE com a mesma linguagem de programação.

Em 1995, a maioria dos aplicativos da web era apenas HTML estático (as Cascading Style Sheets nem sequer apareciam até 1996 e demoraram um pouco para entender). E embora o JavaScript tenha nascido em 1995 junto com Delphi, PHP, Java e muitas outras linguagens de programação modernas, ele ainda não tinha sido amplamente adotado. Hoje, a maioria das páginas da web faz uso intenso de JavaScript. Às vezes, há mais código JavaScript do que o resto do HTML, CSS e imagens combinados.

Ok, foi um mergulho interessante em pilhas, front-ends, back-ends e a história do desenvolvimento web, mas o que tudo isso tem a ver com o Halloween? Que bom que você perguntou – o Delphi ainda é uma ferramenta de desenvolvimento full-stack fabulosamente produtiva para o desenvolvimento de aplicativos da web, graças ao poder do front-end do TMS WEB Core e do back-end do TMS XData, e o aplicativo da web RADoween é um ótimo exemplo.

Provavelmente em menos tempo do que levei para escrever o texto acima, a equipe de TMS Software envolvida com TMS WEB Core e TMS XData, ou seja, Bruno Fierens, Wagner Landgraf e Bradley Velghe, teve uma prova de conceito permitindo aos usuários fazer upload de uma imagem, usar o câmera do dispositivo, preencha seus detalhes, visualize a lista de envios anteriores, compartilhe um envio, vote e classifique …

 
Captura de tela do aplicativo de prova de conceito, antes da lógica da IU ser acoplada a um modelo HTML.

Captura de tela da lista de inscrições no aplicativo de prova de conceito. A votação por meio de um clique na abóbora já estava no protótipo.

Isso pode parecer simples, mas a beleza está na complexidade oculta. Em apenas cinco dias úteis, uma ideia para um aplicativo da web foi totalmente realizada e implantada ao vivo, tudo com uma única pilha e sem necessidade de combinar diferentes linguagens de programação ou equipes de desenvolvimento.

radoween-in-action-7036244
RADoween em ação – dando minha melhor cara assustadora
Ele também oferece a opção de instalar localmente como um aplicativo da web progressivo em dispositivos móveis (iOS e Android), bem como em dispositivos de desktop que executam o navegador Chrome.

Vamos dar uma olhada nas diferentes partes dessa pilha da web baseada em Delphi.

IDE Delphi

Este é o IDE e a linguagem usada para construir o aplicativo cliente da Web, ou seja, front-end e back-end, o servidor REST API. Para isso, esses dois produtos foram instalados no Delphi IDE:

TMS WEB Core : framework de componentes para o cliente web + Object Pascal para compilador JavaScript (transpiler) e Object Pascal RTL para o navegador. Os componentes visuais usados ​​são surpreendentemente simples: TWebCamera, alguns componentes TWebEdit e TWebComboBox, o TWebContinuousScrollControl para mostrar a lista de entradas de forma incremental, o componente TWebShare para ter acesso à planilha de compartilhamento do dispositivo.

A aparência do aplicativo RADoween é criada principalmente via HTML5 e CSS3. O TMS WEB Core oferece um mecanismo de ligação exclusivo para conectar a lógica da IU a um modelo HTML. Você encontra tudo sobre o TMS WEB Core aqui:  https://www.tmssoftware.com/site/tmswebcoreintro.asp 

TMS XData : servidor de API REST baseado em código Delphi nativo. Com o TMS XData, você pode criar endpoints de API REST rápidos e robustos facilmente e também documentar isso para o desenvolvedor de front end por meio da IU Swagger. O TMS XData pode, opcionalmente, tirar vantagem do Aurelius ORM que torna o servidor REST API também abstrato do banco de dados. Isso significa que você pode escolher facilmente a qual banco de dados acoplar o servidor back end.

O servidor TMS XData REST foi implementado no Amazon Web Services (AWS). Você pode encontrar tudo sobre o TMS XData aqui:  https://www.tmssoftware.com/site/tmsbizintro.asp 

Quer saber mais sobre como Delphi e TMS trazem o desenvolvimento rápido de aplicativos full-stack para a web? Não deixe de se juntar a Bruno em sua sessão na DelphiCon:  Thriller: Um Delphi Web App em 5 dias de trabalho  na terça-feira, 16 de novembro de 2021, às 14h CST. O registro é gratuito para o DelphiCon e você tem acesso a todas as outras sessões incríveis.

O código-fonte completo está disponível no GitHub e será compartilhado durante a sessão DelphiCon. Se você ainda não estiver usando Delphi ou os componentes exclusivos do Software TMS, você pode obter um teste gratuito agora mesmo e começar a levar suas ideias para a web com mais rapidez.

Confira a postagem do blog da TMS Software sobre o projeto, que inclui um vídeo


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 o autor

Defensor do desenvolvedor chefe da Embarcadero Technologies.

Leave a Reply

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

IN THE ARTICLES