Теперь я хочу использовать опыт веб-разработки для создания приложений, используя этот опыт СЕГОДНЯ, а не изучать новый фреймворк, такой как Flutter или React Native.

В этом новом видео я покажу шаг за шагом, как создать приложение для чата в реальном времени, которое будет работать в веб-браузерах, на устройствах IOS и Android, используя Vue Ionic Framework и Ionic Capacitor.

Я не тороплюсь, чтобы объяснить все, начиная от настройки проекта в Appwrite Cloud, создания пользовательского интерфейса с использованием компонентов Ionic Framework Vue и, наконец, развертывания приложения с помощью Ionic Capacitor не только на устройствах IOS, но и на устройствах Android.

Это длинное видео, но оно содержит много информации, которая поможет вам начать работу с Appwrite Cloud и Vue JS, чтобы создать отличное мобильное приложение, используя имеющийся опыт веб-разработки.

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

Плейлист Appwrite — https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper

Мобильное развертывание и функциональные возможности Ionic Capacitor
Capacitor — это собственная среда выполнения с открытым исходным кодом для создания собственных веб-приложений. Создавайте кроссплатформенные приложения для iOS, Android и прогрессивные веб-приложения с помощью JavaScript, HTML и CSS.

видео

Особенности кода

Вход в систему

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

Создание учетной записи пользователя

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

Создание нового сообщения чата

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

Загрузка сообщений чата при запуске

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

Прослушивание новых сообщений чата

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

Ссылки

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