03.06.2019 10:58
andrei_anisimov 2 2600 Источник
Мы добавили новую экспериментальную возможность в 8base CLI (Command Line Interface), которая генерирует готовое приложение на React из вашей модели данных. Это очень удобно для начала работы с GraphQL и React, а также для быстрого создания пользовательского интерфейса приложения. Похоже на скаффолдинг в Ruby-on-Rails.

Созданное приложение основано на Create React App, использует Apollo Client для GraphQL запросов, включает в себя аутентификацию на основе Auth0, а также возможность загрузки файлов.

Как это работает


Нужно сделать несколько простых шагов:
  1. Определите вашу модель данных в 8base,

  2. Установите 8base CLI и используя npm и запустите 8base login,
  3. Выполните команду 8base generate app ${YOU_APP_NAME} для генерации шаблона приложения,
  4. Запустите 8base generate scaffold ${TABLE_NAME} для генерации CRUD UI выбранной таблицы данных (вы можете повторить этот шаг для каждой таблицы, которую вы хотите добавить),
  5. Наконец выполните yarn install && yarn start, чтобы запустить приложение.

Гифка, которая визуально показывает выполнение данных шагов в терминале:



Итог


Вот пример сгенерированного React приложения:



Буду рад обратной связи.
Больше информации здесь.
P.S. Сейчас платформа 8base находится в стадии бета-тестирования и полностью бесплатна.

Комментарии (2)


  1. vitalvas
    04.06.2019 23:57
    #20244190

    На существующем GraphQL будет работать?


    1. andrei_anisimov Автор
      05.06.2019 00:23
      #20244282

      К сожалению GraphQL схема не содержит достаточно информации для полного построения интерфейса. Например:


      • Она не содержит информации по валидации, формату и прочей метадате полей.
      • Какие GraphQL типы являются таблицами, а какие нет.
      • Любое GraphQL API не гарантирует наличие фильтров, сортировки и пагинации.
      • Не гарантирует наличие специального поля (_description в случае 8base), которое позволяет получить строковое представление записи для отображения связанных записей.

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