สร้างแอปแชทบนมือถือแบบเรียลไทม์ด้วย Appwrite, Ionic Framework, Vue และ Capacitor

สิ่งสำคัญของฉันตอนนี้คือการใช้ประโยชน์จากประสบการณ์การพัฒนาเว็บเพื่อสร้างแอปโดยใช้ประสบการณ์นั้นในวันนี้ ไม่ใช่การเรียนรู้เฟรมเวิร์กใหม่เช่น Flutter หรือ React Native

ในวิดีโอใหม่นี้ ฉันจะแสดงทีละขั้นตอนวิธีการสร้างแอปแชทแบบเรียลไทม์ที่จะทำงานในเว็บเบราว์เซอร์ อุปกรณ์ IOS และ Android โดยใช้ Vue Ionic Framework และ Ionic Capacitor

ฉันใช้เวลาอธิบายทุกอย่างตั้งแต่การตั้งค่าโปรเจ็กต์ใน Appwrite Cloud การสร้างอินเทอร์เฟซผู้ใช้โดยใช้ Ionic Framework Vue Components และสุดท้ายคือปรับใช้แอปพลิเคชันโดยใช้ Ionic Capacitor ไม่เพียงแต่ใน IOS แต่ในอุปกรณ์ Android

นี่เป็นวิดีโอขนาดยาว แต่อัดแน่นไปด้วยข้อมูลมากมายเพื่อให้คุณเริ่มต้นใช้งาน Appwrite Cloud และ Vue JS เพื่อสร้างแอปพลิเคชันมือถือที่ยอดเยี่ยมโดยใช้ประโยชน์จากประสบการณ์การพัฒนาเว็บที่คุณมีอยู่

ฟังก์ชันฐานข้อมูลเรียลไทม์ที่ Appwrite
Appwrite เป็นแพลตฟอร์มแบ็กเอนด์สำหรับการพัฒนาแอปพลิเคชันบนเว็บ อุปกรณ์เคลื่อนที่ และ Flutter สร้างขึ้นด้วยชุมชนโอเพ่นซอร์สและปรับให้เหมาะสมสำหรับประสบการณ์นักพัฒนาในภาษาการเขียนโค้ดที่คุณชื่นชอบ

เขียนเพลย์ลิสต์ — https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper

การใช้งานบนมือถือและฟังก์ชันการทำงานที่จัดทำโดย Ionic Capacitor
Capacitor เป็นรันไทม์เนทิฟโอเพ่นซอร์สสำหรับการสร้างแอปเนทิฟบนเว็บ สร้าง iOS, Android และ Progressive Web App ข้ามแพลตฟอร์มด้วย JavaScript, HTML และ CSS

วีดีโอ

จุดเด่นของโค้ด

การเข้าสู่ระบบ

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

การสร้างบัญชีผู้ใช้

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

การสร้างข้อความแชทใหม่

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,
  }
);

กำลังโหลดข้อความแชทเมื่อเริ่มต้น

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

กำลังฟังข้อความแชทใหม่

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

ลิงค์

ปลั๊กอินโค้ด Ionic Visual Studio — https://marketplace.visualstudio.com/...
Ionic Vue — https://ionicframework.com/docs/vue/o...
ตัวเก็บประจุ — https://capacitorjs.com/
AppWrite Cloud — https://appwrite.io/public-beta
AppWrite — https://appwrite.io/
Appwrite เพลย์ลิสต์วิดีโอ — https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper

เผยแพร่ครั้งแรกที่ https://dev.to เมื่อวันที่ 28 มิถุนายน 2023

สร้างแอปแชทบนมือถือแบบเรียลไทม์ด้วย Appwrite, Ionic Framework, Vue และ Capacitor

วีดีโอ

จุดเด่นของโค้ด

ลิงค์

คำถามในหัวข้อ