Теперь я хочу использовать опыт веб-разработки для создания приложений, используя этот опыт СЕГОДНЯ, а не изучать новый фреймворк, такой как 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); } );
Ссылки
- Плагин Ionic Visual Studio Code — https://marketplace.visualstudio.com/...
- Ionic Vue — https://ionicframework.com/docs/vue/o...
- Конденсатор — https://capacitorjs.com/
- Облако AppWrite — https://appwrite.io/public-beta
- AppWrite — https://appwrite.io/
- Плейлист видео Appwrite — https://youtube.com/playlist?list=PL2PY2-9rsgl3K7oyzl8zQtYCc3nxbSper
Первоначально опубликовано на https://dev.to 28 июня 2023 г.