Tutorial 4: chamar scripts

Widget de botão Habilidades intermediárias do App Maker

access_time Cerca de 10 minutos

O que você criará

Você criará um aplicativo que permitirá ao usuário escrever e enviar uma mensagem de e-mail em rich text (HTML). O aplicativo usa scripts do cliente e scripts do servidor.

O que você aprenderá

Com este tutorial, você aprenderá a:

  • criar e chamar um script do cliente;
  • criar e chamar um script do servidor;
  • usar o valor de um widget de Editor de texto e enviar uma mensagem de e-mail com um corpo HTML.

Criar seu aplicativo

  1. Faça login na conta do G Suite fornecida pelo empregador ou pela escola.
  2. Abra o App Maker.
  3. Crie um aplicativo em branco:
    • Se o App Maker exibir a caixa de diálogo de boas-vindas, clique em Criar novo aplicativo.
    • Caso contrário, clique no menu menu chevron_right Novo chevron_right Aplicativo em branco.
  4. Renomeie o aplicativo. Exclua o nome padrão, Aplicativo sem título, e insira Remetente do e-mail.

Criar a IU

Você criará um formulário assim:

Remetente do e-mail

Para criar esta IU:

  1. Renomeie a página:

    1. Na barra lateral esquerda, passe o cursor sobre NovaPágina e clique em Mais more_vert chevron_right Renomear.

    2. Digite o e-mail e clique em OK.

  2. Adicione uma caixa de texto para o destinatário:

    1. Clique em Widgets e arraste uma caixa de texto Widget de caixa de texto para perto do canto superior esquerdo da tela.

    2. Arraste a alça direita para aumentar o comprimento da caixa de texto.

    3. No Editor de propriedade, altere a propriedade nome da caixa de texto para Para e insira Para: como a propriedade rótulo.

  3. Adicione uma caixa de texto para o assunto:

    1. Clique em Widgets e arraste uma caixa de texto Widget de caixa de texto para baixo da caixa "Para".

    2. Arraste a alça direita para aumentar o comprimento da caixa de texto.

    3. No Editor de propriedade, altere a propriedade nome da caixa de texto para Assunto e insira Assunto: como a propriedade rótulo.

  4. Adicione um editor de texto ao corpo da mensagem de e-mail:

    1. Clique em Widgets e arraste um editor de texto para baixo da caixa de texto "Assunto".

    2. No Editor de propriedade, altere a propriedade nome do editor de texto para Msg.

  5. Adicione um botão para o usuário clicar e enviar a mensagem de e-mail:

    1. Em Widgets , arraste um botão Widget de botão para a tela à direita da caixa de texto "Para". Clique duas vezes no botão e renomeie-o como Enviar e-mail.
  6. Defina uma ação a ser executada quando um usuário clicar no botão "Enviar e-mail".

    1. Clique em Enviar e-mail.

    2. Na seção "Botão" do Editor de propriedade chevron_right, clique na propriedade onClick e selecione Ação personalizada.

    3. Use JavaScript para definir a ação. Na caixa de diálogo Script do cliente, copie e cole este script:

          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); 
      Em action, observe as seguintes referências a objetos e propriedades do App Maker:

      • widget.parent.descendants— O widget pai do botão "Enviar e-mail" é o painel de nível superior da página. Os descendentes desse painel incluem todos os widgets da página.
      • widgets.To.value, widgets.Subject.value, widgets.Msg.value e widgets.EmailStatus.text— As propriedades value de três widgets e a propriedade text de um quarto.
    4. Pressione Esc para fechar a caixa de diálogo.

  7. Adicione um botão para o usuário clicar e limpar todos os campos do formulário:

    1. Em Widgets , arraste um botão Widget de botão para a tela abaixo do editor de texto. Clique duas vezes no botão e o renomeie para Limpar formulário.
  8. Defina uma ação a ser executada quando um usuário clicar no botão "Limpar formulário".

    1. Clique em Limpar formulário.

    2. Na seção "Botão" do Editor de propriedade chevron_right, clique na propriedade onClick e selecione Ação personalizada.

    3. Use JavaScript para definir a ação. Na caixa de diálogo Script do cliente, copie e cole este script:

      clearEmailForm();

  9. Adicione um rótulo para o status:

    1. Em Widgets , arraste um rótulo Widget de rótulo para a tela abaixo da caixa de texto.

    2. No Editor de propriedade, defina a propriedade nome como StatusdoEmail. Exclua a propriedade texto.

  10. Clique em "Fechar" close para fechar Widgets.

Saiba mais sobre os scripts que o aplicativo usará

Nesta etapa, você copiará e colará as funções JavaScript necessárias para que o aplicativo envie e-mails e limpe o formulário em scripts. Scripts são contêineres no App Maker semelhantes aos arquivos de script:

  • Script do cliente: contém o JavaScript executado pelo mecanismo JavaScript do navegador.
  • Script do servidor: contém o JavaScript executado pelo mecanismo JavaScript no servidor do App Maker.

Funções de script do cliente

clearEmailForm

A função clearEmailForm limpa todo o formulário de e-mail.

sendMessage

A função sendMessage:

  • chama o script do servidor sendEmailMessage para enviar a mensagem de e-mail;
  • chama o script do cliente clearEmailForm para limpar o formulário de e-mail.

Função de script do servidor

sendEmailMessage

A função de script do servidor sendEmailMessage chama a função MailApp.sendEmail para enviar a mensagem de e-mail. A opção htmlBody de MailApp.sendEmail indica que o corpo da mensagem é HTML.

Criar um script do cliente

  1. Crie um script do cliente para conter as funções que o cliente executará.

    1. Passe o cursor sobre Scripts e clique em add para adicionar um script.

    2. Quando a caixa de diálogo "Criar script" aparecer, deixe o Cliente selecionado, desmarque Gerar código de amostra e clique em Criar.

  2. Renomeie o script do cliente:

    1. Na barra lateral esquerda, passe o cursor sobre NovoScript e clique em Mais chevron_right Renomear.

    2. Digite ScriptdoCliente e clique em Ok.

  3. Copie e cole este JavaScript no ScriptdoCliente:

    /**
        * 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);
        }
        

Observe o objeto referência app.pages.Email.descendants, que faz referência a todos os objetos descendentes da página Email, ou seja, todos os widgets. Neste aplicativo, essa referência é uma alternativa à referência equivalente (widget.parent.descendants) usada na ação onClick do botão Send Email. Se essas referências são equivalentes, isso depende da hierarquia de objetos.

Criar um script do servidor

  1. Crie um script de servidor para conter a função que o servidor executará:

    1. Passe o cursor sobre Scripts e clique em add para adicionar um script.

    2. Quando a caixa de diálogo "Criar Script" aparecer, clique em Servidor, deixe o campo Gerar código de amostra desmarcado e clique em Criar.

  2. Renomeie o script do servidor:

    1. Na barra lateral esquerda, passe o cursor sobre NovoScript e clique em Mais more_vert chevron_right Renomear.

    2. Digite ScriptdoServidor e clique em OK.

  3. Copie e cole este JavaScript no ScriptdoServidor:

     /**
          * 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});
         }
        

    Observe como destinatário, assunto e mensagem são transmitidos para a função que realmente envia o e-mail. A ação definida para a propriedade onClick do botão "Enviar E-mail" chama a função SendMessage no script do cliente, transmitindo para a função o destinatário, o assunto e a mensagem. A função SendMessage transmite esses mesmos argumentos para a função sendEmailMessage no script do servidor, que os transmite para a função MailApp.SendMail. A função MailApp.SendMail envia o e-mail.

Visualizar e testar o aplicativo

Visualize o aplicativo "Enviar e-mail" para vê-lo em ação.

  1. No canto superior direito, clique em Visualizar para executar o aplicativo em uma nova guia do navegador.
  2. Clique em Permitir para que o aplicativo use informações específicas.
  3. Digite um endereço de e-mail e um assunto.
  4. No Editor de texto, digite uma mensagem curta.
  5. Clique em Limpar formulário. Agora, você precisa começar de novo.
  6. Digite um endereço de e-mail e um assunto.
  7. No Editor de texto, digite uma mensagem curta.
  8. Use as ferramentas da barra de ferramentas do Editor de texto para customizar a mensagem.
  9. Clique em Enviar e-mail. O aplicativo "Enviar e-mail" envia o e-mail e apaga o formulário.

Parabéns! Você acabou de criar um aplicativo no App Maker que usa scripts do cliente e um script do servidor para enviar e-mails.

A seguir

  1. Siga o Tutorial 5: saiba mais sobre as relações.
  2. Saiba mais sobre os scripts do App Maker.
  3. Explore outros aplicativos na lista de Amostras do App Maker.
  4. Saiba mais sobre os principais conceitos deste tutorial, por exemplo: