В этом уроке мы собираемся использовать Widgg для развертывания виджета Hello World React в Интернете. В конце этого урока у нас будет две строки для копирования и вставки на любой сайт, чтобы там отображался виджет.
Widgg — это проект, направленный на облегчение жизни разработчиков при развертывании виджетов в Интернете. Инструмент CLI создает файлы javascript и css и загружает их в CDN, чтобы они были доступны отовсюду и быстро.
Во-первых, нам нужно будет создать организацию в Widgg. Затем загрузите и установите инструмент CLI. Затем создайте виджет hello world, а затем разверните его.
Несколько слов об организациях и аккаунтах в Widgg
В Widgg есть два типа сущностей: организация (Org) и учетная запись. Организация разрабатывает виджеты, а Пользователь размещает виджет на своем сайте. Организация может иметь несколько учетных записей и иметь одну учетную запись по умолчанию при создании, которая является своего рода демонстрационной учетной записью. Он имеет то же имя и домен, что и Org. Когда мы создаем и организовываем, автоматически создается учетная запись по умолчанию.
Создание организации в Widgg
Перейдите в Widgg, введите свой адрес электронной почты в поле Получить ранний доступ и нажмите кнопку:
Зайдите в свою электронную почту и проверьте, не отправил ли вам электронное письмо Widgg.
Нажмите на ссылку для регистрации в полученном электронном письме:
Заполните форму и выберите пароль. Если вы не представляете организацию, просто придумайте что-нибудь, это не имеет большого значения. Однако выбранный вами пароль важен, вы будете использовать его позже.
Вы автоматически войдете в панель инструментов Widgg:
Как видите, мы создали Аккаунт по умолчанию.
Работа с интерфейсом командной строки
На панели инструментов нажмите «CLI» слева и загрузите CLI.
В настоящее время Widgg поддерживает только Mac, но следите за поддержкой Windows на этом канале Discord.
Следуйте инструкциям на панели инструментов Widgg: установите Python3, Yarn и используйте диспетчер пакетов Python3 pip3 для установки файла «whl», который вы скачали с панели инструментов (замените 0.3.4 на версию, которую вы скачали):
brew install python3 brew install yarn pip3 install widgg-0.3.4-py3-none-any.whl
После этих шагов инструмент Widgg CLI будет доступен из командной строки в любом месте. Чтобы начать использовать инструмент, войдите в систему, указав адрес электронной почты и пароль, который вы выбрали:
widgg login
Теперь вы готовы создать и развернуть свой виджет Hello World React. Перейдите в локальный каталог разработки, создайте виджет, перейдите во вновь созданный каталог и разверните виджет в Интернете:
widgg create --name hello-world-react --tech react cd hello-world-react widgg deploy
Это создало шаблон Hello World в React в каталоге hello-world-react. Вы можете изменить его по своему усмотрению. Чтобы увидеть результаты, снова запустите widgg deploy. Теперь вы спросите, где я могу увидеть результаты? Ну, на каждой живой странице, если это локальный файл index.html на вашем компьютере или jsfiddle. Вам просто нужно запустить:
widgg dist
Скопируйте две строки html на свою html-страницу, и у вас есть виджет. Нет необходимости изменять их после развертывания, просто обновите страницу.
Если вы когда-нибудь застрянете, запуск widgg -h даст вам подробную помощь. Вы также можете обратиться к нам на этом канале Discord и задать любой вопрос или оставить отзыв.
Удачного кодирования!