Cara membuat halaman daftar tunggu untuk aplikasi mobile sebelum rilis di App Store

Pasang formulir daftar tunggu di landing page aplikasi Anda yang menanyakan ponsel apa yang dipakai dan apakah mereka ingin menguji lebih awal. Kirim penguji iPhone ke grup TestFlight dengan webhook dan App Store Connect API, lalu muat penguji Android ke closed test Google Play dari hasil ekspor. Di hari peluncuran, kirim email ke setiap kelompok berisi link ke store masing-masing.

Sebelum aplikasi ada di store, belum ada tombol instal untuk orang-orang. Daftar tunggu di landing page Anda sendiri menjaga minat mereka sampai tombol itu ada, dan menjalankan tugas kedua yang tidak dilakukan store: menemukan penguji yang Anda butuhkan sebelum peluncuran.

Apa bedanya untuk aplikasi mobile

• Dua store, dua daftar. Email peluncuran mengarah ke App Store atau Google Play, dan undangan pengujian lewat TestFlight atau closed test Play. Anda perlu tahu platform setiap orang untuk mengirim yang tepat.
• Penguji harus cocok dengan akun store. TestFlight mengirim undangan lewat email ke alamat mana pun. Closed test Play hanya mengizinkan akun Google yang ada di daftarnya, jadi penguji Android yang mendaftar dengan alamat kantor tidak bisa menginstal build-nya.
• Google Play mungkin mewajibkan penguji sebelum peluncuran. Akun developer pribadi yang dibuat setelah 13 November 2023 harus menjalankan closed test dengan minimal 12 penguji yang tetap ikut selama 14 hari berturut-turut sebelum bisa merilis ke production. Daftar tunggu adalah sumber 12 orang itu.
• Store punya tool pra-peluncuran sendiri. Tool itu layak dipakai bersama daftar tunggu, bukan sebagai penggantinya. Lihat perbandingan di bawah.

Field untuk daftar tunggu aplikasi

Tanyakan platform lebih dulu, karena itu mengubah arti field email. Model ponsel opsional dan memberi tahu Anda perangkat mana yang perlu diuji. Kotak beta memisahkan orang yang ingin menguji dari orang yang hanya ingin email peluncuran.

Formulirnya

Formulir berfungsi sebagai HTML biasa di landing page mana pun. Skripnya melakukan dua hal kecil: memilih platform lebih dulu berdasarkan browser pengunjung, dan menampilkan petunjuk akun Google hanya untuk pengguna Android.

<form id="app-waitlist" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <fieldset>
    <legend>Which phone do you use?</legend>
    <label><input type="radio" name="platform" value="iphone" required> iPhone</label>
    <label><input type="radio" name="platform" value="android"> Android</label>
  </fieldset>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" inputmode="email" required>
  <p id="email-hint" hidden>Use the Google account you sign in to Google Play with.</p>

  <label for="first_name">First name</label>
  <input id="first_name" name="first_name" autocomplete="given-name" maxlength="60">

  <label for="device">Phone model</label>
  <input id="device" name="device" maxlength="80" placeholder="iPhone 15, Pixel 8">

  <label><input type="checkbox" name="beta" value="true"> Invite me to test the app before launch</label>
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <button>Join the waitlist</button>
</form>

<script>
  const form = document.getElementById("app-waitlist");
  const agent = navigator.userAgent;
  const guess = /iPhone|iPad/.test(agent) ? "iphone" : /Android/.test(agent) ? "android" : null;
  if (guess) form.querySelector(`[name="platform"][value="${guess}"]`).checked = true;
  const hint = () => {
    document.getElementById("email-hint").hidden = form.platform.value !== "android";
  };
  form.addEventListener("change", hint);
  hint();
</script>

• Tebakan ini hanya memilih radio lebih dulu. Orang bisa mengubahnya, dan tanpa skrip tidak ada yang terpilih, jadi required memaksa mereka memilih.
• inputmode="email" dan autocomplete="email" lebih penting di sini daripada di mana pun: kebanyakan pengunjung landing page aplikasi memakai ponsel.
• Atur Redirect after submit ke halaman terima kasih yang menjelaskan langkah berikutnya untuk setiap platform. Untuk versi framework dari formulir ini, lihat panduan utama dan tambahkan field-field ini.

Arahkan penguji ke setiap store

iPhone: tambahkan penguji ke TestFlight

Di App Store Connect, buat grup pengujian eksternal dan API key di Users and Access › Integrations, dengan peran App Manager atau Admin. Lalu tambahkan relay yang mendengarkan webhook submission.created dari Ikiform. Contoh ini adalah route handler Next.js dan memakai jose untuk menandatangani token Apple; relay ini berjalan di server mana pun yang punya fetch.

import { verifyWebhook, WebhookVerificationError } from "@ikiform/sdk/webhooks";
import { importPKCS8, SignJWT } from "jose";

async function appStoreToken() {
  const key = await importPKCS8(process.env.ASC_PRIVATE_KEY!, "ES256");
  return new SignJWT({})
    .setProtectedHeader({ alg: "ES256", kid: process.env.ASC_KEY_ID!, typ: "JWT" })
    .setIssuer(process.env.ASC_ISSUER_ID!)
    .setAudience("appstoreconnect-v1")
    .setIssuedAt()
    .setExpirationTime("15m")
    .sign(key);
}

export async function POST(request: Request) {
  const payload = await request.text();
  try {
    const event = await verifyWebhook({ payload, headers: request.headers, secret: process.env.IKIFORM_WEBHOOK_SECRET! });
    if (event.type !== "submission.created") return new Response(null, { status: 204 });
    const { email, first_name, platform, beta } = event.data.fields;
    if (platform !== "iphone" || beta !== true) return new Response(null, { status: 204 });

    const response = await fetch("https://api.appstoreconnect.apple.com/v1/betaTesters", {
      method: "POST",
      headers: { authorization: `Bearer ${await appStoreToken()}`, "content-type": "application/json" },
      body: JSON.stringify({
        data: {
          type: "betaTesters",
          attributes: { email: String(email), firstName: first_name ? String(first_name) : undefined },
          relationships: { betaGroups: { data: [{ type: "betaGroups", id: process.env.ASC_BETA_GROUP_ID! }] } },
        },
      }),
    });
    if (response.ok || response.status === 409) return new Response(null, { status: 204 });
    return new Response(`App Store Connect answered ${response.status}`, { status: 502 });
  } catch (error) {
    if (error instanceof WebhookVerificationError) return new Response(error.reason, { status: 400 });
    throw error;
  }
}

• ASC_PRIVATE_KEY adalah isi file .p8 yang diberikan Apple, termasuk baris barunya. ASC_KEY_ID dan ASC_ISSUER_ID ada di halaman yang sama.
• Token Apple berlaku paling lama 20 menit, jadi relay menandatangani token baru untuk setiap pengiriman.
• 409 berarti Apple menolak perubahan karena konflik, sering kali karena alamat itu sudah menjadi penguji. Relay menganggapnya selesai, jadi jika seorang penguji tidak pernah mendapat undangan, periksa grupnya di App Store Connect. Kegagalan lain dijawab 502, sehingga Ikiform mencoba ulang pengirimannya.
• TestFlight mengizinkan hingga 10.000 penguji eksternal per aplikasi. Build pertama yang Anda berikan ke grup eksternal melewati Beta App Review, dan setiap build kedaluwarsa setelah 90 hari.

Tambahkan URL relay di Webhooks di Ikiform dan salin secret whsec_ ke IKIFORM_WEBHOOK_SECRET. Satu workspace bisa punya 3 endpoint, jadi relay ini bisa berjalan berdampingan dengan relay yang mengisi tool email Anda.

Android: isi closed test

API publikasi Google Play mengelola penguji closed test lewat Google Groups, bukan alamat satu per satu, jadi sisi ini berupa ekspor mingguan. Ekspor daftar dengan Export CSV, filter di spreadsheet ke platform = android dan beta = true, lalu tambahkan email-emailnya ke daftar email closed test di Test and release › Testing › Closed testing › Manage track › Testers di Play Console. Lalu kirimi orang-orang itu link opt-in pengujian dari tool email Anda.

Jika Anda sedang memenuhi syarat 12 penguji, undang lebih dari 12. Orang yang keluar atau tidak pernah ikut tidak dihitung, dan 14 hari itu membutuhkan 12 penguji yang ikut sepanjang waktu.

Hari peluncuran

Ekspor seluruh daftar dan bagi berdasarkan platform. Kirimi setiap bagian satu email dengan satu link store. Orang yang memilih iPhone tidak butuh link Play, dan satu email dengan dua badge mengurangi ketukan di layar kecil. Jika Anda mengumpulkan device, cocokkan laporan crash Anda dengan model yang disebutkan orang sebelum mengirim.

Pastikan berfungsi

1. Di Allowed domains formulir, tambahkan domain situs Anda, ditambah localhost selama pengembangan. Biarkan kosong untuk menerima kiriman dari mana saja.
2. Buka halaman di ponsel. Platform yang tepat sudah terpilih, dan di Android petunjuk akun Google muncul.
3. Kirim sebagai penguji iPhone. Kiriman menampilkan platform sebagai iphone dan beta sebagai true.
4. Buka endpoint relay di Webhooks. Pengirimannya menampilkan succeeded, dan alamatnya tercantum di grup TestFlight Anda.
5. Kirim sebagai penguji Android, ekspor CSV, dan pastikan barisnya tersaring dengan platform bernilai android.
6. Kirim dengan honeypot terisi, _gotcha=bot. Kiriman tetap mendapat jawaban sukses, tetapi disimpan sebagai spam dan tidak memicu email atau webhook.

Jebakan

Pertanyaan