Appwrite - Build Fast. Scale Big. All in One Place.
Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for a developer experience in the coding languages you love.
This video series will cover
- login ( Part I )
- logout ( Part I )
- create account ( Part I )
- re establish previous session ( Part I )
- add documents
- list documents
- subscribe to events when collection is updated
- upload images
- associate images with documents
In this first video we will show step by step how to get started with Appwrite Cloud using Vue JS Ionic Framework & Capacitor including login, logout, and creating an account, working with Appwrite Cloud Instance.
To modularize the code, we will be creating composables to manage integration with the Appwrite Web SDK.
- useAppwrite
- useAccount
- useDatabases
- useStorage
Ionic Framework components are used to create the mobile interface and Ionic Capacitor will be used to package the web application for deployment on to mobile devices.
SetUp And Configuration of AppWrite
We set things up using a composable which initializes the client and exposes references to the client object and the account object.
First make sure you have created a .env
file in the root of your project with the following keys and fill in the values from your AppWrite project
VITE_ENDPOINT=
VITE_PROJECT=
VITE_COLLECTION_ID=
VITE_DATABASE_ID=
VITE_BUCKET_ID=
And the code for the composable...
// useAppwrite
import { Client, Account, ID } from "appwrite";
import { ref } from "vue";
const accountRef = ref<Account>();
const clientRef = ref<Client>();
export const useAppwrite = () => {
clientRef.value = new Client();
clientRef.value
.setEndpoint(import.meta.env.VITE_ENDPOINT)
.setProject(import.meta.env.VITE_PROJECT);
accountRef.value = new Account(clientRef.value);
return {
client :clientRef,
account : accountRef,
ID,
config : {
DATABASE_ID : import.meta.env.VITE_DATABASE_ID,
COLLECTION_ID : import.meta.env.VITE_COLLECTION_ID,
BUCKET_ID : import.meta.env.VITE_BUCKET_ID
}
};
};
Login, Logout & Create Account
Login leverages the useAppwrite
composable to create endpoint for the essential functions associated with integrating the account functionality into the application.
// useAppwriteAccount.ts
import { ref } from "vue";
import { useAppwrite } from "./useAppwrite";
export const useAccount = () => {
const { account, ID } = useAppwrite();
const registerUser = (email: string, password: string, name?: string) => {
// Register User
return account.value?.create(ID.unique(), email, password, name).then(
(response) => {
return { data: response, error : undefined };
},
(error) => {
return { error, data : undefined };
}
);
};
const loginUser = (email: string, password: string) => {
return account.value?.createEmailSession(email, password).then(
(data) => {
return { data: data, error : undefined };
},
(error) => {
return { error: error, data : undefined };
}
);
};
const logoutUser = async () => {
try {
await account.value?.deleteSession("current");
return { data: true };
} catch (error) {
return { error };
}
};
return {
currentUser: () => account.value?.get(),
registerUser,
loginUser,
logoutUser,
};
};
VIDEO
FULL SOURCE CODE
aaronksaunders / my-appwrite-vuejs-ionic-app
how to get started with Appwrite Cloud using Vue JS Ionic Framework & Capacitor including login, logout, and creating an account, working with Appwrite Cloud Instance.
Getting Started With Appwrite Cloud, Vue JS Ionic Framework & Capacitor
VIDEO - https://youtu.be/3d71O1zvlaw
Part One
Appwrite - Build Fast. Scale Big. All in One Place. Appwrite is a backend platform for developing Web, Mobile, and Flutter applications. Built with the open source community and optimized for a developer experience in the coding languages you love.
In this video, I'm going to show you how to get started with Appwrite Cloud using Vue JS Ionic Framework & Capacitor including login, logout, and creating an account, working with Appwrite Cloud Instance.
I am creating vue composables for Account and AppwriteClient. Will create them for Database and Storage in part two of the video series when I cover those topics
Links
- Blog Post - https://dev.to/aaronksaunders/getting-started-with-appwrite-vue-js-ionic-framework-capacitor-2jl2
- AppWrite Cloud - https://appwrite.io/public-beta
- AppWrite - https://appwrite.io/
- Ionic Framework - https://ionicframework.com/docs/
Top comments (0)