Instructivo 4: Llama a las secuencias de comandos

Widget de botón Habilidades intermedias de App Maker

access_time Aproximadamente 10 minutos

Qué compilarás

Compilarás una aplicación que permita a un usuario redactar y enviar un mensaje de correo electrónico de texto enriquecido (HTML). La aplicación usa las secuencias de comandos del cliente y del servidor.

Qué aprenderás

En este instructivo, aprenderás a realizar las siguientes acciones:

  • Crear y llamar a una secuencia de comandos del cliente
  • Crear y llamar a una secuencia de comandos del servidor
  • Usar el valor de un widget de editor de texto y enviar un mensaje de correo electrónico con un cuerpo HTML

Crea tu aplicación

  1. Accede a la cuenta de G Suite que te proporcionó tu empleador o escuela.
  2. Abre App Maker.
  3. Crea una aplicación en blanco:
    • Si App Maker muestra el cuadro de diálogo de bienvenida, haz clic en Crear aplicación nueva (Create New App).
    • De lo contrario, haz clic en Menú (Menu) menu chevron_right Nueva (New) chevron_right Aplicación en blanco (Blank Application).
  4. Cambia el nombre de la aplicación. Borra el nombre predeterminado, Aplicación sin título (Untitled App) y, luego, ingresa el Remitente del correo electrónico (Email Sender).

Crea la IU

Compilarás un formulario como el que se muestra a continuación:

Remitente del mensaje de correo electrónico

Para crear esta IU:

  1. Renombra la página:

    1. En la barra lateral izquierda, pasa el cursor sobre Nueva página (NewPage) y haz clic en Más more_vert chevron_right Cambiar nombre (Rename).

    2. Ingresa Correo electrónico y haz clic en Aceptar (OK).

  2. Agrega un cuadro de texto para el destinatario:

    1. Haz clic en Widgets  y arrastra un cuadro de texto Widget de cuadro de texto cerca de la esquina superior izquierda del recuadro.

    2. Arrastra el controlador derecho para aumentar la longitud del cuadro de texto.

    3. En el Editor de propiedades (Property Editor), cambia la propiedad nombre (name) del cuadro de texto a Para (To) y, luego, ingresa Para: (To:) como propiedad label.

  3. Agrega un cuadro de texto para el asunto:

    1. Haz clic en Widgets  y arrastra un cuadro de texto Widget de cuadro de texto debajo del cuadro de texto Para (To).

    2. Arrastra el controlador derecho para aumentar la longitud del cuadro de texto.

    3. En el Editor de propiedades (Property Editor), cambia la propiedad nombre (name) del cuadro de texto a Asunto (Subject) y, luego, ingresa Asunto: (Subject:) como propiedad etiqueta (label).

  4. Agrega un editor de texto para el cuerpo del mensaje de correo electrónico:

    1. Haz clic en Widgets  y arrastra un editor de texto  debajo del cuadro de texto Asunto.

    2. En el Editor de propiedades, cambia la propiedad nombre (name) del editor de texto a Msje (Msg).

  5. Agrega un botón en el que el usuario pueda hacer clic para enviar el mensaje de correo electrónico:

    1. En Widgets , arrastra un botón Widget de botón al recuadro a la derecha del cuadro de texto Para. Haz doble clic en el botón y cámbiale el nombre a Enviar correo electrónico (Send Email).
  6. Define una acción que se debe realizar cuando un usuario hace clic en el botón Enviar correo electrónico.

    1. Haz clic en Enviar correo electrónico.

    2. En el Editor de propiedades (Property Editor) chevron_right sección Botón (Button), haz clic en la propiedad onClick y selecciona Acción personalizada (Custom Action).

    3. Usa JavaScript para definir la acción. En el cuadro de diálogo Secuencia de comandos del cliente (Client Script), copia y pega esta secuencia de comandos:

          var widgets = widget.parent.descendants;
          var to = widgets.To.value;
          var subject = widgets.Subject.value;
          var msg = widgets.Msg.value;
          widgets.EmailStatus.text = 'Sending email...';
          sendMessage(to, subject, msg); 
      En action, observa las siguientes referencias a los objetos y las propiedades de App Maker:

      • widget.parent.descendants—el widget principal del botón Enviar correo electrónico es el panel principal de la página. Los descendientes de ese panel incluyen todos los widgets de la página.
      • widgets.To.value, widgets.Subject.value, widgets.Msg.value y widgets.EmailStatus.text—las propiedades value de los tres widgets y la propiedad text de un cuarto widget.
    4. Presiona Esc para cerrar el cuadro de diálogo.

  7. Agrega un botón en el que el usuario pueda hacer clic para borrar todos los campos del formulario:

    1. En Widgets , arrastra un botón Widget de botón al recuadro debajo del editor de texto. Haz doble clic en el botón y cámbiale el nombre a Borrar formulario (Clear Form).
  8. Define una acción que se debe realizar cuando un usuario hace clic en el botón Borrar formulario.

    1. Haz clic en Borrar formulario.

    2. En el Editor de propiedades (Property Editor) chevron_right sección Botón (Button), haz clic en la propiedad onClick y selecciona Acción personalizada (Custom Action).

    3. Usa JavaScript para definir la acción. En el cuadro de diálogo Secuencia de comandos del cliente (Client Script), copia y pega esta secuencia de comandos:

      clearEmailForm();

  9. Agrega una etiqueta para el estado:

    1. En Widgets , arrastra una etiqueta Widget de etiqueta al recuadro debajo del cuadro de texto.

    2. En el Editor de propiedades (Property Editor), configura la propiedad nombre (name) como EmailStatus. Borra la propiedad texto (text).

  10. Haz clic en Cerrar close para cerrar Widgets.

Obtén información sobre las secuencias de comandos que usará la aplicación

En este paso, copiarás y pegarás las funciones de JavaScript que necesita la aplicación para enviar un correo electrónico y borrar el formulario en las secuencias de comandos de la aplicación. En App Maker, las secuencias de comandos son contenedores similares a los archivos de secuencia de comandos:

  • Secuencia de comandos del cliente: contiene JavaScript que ejecuta el motor de JavaScript del navegador.
  • Secuencia de comandos del servidor: contiene JavaScript que ejecuta un motor de JavaScript en el servidor de App Maker.

Funciones de secuencia de comandos del cliente

clearEmailForm

La función clearEmailForm borra todo el formulario de correo electrónico.

sendMessage

La función sendMessage:

  • Llama a la secuencia de comandos del servidor sendEmailMessage para enviar el mensaje de correo electrónico.
  • Llama a la secuencia de comandos del cliente clearEmailForm para borrar el formulario de correo electrónico.

Función de secuencia de comandos del servidor

sendEmailMessage

La función de secuencia de comandos del servidor sendEmailMessage llama a la función MailApp.sendEmail para enviar el mensaje de correo electrónico. La opción htmlBody de MailApp.sendEmail indica que el cuerpo del mensaje es HTML.

Crea una secuencia de comandos del cliente

  1. Crea una secuencia de comandos del cliente para contener las funciones que ejecutará el cliente.

    1. Pasa el cursor sobre Secuencias de comandos (Scripts) y haz clic en add para agregar una secuencia de comandos.

    2. Cuando aparezca el cuadro de diálogo Crear secuencia de comandos (Create script), deja seleccionado Cliente (Client), desmarca la casilla Generar código de ejemplo (Generate sample code) y haz clic en Crear (Create).

  2. Cambia el nombre de la secuencia de comandos del cliente:

    1. En la barra lateral izquierda, pasa el cursor sobre Nueva secuencia de comandos (NewScript) y haz clic en Más (Más) chevron_right Cambiar nombre (Rename).

    2. Ingresa Secuencia de comandos de cliente (ClientScript) y haz clic en Aceptar (OK).

  3. Copia y pega este JavaScript en ClientScript:

    /**
        * Clears the entire email form
        */
        function clearEmailForm(){
          var formWidgets = app.pages.Email.descendants;
          formWidgets.EmailStatus.text = "";
          formWidgets.To.value = "";
          formWidgets.Subject.value = "";
          formWidgets.Msg.value = "";
        }
        /**
        * Sends an email message.
        * @param {string} to - Message recipient
        * @param {string} subject - Message subject
        * @param {string} msg - Body of message (HTML from Text Editor)
        */
        function sendMessage(to, subject, msg){
          var status = app.pages.Email.descendants.EmailStatus;
          google.script.run
           .withFailureHandler(function(error) {
              // An error occurred, so display an error message.
              status.text = error.message;
            })
          .withSuccessHandler(function(result) {
             // Report that the email was sent.
             status.text = 'Email sent...';
          clearEmailForm();
           })
         .sendEmailMessage(to, subject, msg);
        }
        

Observa la referencia del objeto app.pages.Email.descendants, que hace referencia a todos los objetos que son descendientes de la página Email, es decir, todos los widgets. En la aplicación, esta referencia es una alternativa a la referencia equivalente (widget.parent.descendants) que se usa en la acción onClick del botón Send Email. (La equivalencia de estas referencias depende de la jerarquía de los objetos).

Crea una secuencia de comandos del servidor

  1. Crea una secuencia de comandos del servidor para contener la función que ejecutará el servidor:

    1. Pasa el cursor sobre Secuencias de comandos (Scripts) y haz clic en add para agregar una secuencia de comandos.

    2. Cuando aparezca el cuadro de diálogo Crear secuencia de comandos (Create Script), haz clic en Servidor (Server), deja desmarcada la casilla Generar código de ejemplo (Generate sample code) y haz clic en Crear (Create).

  2. Cambia el nombre de la secuencia de comandos del servidor:

    1. En la barra lateral izquierda, pasa el cursor sobre Nueva secuencia de comandos (NewScript) y haz clic en Más (More) more_vert chevron_right Cambiar nombre (Rename).

    2. Ingresa ServerScript y haz clic en Aceptar (OK).

  3. Copia y pega este JavaScript en ServerScript:

     /**
          * Sends an email message.
          * @param {string} to - Message recipient
          * @param {string} subject - Message subject
          * @param {string} msg - Body of message (HTML from Text Editor)
          * The body of the message is not a complete HTML document. It
          * doesn't need to be. When calling MailApp.sendEmail, you do
          * need to specify the option htmlBody for the message body, so that
          * MailApp.sendEmail will include the correct Content-Type header.
          */
         function sendEmailMessage(to, subject, msg){
           MailApp.sendEmail(to, subject, msg, {htmlBody: msg});
         }
        

    Observa cómo el destinatario, el asunto y el mensaje se pasan a la función que realmente envía el correo electrónico. La acción definida para la propiedad onClick del botón Enviar correo electrónico llama a la función SendMessage en la secuencia de comandos del cliente. Esto permite pasar el destinatario, el asunto y el mensaje a la función. La función SendMessage pasa estos mismos argumentos a la función sendEmailMessage en la secuencia de comandos del servidor, que pasa los argumentos a la función MailApp.SendMail. La función MailApp.SendMail envía el correo electrónico.

Obtén una vista previa y prueba la aplicación

Obtén una vista previa de la aplicación Enviar correo electrónico para verla en acción.

  1. En la esquina superior derecha, haz clic en Vista previa (Preview) para ejecutar la aplicación en una pestaña nueva del navegador.
  2. Haz clic en Permitir(Allow) para permitir que la aplicación use la información específica.
  3. Ingresa una dirección de correo electrónico y un asunto.
  4. En el Editor de texto, escribe un mensaje breve.
  5. Haz clic en Borrar formulario. Ahora tienes que volver a empezar.
  6. Ingresa una dirección de correo electrónico y un asunto.
  7. En el Editor de texto, escribe un mensaje breve.
  8. Usa las herramientas de la barra de herramientas del Editor de texto para diseñar el mensaje.
  9. Haz clic en Enviar correo electrónico. La aplicación Enviar correo electrónico envía el correo electrónico y borra el formulario.

Felicitaciones. Acabas de compilar una aplicación de App Maker que usa las secuencias de comandos del cliente y una secuencia de comandos del servidor para enviar correos electrónicos.

Próximos pasos

  1. Mira el Instructivo 5: Aprende acerca de las relaciones.
  2. Obtén más información sobre las secuencias de comandos de App Maker.
  3. Explora otras aplicaciones de la lista de Ejemplos de App Maker.
  4. Obtén más información sobre los conceptos clave de este instructivo; por ejemplo: