AFINA agency
no code

Создание приложения Retool с помощью Airtable

Давайте с нуля создадим панель поддержки клиентов с помощью Airtable и Retool. Приложение позволит вам видеть всех ваших клиентов, а затем просматривать все контакты, задачи, встречи и счета, связанные с клиентом, в одном представлении.
перевод https://docs.syncinc.so/playbooks/retool-svoc
Retool не имеет встроенной интеграции с Airtable. И хотя вы можете использовать REST API-коннектор Retool с Airtable, поскольку API Airtable имеет ограничения скорости и разбиение на страницы, работать так будет неудобно.

Заказать no code разработку

После уточнения деталей мы можем приступить к вашему проекту
К счастью, Retool поставляется с первоклассной поддержкой SQL. Итак, в этом руководстве мы будем использовать новый инструмент, который я помог создать, под названием Sync Inc, чтобы превратить Airtable в базу данных Postgres. Это позволит вам подключить Airtable к Retool в качестве базы данных, чтобы вы могли создавать нужные приложения за считанные минуты.

Разделы руководства

Ссылки кликабельные
Настройка Airtable
Настройка Airtable
Настройка Sync Inc
Настройка Sync Inc
Настройка ресурсов Retool
Настройка ресурсов Retool
Настройка приложения Retool
Настройка приложения Retool
Создание первой таблицы
Создание первой таблицы
Добавление дополнительных данных
Добавление дополнительных данных
Запись в Airtable
Запись в Airtable

Настройка Airtable

В этом руководстве мы будем использовать шаблон управления успехом клиентов Airtable . Эта база - отличный пример того, как Airtable может управлять всеми вашими клиентскими данными и отношениями. Но он также демонстрирует ограничения использования Airtable, когда вам нужны более точные рабочие процессы. Вот здесь и появляется Retool.
Сначала добавьте шаблон управления успехом клиентов Airtable в рабочее пространство Airtable:
  1. Войдите в свое рабочее пространство Airtable, а затем откройте шаблон управления успехом клиентов в новой вкладке.
  2. Нажмите кнопку « Использовать шаблон» , чтобы добавить шаблон управления успехом клиентов в рабочее пространство.

Настройка Sync Inc

Теперь давайте превратим базу управления успехом клиента в Airtable в базу данных Postgres.
  1. Перейдите на https://app.syncinc.so/signup и создайте учетную запись.
  2. Подключите базу Airtable, пройдя обучение или нажав кнопку « Добавить базу».
Вам будет предложено ввести ключ API Airtable. После этого выберите базу Customer Success Managment и все ее таблицы. Затем нажмите " Создать"
Sync Inc немедленно предоставит вам базу данных Postgres и начнет синхронизировать с ней все данные из вашей базы Airtable. Вам будут предоставлены учетные данные для новой базы данных. Держите их под рукой, так как вы будете использовать их для подключения базы данных Sync Inc к Retool.

Настройка ресурсов Retool

Теперь просто добавьте свою базу данных Sync Inc в Retool, как любую другую базу данных Postgres:
  1. В новой вкладке войдите в свою панель управления Retool . В верхней строке меню щелкните Ресурсы, а затем синюю кнопку Создать
Выберите Postgres из списка типов ресурсов.
Введите имя для вашего ресурса (т.е. «Airtable - Клиент Успех») , а затем ввести хост, порт, имя базы данных, имя пользователя базы данных и пароль для базы данных синхронизации Inc. Вы можете скопировать и вставить их из Sync Inc (убедитесь, что нет пробелов в начале). Затем нажмите синюю кнопку «Создать ресурс» .
Retool подтвердит, что ваш ресурс был создан. Нажмите « Создать приложение», чтобы вернуться на страницу приложения.

Настройка приложения Retool

После успешного подключения Airtable к Retool с помощью Sync Inc, мы готовы создать приложение, которое отображает все данные о ваших клиентах в одном окне. Или, как некоторые называют это, единый взгляд на клиента.
  1. На странице приложения Retool нажмите синюю кнопку «Создать» и выберите параметр «Создать приложение из данных» .
Поскольку ваши данные Airtable теперь находятся в базе данных Postgres, Retool может быстро запустить ваше приложение с помощью таблицы и панели поиска. Это хорошая основа для вашего единого представления о приложении клиента. Итак, в появившемся модальном окне выберите созданную вами базу данных Sync Inc Postgres (например, Airtable - Customer Success ), таблицу учетных записей и столбец учетных записей в качестве исходных данных для приложения. Затем нажмите синюю кнопку « Далее»
Теперь дайте вашему приложению имя. Вы можете выбрать что-то вроде «Центр клиентов» и нажать синюю кнопку « Создать приложение»
Retool создаст приложение с таблицей и панелью поиска. Поскольку мы выбрали счета таблицы и счета столбца, приложение будет сначала показать все счета таблицы и позволяет осуществлять поиск по счету . Попробуйте. Если вы введете «Long» в строку поиска и нажмете «Ввод», в таблице автоматически отобразится «Long Beach College». Разве это не здорово!
Теперь приступим к редактированию этого приложения. Нажмите кнопку «Изменить» в правом верхнем углу
Во-первых, мы можем удалить полезные подсказки, которые Retool загружает в приложение-шаблон. Они нам не нужны. Выделите и удалите два текстовых поля вверху страницы, а также дополнительную кнопку внизу. У вас останется чистая таблица и панель поиска:

Создание первой таблицы

Имея базовую структуру вашего приложения Retool, вы можете приступить к адаптации приложения к нашим потребностям с помощью SQL.

Сначала посмотрите на раздел запросов на нижней панели. Вы можете видеть, что, поскольку Sync Inc преобразовала вашу базу Airtable в надлежащую базу данных Postgres, у вас есть доступ ко всем возможностям SQL Retool. Например, вы можете увидеть всю схему своей базы, а также типы столбцов. И когда вы пишете SQL-запросы, вы получаете преимущества автозаполнения:
Теперь продолжайте и отредактируйте запрос, который заполняет таблицу учетной записи, чтобы вы использовали только те данные, которые вам нужны для каждой учетной записи клиента:
select id, account, primary_csm, partnership_growth, customer_stage, num_of_tasks, next_meeting
from accounts
where ({{ !searchBar.value }} or account ilike {{ '%' + searchBar.value + '%' }});
Этот запрос выбирает из accounts таблицы только нужные столбцы. Затем он фильтрует результаты в WHERE предложении на основе значения в строке поиска. Если в строке поиска ничего не введено, возвращается весь список учетных записей.

При нажатии кнопки «Сохранить и запустить» результаты запроса отображаются в виде предварительного просмотра. Все выглядит хорошо. Поэтому в качестве последнего шага переименуйте этот запрос в list_accounts, щелкнув, а затем отредактировав имя запроса на левой панели.
Наконец, давайте сделаем эту таблицу красивой. Выбрав таблицу счетов на холсте, перейдите в инспектор на правой панели, чтобы реорганизовать столбцы и дать им четкие заголовки. Скройте id столбец, щелкнув маленький значок «глаз», так как это больше справочное поле. Наконец, настройте сортировку таблицы и разбиение на страницы по своему вкусу.
Когда таблица будет выглядеть хорошо, дайте ей название. Перетащите text компонент над таблицей.
Затем в инспекторе используйте markdown, чтобы присвоить текстовому компоненту значение #Accounts. Это сделает текст H1 заголовком.

Добавление дополнительных данных

Вуаля, ваша первая таблица завершена. Таблица учетных записей теперь получает данные из Airtable в режиме реального времени, и ее легко найти. С SQL и Retool у вас под рукой это было довольно быстро. Теперь давайте добавим оставшиеся данные о клиентах.

Мы собираемся повторить те же шаги, которые использовали для создания таблицы account, но в несколько более эффективном потоке:
  1. Разместите остальную часть приложения, перетаскивая компоненты.
  2. Добавьте данные к каждому из компонентов.
  3. Сделайте так, чтобы компоненты хорошо выглядели.

1. Разместите остальные таблицы и заголовки.

Чтобы отобразить всю необходимую информацию для любой учетной записи, ваше приложение должно отображать контакты, задачи, собрания и счета для выбранной учетной записи. Каждый из них будет отдельной таблицей. Таким образом, мы можем разметить все приложение, перетащив таблицы и текстовые компоненты на холст. За пару кликов вы получите приложение, которое выглядит примерно так:
Примечание: когда вы перетаскиваете таблицы на холст, Retool автоматически заполняет их list_accountsзапросом. Не беспокойся об этом.

2. Добавьте данные в таблицы.

Заполнение каждой таблицы данными - это двухэтапный процесс:

  1. Напишите запрос для получения данных для выбранной учетной записи.
  2. Настройте таблицу для получения данных из запроса.
Начнем с таблицы контактов.

Сначала откройте нижнюю панель и нажмите New, чтобы добавить новый запрос:
Чтобы получить контакты, мы можем написать простой SQL-запрос:
SELECT contacts.name, contacts.role, contacts.email, contacts.linkedin
FROM contacts
WHERE contacts.company[1] = {{table.selectedRow.data.id}};
Здесь SELECTоператор извлекает определенные столбцы для таблицы. В то время как WHERE предложение фильтрует возвращенные результаты на основе учетной записи, выбранной в таблице учетных записей (т.е. table).
примечание
Вам может быть интересно, почему вы используете contacts.company[1] в WHERE предложении. Короче говоря, company столбец изначально является связанным полем записи в Airtable. Связанные записи потенциально могут содержать более одного значения. Таким образом, в вашей базе данных Sync Inc Postgres company он хранится в виде массива Postgres на случай, если имеется несколько значений. Вот [1] как вы выбираете первое значение в массиве Postgres. Полное объяснение можно найти в шпаргалке по Sync Inc или в этом руководстве для разработчиков.
Когда вы выбираете учетную запись в таблице учетных записей (я рекомендую выбрать Soho Real Estate учетную запись для тестирования), а затем нажимаете кнопку «Сохранить и запускать» , вы увидите, что этот запрос возвращает только контакты для выбранной учетной записи. Именно то, что вы ищете.

Назовите запрос, list_contacts чтобы его было легко идентифицировать. Теперь щелкните пустую таблицу под заголовком «Контакты» на холсте. Инспектор справа теперь покажет настройки для таблицы. Введите {{ list_contacts.data }} в поле данных. Это заполнит таблицу данными, полученными из list_contacts запроса.
Просто повторите этот шаблон, чтобы заполнить оставшиеся таблицы. Вот запросы PostgreSQL, которые вы можете использовать для каждой таблицы. Все они следуют одному образцу:

Задачи ( list_tasks)
SELECT task_manager.task_name, task_manager.status, task_manager.assignee, task_manager.due_date FROM task_manager WHERE task_manager.account[1] = {{table.selectedRow.data.id}};

Встречи
('list_meetings`)
SELECT meetings.date, meetings.name, meetings.meeting_complete FROM meetings WHERE meetings.account[1] = {{table.selectedRow.data.id}};

Счета
('list_invoices`)
SELECT invoices.invoice_number, invoices.invoice_frequency, invoices.invoicing_status, invoices.invoice_amount, invoices.invoice_period_beginning_date, invoices.invoice_period_end_date, invoices.invoice_type FROM invoices WHERE invoices.account[1] = {{table.selectedRow.data.id}};

После создания и подключения всех ваших запросов ваше приложение должно выглядеть почти готовым. Вы можете найти учетную запись типа «Soho Real Estate», выбрать ее, и во всех таблицах будут показаны детали учетной записи.

3. Сделайте таблицы красивыми

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

В качестве первого шага, чтобы облегчить чтение этих дополнительных таблиц, включите компактный режим в инспекторе. Это позволит каждой таблице отображать больше информации.
Затем добавьте читаемые имена столбцов и типы столбцов в каждую таблицу. Просто выберите таблицу на холсте, затем выберите столбец в инспекторе и присвойте ему имя и тип. Например, измените заголовок столбца invoice_amount на Amount и сделайте его типом столбца USD (dollars).
В Retool есть много возможностей сделать эти таблицы сверкающими, но с этими незначительными изменениями ваше приложение должно быть простым в использовании.

Теперь у вас есть единое представление приложения для клиентов со всеми вашими ключевыми данными о клиентах в одном чистом окне.

Запись в Airtable

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

Чтобы добавить эту функцию, вы сначала настроите компоненты, а затем подключите данные.

В этом случае вы воспользуетесь простым модальным окном для сбора деталей задачи.

На данный момент Sync Inc обеспечивает одностороннюю синхронизацию от Airtable до Postgres. Чтобы создать новую задачу в Airtable, вы выполните a PUT для Airtable API. Затем, поскольку Sync Inc синхронизирует ваши данные в режиме реального времени, данные будут поступать из Airtable через вашу базу данных Sync Inc Postgres в ваше приложение Retool в течение нескольких секунд.

Добавить модальный

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

Вы можете сделать кнопку зеленой с текстом «Новая задача».
Теперь давайте создадим форму в модальном окне для сбора сведений о новой задаче.

При нажатии на кнопку «Новая задача» появится модальное окно. Модальное окно не обязательно должно быть огромным, поэтому вы можете изменить высоту модального окна 350pxв инспекторе.

Теперь перетащите несколько компонентов в модальное окно:

  • Текстовый компонент, который говорит Add a new task
  • Компонент ввода текста с меткой Task
  • Компонент селектора даты и времени с меткой Due Date
  • Выпадающий компонент с меткой Status. Установите значения и значения на дисплее будет следующий массив: ["Not Started", "In Progress", "Complete", "On Hold"].
  • Две кнопки внизу. Один что читает, Saveа другой Cancel.
К концу модальное окно должно выглядеть примерно так:

Подключите модальный

Во-первых, убедитесь, что пользователь может закрыть модальное окно:

  1. Откройте нижнюю панель и нажмите, чтобы создать новый запрос.
  2. Для ресурса выберите Run JS code (javascript)
  3. Введите modal1.close() запрос и сохраните его как close_modal.
Запускать close_modal запрос, когда пользователь закрывает модальное окно или нажимает кнопку отмены.
Затем давайте инициируем создание новой задачи, когда пользователь нажимает кнопку «Сохранить».

Для этого нам сначала нужно добавить API Airtable в качестве ресурса.

Щелкните значок Retool в верхнем левом углу и выберите Ресурсы.
На странице "Ресурсы" нажмите синюю кнопку "Создать новый" , а затем выберите "REST API" из опций.
Настройте свой API Airtable:

  • Назовите API Airtable API - Customer Success
  • Чтобы получить базовый URL-адрес, перейдите по адресу https://airtable.com/api и выберите базу Customer Success Management. В середине страницы вы увидите свой базовый идентификатор (тот же, который вы использовали для Sync Inc) зеленым цветом. Просто добавьте этот базовый идентификатор к этому URL-адресу: https://api.airtable.com/v0/{YOUR_BASE_ID}
  • Затем получите свой ключ API со страницы своей учетной записи Airtable и добавьте эти два заголовка:
    • Авторизация: предъявитель {YOUR_API_KEY}
    • Тип содержимого: приложение /json
Затем нажмите синюю кнопку «Создать ресурс»
Вернитесь в свое приложение, откройте нижнюю панель и щелкните, чтобы создать новый запрос следующим образом:

  • В качестве ресурса выберите только что созданный ресурс API Airtable.
  • В качестве типа действия выберите POST и введите Task%20Manager(это%20 версия пробела для URL-адресов)
  • Для тела выберите Raw и введите следующий JSON:
'{
  "records": [
    {
      "fields": {
        "Status": "{{select1.value}}",
        "Due Date": "{{datetimepicker1.formattedString}}",
        "Account": [
          "{{table.selectedRow.data.id}}"
        ],
        "Task name": "{{textinput2.value}}"
      }
    }
  ]
}'
Тело этого запроса API создает новую запись в Task Manager таблице. Детали задачи извлекаются из значений, введенных в модальном окне.

Щелкните Сохранить и назовите запрос ceate_new_task.
Когда пользователь нажимает кнопку «Сохранить» в модальном окне, мы хотим создать новую задачу, закрыть модальное окно и затем обновить данные на странице.

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

Щелкните, чтобы создать новый запрос и выберите его Run JS Code (javascript)в качестве ресурса. Затем введите этот код:
create_new_task.trigger();
modal1.close();
setTimeout(() => list_tasks.trigger(), 5000);
  1. Первая строка запускает новую задачу.
  2. Вторая строка закрывает модальное окно.
  3. Третья строка ждет 5 секунд, а затем извлекает свежие данные из Sync Inc.
Нажмите кнопку «Сохранить» и назовите этот запрос run_modal:
Теперь давайте подключим этот новый запрос к модальному. Мы хотим инициировать run_modal запрос, когда пользователь нажимает кнопку сохранения. Итак, откройте модальное окно и нажмите кнопку «Сохранить». В инспекторе выберите «Run a query по щелчку». Выберите run_modal из раскрывающегося списка.
Последний шаг! Проверьте это. Откройте модальное окно и создайте задачу. Щелкните кнопку сохранения. Модальное окно закроется, и после небольшой задержки появится ваша новая задача ✨

Теперь, благодаря мощи SQL, вы можете в кратчайшие сроки создавать приложения на основе данных Airtable.

Заказать no code разработку

После уточнения деталей мы можем приступить к вашему проекту
Made on
Tilda