Membangun Startup Anda: Menyampaikan Undangan Rapat

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product image — What You'll Be Creating

Pengenalan

Tutorial ini adalah bagian dari seri Membangun Startup Anda Dengan PHP pada Envato Tuts+. Dalam seri ini, saya memandu Anda melalui peluncuran startup dari konsep ke realitas menggunakan aplikasi Meeting Planner saya sebagai contoh nyata. Setiap langkah di sepanjang jalan, saya akan merilis kode Meeting Planner sebagai contoh open-source yang dapat Anda pelajari. Saya juga akan membahas masalah bisnis terkait startup saat muncul.

Apa Penutup Episode Ini?

Dalam tutorial ini, kami akan membahas mengirim undangan melalui email kepada peserta, menerapkan penampilan dasar kontennya, dan mempertimbangkan pembangunan tautan untuk penerima sehingga mereka dapat merespons.

Semua kode untuk Meeting Planner ditulis dalam Kerangka Yii2 untuk PHP. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, periksa seri paralel saya Pemrograman dengan Yii2 di Envato Tuts+.

Sekadar mengingatkan, saya berpartisipasi dalam rangkaian komentar di bawah ini. Saya terutama tertarik jika Anda memiliki pendekatan yang berbeda, ide tambahan, atau ingin menyarankan topik untuk tutorial selanjutnya. Anda juga dapat menghubungi saya di Twitter @reifman.

Persyaratan untuk Mengirim Undangan

Sangat menyenangkan untuk mencapai tahap penyampaian undangan pertama, tetapi masih membutuhkan banyak pekerjaan. Di episode terakhir, saya memperbarui tampilan pertemuan sehingga mereka dapat mendukung penyelenggara atau peserta.

Sebagian besar pekerjaan di episode ini akan fokus pada pembuatan email HTML di Yii dan mengirimkannya secara terprogram. Namun, ketika saya mulai menulis kode untuk ini, saya berlari ke semua kerumitan yang harus segera didukung oleh sistem. Misalnya, semua tautan di undangan diperlukan untuk mengautentikasi peserta dengan aman sambil mempertimbangkan bahwa mereka belum pernah mendaftar untuk Meeting Planner. Sebagian dari ini akan saya hemat untuk episode berikutnya.

Pada dasarnya, kita harus membuat aplikasi sadar siapa yang melihat halaman pertemuan dan kemudian menyesuaikan penampilan dan perintah yang tersedia. Yii membuat sebagian besar ini cukup mudah, tetapi ada banyak detail yang terlibat.

Peringatan Singkat Tentang Pengalaman Pengguna

Biarkan saya mengatakan di depan, ada banyak pengerjaan ulang dan pemolesan pengalaman pengguna yang perlu dilakukan secara iteratif dari waktu ke waktu dalam perjalanan untuk menciptakan produk yang layak minimum (MVP). Sebagian besar dari apa yang sedang saya bangun saat ini adalah fungsi inti untuk membuat alfa berjalan untuk penggunaan yang sebenarnya. Saya tahu ini terlihat kasar di beberapa tempat dan tidak akan selalu tampak intuitif seperti yang Anda inginkan. Ada juga coding inefisiensi yang perlu dioptimalkan di masa depan.

Silakan memposting pemikiran dan komentar Anda di bawah ini, dan saya akan mempertimbangkannya untuk pekerjaan yang sedang berlangsung.

Berikut adalah beberapa tantangan yang muncul dengan karya episode ini:

Desain dasar dan isi email undangan
Bagaimana undangan akan dikirimkan? misalnya platform email atau penyedia mana?
Perintah-perintah yang terhubung akan ditawarkan di email? Dan apakah penyelenggara dapat membatasi beberapa kekuatan yang diberikan kepada peserta?
Respons fungsional untuk perintah yang terhubung dalam email undangan
Mengelola kunjungan dari pengguna yang diundang yang belum mendaftar, misalnya. apa yang bisa mereka akses dan tidak bisa?
Menangani pengalaman pengguna untuk mengumpulkan nama ramah dari peserta
Logging tanggapan ke undangan rapat dan kemudian membangun pemantauan dan kapasitas pemberitahuan untuk menginformasikan penyelenggara
Merencanakan infrastruktur untuk email yang akan datang yang menunjukkan pembaruan saat konfigurasi rapat berubah dan seiring waktu mendekati (dan berlalu), misalnya. mengubah pemberitahuan, pengingat pertemuan, menerima balasan sebagai catatan baru, dll.

Ketika saya menulis kode untuk episode ini, saya membangun beberapa infrastruktur untuk beberapa item di atas dan meninggalkan beberapa dari mereka untuk dibahas di episode mendatang. Untuk memulai, mari selami desain undangan.

Desain Undangan dan Isi

Awalnya, saya harus bertanya, apa yang harus dimasukkan dalam email? Tentunya, akan ada bidang standar:

Untuk
Dari
Subjek (Anda diundang ke pertemuan!)
Badan Pesan
Footer

Konten body harus mencakup:

Detail rapat
Tempat yang diusulkan
Tanggal dan waktu yang diusulkan

Dan, tergantung pada pengaturan organiser, tautan perintah mana yang harus disajikan? Berikut beberapa pertanyaan yang muncul. Haruskah kami mengizinkan penerima untuk:

Terima setiap opsi, mis. Semua tempat, tanggal, dan waktu dapat diterima
Terima semua tempat atau semua tanggal dan waktu secara terpisah
Terima tempat-tempat tertentu dan tanggal serta waktu tertentu secara individual
Lihat peta untuk tempat-tempat prospektif dan akhirnya situs web dan tautan Yelp
Posting catatan kembali ke penyelenggara untuk tampilan pertemuan
Sarankan tempat baru atau tanggal dan waktu
Pilih tempat atau tanggal dan waktu
Selesaikan pertemuan

Akhirnya, footer harus mendukung:

Notifikasi alfa dengan permintaan untuk umpan balik
Opsi untuk memblokir pengirim
Pilihan untuk berhenti berlangganan dari undangan Perencana Pertemuan di masa mendatang
Detail perusahaan dan informasi kontak

Saya tahu ini sulit untuk memvisualisasikan semua ini—ini bukan episode yang mudah untuk dibangun. Berikut ini contoh undangan yang akhirnya saya bangun:

Untuk saat ini, saya menggunakan perintah diterima dan menolak untuk menunjukkan kepada peserta bahwa mereka hanya menunjukkan apakah atau tidak tempat atau tanggal dan waktu bekerja untuk mereka atau tidak. Namun, untuk kesederhanaan, saya menawarkan menerima semua tempat dan waktu, menerima semua tempat dan menerima semua waktu untuk mengelola ini dengan langkah lebih cepat.

Semua ini didasarkan pada formulir undangan pertemuan yang sebenarnya dari episode terakhir. Di bawah ini, Anda dapat melihat bagian undangan yang menawarkan konfigurasi tempat dan waktu:

Meeting Planner Invitation - View of Places and Times

Perhatikan bahwa email menyediakan beberapa fungsi lanjutan yang dibangun di episode terakhir untuk memungkinkan penyelenggara menawarkan tingkat kontrol yang lebih tinggi kepada peserta seperti menyarankan tempat dan waktu baru, memilih tempat dan waktu terakhir, dll.

Meeting Planner Invitation - Updating Your Meeting Settings

Jelas bagi saya sangat cepat bahwa berinvestasi lebih banyak dalam mendesain email dan menawarkan konfigurasi undangan yang lebih sederhana akan diperlukan di masa depan. Sekali lagi, saya harus menyimpan ini untuk episode selanjutnya.

Sebagai contoh, salah satu teman pengujian alfa pertama saya menyarankan agar mereka berharap mereka dapat menunjukkan bahwa beberapa tempat hanya bekerja pada tanggal dan waktu tertentu dan sebaliknya. Pada akhirnya, saya mungkin perlu menyatukan tempat dan tanggal & waktu menjadi satu model pilihan.

Untuk saat ini, mari tinjau cara saya mengirim undangan di atas seperti apa adanya.

Menyampaikan Undangan

Meeting Planner Invitation - The Command Bar with Send

Apa yang terjadi ketika penyelenggara mengklik Kirim? Awalnya, saya berharap bahwa saya harus menulis langsung ke API Mailgun, yang telah saya jelajahi di tutorial Envato Tuts+ sebelumnya. Namun, dukungan Yii2 untuk email cukup kaya, dan saya dapat memanfaatkan dukungan tampilan asli untuk tata letak email (baik HTML dan teks) dan hanya mengirimkannya menggunakan otentikasi akun SMTP Mailgun saya. Ini bahkan mendukung melampirkan file peristiwa masa depan (.ics) untuk mengimpor pertemuan ke kalender.

Catatan: Saya penggemar berat Mailgun, tetapi saya juga telah melakukan pengembangan untuk mereka sebagai konsultan dan menulis untuk blog mereka dan Envato Tuts+.

Sebelum melanjutkan, saya mendorong Anda untuk melihat sekilas dokumentasi Mailing Yii2. Ini menawarkan gambaran yang sangat bagus.

Pertama, saya menambahkan pengaturan konfigurasi SwiftMailer yang lebih detail ke /common/config/main-local.php:

<?php
return [
    'components' => [
        'db' => [
            'class' => 'yii\db\Connection',
            'dsn' => 'mysql:host=localhost;dbname=mp',
            'username' => 'xxxxxxxxxxxx',
            'password' => 'xxxxxxxxxxxx',
            'charset' => 'utf8',
        ],
        'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            'viewPath' => '@common/mail',
            //comment the following array to send mail using php's mail function
            'transport' => [
                'class' => 'Swift_SmtpTransport',
                'host' => 'smtp.mailgun.org',
                'username' => 'xxxxxxxxxxxxxxxxxx@meetingplanner.io',
                'password' => 'axxxxxxxxxxxxxxxxxxxxxxxx2',
                'port' => '587',
                'encryption' => 'tls',
                            ],
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => false,
        ],
    ],
];

Ini memungkinkan komponen SwiftMailer Yii mengirimkan email-email saya melalui layanan SMTP dasar Mailgun.

Anda harus mendapatkan pengaturan SMTP Mailgun dari panel kontrolnya untuk domain Anda:

Meeting Planner Invitation - Mailgun SMTP Settings

Tentu saja, Anda juga harus memastikan SwiftMailer adalah bagian dari konfigurasi file composer.json Anda sebelum menjalankan composer update:

"minimum-stability": "stable",
    "require": {
        "php": ">=5.4.0",
        "yiisoft/yii2": ">=2.0.7",
        "yiisoft/yii2-bootstrap": "*",
        "yiisoft/yii2-swiftmailer": "*",

Selanjutnya, saya membuat konfigurasi file tampilan untuk SwiftMailer untuk digunakan. Pertama, harus ada tata letak master untuk HTML dan teks. Kemudian, harus ada file konten individu untuk masing-masing juga:

Meeting Planner Invitation - The Folder and Files in Mail Layouts

Tidak semua ini sepenuhnya didokumentasikan untuk Yii, jadi semoga contoh ini akan menawarkan beberapa panduan. Perhatikan bahwa file tampilan finalize-html dan -text ditambahkan kemudian untuk episode mendatang.

Biasanya, file layout/html.php cukup sederhana:

<?php
use yii\helpers\Html;

/* @var $this \yii\web\View view component instance */
/* @var $message \yii\mail\MessageInterface the message being composed */
/* @var $content string main view render result */
?>
<?php $this->beginPage() ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=<?= Yii::$app->charset ?>" />
    <style type="text/css">
        .heading {...}
        .list {...}
        .footer {...}
    </style>
    <?php $this->head() ?>
</head>
<body>
    <?php $this->beginBody() ?>
    <?= $content ?>
    <div class="footer">With kind regards, <?= Yii::$app->name ?> team</div>
    <?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Namun, saya menambahkan banyak hal untuk mulai bekerja dengan styling dan format email HTML yang ditawarkan kepada komunitas open-source oleh Mailchimp.

SwiftMailer Yii umumnya akan secara otomatis mengonversi tampilan HTML Anda menjadi tampilan yang kompatibel dengan teks untuk Anda. Kemungkinan besar, saya ingin tampilan teks yang lebih singkat dan lebih sederhana untuk undangan, tetapi untuk sekarang, saya akan menunda meninjau hasil email berbasis-teks dari kode saya.

Dalam model Meeting.php, saya telah menulis fungsi pengiriman yang mengumpulkan semua data yang diperlukan untuk membangun tampilan undangan saya yang ditunjukkan di atas. Untuk saat ini, saya meninggalkan bagian yang terkait dengan episode berikutnya untuk membuat tautan perintah. Pada dasarnya, saya menggunakan Yii::$app->mailer compose() and send():

public function send($user_id) {
    ...
  foreach ($this->participants as $p) {
    ...
    // send the message
    $message = Yii::$app->mailer->compose([
      'html' => 'invitation-html',
      'text' => 'invitation-text'
    ],
    [
      'meeting_id' => $this->id,
      'noPlaces' => $noPlaces,
      'participant_id' => 0,
      'owner' => $this->owner->username,
      'user_id' => $p->participant_id,
      'auth_key' => $auth_key,
      'intro' => $this->message,
      'links' => $links,
      'header' => $header,
      'places' => $places,
      'times' => $times,
      'notes' => $notes,
      'meetingSettings' => $this->meetingSettings,
  ]);
    // to do - add full name
    $message->setFrom(array('support@meetingplanner.com'=>$this->owner->email));
    $message->setTo($p->participant->email)
        ->setSubject(Yii::t('frontend','Meeting Request: ').$this->subject)
        ->send();
  }
  ...

Fungsi-fungsi tersebut membangun pesan menggunakan tata letak dan tampilan HTML kami dan kemudian melewatkan pesan yang dihasilkan dengan data yang dipersonalisasi ke layanan SMTP milik Mailgun. Kami dapat menggunakan penerapan model MVC untuk pengiriman email.

Masalah Dengan Komposer

Seperti yang telah saya gunakan Composer dengan Yii, saya sering mengalami banyak masalah dengan itu yang dapat sulit untuk dilacak. Paling sering, ini terkait dengan eror plugin "yiisoft / yii2-composer" membutuhkan composer-plugin-api 1.0.0, tapi kali ini, saya mengalami masalah dalam memperbarui Mailgun. Versi terbaru dari API Mailgun membutuhkan pembaruan terkini untuk membuang waktu. Sebuah plugin Yii sebelumnya yang digunakan di MeetingPlanner membutuhkan versi tetap dari versi lama. Jadi, saya harus mengkonfigurasi komposer untuk menggunakan alias.

Pada dasarnya, saya menginstruksikan komposer untuk menyinkronkan versi terakhir dari omong kosong tetapi mengatakan aplikasi itu menggunakan versi yang lebih lama. Dalam composer.json, sebuah alias terlihat seperti ini:

"yiisoft/yii2-authclient": "~2.0.0",
"mailgun/mailgun-php": "~2.0",
"guzzlehttp/guzzle":"6.2.0 as 4.2.3",
"php-http/guzzle6-adapter":"1.0.0"
},

Saya menginstruksikan untuk menginstal "guzzlehttp/guzzle":"6.2.0 as 4.2.3" dan itu membuat semuanya berfungsi dengan baik, setidaknya dalam kasus ini. Terkadang pengembang plugin memerlukan versi pustaka tertentu untuk beroperasi dengan benar. Komposer sangat berguna, tetapi terkadang itu menyenangkan.

Memperbarui Penciptaan Pertemuan

Saat saya bereksperimen dengan undangan, saya memutuskan untuk menyesuaikan tampilan pembuatan pertemuan untuk lebih jelas mendukung bidang subjek. Ini memungkinkan pengguna untuk menulis baris subjek seolah-olah mereka mengirim email untuk mengundang seseorang ke pertemuan tanpa Perencana Pertemuan. UX untuk ini perlu di-iterasi dan disederhanakan lebih dari waktu ke waktu.

Meeting Planner Invitation - Create a Meeting

Ini memberikan baris subjek yang ideal di email untuk undangan rapat. Tentu saja, untuk menyediakan ini, saya harus memperluas model Rapat.

Saya membuat migrasi baru bernama extend_meeting_table_add_subject yang menambahkan bidang subjek:

<?php

use yii\db\Schema;
use yii\db\Migration;

class m160409_204159_extend_meeting_table_add_subject extends Migration
{
  public function up()
  {
    $tableOptions = null;
    if ($this->db->driverName === 'mysql') {
        $tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE=InnoDB';
    }

    $this->addColumn('{{%meeting}}','subject','string NOT NULL');
  }

  public function down()
  {
    $this->dropColumn('{{%meeting}}','subject');
  }
}

Dan saya harus menambahkan dukungan untuk bidang baru ke file _form.php rapat dan model.

<div class="meeting-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'meeting_type')
            ->dropDownList(
                $model->getMeetingTypeOptions(),
                ['prompt'=>Yii::t('frontend','What type of meeting is this?')]
            )->label(Yii::t('frontend','Meeting Type')) ?>

    <?= $form->field($model, 'subject')->textInput(['maxlength' => 255])->label(Yii::t('frontend','Subject')) ?>

    <?= $form->field($model, 'message')->textarea(['rows' => 6])->label(Yii::t('frontend','Message'))->hint(Yii::t('frontend','Optional')) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('frontend', 'Create') : Yii::t('frontend', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

Berikut adalah kutipan dari apa yang ditambahkan ke model Meeting.php:

public function rules()
    {
        return [
            [['owner_id', 'subject'], 'required'],
            [['owner_id', 'meeting_type', 'status', 'created_at', 'updated_at'], 'integer'],
            [['message','subject'], 'string']
        ];
    }

    /**
     * @inheritdoc
     */
    public function attributeLabels()
    {
        return [
            'id' => Yii::t('frontend', 'ID'),
            'owner_id' => Yii::t('frontend', 'Owner ID'),
            'meeting_type' => Yii::t('frontend', 'Meeting Type'),
            'subject' => Yii::t('frontend', 'Subject'),
            'message' => Yii::t('frontend', 'Message'),
            'status' => Yii::t('frontend', 'Status'),
            'created_at' => Yii::t('frontend', 'Created At'),
            'updated_at' => Yii::t('frontend', 'Updated At'),
        ];
    }

Halaman Peta yang Diperbarui untuk Tempat

Awalnya, tautan undangan peta saya langsung diarahkan ke Google Maps, tetapi saya menyadari bahwa akan lebih baik untuk menautkannya ke tampilan peta tersemat di Perencana Pertemuan yang merupakan bagian dari undangan Rapat. Dalam kasus saya, saya membuat tampilan peta dengan tombol Kembali ke Rapat:

Meeting Planner Invitation - Viewing a Place within a Meeting Invitation

Untuk ini, saya membuat tampilan baru yang dibangun di /views/place/view.php. Berikut ini adalah /views/meeting/viewplace.php:

<?php

use dosamigos\google\maps\Map;
use dosamigos\google\maps\LatLng;
use dosamigos\google\maps\overlays\Marker;
use yii\helpers\Html;
use yii\widgets\DetailView;

/* @var $this yii\web\View */
/* @var $model frontend\models\Place */
$this->title = $model->getMeetingHeader();
$this->params['breadcrumbs'][] = ['label' => Yii::t('frontend', 'Meetings'), 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
$this->params['breadcrumbs'][] = $place->name;
?>
<h1><?php echo Html::encode($this->title) ?></h1>

<p>
  <?php echo Html::a(Yii::t('frontend', 'Return to Meeting'), ['view', 'id' => $model->id], ['class' => 'btn btn-primary']) ?>
</p>

<div class="col-md-6">
<div class="place-view">

    <?php echo DetailView::widget([
        'model' => $place,
        'attributes' => [
            'name',
            ['label' => 'website',
     'value' => Html::a($place->website, $place->website),
     'format' => 'raw'],
            //'place_type',
            'full_address',
        ],
    ]) ?>

</div>
</div> <!-- end first col -->
<div class="col-md-6">
  <?php
  if ($gps!==false) {
    $coord = new LatLng(['lat' => $gps->lat, 'lng' => $gps->lng]);
    $map = new Map([
        'center' => $coord,
        'zoom' => 14,
        'width'=>300,
        'height'=>300,
    ]);
    $marker = new Marker([
        'position' => $coord,
        'title' => $place->name,
    ]);
    // Add marker to the map
    $map->addOverlay($marker);
    echo $map->display();
  } else {
    echo 'No location coordinates for this place could be found.';
  }
  ?>

</div> <!-- end second col -->

Apa berikutnya?

Seperti yang Anda lihat, mendapatkan undangan email pertama mengangkat semua jenis masalah dan membutuhkan banyak pembaruan kecil hingga sedang. Tetapi, dengan fondasi dasar untuk menyelesaikannya, kita dapat merenungkan kompleksitas dari apa yang telah dibuat. Dengan kata lain, apa yang dibutuhkan selanjutnya:

Tautan perintah yang dikonfirmasi. Ketika seorang peserta mengklik tautan perintah di dalam email, bagaimana kami akan mengautentikasi mereka, terutama jika mereka tidak pernah terdaftar dengan aplikasi kami?
Menyelesaikan pertemuan berdasarkan tanggapan. Ketika para peserta membuat pilihan dan penyelenggara siap untuk menyelesaikan pertemuan, perubahan dan pembaruan apa yang diperlukan untuk mendukung itu?
Memantau proses perubahan yang dilakukan oleh peserta terhadap undangan. Bagaimana kami akan memantau perubahan pada rincian rapat dan memilih kapan untuk memberi tahu penyelenggara dan peserta?
Memberitahu penyelenggara dan peserta perubahan. Apa yang harus kami sampaikan kepada mereka, dan opsi apa yang harus ditawarkan ketika kami memberi tahu mereka?
Membuat file Kalender (.ics) untuk diimpor ke Google Calendar, Outlook, dan Apple Calendar dengan detail undangan. Setelah pertemuan diselesaikan, kami dapat mengirim file .ics yang dapat diunduh.
Membangun tampilan rapat yang sepenuhnya diselesaikan. Bagaimana seharusnya perincian pertemuan ketika tidak perlu lagi menawarkan perintah untuk memilih tempat dan waktu? Tapi, juga, perintah apa yang diperlukan untuk penjadwalan kembali, pengalihan waktu, membatalkan, mengubah lokasi atau tanggal dan waktu, dll?

Episode berikutnya akan mengeksplorasi beberapa pertanyaan ini, berfokus pada tautan di dalam undangan yang ingin ditanggapi oleh penerima meskipun awalnya tidak pernah terdaftar di Perencana Pertemuan sebelumnya. Masalah lain harus menunggu sedikit lebih lama.

Saya juga mulai bereksperimen dengan WeFunder berdasarkan implementasi aturan crowdfunding baru SEC. Silakan pertimbangkan mengikuti profil kami. Saya dapat menulis tentang ini lebih sebagai bagian dari seri ini.

Tonton tutorial saya yang akan datang di seri Membangun Startup Anda Dengan PHP—Saya harap Anda setuju bahwa ini semakin menarik!

Silakan tambahkan pertanyaan dan komentar Anda di bawah ini; Saya biasanya berpartisipasi dalam diskusi. Anda juga dapat menghubungi saya di Twitter @reifman.