Como criar Angular aplicativo de CRM com App Builder

É um mito que as plataformas low-code não podem produzir aplicativos completos, responsivos e modernos agora. Cerca de dez ou mais anos atrás, eles só podiam ajudar os desenvolvedores a definir interfaces limitadas e ainda mais funcionalidades limitadas por meio de menus gráficos, enquanto geravam o temido código espaguete e de alguma forma negligenciavam a manutenção do código. A partir de 2023, a evolução e o valor real da tecnologia low-code/no-code tornaram-se mais aparentes do que nunca. E um dos avanços e vantagens mais significativos quando se trata de desenvolvimento web corporativo é a capacidade de ferramentas low-code/no-code de garantir uma vantagem inicial para novos projetos, trabalhando com aplicativos de amostra, fornecendo modelos prontos e gerando código limpo e pronto para produção que atenda às diretrizes de codificação padrão.

Nesta postagem do blog, então, usaremos nosso App Builder ™WYSIWYG para criar um aplicativo Angular CRM personalizado usando uma amostra e uma abordagem de desenvolvimento de baixo código que torna o processo x8 mais rápido.

Tente App Builder.

Em resumo, o que é um aplicativo de CRM e por que usar um aplicativo de exemplo Angular para o seu projeto?

Um aplicativo de CRM (Customer Relationship Management) é um aplicativo de software projetado para ajudar as empresas a gerenciar suas interações e relacionamentos com clientes e clientes potenciais. Essas soluções de software geralmente fornecem ferramentas e recursos que permitem que as organizações rastreiem, analisem e otimizem as interações com os clientes com eficiência.

Por que você deve começar com um aplicativo de exemplo, especialmente se for seu primeiro projeto:

• Ele fornece uma vantagem inicial.
• É uma experiência prática.
• Elimina tarefas comuns de desenvolvimento.
• É fácil de modificar e personalizar.
• É ágil, escalável e fácil de manter.
• Há uma visualização de código em tempo real.

Detalhes aqui: 3 Angular exemplos de aplicativos que você pode usar imediatamente

Como criar Angular aplicativo de exemplo de CRM com App Builder e torná-lo seu

Ao criar uma interface do usuário do aplicativo com nossa plataforma low-code, você aproveita vários layouts predefinidos, componentes prontos para uso, manuseio robusto de qualquer API REST e recursos avançados de configuração que aumentam sua eficiência e habilidades. Há uma superfície de design WYSIWYG enquanto aproveita os componentes Angular repletos de recursos ao mesmo tempo. Isso economiza seu tempo, eliminando a necessidade de codificar manualmente layouts e componentes. Ele permite que você obtenha feedback mais cedo e itere mais rapidamente com base no feedback. Essa abordagem sem código também se estende à vinculação de dados e fluxos de trabalho de navegação. Se você quiser baixar o código e adicioná-lo, carregue seu aplicativo Angular CRM e estenda o design por meio de App Builder com base em suas necessidades. Mesmo sendo um aplicativo predefinido, ainda é editável. Você pode adicionar vistas, componentes e estender o design como desejar.

Vídeo: 6180.CRM-Sample-App.mp4

O que você vê aqui é um aplicativo de estilo mestre de detalhes para gerenciar detalhes do cliente inspirado no HubSpot. Ele inclui exibições responsivas para o painel Visão geral e detalhes do cliente com várias guias. Componentes usados: Componentes usados: Acordeão, Avatar, Botão, Botão de ícone, Gráfico de categoria, Caixa de seleção, Janela de diálogo, Lista suspensa, Painel de expansão, Grade de dados, Ícone, Grupo de entrada, Lista, Barra de navegação, Gaveta de navegação, Selecionar, Layout de guia.

Você também pode conferir o exemplo do aplicativo CRM e visualizar o código.

Vamos passar para as etapas de uso do exemplo no App Builder e ajustá-lo de uma maneira que funcione para os requisitos do projeto e as metas de negócios.

Etapa 1: Abra App Builder e navegue até os aplicativos de amostra

Abra App Builder e selecione "Criar novo aplicativo". Em seguida, navegue até a seção "Aplicativos de amostra" e escolha o aplicativo de CRM como o design base para o seu projeto. Para o propósito do nosso projeto, construímos o aplicativo com a capacidade de resposta em mente, mostrando o máximo de dados possível graças aos componentes Grid, List e Chart. Esses controles têm manuseio robusto de big data e recursos para acessá-lo conforme desejado. O componente Gaveta de navegação (com comportamento de submenu/entrada) lida com a navegação de exibição cruzada e a aparência do SPA.

Os contêineres do Flex Layout, por outro lado, nos permitem modificar a posição de qualquer elemento de interface do usuário aninhado. As outras propriedades dignas de nota estão relacionadas ao redimensionamento e enrolamento de fluidos.

A partir daí, você pode estender e personalizar o design para atender às suas necessidades específicas.

Etapa 2: conectar a API

A conexão manual da API é desnecessária, pois isso é feito diretamente no App Builder especificando uma URL pública ou localhost. A partir daí, você tem duas opções:

• Para adicionar uma definição do Swagger​
• Ou para usar a URL JSON

Para nossos propósitos, utilizaremos a abordagem Swagger e adicionaremos o URL.

Depois disso, especifique um nome para a fonte de dados e prossiga para a próxima etapa. Identifique quais pontos de extremidade você deseja incluir. Depois que a autorização for definida, prossiga com Selecionar dados, verifique se todos os campos estão selecionados e clique em Concluído.

Em seguida, quando a fonte de dados for carregada com êxito, você poderá conectar a grade na página do painel.

Para fazer isso, selecione a grade e atualize a fonte de dados no campo Dados. A partir daí, você pode adicionar operações de atualização e exclusão que serão vinculadas aos endpoints na API, permitindo a modificação em tempo real dos dados por meio de interações com a grade.

Depois que todas as páginas forem criadas, você poderá visualizar o aplicativo selecionando o botão verde localizado no canto superior direito. Para facilitar a personalização, baixe seu aplicativo Angular CRM.

Etapa 3: personalizar e aplicar temas

Você pode criar um tema de aplicativo personalizado para combinar com sua marca. Você faz isso criando um novo tema e escolhendo um dos temas base como ponto de partida. As paletas de cores são geradas automaticamente com base na cor primária e secundária escolhida. No que diz respeito à tipografia, por enquanto, temos um conjunto de fontes integradas, mas planejamos adicionar mais controle criativo em versões futuras. Quando terminar de editar, salve o tema do aplicativo para aplicar as alterações.

Etapa 4: Visualizar o código

Isso permite que você interaja com seu design como se fosse um aplicativo em execução e veja o HTML, CSS e TS separadamente. Para ver seu aplicativo em ação e inspecionar o código, basta tocar no botão de ação Visualização de código no canto superior direito.

Etapa 5: gerar aplicativo

Use a lista suspensa do seletor de plataforma na barra de navegação ao lado dos botões de ação Publicar no GitHub e Visualizar. Escolha a opção Blazor Server/ Blazor Web Assembly para gerar código para Blazor ou Angular para ver uma visualização do aplicativo e do código gerados. Web Components opção também está disponível.

Os benefícios de usar App Builder

Discutimos os prós de usar low-code no design e desenvolvimento de aplicativos muitas vezes. Ainda assim, em geral, o App Builder WYSIWYG fornece dicas de ferramentas, interface do usuário intuitiva e partes de interface do usuário prontas para uso que são necessárias para qualquer aplicativo da web – como componentes, exibição de árvore de esboço, layouts de aplicativos integrados e propriedades diferentes para atender às suas necessidades, temas, manipulação de fonte de dados externa, visualização do aplicativo (enquanto você ainda está construindo), recursos de colaboração por meio de espaços de trabalho, compartilhamento de aplicativos, Publicação do GitHub, rastreamento de alterações e muito mais.

Outros destaques dos benefícios de usar o App Building:

• As plataformas low-code fornecem uma interface visual e componentes pré-criados que reduzem a necessidade de codificação manual no Angular, facilitando a criação de aplicativos para desenvolvedores com níveis variados de especialização.
• Você pode começar a trabalhar olhando para as visualizações das diferentes páginas, clicando para ver as propriedades de cada um dos componentes usados e explorando ainda mais o aplicativo sem fazer nenhum desenvolvimento por conta própria.
• Eles permitem prototipagem e iteração rápidas e garantem um desenvolvimento mais rápido e intuitivo com uma experiência completa de criação de aplicativos de arrastar e soltar, enquanto usam componentes Angular pré-criados. Você pode arrastar qualquer coisa da caixa de ferramentas da interface do usuário e soltá-la na tela e ela ficará no layout da tela.
• Há uma integração mais rápida de aplicativos Angular a serviços de back-end e APIs, o que facilita a busca e o gerenciamento de dados sem escrever código extenso.
• A reutilização dos componentes fornecidos é inestimável, pois diferentes controles Angular podem ser personalizados e reutilizados não apenas neste aplicativo de CRM, mas também em outros projetos Angular, promovendo consistências de design.
• App Builder oferece todos os recursos necessários para aplicar recursos de temas integrados e personalizados. Suas opções de tema pré-criadas são Material, Bootstrap ou Fluent UI. Mas você também pode criar seu próprio tema baseado em Fluent, Bootstrap ou Material, modificando a tipografia, cores, arredondamento e elevação e escolhendo entre um modo claro ou escuro.
• Angular geração de código com uma abordagem independente de estrutura é outro benefício de usar App Builder para projetos Angular. Além de gerar código de Angular limpo em um clique que segue as melhores práticas e padrões do setor, nossa ferramenta low-code cria aplicativos independentes de estrutura. Você pode alternar facilmente do Angular para outra estrutura compatível com a ferramenta low-code –Blazor e Web Components. Tudo isso em um único clique.

Você pode ler mais sobre como o uso de App Builder low-code simplifica o processo de design para código nestes artigos:

Reduza a complexidade do software corporativo de missão crítica com ferramentas low-code

Escolhendo a melhor ferramenta low-code para o seu negócio em 2023

Como as ferramentas low-code podem reduzir custos durante a recessão