Начало работы с Appwrite, Vue JS Ionic Framework и конденсатором

Appwrite — создавайте быстро. Масштаб большой. Все в одном месте.
Appwrite — это серверная платформа для разработки веб-приложений, мобильных приложений и приложений Flutter. Создан с участием сообщества открытого исходного кода и оптимизирован для разработчиков на любимых вами языках программирования.

В этом видеоряде будет

• вход (Часть I)
• Выход из системы (Часть I)
• создать учетную запись (Часть I)
• восстановить предыдущую сессию (Часть I)
• добавить документы
• список документов
• подписаться на события при обновлении коллекции
• загрузить изображения
• связать изображения с документами

В этом первом видео мы шаг за шагом покажем, как начать работу с Appwrite Cloud с использованием Vue JS Ionic Framework и Capacitor, включая вход в систему, выход из системы и создание учетной записи, работая с Appwrite Cloud Instance.

Чтобы сделать код модульным, мы будем создавать составные компоненты для управления интеграцией с Appwrite Web SDK.

Компоненты Ionic Framework используются для создания мобильного интерфейса, а Ionic Capacitor будет использоваться для упаковки веб-приложения для развертывания на мобильных устройствах.

Установка и настройка AppWrite

Мы настраиваем вещи, используя компонуемый объект, который инициализирует клиент и предоставляет ссылки на объект клиента и объект учетной записи.

Сначала убедитесь, что вы создали файл .env в корне вашего проекта со следующими ключами и заполните значения из вашего проекта AppWrite.

VITE_ENDPOINT= 
VITE_PROJECT= 
VITE_COLLECTION_ID= 
VITE_DATABASE_ID= 
VITE_BUCKET_ID=

И код для составного…

// 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 использует компонуемый useAccount для создания конечной точки для основных функций, связанных с интеграцией функций учетной записи в приложение.

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

ВИДЕО

ПОЛНЫЙ ИСХОДНЫЙ КОД

• aaronksaunders/my-appwrite-vuejs-ionic-app

Первоначально опубликовано на https://dev.to 2 мая 2023 г.