Стартап Glide для создания мобильных приложений из Google-таблиц
Все мы наблюдаем такую тенденцию, что разработка различных интернет ресурсов постоянно упрощается, и становится все более доступной для пользователей.
Например, если говорить о сайтах, то можно вспомнить то время, когда цена простейшего лендинга начиналась от нескольких тысяч долларов. Сегодня же можно бесплатно скачать готовый шаблон практически для любого сайта. Либо же воспользоваться одним из популярных конструкторов. И да, «создать сайт за 5 минут» – это именно то, что нужно большинству заказчиков.
Похожая тенденция наблюдается и на рынке мобильных приложений. Для них тоже существует огромное множество бесплатных шаблонов. А простые конструкторы вполне подходят для самостоятельной разработки.
И сегодня мы решили рассказать о проекте, который имеет все шансы открыть новый виток развития в этой сфере. Стартап Glide привлек к себе внимание возможностью создавать приложения на базе Google-таблиц для любой мобильной ОС. При этом «разработчику» не нужно иметь знаний кода и опыта в программировании.
Идея Glide
Сервис Glide был разработан и запущен бывшими сотрудниками, компании Microsoft. По словам главы проекта Дэвида Сигела, он и его партнеры хотели сделать процесс создания мобильных программ доступным для всех. Благодаря новому сервису, теперь каждый пользователь сможет оптимизировать работу с электронными таблицами. И на их основании создавать удобные мобильные приложения.
На сайте стартапа представлены готовые инструменты, с помощью которых можно просто создавать универсальные ПО для мобильных устройств. Также Glide позволяет легко редактировать информацию, которую отображает уже созданное приложение, достаточно просто изменить данные в Google-таблице. А через веб-интерфейс клиенты могут настраивать любые страницы и блоки приложений, получая желаемое оформление и необходимый функционал. Создатели утверждают, что для запуска приложения на базе шаблона уходит всего 7 секунд.
Все эти возможности доступны для любого пользователя сети. Примечательно, что сам стартап тоже использует в работе собственные механизмы платформы Glide и Гугл-таблицы.
Особенности ПО
При создании приложения сама платформа Glide позволяет собрать подходящую визуальную составляющую. А гугл-таблица используется для наполнения необходимой информацией, то есть она выполняет роль базы данных.
Все приложения, созданные в этом сервисе, являются кроссплатформенными, то есть их можно использовать в любой ОС и на всех устройствах. Кроме того, это прогрессивные web-приложения. Если вдруг кто-то не в курсе, progressive web app (PWA) – это технология, которая визуально и функционально трансформирует вебсайт в мобильное приложение прямо в браузере.
Несмотря на относительно простой принцип работы сервиса Glide, его применение открывает большие возможности для пользователей, которым нужны те, или иные приложения. На базе загруженных или шаблонных Google-таблиц можно создать, например, мобильную витрину магазина. При необходимости пользователь без труда может получить приложение для управления расходами или таск-менеджер.
Каждый из этих вариантов ПО будет синхронизироваться с Гугл-таблицей и быстро обновляться. Опять же таки, для редактирования информации, нужно просто вносить правки в таблицах. А воспользовавшись платформой Glide всегда можно изменить визуальное оформление.
Работа с приложением – создание идеи
Структура и функции готового приложения определяются его целью. Один из примеров идеи – организация виртуальных мероприятий (вебинаров). Для этого пользователи должны иметь возможность:
Примеры успешных кейсов
В качестве примера успешного использования сервиса можно привести Android-приложение для работы с базой сотрудников. Оно было создано при помощи готового шаблона Glide.
В это приложение встроена полноценная система поиска и удобный мессенджер. По сути, это некий аналог собственной CRM-системы. Но структура программы собрана на базе обычной Google-таблицы, которая содержит записи об именах и должностях сотрудников, а также набор нужных для работы ссылок.
Еще один удачный пример – приложение для прослушивания подкастов.
Здесь сервис Glide автоматически встроил плеер, потому что система обнаружила в таблице ссылки на аудиофайлы. Запускается созданное приложение посредством перехода по ссылке в любом браузере, в том числе мобильном. Если ссылку открыть в смартфоне, на экран выводится предложение добавить ее в браузер для быстрого доступа.
На ПК использовать эти программы можно при помощи специального эмулятора экрана смартфона. Конечно, это не совсем удобно. Но если пользователь возьмёт платный пакет, то он сможет открывать через компьютер планшетную версию приложения.
Условия работы
Для личного пользования сервис доступен абсолютно бесплатно. Но в версии Personal действуют следующие ограничения:
Стоит учитывать, что в режимах Personal и Basic в интерфейсе присутствует реклама бренда Glide, которую можно удалить в Pro версии. Существует также подписка Glide Pro для корпоративного использования и работы небольших команд.
Независимо от варианта оплаты пользователь имеет возможность выбрать любой домен в качестве URL приложения. При необходимости программу можно сделать приватной, то есть доступной только тем, кто прошел регистрацию.
Инструкция по созданию приложения
Для тех, кто заинтересовался платформой Glide, мы подготовили пошаговую инструкцию. Используя ее, вы можете создать собственное приложение еще до того, как дочитаете эту статью до конца.
Чтобы начать работу нужно перейти на сайт. Он доступен только на английском языке, но интерфейс достаточно дружелюбный, поэтому проблем с регистрацией и работой возникнуть не должно. Для начала можно использовать кнопку «Sign Up» в правом верхнем углу, или синюю кнопку «Get Started», сразу под шапкой.
В открывшемся окне понадобится выбрать свой Google-аккаунт для авторизации в системе. После нажатия синей кнопки «Разрешить» откроется доступ к сервису.
Личный кабинет содержит четыре основные вкладки меню:
Настройка структуры
Начать создание приложения можно двумя путями:
Лучше начинать из выбора первого варианта, в итоге откроется список таблиц на вашем гугл-диске. Например, если нужно создать приложение для работы с мероприятиями, нажимать нужно на соответствующую таблицу (которая была заранее подготовлена).
После этих действий в интерфейсе сервиса появится шаблон приложения в базовом варианте. При этом таблица полностью интегрируется с конструктором. То есть можно менять информацию в таблице, и она автоматически будет отображаться в конструкторе. А если вносить правки в самом конструкторе, они тут же будут появляться и в таблице.
Можно сразу сравнить данные, которые отображает сервис Glide с информацией в таблице.
Важно заранее дать таблице корректное название, поскольку оно используется в качестве названия приложения. Также желательно прописать и наименования столбцов в таблице, они впоследствии будут всплывать в приложении.
В меню можно выбрать функцию отображения даты мероприятия и другие опции. Например, когда будет создано несколько событий, можно нажать на «Дата», чтобы под их названиями отображались дни проведения.
Если нужно вставить фото, его можно добавить прямо в таблицу напротив отдельной строки. Более простой вариант – перетягивание файлов мышкой прямо в интерфейс конструктора.
Система автоматически выполнит кадрирование. Изображение отобразится в нужном формате и в той строке, куда его перетащили. Также сервис сам забрасывает файл с изображением на облако и добавляет ссылку на него в самой таблице.
При нажатии на строку отдельного мероприятия появится окно с увеличенной фотографией и более подробной информацией. Возможность перехода к событию обеспечивает активная ссылка, размещенная в окне приложения.
Работа с меню
Внести изменения в структуру страницы можно при помощи бокового меню конструктора.
Можно изменить, например, самую верхнюю строку, выполняющую функцию заголовка. Вместо названия вебинара без труда устанавливается дата.
В этой строке можно разместить любой элемент из списка меню «Source column».
Таким же образом выполняется работа и с другими блоками, которые отображаются в приложении.
Когда пользователь наводит курсор на отдельный раздел настройки, зеленый шарик появляется напротив элемента, который будет редактироваться. Это помогает понять, где именно произойдут изменения.
В каждом разделе меню есть свои дополнительные настройки. Если зайти в раздел «ссылка», то можно увидеть несколько полей для изменения этой части приложения.
В самом нижнем поле «Label» вводится дополнительная информация, которая отображается над ссылкой. Если написать в нем «подробнее по ссылке», то эти слова появятся в окне события.
В поле «Column» можно увидеть варианты отображения самой ссылки. При нажатии на ссылку произойдет переход на сайт события.
Если выбрать, например, дату, то именно она появится вместо текста.
Раздел «Title» позволяет изменить вид ссылки, есть 4 варианта визуальной подачи. Может выводиться полный URL адрес вместо названия или только название мероприятия.
Таким же образом можно устанавливать любой формат отображения информации в той или иной части приложения. Есть еще возможность изменить размещение компонентов приложения. Для этого нужно перетащить их вверх или вниз при помощи мышки. Например, активная ссылка без труда поднимается к фото, а строка даты опускается в самый низ.
Если возникла необходимость изменить форму подачи и получения информации, то нужно нажать на белый крестик в синем кругу. Он расположен в правой верхней части меню.
После нажатия откроется окно с выбором шаблонов для оформления приложения.
Здесь есть даже элементы разметки. Если нажать мышкой на любую иконку, функция, которую она отображает, появится в боковом меню сервиса. Для примера можно выбрать разделительную линию.
После нажатия на значок, в меню появится блок разделителя, а в приложении станет видна разделяющая линия. Ее положение по вертикали можно менять при помощи мышки.
При организации мероприятий есть смысл добавить комментарии для обратной связи с посетителями.
После нажатия на соответствующий значок эта функция отобразится в боковом меню и в окне приложения. Можно проверить новый элемент и нажать на активную строку «Добавить комментарий». В итоге откроется поле для написания текста.
Если нужно добавить список билетов или контакты службы поддержки, необходимо нажать на верхний плюс и выбрать подходящие функции.
Такие настройки позволяют подобрать предельно удобный для целевой аудитории формат визуального отображения. А при отсутствии некоторых разделов в меню, их можно прописать в таблице. Сервис считает изменения и добавит новые элементы в приложение.
Финальная отладка
Если вы добавляете или удаляете строку из таблицы, то она появляется или исчезает в приложении. Чтобы увидеть новые прописанные строки таблицы в форме элементов приложения, необходимо нажать значок обновления в левой части рабочего окна.
Сервис Glide может «подхватывать» не только столбцы в Google-таблице, но и новые листы. Для этого на новом листе нужно заполнить хотя бы две строки. При написании одной сервис не зафиксирует изменения.
Таким образом можно расширять структуру приложения, включая новые разделы. Но есть один нюанс – после добавления еще одного листа в таблице новые разделы могут не отображаться в интерфейсе, даже при нажатии на значок обновления. Чтобы все заработало необходимо нажать на «Tabs» в левом боковом меню.
После этого в правой части интерфейса отобразится такое меню.
Новые пункты находятся в разделе «Hidden Tabs». То есть в скрытых вкладках. Пока новые разделы остаются здесь, они будут невидимы для просмотра. Их нужно переместить в верхний «Tabs» при помощи мышки.
Если обновить приложение после этих действий, новый элемент «Обратная связь» появится в нижней части окна. Таким же образом добавляются и другие элементы.
Для создания дополнительных функций внутри раздела приложения потребуется нажать на нужный элемент (например, на «Обратную связь»). В результате откроется окно, которое пока не содержит дополнительных функций – только вступительный текст, прописанный в таблице.
Чтобы добавить комментарии, нужно нажать на крестик в синем круге.
В открывшемся боковом меню необходимо выбрать значок комментариев и нажать на него.
После этих действий функция комментариев отобразится внутри раздела «Обратная связь».
Допустим, нужно добавить еще информацию об организации и фото. В этом случае нужно в боковом меню выбрать подходящий значок и нажать на него. Опять же, фото можно перетянуть мышкой прямо в конструктор.
Структура левого бокового меню достаточно простая:
Благодаря такому простому алгоритму работы с сервисом, пользователь может создать мобильное приложение за несколько минут.
На правах рекламы
Быстрые серверы для любых целей — это про наши эпичные серверы. Максимальная конфигурация — 128 ядер CPU, 512 ГБ RAM, 4000 ГБ NVMe.
The intelligent no‑code platform
Reclaim your time and talent with no-code apps and automation
No-Code
Anyone on your team can make apps and automate processes
Agile
Create and deploy multi-platform apps in real-time
Powerful
Deliver a rich user experience with a robust feature set
COVID-19 Support
AppSheet is committed to helping our community develop new ways of supporting remote teams, healthcare workers, and one another.
Industry-leading platform
A Forrester Wave leader among low-code development platforms for business users.
Make an app.
Share it with the world.
AppSheet has allowed us to be flexible with our app creation rather than being tied to a specification at the outset. We’ve been able to change, adapt and react to user feedback at the same time as adding new features to improve the user experience.
What AppSheet did was allow me to really quickly create a tool to collect data. We’re really excited to be able to collect this information on the assembly line. Anyone in final assembly, anyone in design has constantly up-to-date information down to the part level.
Ben Atkinson, Toyota
Создайте мобильное приложение (ноукод) с помощью Google Sheet & Glide за 3 часа
Перед началом статьи хотелось бы сказать, что переводчик не несёт ответственности за содержание статьи, а также еще больше полезной и нужной информации вы найдете в нашем Телеграм-канале по ссылке: https://t.me/metsolution
Перевод: Лебедев Даниил
Пользователи могут просматривать расписание мероприятий, покупать билеты онлайн и отправлять их организаторам по электронной почте.
Для начала, я перечисляю части, которые хочу построить:
• Обзор информации и деталей о событиях
• Тип билета, цена и оплата
• Состав спикеров, фото и биография профиля
• Расписание мероприятий, время и тема сессии
• Список часто задаваемых вопросов
• Связаться со службой поддержки
Перейдите на 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 поля формы (полное имя, электронная почта и вопрос).
