owlet
1.0.0
Owlet es una colección de actividades autoguiadas basadas en la web diseñadas para estudiantes de secundaria y secundaria para aprender habilidades tecnológicas a través de la exploración creativa. Estas diapositivas explican la motivación detrás del proyecto.
Generado con Luminus versión 2.9.11.68
lein run
lein figwheel
lein auto sassc once
Navegue a http: // localhost: 3000/
Asegúrese de tener una versión reciente del kit de desarrollo Java. Si no, descargue el instalador de la página de Oracle Descargas. Seleccione Aceptar Acuerdo de licencia en la parte superior del Panel para la última versión, luego haga clic en el nombre de archivo para su plataforma, por ejemplo , JDK-8U112-MACOSX-X64.DMG . Vaya a su carpeta de descargas, abra el archivo .dmg y siga las instrucciones. Para verificar, ingrese java -version en una terminal. Deberías ver algo como lo siguiente:
java version "1.8.0_112"
Java(TM) SE Runtime Environment (build 1.8.0_112-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16, mixed mode)
Tenga en cuenta cómo la versión, en este caso "112", coincide con el archivo que descargó.
También necesitará los servicios públicos de línea de comandos git , lein y rlwrap instalados en su sistema. En una Mac, la forma más fácil de obtenerlos es instalar primero Homebrew, luego en una línea de comandos de terminal, ejecutar esto:
brew install git leiningen rlwrap
Finalmente, el compilador Sassc
brew install sassc
Ahora, para copiar el código de Owlet en su máquina, primero cd a donde desea que sea el directorio de Owlet, luego clone este repositorio:
git clone https://github.com/codefordenver/owlet.git
Ahora, si hace ls , debería ver un nuevo directorio, owlet . Ve allí:
cd owlet
Para trabajar en este proyecto, todo lo que realmente necesita es una terminal, un navegador y cualquier editor de texto. Sin embargo, hay mucho que decir para usar el complemento cursivo en la idea IntelliJ de JetBrain. Dado que comprende cómo las diferentes partes de su código y sus dependencias se conectan juntas, puede hacer refactorización de código, finalización de código inteligente, navegación con un solo clic a una definición variable, ver instantáneamente las documentos y capturar errores de aridad y ortografía. Lo mejor de todo, fuera de la caja , puede ejecutar un rint - l oop (repler) que conozca su código. Experimente rápidamente con su Live, ejecutando código en la línea de comandos de Repl, cargue un pequeño cambio en los espacios de nombres replica, cambie o ejecute pruebas unitarias, todo con solo un par de teclas.
Para comenzar con IntelliJ Idea y cursive, siga las instrucciones de instalación cursiva. Luego importe un proyecto de Leiningen existente, a saber, Owlet.
Para configurar el cursivo replicada a nuestra aplicación en ejecución, necesitamos crear una configuración de ejecución/depuración.
Abra IntelliJ y seleccione el elemento del menú Ejecutar -> Editar configuraciones ...
Haga clic en el botón + en la parte superior izquierda y elija Clojure Repl .
Elija el control remoto .
Ingrese un nombre en el campo Nombre (por ejemplo, Owlet nRepl ).
Elija el botón de radio Use el puerto de Leiningen Repl .
Descargue el cuadro Active la ventana de herramienta en la parte inferior.
Haga clic en el botón Aceptar para guardar su configuración REPL.
Ahora, suponiendo que tenga un Clojure NREPL iniciado en el terminal (consulte Ejecutando la aplicación, arriba), puede conectarlo desde cursive en cualquier momento:
Vaya a Ejecutar -> Ejecutar ... , luego seleccione su configuración replica (llamada "Owlet nrepl" arriba). Aparecerá una nueva ventana de herramienta de replicación cursiva. Debe ver inmediatamente esto en la ventana de replica:
Connecting to remote nREPL server...
Clojure 1.8.0
Ahora que estamos conectados al Clojure NREPL, cree un Clojurescript replicando evaluando el siguiente código Clojure en el cuadro de texto en la parte inferior de la ventana de la herramienta REPL:
(figwheel-sidecar.repl-api/cljs-repl)
Deberías ver algo como esta salida:
...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil
Ahora, dado que solo estamos "subiendo" al mismo servidor de higuera, cuando modifica y guarda un archivo .cljs, Figwheel lo notará y lo recargará automáticamente. Desde el Reply, puede controlar la aplicación tal como se está ejecutando, ya que está evaluando el código en el contexto de la aplicación en vivo. Además, tiene acceso a las herramientas de replicación cursiva que interactúan con el editor, como:
Cambiar repl ns al archivo actual
Cargar archivo en replica
Enviar formulario antes del careto para replicar
Ejecutar pruebas en NS actual en replica
Agregar nuevo comando replica
Por ejemplo, una buena idea sería agregar su propio comando REPL para evaluar el código cljs-repl , arriba. Una vez que tenga una ventana REPL, seleccione Herramientas -> REPL -> Agregue el nuevo comando REPL . Dé un nombre a su comando, seleccione el botón Ejecutar Radio e ingrese (figwheel-sidecar.repl-api/cljs-repl) como se indicó anteriormente. Seleccione la casilla de verificación específica del proyecto y Aceptar . Luego, para facilitar el acceso, puede definir un atajo de teclado de su elección en Idea IntelliJ -> Preferencias ... -> KeyMap .
Una vez que haya ejecutado script/figwheel-repl.sh , se está ejecutando un nreple nreplure, y puede "meter" para obtener otro clojure replic, luego otro clojurescript, similar a cómo lo hicimos en cursiva:
Confirme que su NREPL iniciado por script/figwheel-repl.sh todavía se está ejecutando.
Desde un terminal, ejecute el siguiente comando:
lein repl :connect
Ahora debería tener un Clojure Replay con el aviso, owlet.server=> .
Al igual que con Cursive, ingrese el siguiente código Clojure en el aviso:
(figwheel-sidecar.repl-api/cljs-repl)
Deberías ver la salida como esta:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Con un poco de configuración adicional, puede trabajar en Owlet utilizando el increíble entorno de depuración del navegador Dirac Devtools. Todavía ejecutará la aplicación con Figwheel, por lo que los archivos modificados aún se compilarán y se cargarán automáticamente, pero el Browser REPL se ejecutará en DIRAC. El entorno Dirac en el navegador es en realidad una extensión de Chrome que consiste en una horquilla personalizada de Devtools de Chrome, la herramienta de depuración JavaScript integrada en Chrome. Sin embargo, utiliza características solo proporcionadas por la última versión de Chrome Devtools, por lo que se requiere la versión canaria de Chrome.
Si el proceso script/figwheel-repl.sh iniciado anteriormente se está ejecutando, entonces deténlo (control-d).
Descargue e instale la aplicación de escritorio, Google Chrome Canary.
Si lo abrió, deje de Chrome Canary.
En el terminal, asegúrese de que el directorio de trabajo actual sigue siendo el que contiene este archivo ReadMe.md.
En la línea de comando, ejecutar
script/start-chrome-canary.sh
Verá una ventana de Chrome vacía con ubicación http: // localhost: 3000/. Está vacío porque aún no hemos comenzado el servidor Owlet.
Por cierto, este comando es cómo necesitarás iniciar el navegador cada vez que trabajes en Owlet con Dirac. Vea abajo.
Instale la extensión Dirac DevTools, otorgándole acceso a sus datos. Debería ver un pequeño icono verde a la derecha de la barra de direcciones en la ventana.
Dado que comenzó Chrome Canary con el script anterior, la extensión se guardará en el directorio
.dirac-chrome-profile/, por lo que instalarlo o cambiar algunas configuraciones no afectará (ni se verá afectada por) ninguna configuración o extensiones existentes que pueda tener en Chrome cuando se inicia normalmente, digamos que hace doble clic en la cromo o la icono de cromo.
Ahora que Chrome Canary y la extensión Dirac DevTools se instalan localmente en el directorio del proyecto Owlet, usemos con Owlet.
En el terminal, asegúrese de que el directorio de trabajo actual sigue siendo el que contiene este archivo ReadMe.md.
Como se indicó anteriormente, inicie la aplicación con Figwheel, pero esta vez usando la opción --dirac :
script/figwheel-repl.sh dirac
Cuando ve lo siguiente, el NREPL ha comenzado y el servidor Dirac está esperando el cliente del navegador:
...
owlet.server=>
Dirac Agent v0.8.8
Connected to nREPL server at nrepl://localhost:8230.
Agent is accepting connections at ws://localhost:8231.
Si Chrome Canary aún no se está ejecutando, comience ejecutando lo siguiente en una ventana de terminal separada:
script/start-chrome-canary.sh
Ahora debería ver la aplicación Owlet que se ejecuta en la ventana que aparece.
Una vez que comience a Chrome Canary de esta manera, puede dejarlo abierto, incluso si reinicia la aplicación Owlet y el Repl. Como siempre, puede recargar limpiamente la aplicación con View-> Force recargar esta página (Comando-Shift-R).
Haga clic en el icono de la barra de herramientas Dirac Devtools. La ventana de la consola Dirac Devtools debería aparecer. Tenga en cuenta las instrucciones sobre el cambio entre ClojureScript y JavaScript REPLS (Control-,). Si ve el mensaje de error, "CLJS DevTools: algunos formatúas personalizadas no se renderizaron", entonces simplemente vea-> Force recargar esta página (Comando-Shift-R).
Aunque puede estar en el hábito de escribir la opción de comandos, ¡no! No abra el Chrome Devtools regular.
Pruebe el Nice Repl en la pestaña de la consola y vea cómo los paréntesis se equilibran automáticamente, las claves de flecha lo llevan arriba y abajo en el historial de replica, los símbolos se completan a medida que escribe, la salida se colorea los datos de edn (no objetos JS obscuros), las estructuras de datos se presentan como widgets colapsibles para guardar espacio ordenadamente, ¡y más!
Prueba el depurador también. Funciona al igual que el depurador de Chrome DevTools, excepto que el código fuente es tanto Clojurescript como el JavaScript que compila. En la pestaña Fuentes , profundice hasta arriba -> Localhost: 4000 -> JS/Compilado -> Out , haga clic en un archivo de interés .Cljs Owlet, luego establezca un punto de interrupción que se golpeará cuando haga algo en la GUI de la aplicación. Cuando la aplicación se detenga en el punto de interrupción, mire las variables actuales en la sección de alcance del depurador. Luego, vuelva a la pestaña de la consola , ingrese los formularios de Clojurescript en el repl. Serán evaluados en el contexto del punto de interrupción. Haga clic en el botón de reanudar o la tecla F8 para dejar que la aplicación continúe.
Con Dirac, no tienes que renunciar a cursivo. Justo cuando nos conectamos con los CLJs de la rueda de higos repl, arriba, podemos conectarnos con Dirac Repl.
Si tiene una replica en cursiva, deténgalo haciendo clic en X en su barra de herramientas.
Vaya a Ejecutar -> Ejecutar ... y seleccione la configuración replicada que creamos anteriormente, como antes, debe ver inmediatamente esto en la ventana:
Connecting to remote nREPL server...
Clojure 1.8.0
Ahora, como antes, estamos conectados a Clojure NREPL, pero esta vez nos conectaremos al Dirac Clojurescript Repl. Evalúe el siguiente código Clojure en el cuadro de texto en la parte inferior de la ventana de la herramienta Reply:
(dirac! :join)
Deberías ver algo como esta salida:
...
Your current nREPL session is a joined Dirac session (ClojureScript) which targets 'the most recent Dirac session'
...
To quit, type: :cljs/quit
=> nil
Como se mencionó anteriormente, es una buena idea agregar un nuevo comando Repl y definir un atajo de teclado para escribir el comando (dirac! :join) para usted.
Puede conectarse con Dirac Repl, tal como lo hicimos con la rueda de higos Reple, con solo una pequeña diferencia. Por supuesto, primero asegúrese del proceso que comenzó con script/figwheel-repl.sh dirac todavía se está ejecutando, luego solo siga las instrucciones anteriores, hasta el último paso. En cambio, haz este:
Al igual que con Cursive, ingrese el siguiente código Clojure en el aviso:
(dirac! :join)
Deberías ver la salida como esta:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Cuando evalúa una expresión en el Dirac ClojureScript REPL, el resultado se mostrará después de => en la ventana Terminal o de Reply cursiva, como se esperaba. Sin embargo, los efectos secundarios como la salida impresa o las trazas de la pila de excepciones se mostrarán solo en la consola Dirac DevTools . Esto puede ser confuso, especialmente si ha insertado una declaración de impresión y no ve nada, o no se da cuenta de que algo se rompió porque no ves una excepción. Debes mirar en la consola Dirac Devtools. La consola reflejará la expresión que ingresó, su resultado y cualquier efecto secundario impreso. Así que solo mantén a Chrome Canary cerca y la ventana de Dirac Devtools a mano.
La licencia ISC
Código de derechos de autor (c) para Denver y contribuyentes
El permiso para usar, copiar, modificar y/o distribuir este software para cualquier propósito con o sin tarifa se otorga, siempre que el aviso de derechos de autor anterior y este aviso de permiso aparezcan en todas las copias.
El software se proporciona "tal cual" y el autor renuncia a todas las garantías con respecto a este software, incluidas todas las garantías implícitas de comerciabilidad y estado físico. En ningún caso, el autor será responsable de ningún daño especial, directo, indirecto o consecuente o daños que resulten de la pérdida de uso, datos o ganancias, ya sea en una acción de contrato, negligencia u otra acción tortuosa, que surja de o en relación con el uso o rendimiento de este software.
