datacamp light
v2.5.0
Hoja de ruta | Documentos
Agregue el script a su página HTML (hay un ejemplo en examples/standalone-example.html ):
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >¡Eso es todo! Si su aplicación agrega ejercicios DataCamp Light después de la carga inicial de la página (por ejemplo, en aplicaciones React), llame a la siguiente función para inicializar esos nuevos ejercicios:
initAddedDCLightExercises ( ) ;También puede utilizar la biblioteca JavaScript en una respuesta de stackoverflow.com incluyendo la etiqueta de ejercicio y secuencia de comandos como un fragmento.
Después de incluir la biblioteca JavaScript, puede comenzar a escribir bloques HTML en el formato siguiente. Estos se convertirán dinámicamente en ejercicios.
< 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 > Como podemos ver en el ejemplo, todo el ejercicio está contenido en un único elemento <div> con dos atributos de datos data-datacamp-exercise y data-lang . El primer atributo data-datacamp-exercise indica que <div> debe tratarse como un ejercicio DataCamp Light, mientras que el otro atributo data-lang especifica qué lenguaje de programación debe usarse. Los valores aceptados para data-lang son r y python . También hay un atributo opcional data-height que puede establecer la altura en px del div (la altura mínima es 300px ) o establecer el tamaño de acuerdo con la cantidad de líneas de código de muestra: data-height="auto" .
El código previo al ejercicio se ejecuta cuando se inicializa la sesión de R/Python. Puede usarlo para precargar conjuntos de datos, paquetes, etc. para estudiantes. La forma de especificar esto es definiendo una etiqueta <code> que contenga su código de inicialización y estableciendo el atributo data-type en pre-exercise-code como este:
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > En nuestro ejemplo inicializamos la variable b (bastante inútil) con el valor 6 .
Para configurar el código de muestra que estará presente inicialmente en el editor de código, se debe definir una etiqueta <code> que contenga el código de muestra y el atributo data-type se debe configurar en sample-code de esta manera:
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >Nuestro ejemplo simplemente muestra un par de comentarios junto con algunas líneas nuevas. La biblioteca JavaScript también se encarga de eliminar la sangría inicial, por lo que no hay necesidad de preocuparse por eso.
Para configurar el código de la solución, se debe definir una etiqueta <code> que contenga el código de la solución y el atributo data-type se debe configurar en solution de esta manera:
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > Se utiliza una prueba de corrección del envío para comprobar si el código enviado por el usuario resuelve correctamente el ejercicio. Para obtener información detallada sobre esto, puede consultar la documentación de R y la documentación de Python. La forma de especificar el SCT es definiendo una etiqueta <code> que contenga su código SCT y configurando el atributo data-type en sct de esta manera:
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > En nuestro ejemplo, la primera línea verifica si el usuario declaró la variable a y si su valor coincide con el del código de la solución. La segunda línea verifica si se llama a la función print y, por último, se especifica un mensaje de éxito que se mostrará al usuario cuando el ejercicio se complete con éxito.
Para especificar una sugerencia, se debe definir una etiqueta que contenga la sugerencia y el atributo data-type debe configurarse para hint como esta:
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > Es posible que la sugerencia contenga, por ejemplo, etiquetas <code> como es el caso de nuestro ejemplo.
data-show-run-button para mostrar siempre el botón "Ejecutar", de modo que sus visitantes puedan probar el código sin enviarlo.data-no-lazy-loading para cargar todos los ejercicios tan pronto como se carga la página, en lugar de esperar a que el usuario se desplace hacia ellos. Esto puede causar problemas de rendimiento, pero puede solucionar problemas de compatibilidad con páginas basadas en iFrame.[ data-datacamp-exercise ] {
visibility : hidden;
} Los div con el atributo data-datacamp-exercise se convierten en una versión mínima de la interfaz de aprendizaje de DataCamp (para conocer la versión real, puede visitar www.datacamp.com). Contiene un administrador de sesión que se conecta a los servidores de DataCamp para proporcionar una sesión de R o Python como si estuviera trabajando en su sistema local. Los entornos informáticos R y Python cuentan con los paquetes más populares:
Si desea utilizar un paquete que no está disponible, cree un problema y podremos instalarlo (no es posible instalar paquetes en tiempo de ejecución).
Si quieres contribuir, ¡genial! Puede comenzar leyendo esta sección del archivo Léame para tener una idea de los detalles técnicos de este proyecto. En su mayor parte, está estructurado como un proyecto estándar de React/Redux (escrito en TypeScript), por lo que si no está familiarizado con uno de ellos, es posible que desee leer un poco.
Para desarrollar DataCamp Light, deberá ejecutar la aplicación localmente. Este repositorio incluye algunos ejercicios de ejemplo para probarlo.
Comience clonando este repositorio, instalando las dependencias e iniciando el servidor de desarrollo. A medida que realice cambios, la página se recargará con su nuevo código.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
La carpeta vendor/ incluye código minimizado de algunos paquetes internos de DataCamp que no están alojados públicamente en este momento.
Lea estos dos documentos antes de comenzar a implementar cualquier prueba:
Los archivos de prueba se denominan {moduleName}.spec.js .
npm test Dado que un reductor es una función pura, no es tan complicado probarlo. Tienes que usar una semilla para crear un estado simulado. Luego puedes pasarlo al reductor como argumento junto con la acción que deseas probar.
Utilice pruebas de instantáneas para asegurarse de que los componentes no cambien por accidente (consulte src/components/Footer.spec.ts para ver un ejemplo). Se pueden realizar otras pruebas para componentes que tienen lógica en su interior.
Probar el middleware es un poco más complicado ya que tiene efectos secundarios. Puede probar Epics con el marco rxjs-marbles ya que transforman transmisiones observables. Consulte src/autocomplete.spec.ts para ver un ejemplo.
Usamos Prettier para mantener el formato consistente. Esto formateará sus archivos (JS, TS, CSS, JSON) en un gancho de confirmación previa. Si lo desea, también puede llamar prettier --write filename para actualizar un archivo manualmente.
También hay complementos para editores, como prettier-vscode que pueden formatear automáticamente al guardar.
Recomiendo instalar complementos para estas fichas en su editor. TSLint y Stylelint también se ejecutan en el comando de desarrollo, por lo que también verá aparecer sus advertencias allí.
Hemos estado usando esta convención de mensajes de confirmación porque tiene emoji y los emoji son ?.
El desarrollo se realiza principalmente en la rama development .
Los compromisos con la rama development desencadenan una compilación en el entorno de desarrollo de DataCamp y producen una compilación aquí:
https://cdn.datacamp.com/dcl-react-dev.js.gz
A continuación, los compromisos con la rama beta envían un lanzamiento al entorno de prueba:
https://cdn.datacamp.com/dcl-react-staging.js.gz
Finalmente, cuando creamos una versión, se envía una actualización al entorno de producción. Esta debería ser una versión estable de DataCamp Light:
https://cdn.datacamp.com/dcl-react.js.gz
Las confirmaciones en esta rama desencadenan una compilación que se implementa en el entorno de desarrollo de DataCamp. Los compromisos con la rama principal, beta , se crean y se implementan en etapa de prueba. Cuando se crea una versión, esa compilación se implementa en producción.
Mecanografiado, por supuesto. Asegúrese de instalar un complemento apropiado para su editor, si no viene con uno.
redux-observable para middleware observable
typescript-fsa para creadores de acciones fáciles y con seguridad de escritura
mecanografiado-fsa-reductores para reductores súper limpios
