Разработка
Daniil Lebedev

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

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

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

1. Стадия идеи 💡

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

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

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

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

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

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

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

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

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

2. Начало работы ⚒

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

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

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

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

3. Настройте электронную таблицу 📊.

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

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

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

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

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

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

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

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

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

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

👉 Попробуйте шаблон приложения (на телефоне / вебсайте) здесь.

4. Создать страницы приложения 📱.

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

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

Добавить новые вкладки в Glide

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

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

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

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

5. Подробная информация о мероприятии 📆.

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

Добавьте новые "Компоненты +"

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

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

Форматировать каждый "Component"

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

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

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

6. Приобрести билеты на мероприятия 🎟.

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

Вот логические шаги и просмотр приложений, когда пользователь нажимает на кнопку "билет":

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

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

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

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

Добавляем кнопку билета

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

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

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

Покажите 2 типа билетов, где пользователи могут выбирать и расширять информацию и цены на билеты.

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

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

Соедините кнопку покупки билета, используя Gumroad в качестве кассы. Убедитесь, что вы установили Gumroad с билетами общего и специального назначения.

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

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

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

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

👉 Попробуйте шаблон приложения (на телефоне / вебсайте) здесь.

7. Расписание мероприятий ⏰

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

Настройка вкладки "Schedule" (Расписание)

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

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

На каждом занятии будет показано название презентации, время и докладчик. Добавьте эти компоненты:

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

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

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

"List Relation" для связи между обеими темами заседания <> База данных по темам докладчиков

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

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

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

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

👉 Попробуйте шаблон приложения (на телефоне / вебсайте) здесь.

8. Поддержка клиентов по электронной почте 💁‍♂.

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

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

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

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

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

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

Каждый раз, когда пользователь задает свой вопрос, входные данные автоматически обновляются в этой электронной таблице " Ввод: ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ". Например:

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

0
2 комментария
Георгий Левин

Автор, никогда больше не переводи ничего на тему разработки приложений! Ты не понимаешь терминологию, и вообще не понимаешь о чём речь. Пишешь какой-то не связный бред. Читать невозможно! 🤦‍♂️

Ответить
Развернуть ветку
Вячеслав Зуев

Спасибо за статью, отличная. Возможно, разработчикам, читать сложно, но все понятно написано. А как релизить приложение?

Ответить
Развернуть ветку
Читать все 2 комментария
null