Hal besar saya sekarang adalah memanfaatkan pengalaman pengembangan web untuk membangun aplikasi menggunakan pengalaman tersebut HARI INI, bukan mempelajari kerangka kerja baru seperti Flutter atau React Native.

Dalam video baru ini, saya menunjukkan langkah demi langkah cara membuat aplikasi obrolan real-time yang akan berjalan di browser web, perangkat iOS dan Android menggunakan Vue Ionic Framework dan Ionic Capacitor

Saya meluangkan waktu untuk menjelaskan semuanya mulai dari penyiapan proyek di Appwrite Cloud, Membangun Antarmuka Pengguna menggunakan Ionic Framework Vue Components, dan terakhir menerapkan aplikasi menggunakan Ionic Capacitor tidak hanya pada perangkat iOS tetapi juga Android.

Ini adalah video yang panjang, namun dikemas dengan banyak informasi untuk membantu Anda memulai dengan Appwrite Cloud dan Vue JS untuk membangun aplikasi seluler luar biasa yang memanfaatkan pengalaman pengembangan web Anda saat ini

Fungsi Realtime Database yang disediakan oleh Appwrite
Appwrite adalah platform backend untuk mengembangkan aplikasi Web, Seluler, dan Flutter. Dibangun dengan komunitas sumber terbuka dan dioptimalkan untuk pengalaman pengembang dalam bahasa pengkodean yang Anda sukai.

Daftar Putar Penulisan Aplikasi — https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper

Penerapan dan Fungsi Seluler yang Disediakan Oleh Ionic Capacitor
Capacitor adalah runtime asli sumber terbuka untuk membangun aplikasi Web Native. Buat iOS, Android, dan Aplikasi Web Progresif lintas platform dengan JavaScript, HTML, dan CSS.

Video

Sorotan Kode

Masuk

try {
  const session = await appwrite.account.createEmailSession(
    data?.email,
    data?.password
  );

  if (session) {
    userId.value = session.$id;
    const user = await appwrite.account.get();
    userInfo.value = user;

   // load chats
    loadData();
  }
} catch (error) {
  alert((error as Error).message);
}

Membuat Akun Pengguna

try {
  const user = await appwrite.account.create(
    appwrite.ID.unique(),
    data?.email,
    data?.password,
    data?.displayName
  );
 userInfo.value = user;

if (user) {
    // have to login after creating the user
    const session = await appwrite.account.createEmailSession(
      data?.email,
      data?.password
    );
    userId.value = session.$id;

 // load chats
    loadData();
  }
} catch (error) {
  alert((error as Error).message);
}

Membuat Pesan Obrolan Baru

await appwrite.databases.createDocument(
  import.meta.env.VITE_APPWRITE_DB,
  import.meta.env.VITE_APPWRITE_COLLECTION,
  appwrite.ID.unique(),
  {
    message: messageText.value,
    owner: userId.value,
    displayName: userInfo.value.name,
  }
);

Memuat Pesan Obrolan Saat StartUp

const { documents } = await appwrite.databases.listDocuments(
  import.meta.env.VITE_APPWRITE_DB,
  import.meta.env.VITE_APPWRITE_COLLECTION,
  [Query.orderAsc("$updatedAt")]
);

Mendengarkan Pesan Obrolan Baru

appwrite.client.subscribe(
    `databases.${import.meta.env.VITE_APPWRITE_DB}.collections.${
      import.meta.env.VITE_APPWRITE_COLLECTION
    }.documents`,
    ({ payload }) => {
      let prev = messages.value;
      messages.value = [...prev, payload];

 setTimeout(() => {
        contentRef.value?.$el.scrollToBottom(500);
      }, 1000);
    }
  );

Tautan

Awalnya diterbitkan di https://dev.to pada 28 Juni 2023.