Лиды посадочных страниц помогают бизнесу собирать информацию о пользователях. Эта информация дает компаниям лучшее понимание демографической ситуации, заинтересованной в их продукте.
Что мы будем создавать
В этом посте мы обсудим создание целевой страницы для сбора и хранения контактной информации пользователя в приложении Nuxt. Это приложение не требует пользовательского бэкенд-сервера.
URL Github:
https://github.com/Iheanacho-ai/nuxt-email-leads
Предварительные условия
Чтобы получить максимальную пользу от этой статьи, нам необходимо следующее:
- Базовое понимание CSS, JavaScript и Vue.js.
- Понимание Nuxt.js поможет в этом руководстве, но не является обязательным.
- Docker Desktop установлен на компьютере, выполните команду
docker -v, чтобы проверить, установлен ли у нас docker desktop; если нет, установите его из документации Get Docker - Экземпляр Appwrite запущен на нашем компьютере, ознакомьтесь с этой статьей, чтобы создать локальный экземпляр Appwrite; мы будем использовать мощную функцию базы данных Appwrite для этого проекта## Настройка нашего приложения Nuxt
Nuxt — это open-source Vue.js frontend development framework, который позволяет нам создавать универсальные веб-приложения, статически рендерить Vue.js приложения без использования сервера, а также позволяет реализовать в нашем проекте такие функции, как рендеринг на стороне сервера, генерация статических сайтов и т.д.
Чтобы создать приложение Nuxt, заходим в терминал и выполняем приведенную ниже команду.
ПРИМЕЧАНИЕ: Для выполнения этих команд используйте терминал Powershell.
npm init nuxt-app <project-name>
#or
npx create-nuxt-app <project-name>
#or
yarn create nuxt-app <project-name>
Выполнение этой команды вызовет набор вопросов. Вот настройка, которую я использовал.
Project name: google-analytics-nuxt
Programming language: JavaScript
Package manager: Npm
UI framework: None
Testing framework: None
Rendering mode: Universal (SSR/SSG)
Deployment target: Server (Node.js hosting)
После этого выполните эти команды.
cd <project name>
npm run dev
Это изменит каталог на наш проект и запустит его в браузере. Чтобы увидеть наше приложение, перейдите по адресу http://localhost:3000/.
Установка Appwrite
Appwrite — это сквозное серверное решение с открытым исходным кодом, которое позволяет разработчикам быстрее создавать приложения.
Чтобы использовать Appwrite в нашем приложении Nuxt, мы установим Appwrite client-side SDK для веб-приложений.
npm install appwrite
Создание нового проекта Appwrite
Во время создания экземпляра Appwrite мы указали, на каком имени хоста и порту мы видим нашу консоль. По умолчанию это localhost:80.
Перейдите на localhost:80 и создайте новую учетную запись, чтобы увидеть нашу консоль.
На нашей консоли есть кнопка Создать проект. Нажмите на нее, чтобы начать новый проект.
После создания проекта появится приборная панель нашего проекта. В верхней части страницы находится панель настроек. Нажмите на панель настроек, чтобы получить доступ к ID проекта и конечной точке API.
Мы копируем ID проекта и конечную точку API, которые нам нужны для инициализации Appwrite Web SDK.
Мы создаем файл init.js в корневом каталоге нашего проекта для инициализации Appwrite Web SDK со следующим кодом.
import { Appwrite } from 'appwrite';
export const sdk = new Appwrite();
sdk
.setEndpoint('http://localhost/v1') // Replace this with your endpoint
.setProject('projectID'); // Replace this with your ProjectID
Создание коллекции и атрибутов в базе данных Appwrite
В веб-консоли Appwrite мы нажимаем на Database в левой части приборной панели.
Мы создаем коллекцию на вкладке базы данных, нажав на кнопку Добавить коллекцию. Это действие перенаправляет нас на страницу разрешений.
На уровне коллекции мы хотим назначить доступ на чтение и доступ на запись со значением role:all. Позже мы сможем изменить эти разрешения, чтобы контролировать, кто имеет доступ на чтение или запись в нашу базу данных.
Справа на странице Разрешения мы копируем ID коллекции, который нам нужен для выполнения операций над документами коллекции.
Далее мы переходим на вкладку Атрибуты, чтобы создать свойства, которыми должен обладать документ.
Мы создаем атрибут email — emailAddress.
Создание нашей посадочной страницы
В нашем файле index.vue мы создаем целевую страницу для сбора предложений по электронной почте. Эта целевая страница состоит из элемента input для ввода пользователями своих адресов электронной почты. Мы храним эти адреса электронной почты в нашей базе данных Appwrite.
Приведенный ниже код создает пользовательский интерфейс целевой страницы.
https://gist.github.com/Iheanacho-ai/7d4178284b85dd9f9008412a62769e36
Добавление взаимодействия ввода с базой данных
В секции script файла index.vue мы импортируем экземпляр sdk в наш файл.
<script>
import {sdk} from '../init';
</script>
Далее мы создаем переменную состояния emailAddress для хранения значения нашего элемента input.
<script>
import {sdk} from '../init';
export default {
name: 'IndexPage',
data(){
emailAddress: ''
},
}
</script>
Далее мы создадим handleEmailAddress для хранения адресов электронной почты в нашей базе данных Appwrite.
<script>
import {sdk} from '../init';
export default {
name: 'IndexPage',
data(){
emailAddress: ''
},
methods: {
handleEmailAddress: async function(){
try {
await sdk.database.createDocument(collectionID', 'unique()',{
"emailAddress": this.emailAddress
})
this.emailAddress= '',
alert("Email saved successfully!")
} catch (error) {
console.log(error)
}
}
}
}
</script>
В приведенном выше блоке кода функция handleEmailAddress делает следующее:
- Создает новый документ в базе данных с помощью функции Appwrite
createDocument; эта функция получает ID коллекции, который мы сохранили со страницы Permissions, параметр unique(), который указывает, что мы хотим получить уникальный ID документа, и значения атрибутов в качестве параметров. - Предупреждает нас об успешном сохранении документа и затем очищает информацию в нашей переменной состояния
emailAddress. - Записывает любую возникшую ошибку в консоль.
Затем мы передаем переменную emailAddress в директиву v-model на элементе input и функцию handleEmailAddress в слушатель событий кнопки Add email address @click.
<input
type="text"
v-model="emailAddress"
/>
<button type="button" @click="handleEmailAddress">Add email address</button>
Вот как выглядит наш файл index.vue.
https://gist.github.com/Iheanacho-ai/f988c7cfcc14cd7cf701708deff15c93
Введите адрес электронной почты, чтобы увидеть его сохранение в базе данных.
Заключение
В этой статье мы рассмотрели использование Appwrite для создания данных в базе данных. Мы создали простую страницу генерации лидов в приложении Nuxt.
Ресурсы
Вот некоторые ресурсы, которые могут быть полезны:
- Начало работы с Appwrite для веб
- API базы данных
- Что такое Appwrite и как его эффективно использовать