Перед началом статьи хотелось бы сказать, что переводчик не несёт ответственности за содержание статьи, а также еще больше полезной и нужной информации вы найдете в нашем Телеграм-канале по ссылке: https://t.me/metsolution
Перевод: Лебедев Даниил
Оригинальная статья:Build a Mobile App (nocode) using Google Sheet & Glide in 3 hours : Zoe Chew
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 поля формы (полное имя, электронная почта и вопрос).
Каждый раз, когда пользователь задает свой вопрос, входные данные автоматически обновляются в этой электронной таблице " Ввод: ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ". Например:
Спасибо за внимание!
Автор, никогда больше не переводи ничего на тему разработки приложений! Ты не понимаешь терминологию, и вообще не понимаешь о чём речь. Пишешь какой-то не связный бред. Читать невозможно! 🤦♂️
Спасибо за статью, отличная. Возможно, разработчикам, читать сложно, но все понятно написано. А как релизить приложение?