Build A Realtime Chat Mobile App with Appwrite, Ionic Framework, Vue and Capacitor

My big thing now is about leveraging web development experience to build apps using that experience TODAY, not learning a new framework like Flutter or React Native.

In this new video, I show step by step how to build a real-time chat app that will run in web browsers, IOS and Android devices using Vue Ionic Framework and Ionic Capacitor

I take the time to explain everything from project setup in Appwrite Cloud, Building the User Interface using Ionic Framework Vue Components, and finally deploying the application using Ionic Capacitor on not only IOS but Android devices.

This is a long video, but packed with lots of information to get you started with Appwrite Cloud and Vue JS to build an excellent mobile application leveraging your existing web development experience

Realtime Database functionality provided by Appwrite
Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for developer experience in the coding languages you love.

Appwrite Playlist - https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper

Mobile Deployment and Functionality Provided By Ionic Capacitor
Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

Video

Chat Messages Collection

• in Collection > Settings Update the permissions so that users can create and read documents and turn on "Document Security"

Code Highlights

Logging In

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

Creating User Account

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

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

Loading Chat Messages At StartUp

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

Listening For New Chat Messages

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

Links

• Ionic Visual Studio Code Plugin - https://marketplace.visualstudio.com/...
• Ionic Vue - https://ionicframework.com/docs/vue/o...
• Capacitor - https://capacitorjs.com/
• AppWrite Cloud - https://appwrite.io/public-beta
• AppWrite - https://appwrite.io/
• Appwrite Video Playlist - https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper