Cómo crear una aplicación Angular CRM con App Builder

Es un mito que las plataformas de código bajo no pueden producir aplicaciones modernas, responsivas y con todas las funciones ahora. Hace unos diez años o más, solo podían ayudar a los desarrolladores a definir interfaces limitadas y funcionalidades aún más limitadas a través de menús gráficos, mientras generaban el temido código espagueti y de alguna manera descuidaban el mantenimiento del código. A partir de 2023, la evolución y el valor real de la tecnología low-code/no-code se han vuelto más evidentes que nunca. Y uno de los avances y ventajas más importantes cuando se trata de desarrollo web empresarial es la capacidad de las herramientas de código bajo o sin código para garantizar una ventaja inicial para nuevos proyectos al trabajar con aplicaciones de muestra, proporcionar plantillas listas para usar y generar código limpio y listo para producción que cumpla con las pautas de codificación estándar.

Entonces, en esta publicación de blog, usaremos nuestro WYSIWYG App Builder ™ para crear una aplicación Angular CRM personalizada utilizando una muestra y un enfoque de desarrollo de código bajo que hace que el proceso sea ocho veces más rápido.

Pruebe App Builder.

En resumen, ¿qué es una aplicación CRM y por qué utilizar una aplicación de ejemplo Angular para su proyecto?

Una aplicación CRM (Customer Relationship Management) es una aplicación de software diseñada para ayudar a las empresas a gestionar sus interacciones y relaciones con clientes y prospectos. Estas soluciones de software suelen proporcionar herramientas y funciones que permiten a las organizaciones rastrear, analizar y optimizar las interacciones con los clientes de manera eficiente.

En cuanto a por qué debería comenzar con una aplicación de muestra, especialmente si es su primer proyecto:

• Proporciona una ventaja.
• Es una experiencia práctica.
• Elimina tareas de desarrollo comunes.
• Es fácil de modificar y personalizar.
• Es ágil, escalable y fácil de mantener.
• Hay una vista previa del código en tiempo real.

Detalles aquí: 3 ejemplos de aplicaciones Angular que puedes usar de inmediato

Cómo crear una aplicación de muestra Angular CRM con App Builder y personalizarla

Al crear una interfaz de usuario de aplicación con nuestra plataforma de código bajo, aprovecha varios diseños predefinidos, componentes listos para usar, un manejo sólido de cualquier API REST y capacidades de configuración enriquecidas que aumentan su eficiencia y habilidades. Hay una superficie de diseño WYSIWYG y al mismo tiempo se aprovechan los componentes Angular repletos de funciones. Esto le ahorra tiempo al eliminar la necesidad de codificar manualmente diseños y componentes. Le permite obtener comentarios antes e iterar más rápido en función de los comentarios. Este enfoque sin código también se extiende a los flujos de trabajo de navegación y enlace de datos. Si desea descargar el código y agregarlo, cargue su aplicación Angular CRM y amplíe el diseño a través de App Builder según sus necesidades. Aunque es una aplicación predefinida, aún se puede editar. Puede agregar vistas, componentes y ampliar el diseño como desee.

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

Lo que ves aquí es una aplicación de estilo maestro-detalle para administrar los detalles del cliente inspirada en HubSpot. Incluye vistas receptivas para el panel de descripción general y detalles del cliente con múltiples pestañas. Componentes utilizados: Componentes utilizados: Acordeón, Avatar, Botón, Botón de icono, Gráfico de categorías, Casilla de verificación, Ventana de diálogo, Menú desplegable, Panel de expansión, Cuadrícula de datos, Icono, Grupo de entrada, Lista, Barra de navegación, Cajón de navegación, Seleccionar, Diseño de pestañas.

También puede consultar el ejemplo de la aplicación CRM y obtener una vista previa del código.

Pasemos a los pasos para usar el ejemplo en App Builder y ajustémoslo de manera que funcione para los requisitos de su proyecto y sus objetivos comerciales.

Paso 1: abra App Builder y navegue hasta aplicaciones de muestra

Abra App Builder y seleccione "Crear nueva aplicación". Luego, navegue hasta la sección "Aplicaciones de muestra" y elija la aplicación CRM como diseño base para su proyecto. Para el propósito de nuestro proyecto, creamos la aplicación teniendo en cuenta la capacidad de respuesta, mostrando la mayor cantidad de datos posible gracias a los componentes Cuadrícula, Lista y Gráfico. Estos controles tienen un manejo sólido de big data y funciones para acceder a ellos cuando se desee. El componente Cajón de navegación (con comportamiento de salida/entrada) maneja la navegación de vista cruzada y la apariencia del SPA.

Los contenedores Flex Layout, por otro lado, nos permiten modificar la posición de cualquier elemento UI anidado. Las otras propiedades destacables están relacionadas con el cambio de tamaño y envoltura de fluidos.

Desde allí, puede ampliar y personalizar el diseño para adaptarlo a sus necesidades específicas.

Paso 2: Conectar API

No es necesario conectar manualmente su API, ya que esto se hace directamente en el App Builder especificando una URL de host local o pública. A partir de ahí, tienes dos opciones:

• Para agregar una definición de Swagger​
• O usar la URL JSON

Para nuestros propósitos, utilizaremos el enfoque Swagger y agregaremos la URL.

Después de eso, especifique un nombre para la fuente de datos y continúe con el siguiente paso. Identifique qué puntos finales desea incluir. Una vez establecida la autorización, continúe con Seleccionar datos, asegúrese de que todos los campos estén seleccionados y haga clic en Listo.

Luego, cuando la fuente de datos se haya cargado correctamente, podrá conectar la cuadrícula en la página del panel.

Para hacerlo, seleccione la cuadrícula y actualice la fuente de datos desde el campo Datos. Desde allí, puede agregar operaciones de actualización y eliminación que se vincularán a los puntos finales en la API, lo que permitirá la modificación en vivo de datos a través de interacciones con la red.

Una vez que se hayan creado todas las páginas, puede obtener una vista previa de la aplicación seleccionando el botón verde ubicado en la esquina superior derecha. Para facilitar una mayor personalización, descargue su aplicación Angular CRM.

Paso 3: personaliza y aplica temas

Puede crear un tema de aplicación personalizado que coincida con su marca. Para ello, cree un nuevo tema y elija uno de los temas base como punto de partida. Las paletas de colores se generan automáticamente en función del color primario y secundario que elija. En lo que respecta a la tipografía, por ahora tenemos un conjunto de fuentes integradas, pero planeamos agregar más control creativo en versiones futuras. Una vez que haya terminado de editar, guarde el tema de la aplicación para aplicar los cambios.

Paso 4: Vista previa del código

Esto le permite interactuar con su diseño como si fuera una aplicación en ejecución y ver HTML, CSS y TS por separado. Para ver su aplicación en acción e inspeccionar el código, simplemente toque el botón de acción Ver código en la esquina superior derecha.

Paso 5: generar aplicación

Utilice el menú desplegable del selector de plataforma en la barra de navegación junto a los botones de acción Publicar en GitHub y Vista previa. Elija la opción Blazor Server/ Blazor Web Assembly para generar código para Blazor o Angular para ver una vista previa de la aplicación y el código generados. La opción Web Components también está disponible.

Los beneficios de utilizar App Builder

Hemos discutido detalladamente las ventajas de usar código bajo en el diseño y desarrollo de aplicaciones muchas veces. Aún así, en general, WYSIWYG App Builder proporciona información sobre herramientas, interfaz de usuario intuitiva y partes de interfaz de usuario listas para usar que son necesarias para cualquier aplicación web, como componentes, vista de árbol de esquema, diseños de aplicaciones integrados y diferentes propiedades para cubrir sus necesidades. , temas, manejo de fuentes de datos externas, vista previa de la aplicación (mientras aún la estás creando), capacidades de colaboración a través de espacios de trabajo, uso compartido de aplicaciones, publicación en GitHub, seguimiento de cambios y más.

Otros aspectos destacados de los beneficios de utilizar App Building:

• Las plataformas de código bajo proporcionan una interfaz visual y componentes prediseñados que reducen la necesidad de codificación manual en Angular, lo que facilita a los desarrolladores con distintos niveles de experiencia la creación de aplicaciones.
• Puede ponerse manos a la obra mirando las Vistas de las diferentes páginas, haciendo clic para ver las propiedades de cada uno de los componentes utilizados y explorando más a fondo la aplicación sin realizar ningún desarrollo usted mismo.
• Permiten una rápida creación de prototipos e iteraciones y garantizan un desarrollo más rápido e intuitivo con una experiencia completa de creación de aplicaciones de arrastrar y soltar, mientras utilizan componentes Angular prediseñados. Puede arrastrar cualquier cosa desde la caja de herramientas de la interfaz de usuario y soltarla en la pantalla y quedará ubicada dentro del diseño de la pantalla.
• Existe una integración más rápida de las aplicaciones Angular con los servicios backend y las API, lo que facilita la recuperación y la administración de datos sin escribir código extenso.
• ​La reutilización de los componentes proporcionados no tiene precio, ya que se pueden personalizar y reutilizar diferentes controles Angular no solo en esta aplicación CRM sino también en otros proyectos Angular, promoviendo la coherencia del diseño.
• App Builder le brinda todas las capacidades que necesita para aplicar funciones de temas integradas y personalizadas. Las opciones de temas prediseñados son Material, Bootstrap o Fluent UI. Pero también puedes crear tu propio tema basado en Fluent, Bootstrap o Material modificando la tipografía, los colores, la redondez y la elevación, y eligiendo entre un modo claro u oscuro.
• La generación de código Angular con un enfoque independiente del marco es otro beneficio de usar App Builder para proyectos Angular. Además de generar código Angular limpio con un clic que cumple con las mejores prácticas y los estándares de la industria, nuestra herramienta de bajo código crea aplicaciones independientes del marco. Puede cambiar fácilmente de Angular a otro marco compatible con la herramienta de código bajo: Blazor y Web Components. Todo esto en un solo clic.

Puede leer más sobre cómo el uso de App Builder de código bajo agiliza el proceso de diseño a código en estos artículos:

Reduzca la complejidad del software empresarial de misión crítica con herramientas de bajo código

Elegir la mejor herramienta Low-Code para su negocio en 2023

¿Cómo pueden las herramientas de código bajo reducir los costos durante la recesión?