Tutorial 4: Memanggil Skrip

Widget Tombol Keterampilan App Maker tingkat menengah

Sekitar 10 menit

Apa yang akan Anda buat

Anda akan membuat aplikasi yang memungkinkan pengguna menulis dan mengirim pesan email teks kaya (HTML). Aplikasi ini menggunakan skrip klien dan skrip server.

Apa yang akan Anda pelajari

Tutorial ini mengajarkan cara:

  • Membuat dan memanggil skrip klien
  • Membuat dan memanggil skrip server
  • Menggunakan nilai widget Editor Teks dan mengirim pesan email dengan isi HTML.

Membuat aplikasi Anda

  1. Login ke akun G Suite yang diberikan oleh perusahaan atau sekolah Anda.
  2. Buka App Maker.
  3. Buat aplikasi kosong:
    • Jika App Maker menampilkan dialog selamat datang, klik Buat Aplikasi Baru.
    • Jika tidak, klik Menu Baru Aplikasi Kosong.
  4. Ganti nama aplikasi. Hapus nama defaultnya, Aplikasi Tanpa Judul, dan masukkan Pengirim Email.

Membuat UI

Anda akan membuat formulir yang terlihat seperti ini:

Pengirim Email

Untuk membuat UI ini:

  1. Ganti nama halaman:

    1. Di sidebar kiri, arahkan kursor ke NewScript dan klik Lainnya Ganti Nama.

    2. Masukkan Email dan klik OK.

  2. Tambahkan kotak teks untuk penerima:

    1. Klik Widget dan seret Kotak Teks Widget Kotak Teks dekat sudut kiri atas kanvas.

    2. Seret tuas kanan untuk menambah panjang kotak teks.

    3. Di Editor Properti, ganti properti nama kotak teks menjadi To dan masukkan To: sebagai properti label.

  3. Tambahkan kotak teks untuk subjek:

    1. Klik Widget dan seret Kotak Teks Widget Kotak Teks di bawah kotak teks To.

    2. Seret tuas kanan untuk menambah panjang kotak teks.

    3. Di Editor Properti, ganti properti nama kotak teks menjadi Subject dan masukkan Subject: sebagai properti label.

  4. Tambahkan editor teks untuk isi pesan email:

    1. Klik Widget dan seret Kotak Teks di bawah kotak teks Subjek.

    2. Di Editor Properti, ubah properti nama menjadi Msg.

  5. Tambahkan tombol bagi pengguna untuk mengklik untuk mengirim pesan email:

    1. Dari Widget , seret Tombol Widget Tombol ke kanvas di sebelah kanan kotak teks To. Klik dua kali tombol dan ganti namanya menjadi Kirim Email.
  6. Tetapkan tindakan yang akan diambil saat pengguna mengklik tombol Kirim Email.

    1. Klik Kirim Email.

    2. Di bagian Tombol Editor Properti , klik properti onClick dan pilih Tindakan Khusus.

    3. Gunakan JavaScript untuk menentukan tindakan. Dalam dialog Skrip Klien, salin dan tempel skrip ini:

          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); 
      Dalam action, perhatikan referensi berikut untuk objek dan properti App Maker:

      • widget.parent.descendants—Widget induk tombol Kirim Email adalah panel tingkat atas untuk halaman tersebut. Turunan panel itu mencakup semua widget pada halaman.
      • widgets.To.value, widgets.Subject.value, widgets.Msg.value, dan widgets.EmailStatus.text— Properti value dari tiga widget dan properti text dari yang keempat.
    4. Tekan Esc untuk menutup dialog.

  7. Tambahkan tombol yang dapat digunakan pengguna untuk menghapus semua kolom pada formulir:

    1. Dari Widget , seret Tombol Widget Tombol ke kanvas di bawah editor teks. Klik dua kali tombolnya dan ganti namanya menjadi Hapus Formulir.
  8. Tetapkan tindakan yang akan diambil saat pengguna mengklik tombol Hapus Formulir.

    1. Klik Hapus Formulir.

    2. Di bagian Tombol Editor Properti , klik properti onClick dan pilih Tindakan Khusus.

    3. Gunakan JavaScript untuk menentukan tindakan. Dalam dialog Skrip Klien, salin dan tempel skrip ini:

      clearEmailForm();

  9. Tambahkan label untuk status:

    1. Dari Widget , seret Label Widget Label ke kanvas di bawah kotak teks.

    2. Di Editor Properti, setel properti nama ke EmailStatus. Hapus properti text.

  10. Klik Close untuk menutup Widget.

Mempelajari tentang skrip yang akan digunakan aplikasi

Pada langkah ini, Anda akan menyalin dan menempelkan fungsi JavaScript yang diperlukan oleh aplikasi Anda untuk mengirim email dan menghapus formulir ke dalam skrip di aplikasi Anda. Skrip adalah wadah di App Maker yang mirip dengan file skrip:

  • Skrip klien—Berisi JavaScript yang dijalankan oleh mesin JavaScript browser.
  • Skrip server—Berisi JavaScript yang dijalankan oleh mesin JavaScript di server App Maker.

Fungsi skrip klien

clearEmailForm

Fungsi clearEmailForm menghapus seluruh formulir email.

sendMessage

Fungsi sendMessage:

  • Memanggil skrip server sendEmailMessage untuk mengirim pesan email
  • Memanggil skrip klien clearEmailForm untuk menghapus formulir email

Fungsi skrip server

sendEmailMessage

Fungsi skrip server sendEmailMessage memanggil fungsi MailApp.sendEmail untuk mengirimkan pesan email. Opsi htmlBody dari MailApp.sendEmail menunjukkan bahwa isi pesan adalah HTML.

Membuat skrip klien

  1. Buat skrip klien untuk memuat fungsi-fungsi yang akan dijalankan oleh klien.

    1. Arahkan kursor ke Skrip dan klik untuk menambahkan skrip.

    2. Ketika dialog Create script muncul, pilih Klien, hapus centang pada Buat kode contoh, dan klik Buat.

  2. Ganti nama skrip klien:

    1. Di sidebar kiri, arahkan kursor ke NewScript dan klik Lainnya Ganti Nama.

    2. Masukkan ClientScript dan klik OK.

  3. Salin dan tempelkan JavaScript ini ke dalam 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);
    }
    

Perhatikan referensi objek app.pages.Email.descendants yang mereferensikan semua objek yang merupakan turunan dari halaman Email, yaitu semua widget. Dalam aplikasi ini, referensi ini adalah alternatif referensi setara (widget.parent.descendants) yang digunakan dalam tindakan onClick dari tombol Send Email. (Apakah referensi ini setara atau tidak, tergantung pada hierarki objeknya.)

Membuat skrip server

  1. Buat skrip server untuk memuat fungsi yang akan dijalankan oleh server:

    1. Arahkan kursor ke Skrip dan klik untuk menambahkan skrip.

    2. Ketika dialog Buat Skrip muncul, klik Server, biarkan Buat kode contoh tetap tidak dicentang, dan klik Buat.

  2. Ganti nama skrip server:

    1. Di sidebar kiri, arahkan kursor ke SkripBaru dan klik Lainnya Ganti Nama.

    2. Masukkan ServerScript dan klik OK.

  3. Salin dan tempelkan JavaScript ini ke 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});
     }
    

    Perhatikan bagaimana penerima, subjek, dan pesan diteruskan ke fungsi yang sebenarnya mengirimkan email. Tindakan yang ditentukan untuk properti onClick dari tombol Kirim Email memanggil fungsi SendMessage di skrip klien, meneruskan ke fungsi penerima, subjek, dan pesan. Fungsi SendMessage meneruskan argumen yang sama ini ke fungsi sendEmailMessage di skrip server, yang meneruskan argumen ke fungsi MailApp.SendMail. Fungsi MailApp.SendMail mengirim email.

Melihat pratinjau dan menguji aplikasi Anda

Pratinjau aplikasi Kirim Email Anda untuk melihatnya dalam tindakan.

  1. Di sudut kanan atas, klik Pratinjau untuk menjalankan aplikasi Anda di tab browser baru.
  2. Klik Izinkan untuk mengizinkan aplikasi Anda menggunakan informasi spesifik.
  3. Masukkan alamat email dan subjek.
  4. Di Editor Teks, ketikkan pesan singkat.
  5. Klik Hapus Formulir. Sekarang Anda harus memulai dari awal.
  6. Masukkan alamat email dan subjek.
  7. Di Editor Teks, ketikkan pesan singkat.
  8. Gunakan alat di toolbar Editor Teks untuk menata gaya pesan Anda.
  9. Klik Kirim Email. Aplikasi Send Email mengirim email dan menghapus formulir.

Selamat! Anda baru saja membangun aplikasi App Maker yang menggunakan skrip klien dan skrip server untuk mengirim email.

Langkah berikutnya

  1. Mulai Tutorial 5—Pelajari tentang hubungan.
  2. Pelajari lebih lanjut tentang skrip App Maker.
  3. Jelajahi aplikasi lain dalam daftar Contoh Pembuat Aplikasi.
  4. Cari tahu lebih lanjut tentang konsep utama tutorial ini; misalnya: