Этот репозиторий содержит весь исходный код виджета. Для его установки обратитесь к соответствующей секции документации. Живой пример использования виджета можно посмотреть по ссылке.
Существует 2 способа установки виджета.
Первый способ заключается в использовании CDN-скрипта. CDN-скрипт является самостоятельным проектом и зависит от текущего репозитория. Его исходный код можно посмотреть здесь.
Итак, следуйте следующей инструкции:
- Открыть или создать новый файл index.html
- В тег
<body>вставить следующие два тега:
<div id="glasses-quiz-widget" data-source="https://example.com/"></div>
<script src="https://wardxela.github.io/optimax-widget-cdn/bootstrap.js"></script>Где https://example.com/ - адрес хоста, используемый для генерации конечного адреса.
В результате вы получите рабочий виджет на вашем сайте. Вам не стоит переживать о подключении файлов стилей и шрифтов - скрипт сделает это за вас.
Второй способ требует Node.js версии v16.14.0 и системы контроля версий GIT, предварительно установленные на вашей системе.
Я не рекомендую использовать данный способ установки, если вы не собираетесь изучать исходный код приложения.
- Открыть консоль в папке, где вы храните проекты (например,
Projects) git clone https://github.com/wardxela/optimax-widget.gitcd optimax-widgetnpm install
В результате вышеперечисленных действий вы получите директорию со всем исходным кодом проекта, а также зависимости, хранящиеся в папке node_modules.
Чтобы увидеть виджет в действии, можно воспользоваться командой npm start.
Она запустит локальный сервер разработчика, что позволит удобно изучать и тестировать виджет.
Команда npm run build скомпилирует все файлы TypeScript, Scss и соберёт их в отдельную директорию build. Вероятнее всего данная команда вам не пригодится, так как она подразумевает использование проекта как SPA, что не соответствует требованиям задания.
Во время разработки я использовал следующий стек технологий:
- TypeScript
- SCSS
- react
- react-dom
- create-react-app