Создайте мобильное приложение (ноукод) с помощью Google Sheet & Glide за 3 часа

Перед началом статьи хотелось бы сказать, что переводчик не несёт ответственности за содержание статьи, а также еще больше полезной и нужной информации вы найдете в нашем Телеграм-канале по ссылке: https://t.me/metsolution

Перевод: Лебедев Даниил

Оригинальная статья:Build a Mobile App (nocode) using Google Sheet & Glide in 3 hours : Zoe Chew

Назовем это приложение - RemoteConfy. Мобильное приложение для организации виртуальных мероприятий для управления информацией о мероприятии, деталями, продажей билетов, часто задаваемыми вопросами и поддержкой клиентов.

Пользователи могут просматривать расписание мероприятий, покупать билеты онлайн и отправлять их организаторам по электронной почте.

Для начала, я перечисляю части, которые хочу построить:

• Обзор информации и деталей о событиях

• Тип билета, цена и оплата

• Состав спикеров, фото и биография профиля

• Расписание мероприятий, время и тема сессии

• Список часто задаваемых вопросов

• Связаться со службой поддержки

Перейдите на Glide и создайте бесплатный аккаунт. Затем перейдите на Google Sheet и создайте новый файл " виртуальная база данных событий ". После того, как вы войдете в систему и аутентифицируете оба аккаунта:

• Создайте новое приложение на Glide из Google Sheet.

• Выберите новый файл электронной таблицы (скопируйте и используйте этот пустой образец).

• Вы увидите пользовательский интерфейс приложения с выходными данными, связанными с электронной таблицей.

Glide приложение повернет вашу электронную таблицу и выведет данные на мобильный пользовательский интерфейс. Другими словами, вам нужно будет создать и обновить электронную таблицу для заполнения этих данных, чтобы настроить ваше приложение.

Если вы не хотите начинать с нуля, вы можете скопировать мою электронную таблицу.

Создавайте новые листы в том же файле. Каждый лист содержит базу данных (в скобках), необходимую для приложения событий:

• Описание (показанное изображение, название события, описание, ссылки).

• Докладчик (название, компания, фото, биография, тема заседания)

• Партнер (название компании, логотип)

• Расписание (время заседания, тема, имя выступающего)

• Билеты (тип билета, цена, подробности, касса)

• FAQ (список вопросов и ответов)

• Введите FAQ (полное имя пользователя, электронная почта и вопрос)

Нам нужно создать 4 отдельные страницы приложения: Описание, Расписание, Докладчик и Часто задаваемые вопросы. Каждая страница будет содержать ссылки на соответствующие листы и данные, которые мы создали на Шаге 3.

Убедитесь, что вы обновили базу данных " Перезагрузите лист " в Glide. Это заново синхронизирует вывод Glide с данными электронной таблицы, которые вы обновили.

• Перейдите в " Tabs " на левой боковой панели в "Glide".

• Добавить новую вкладку (или переименовать), т.е. "About".

• Укажите данные "Source" на листе "About".

Повторите вышеописанные шаги для других вкладок (например, Расписание, Докладчик и FAQ). Вам необходимо убедиться, что каждый "Tab" указывает на нужный источник данных в электронной таблице. Например:

Давайте построим страницу "Описание(About)". Вы можете добавить изображение обложки, заголовок события, описание и кнопки. Начните с нажатия кнопки "Layout" на левой боковой панели в окне Glide. Стиль макета экрана можно задать в режиме "Details":

Например: Изображение, заголовок, основной текст, кнопка, разделитель, заголовок, богатый текст (и другие элементы, которые вы считаете подходящими).

Каждый компонент представляет собой конструкторский блок, связанный с данными из листа "About".

Форматируем название и описание главного события

Добавьте компонент " Title " из " + ".

Указать источник данных на колонку листа ("event_title_title" "event_title_sub").

Продолжайте на странице "About". Теперь мы хотим создать кнопку покупки билетов, которая будет ссылаться на различные заказы билетов (General vs. Expert Admission).

• Выбирает 2 типа билетов (Выбор просмотра " Билеты)

• Щелкните по 1-му варианту билета (Общий вид входа)

• Видит кнопку "Купить билет" (общий вид входа)

• Заходит на внешнюю платежную страницу (касса билетов)

• Добавить компонент "Кнопка" на странице "Описание".

• Отредактируйте кнопку "Features(Особенности)", выберите "Action(Действие)" ("Link to screen(Ссылка на экран)").

• Укажите источник данных на лист ("Tickets(Билеты)").

• Стиль оформления экрана с помощью режима "List(Список)".

• Выводите все источники данных, связанные с информацией о билетах (тип, цена, подробности).

• В просмотре приложения "General Admission(Общий допуск)" добавьте компонент "Button(Кнопка)" из "+".

• Отредактируйте кнопку "Feautures(Особенности)", выберите "Action(Действие)" ("Opem link(Открыть ссылку)").

• Наведите курсор "Target(Цель)" на "Tickets checkout(Выдача билетов)", который содержит ссылку Gumroad.

В качестве альтернативы можно также использовать встроенную кассу Glide, Stripe или PayPal.

На странице расписания будут перечислены программа и темы мероприятий. Для построения представления расписания укажите источник данных на лист "Schedule(Расписание)". Вот как настроить мобильный пользовательский интерфейс на Glide:

• Стиль макета экрана с помощью режима "List(Список)".

• Вытащите данные, которые Вы хотите отобразить (тема, время).

• Компонент "Title(Название)", включающий название темы, время и обложку изображения.

• Компонент "Rich text(Богатый текст)" и название "Speaker(Спикера)".

• Компонент "List Relation" для связи существующей базы данных по спикерам (это не сработает, пока мы не сделаем следующий шаг).

Тема каждого заседания соответствует докладчику, который представляет эту тему. Вы можете создать базу данных докладчиков (имя, биография, тема, заголовок) и повторно использовать эту базу данных в базе данных Расписания.

• Перейдите к иконке "Data(Данные)" на левой боковой панели в меню Glide.

• Перейдите на вкладку "Schedule(Расписание)" в базе данных.

• Добавьте колонку+ из верхнего правого угла, отредактируйте настройки ниже.

В этот раздел можно включить часто задаваемые вопросы, такие как покупка билетов, возврат денег и т.д. Для создания этой страницы вы можете указать источник данных на лист "Часто задаваемые вопросы" и стиль отображения соответственно.

Пользователи могут задать дополнительные вопросы, не включенные в FAQ. Поэтому для этого можно создать контактную форму.

• Добавить элемент "Form Button(Кнопка заполнения формы)" на странице FAQ.

• Отредактируйте кнопку "Feautures(Особенности)", выберите "Action(Действие)" ("Show Form(Показать форму)").

• Наведите кнопку формы на источник данных "Ввод: ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ"

• Создайте 3 поля формы (полное имя, электронная почта и вопрос).

Спасибо за внимание!