Empiece a realizar un seguimiento de su progreso
Inicio de Trailhead
Inicio de Trailhead

Programar con lenguajes de Salesforce

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Identificar las ventajas de los componentes Lightning.
  • Describir cómo se utiliza Visualforce en Lightning Experience.
  • Describir las maneras de utilizar Apex para dar cobertura a componentes Lightning y Visualforce.

Conocer sus opciones

Existen tres tecnologías programáticas principales que aprender como desarrollador de Salesforce.

  • Marco de trabajo de componentes Lightning: Un marco de trabajo de desarrollo de interfaz de usuario similar a AngularJS o React.
  • Apex: Lenguaje de programación creado por Salesforce con una sintaxis similar a Java.
  • Visualforce: Un lenguaje de marcado que le permite crear páginas de Salesforce personalizadas con código muy parecido a HTML, y opcionalmente puede utilizar una potente combinación de Apex y JavaScript.

Veamos rápidamente cada una de estas tecnologías y su apariencia en nuestra aplicación DreamHouse.

Componentes Lightning

El marco de trabajo de componentes Lightning es un marco de trabajo de desarrollo de interfaz de usuario para dispositivos de escritorio y móviles. Como su nombre sugiere, es un enfoque basado en componentes para el desarrollo de interfaces de usuario. Utilizando componentes Lightning preconfeccionados y personalizados, puede desarrollar rápidamente interfaces de usuario elegantes y coherentes para sus aplicaciones.

Si está familiarizado con marcos de trabajo como AngularJS, React o Polymer, tendrá una buena idea de lo que esperar con componentes Lightning. El beneficio, por supuesto, es que los componentes Lightning están listos para su uso con todos sus datos de negocio en Salesforce.

Nota

Nota

Desde la versión Spring ‘19 (versión 45.0 de la API), puede construir componentes Lightning empleando dos modelos de programación: el modelo Componentes web Lightning y el modelo Componentes Aura original. Los componentes web Lightning son elementos HTML personalizados construidos utilizando HTML y JavaScript moderno. Los componentes web Lightning y los componentes Aura pueden coexistir y funcionar conjuntamente en una página. Para obtener más información, realice el módulo Fundamentos de componentes web Lightning.

El módulo Fundamentos de desarrollo de plataforma utiliza la aplicación DreamHouse construida con componentes Aura.

Profundicemos de nuevo en la aplicación DreamHouse y veamos los componentes Lightning en acción. Echemos un vistazo a un componente Lightning personalizado en una aplicación y luego veamos cómo está creado.

Desde el Iniciador de aplicación (Icono del Iniciador de aplicación), encuentre y seleccione Propiedades. Seleccione una propiedad de la lista para abrir su página de detalles. Hay bastantes componentes Lightning en esta página, pero vamos a analizar uno en particular: el mapa. Este mapa simplemente muestra la ubicación de la propiedad y permite al usuario ampliarlo.

Componente mapa resaltado en la página de detalles de la propiedad.
Ahora, veamos cómo se creó este componente.
  1. Navegue hasta Configuración haciendo clic en el menú de engranaje Icono de engranaje de Configuración. y luego haga clic en Configuración.
  2. En la barra Búsqueda rápida, busque y haga clic en Componentes Lightning.
  3. Haga clic en Mapa y luego haga clic en Developer Console.

Developer Console es el entorno de desarrollo integrado (IDE) de Salesforce que puede utilizar para desarrollar, depurar y probar código en su organización. Ahora mismo contiene el código del mapa de las propiedades que acaba de ver. No vamos a profundizar en ese código por el momento, ya hay otro módulo para ello. Pero dediquemos unos segundos para advertir algunos de sus atributos clave. Es marca XML. Contiene etiquetas específicas Aura y estáticas HTML. Utiliza una convención <espaciodenombre:nombreEtiqueta> para sus etiquetas, cada una representa un componente más pequeño o secundario.

En el lado derecho de Developer Console, también verá activos adicionales que forman parte de este paquete de componentes. Si hace clic en CONTROLLER (Controlador), por ejemplo, verá algo de JavaScript. Los componentes Lightning utilizan controladores JavaScript del lado del cliente y controladores Apex del lado del servidor. Puede crear y acceder a esos controladores, así como a otros activos como hojas de estilo de componentes desde el menú de paquetes.

Otra cosa excelente sobre los componentes Lightning es que tienen capacidad móvil. Cuando crea aplicaciones para la aplicación móvil Salesforce, no tiene que preocuparse sobre el modo en que se visualizan los componentes Lightning. Solo tiene que agregarlos a la aplicación y dejar que la plataforma controle el resto.

Para obtener más información sobre los componentes Lightning, consulte la sección de recursos.

Apex

Anteriormente, hablamos sobre Process Builder como herramienta de poca programación. Aunque es de poca programación, también puede ampliar las funciones de Process Builder programando un poco. Volvamos a DreamHouse y observemos un proceso que envía una notificación distribuida siempre que cambia el precio de una casa.

  1. Desde Configuración, utilice Búsqueda rápida para localizar Process Builder y abra la página de Process Builder.
  2. Haga clic en Price Change Push Notification (Notificación distribuida de cambio de precio).
  3. Bajo Immediate Actions (Acciones inmediatas), haga clic en Push Notification (Notificación distribuida).
  4. Observe el valor del campo Apex Class. Desde el menú de engranaje de la parte superior, inicie Developer Console.
  5. Haga clic en File | Open (Archivo, Abrir) y utilice la barra Filter (Filtro) para localizar PushPriceChangeNotification. Haga doble clic para abrirla en Developer Console.

Si desarrolló alguna vez en Java, probablemente averiguará lo que pasa en esta clase. De nuevo, no vamos a pasar por cada detalle de esta implementación. A parte de la sintaxis similar a Java, existen un par de cosas que hay que destacar.

La clase de Apex PushPriceChangeNotification

En primer lugar, observe la anotación @InvocableMethod antes de la firma de método. Tiene un atributo de etiqueta que permite a otras herramientas como Process Builder ejecutar el método. Otra cosa que hay que observar es que hay algunas preguntas en el cuerpo del método.
Property__c property = [SELECT Name, Price__c from Property__c WHERE Id=:propId];

Esta frase de apariencia SQL es realmente SOQL (Salesforce Object Query Language). Puede utilizar SOQL para leer registros desde la base de datos en su código.

Por supuesto, la ampliación de Process Builder es solo una de las maneras con que puede utilizar Apex para mejorar las funciones de su organización. Para obtener más información, consulte los recursos.

Visualforce

El último pilar principal de la programación sobre la plataforma Salesforce es Visualforce. Si realizó cualquier tipo de desarrollo web, Visualforce le será familiar. Visualforce le permite crear y personalizar páginas en Salesforce así como integrar con otras tecnologías web estándar, incluyendo HTML, CSS y JavaScript.

Antes de mirar un ejemplo, es importante hablar sobre la diferencia entre componentes Lightning y páginas de Visualforce. La diferencia principal está en el nombre. Con los componentes Lightning está desarrollando componentes que pueden encadenarse entre sí para crear páginas. Con Visualforce está desarrollando páginas completas de una vez. Aunque los componentes Lightning son más modernos y mejores para cosas como el desarrollo móvil, hay varias situaciones en las que tiene más sentido utilizar Visualforce. Eche un vistazo a la tabla en Consideraciones del desarrollo de la interfaz de usuario para obtener más detalles sobre cuándo utilizar cada uno de ellos.

De acuerdo, volvamos a DreamHouse. Observemos un ejemplo de página de Visualforce.

  1. Desde el Iniciador de aplicación (Icono del Iniciador de aplicación), encuentre y seleccione Heat Map. Esta página muestra todas las propiedades listadas y sus ubicaciones en la ciudad.
  2. Desde el menú Configuración (Icono de engranaje de Configuración.), inicie Developer Console.
  3. Haga clic en File | Open | Pages (Archivo, Abrir, Páginas).
  4. En la barra Filter (Filtro), ingrese HeatMap y haga doble clic en él para abrirlo.

En este archivo verá la marca de Visualforce, la marca de HTML, CSS y JavaScript. Observe que el acrónimo SLDS aparece varias veces. SLDS (Salesforce Lightning Design System) le permite asignar un estilo a sus páginas para que se ajusten al aspecto y el comportamiento de la nueva interfaz de Salesforce, Lightning Experience. Otra cosa que hay que advertir es que Visualforce utiliza una convención similar a la de los componentes Lightning con <apex:nombreEtiqueta>.

Algo que no se muestra en esta clase es el concepto de controladores Apex. Anteriormente, mencionamos que los componentes Lightning utilizan JavaScript en el lado del cliente y Apex en el lado del servidor. Las páginas de Visualforce también pueden utilizar controladores Apex del lado del servidor y la mayoría de páginas complejas utilizan bastante. A medida que explore Visualforce se familiarizará mucho con los controladores Apex.

También puede acceder y realizar una vista previa de páginas de Visualforce buscando Páginas de Visualforce en la barra Búsqueda rápida en configuración.