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

Ionic Vue Build A Realtime Chat Mobile App with @Appwrite and Capacitor
#ionic #vue #appwrite

Take a deep dive into building a real-time chat app with account creation and user authentication that runs in a web browser, IOS device, and Android device in vue js using Ionic Framework and 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

💥 Sign Up For Our Newsletter​ - https://buff.ly/3lAk2jL
💥 Appwrite Playlist -    • Appwrite  


💥 Chapters
--------------------------
00:00:00 - Intro
00:02:20 - Start Ionic Project Setup
00:03:24 - Setting Up Project In Appwrite
00:05:53 - Editing Project In VS Code
00:06:30 - Setting Appwrite Environment Variables with .env
00:09:47 - Create Appwrite Service In the Application
00:11:52 - Discussing the Structure of the Application
00:12:39 - Checking For Appwrite Session/User at Application Startup
00:15:46 - Creating userStore composable to hold user information
00:18:50 - Structure HomePage to Support User Session and No User Session
00:23:15 - Adding Code for UI Option Logging In A User Or Sign Up User
00:25:02 - Adding AccountModal Component To Capture Input for Login or Sign Up, Login First
00:38:21 - Reviewing Authentication Options In Appwrite Console
00:38:53 - Adding Appwrite API to HandleLogin Function
00:40:53 - Adding Modal and HandleSignUp Function On Home Page For Sign Up
00:44:44 - Getting the additional User Information for the userStore
00:46:57 - Updating AccountModal Component To Support Sign Up
00:49:33 - Adding Logout UI and doLogout Function
00:51:32 - Quick Look At Using VueDevTools In Application Development
00:53:20 - Found Bug From Using VueDevTools, UserInfo Not Loaded in main.ts
00:54:32 - Found Bug: DisplayName missing When Creating Account
00:57:28 - Found Bug: Name Custom Events Properly In AccountModal Component
00:58:25 - Check User Accounts In Appwrite Console
00:59:21 - Adding Chat Functionality App - UI For Entering Chat Message
01:04:07 - Adding the sendMessage Function to Add Documents to Appwrite Database
01:08:24 - Adding the Permissions to the Collection In Appwrite Database
01:11:24 - Querying Database Collection For Chat Messages, load function
01:16:24 - Creating UI For Displaying Chat Messages
01:21:51 - Adding Appwrite Subscription / Realtime Database Functionality
01:29:10 - Deploying Application To IOS, Handling IOS Quirks
01:36:05 - Deploying Application To Android, Handling Android Quirks
01:42:52 - Add Auto-Scroll To Chat Message List In UI
01:51:50 - Wrap Up

💥 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/


💥 Social Media
--------------------------
Twitter -   / aaronksaunders  
Facebook -   / clearlyinnovativeinc  
Instagram -   / aaronksaunders  
Dev.to - https://dev.to/aaronksaunders

#ionicframework #vuejs #chatapp #realtime #appwrite #mobiledevelopment #mobile #mobileapp