datacamp light
v2.5.0
Дорожная карта | Документы
Добавьте скрипт на свою HTML-страницу (пример есть в examples/standalone-example.html ):
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >Вот и все! Если ваше приложение добавляет упражнения DataCamp Light после начальной загрузки страницы (например, в приложениях React), вызовите следующую функцию, чтобы инициализировать эти новые упражнения:
initAddedDCLightExercises ( ) ;Вы также можете использовать библиотеку JavaScript в ответе stackoverflow.com, включив тег упражнения и сценария в качестве фрагмента.
После подключения библиотеки JavaScript вы можете начать писать блоки HTML в формате, указанном ниже. Они будут динамически преобразованы в упражнения.
< div data-datacamp-exercise data-lang =" r " >
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code >
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code >
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code >
< div data-type =" hint " > Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > . </ div >
</ div > Как мы видим в примере, все упражнение содержится в одном элементе <div> с двумя атрибутами данных data-datacamp-exercise и data-lang . Первый атрибут data-datacamp-exercise указывает, что <div> следует рассматривать как упражнение DataCamp Light, а другой атрибут data-lang указывает, какой язык программирования следует использовать. Принятые значения для data-lang — r и python . Существует также необязательный атрибут data-height , который может устанавливать высоту элемента div в px (минимальная высота — 300px ) или устанавливать размер в соответствии с количеством строк примера кода: data-height="auto" .
Код предварительного упражнения выполняется при инициализации сеанса R/Python. Вы можете использовать его для предварительной загрузки наборов данных, пакетов и т. д. для студентов. Чтобы указать это, определите тег <code> , содержащий ваш код инициализации, и установите для атрибута data-type pre-exercise-code следующим образом:
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > В нашем примере мы инициализируем (довольно бесполезную) переменную b значением 6 .
Чтобы установить пример кода, который изначально будет присутствовать в редакторе кода, необходимо определить тег <code> , содержащий пример кода, а атрибуту data-type следует установить значение sample-code следующим образом:
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >Наш пример просто показывает пару комментариев вместе с несколькими символами новой строки. Библиотека JavaScript также позаботится об удалении начальных отступов, поэтому не стоит об этом беспокоиться.
Чтобы установить код решения, необходимо определить тег <code> , содержащий код решения, а атрибут data-type должен быть установлен в solution следующим образом:
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > Тест правильности отправки используется для проверки того, правильно ли код, отправленный пользователем, решает упражнение. Подробную информацию об этом вы можете посмотреть в документации по R и документации по Python. Способ указания SCT — определить тег <code> , содержащий ваш код SCT, и установить атрибут data-type в sct следующим образом:
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > В нашем примере первая строка проверяет, объявил ли пользователь переменную a и соответствует ли ее значение значению кода решения. Вторая строка проверяет, вызывается ли функция print , и, наконец, указывается сообщение об успехе, которое будет показано пользователю после успешного завершения упражнения.
Чтобы указать подсказку, необходимо определить тег, содержащий подсказку, а атрибут data-type должен быть установлен в значение hint следующим образом:
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > Подсказка может содержать, например, теги <code> , как в нашем примере.
data-show-run-button , чтобы кнопка «Выполнить» всегда отображалась, чтобы ваши посетители могли опробовать код, не отправляя его.data-no-lazy-loading чтобы загружать все упражнения сразу после загрузки страницы, вместо того, чтобы ждать, пока пользователь прокрутит их вниз. Это может вызвать проблемы с производительностью, но может решить проблемы совместимости со страницами на основе iFrame.[ data-datacamp-exercise ] {
visibility : hidden;
} div с атрибутом data-datacamp-exercise преобразуются в минимальную версию обучающего интерфейса DataCamp (на самом деле вы можете посетить сайт www.datacamp.com). Он содержит менеджер сеансов, который подключается к серверам DataCamp для обеспечения сеанса R или Python, как если бы вы работали в своей локальной системе. Вычислительные среды R и Python включают наиболее популярные пакеты:
Если вы хотите использовать пакет, который недоступен, создайте проблему, и мы сможем его установить (невозможно установить пакеты во время выполнения).
Если вы хотите внести свой вклад, отлично! Вы можете начать с чтения этого раздела файла readme, чтобы получить представление о технических деталях этого проекта. По большей части он структурирован как стандартный проект React/Redux (написанный на TypeScript), поэтому, если вы не знакомы с одним из них, возможно, вам захочется немного почитать.
Чтобы разработать DataCamp Light, вам необходимо запустить приложение локально. Этот репозиторий включает в себя несколько примеров упражнений для его тестирования.
Начните с клонирования этого репозитория, установки зависимостей и запуска сервера разработки. Когда вы внесете изменения, страница перезагрузится с новым кодом.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
vendor/ содержит минимизированный код некоторых внутренних пакетов DataCamp, которые в настоящее время не размещены публично.
Прежде чем приступить к реализации каких-либо тестов, прочтите эти два документа:
Тестовые файлы называются {moduleName}.spec.js .
npm test Поскольку редуктор — это чистая функция, протестировать его не так уж и сложно. Вам нужно использовать семя для создания фиктивного состояния. Затем вы можете передать его в редуктор в качестве аргумента вместе с действием, которое хотите протестировать.
Используйте тестирование моментальных снимков, чтобы убедиться, что компоненты не изменяются случайно (пример см. в src/components/Footer.spec.ts ). Другие тесты можно выполнить для компонентов, внутри которых есть логика.
Тестирование промежуточного программного обеспечения немного сложнее, поскольку оно имеет побочные эффекты. Вы можете протестировать Epics с помощью фреймворка rxjs-marbles поскольку они преобразуют потоки Observable. Пример см. в src/autocomplete.spec.ts .
Мы используем Prettier, чтобы обеспечить единообразие форматирования. Это приведет к форматированию ваших файлов (JS, TS, CSS, JSON) с помощью перехватчика перед фиксацией. Если хотите, вы также можете вызвать prettier --write filename , чтобы обновить файл вручную.
Существуют также плагины для редакторов, такие как prettier-vscode , которые могут автоматически форматировать при сохранении.
Рекомендую установить в свой редактор плагины для этих шашек. TSLint и Stylelint также запускаются в команде разработки, поэтому вы также увидите их предупреждения.
Мы использовали это соглашение о сообщениях о фиксации, потому что в нем есть смайлики, а смайлики — ?.
Разработка в основном ведется в ветке development .
Фиксация ветки development запускает сборку в среде разработки DataCamp и создает сборку здесь:
https://cdn.datacamp.com/dcl-react-dev.js.gz
Затем фиксируется beta ветвь, отправляющая выпуск в промежуточную среду:
https://cdn.datacamp.com/dcl-react-staging.js.gz
Наконец, когда мы создаем выпуск, обновление отправляется в производственную среду. Это должна быть стабильная версия DataCamp Light:
https://cdn.datacamp.com/dcl-react.js.gz
Фиксация этой ветки запускает сборку, которая развертывается в среде разработки DataCamp. Коммиты в основную ветку beta создаются и развертываются в промежуточной версии. При создании выпуска эта сборка развертывается в рабочей среде.
TypeScript, конечно. Убедитесь, что вы установили соответствующий плагин для своего редактора, если он не поставляется с ним.
redux-observable для наблюдаемого промежуточного программного обеспечения
typescript-fsa для простых и безопасных по типу создателей действий
typescript-fsa-reducers для сверхчистых редукторов
