Build A Realtime Chat Mobile App with Appwrite, Ionic Framework, Vue and Capacitor
Tags: ionic, vue, video, appwrite
Published: 2023-06-28 16:52:10

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](https://ionicframework.com/docs/vue/overview) and [Ionic Capacitor](https://capacitorjs.com/)

I take the time to explain everything from project setup in [Appwrite Cloud](https://appwrite.io/), 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
{% youtube bWa999O6BnE %}


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

| Field Name | Required | Type |
|--------|----------|------| 
| `message`     | true| String 512 |
| `owner`       | true | String 128 |
| `displayName` | false | String 128 |


### Code Highlights

**Logging In**
```javascript
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**
```javascript
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**
```javascript
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**
```javascript
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**
```javascript
  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