owlet
1.0.0
OWLET ist eine Sammlung webbasierter selbst geführter Aktivitäten, die für Schüler der Mittel- und Oberstufe durch kreative Erkundung technologischen Fähigkeiten erlernen können. Diese Folien erklären die Motivation hinter dem Projekt.
Generiert mit Luminus Version 2.9.11.68
lein run
lein figwheel
lein auto sassc once
Navigieren Sie zu http: // localhost: 3000//
Stellen Sie sicher, dass Sie eine aktuelle Version des Java Development Kit haben. Wenn nicht, laden Sie das Installateur von der Oracle -Download -Seite herunter. Wählen Sie für die neueste Version die Lizenzvereinbarung oben im Panel und klicken Sie dann auf den Dateinamen für Ihre Plattform, z . B. JDK-8U112-MACOSX-X64.DMG . Gehen Sie zu Ihrem Download -Ordner, öffnen Sie die .dmg -Datei und befolgen Sie die Anweisungen. Um zu überprüfen, geben Sie java -version in ein Terminal ein. Sie sollten so etwas wie Folgendes sehen:
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)
Beachten Sie, wie die Version - in diesem Fall "112" - der von Ihnen heruntergeladenen Datei übereinstimmt.
Sie benötigen auch die auf Ihrem System installierten git -Versorgungsunternehmen, lein und rlwrap . Auf einem MAC ist der einfachste Weg, sie zu erhalten, darin, zuerst Homebrew zu installieren und dann in einer Terminal -Befehlszeile Folgendes auszuführen:
brew install git leiningen rlwrap
Schließlich der SASSC -Compiler
brew install sassc
Um den OWLET -Code auf Ihren Computer zu kopieren, ist die erste cd auf das Owlet -Verzeichnis, und klonen Sie dann dieses Repository:
git clone https://github.com/codefordenver/owlet.git
Wenn Sie nun ls tun, sollten Sie ein neues Verzeichnis, owlet , sehen. Gehen Sie dorthin:
cd owlet
Um an diesem Projekt zu arbeiten, brauchen Sie nur ein Terminal, ein Browser und jeden Texteditor. Es gibt jedoch viel zu sagen, dass es das Kursiv -Plugin in der Intellij -Idee von JetBrain verwendet hat. Da es versteht, wie sich die verschiedenen Teile Ihres Codes und deren Abhängigkeiten miteinander verbinden, können Sie Code Refactoring, Smart Code-Abschluss, Ein-Klick-Navigation zu einer Variablendefinition durchführen, Dokstrings sofort anzeigen und Arity- und Rechtschreibfehler fangen. Das Beste von allen ist, dass Sie nicht in der Schachtel ausführen können, um einen Teil des Rundes (Repl) auszuführen, der Ihren Code kennt. Experimentieren Sie schnell mit Ihrem Live, leiten Sie Code in der Befehlszeile der Repl. Laden Sie eine kleine Änderung in die Reply, Switch -Namespaces oder führen Sie Unit -Tests aus - alles mit nur ein paar Tastenanschlägen.
Befolgen Sie die Kursivinstallationsanweisungen, um mit Intellij Idea und Cursive zu beginnen. Importieren Sie dann ein bestehendes Leiningen -Projekt, nämlich Owlet.
Um die mit unserer laufende App verbundene Kursive zu konfigurieren, müssen wir eine Run/Debug -Konfiguration erstellen.
Öffnen Sie Intellij und wählen Sie Menüelement Ausführen -> Konfigurationen bearbeiten ...
Klicken Sie oben links auf die Schaltfläche + und wählen Sie Clojure Repl .
Wählen Sie Remote .
Geben Sie einen Namen in das Feld Name ein (z. B. Owlet nRepl ).
Wählen Sie den Optionsschalter. Verwenden Sie den LININGEN REP -Port .
Deaktivieren Sie das Fenster "Werkzeug" unten aktivieren .
Klicken Sie auf die Schaltfläche OK , um Ihre Repl -Konfiguration zu speichern.
Angenommen, Sie haben einen Clojure -NREPL im Terminal (siehe Anwendung oben), können Sie jederzeit vom Kursiv aus dem Kursiv anschließen:
Gehen Sie zu Run -> Run ... und wählen Sie dann Ihre Repl -Konfiguration ("Owlet NREPL" oben genannt). Es wird ein neues Fenster für kursives Reply -Werkzeug angezeigt. Sie sollten dies sofort im Replace -Fenster sehen:
Connecting to remote nREPL server...
Clojure 1.8.0
Erstellen Sie nun, da wir mit dem Clojure -NREPL verbunden sind, ein ClojureScript -Repl.
(figwheel-sidecar.repl-api/cljs-repl)
Sie sollten so etwas wie diese Ausgabe sehen:
...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil
Da wir jetzt nur auf denselben Figwheel -Server "eindringen", wird Figwheel, wenn Sie eine .clJS -Datei ändern und speichern, diese automatisch neu laden. Aus der Reply können Sie die App so steuern, wie sie ausgeführt wird, da Sie Code im Kontext der Live -App auswerten. Außerdem haben Sie Zugriff auf die kursiven Reply -Tools, die mit dem Editor interagieren, z. B.:
Schalten Sie die Repon ns auf die aktuelle Datei um
Datei in repl laden
Senden Sie das Formular vor der Pflege an Repl.
Führen Sie Tests in aktuellem NS in Repl aus
Neuen Repl -Befehl hinzufügen
Beispielsweise wäre eine gute Idee, Ihren eigenen Repl-Befehl hinzuzufügen, um den oben genannten cljs-repl -Code zu bewerten. Sobald Sie ein Replace -Fenster haben, wählen Sie Tools -> Repl -> Befehl neuem Repl hinzufügen . Geben Sie Ihrem Befehl einen Namen an, wählen Sie das Optionsfeld Execute aus und geben Sie ein (figwheel-sidecar.repl-api/cljs-repl) wie oben. Wählen Sie das projektspezifische Kontrollkästchen und OK . Für einen einfachen Zugriff können Sie eine Tastaturverknüpfung Ihrer Auswahl in der Intellij -Idee -> Einstellungen ... -> Keymap definieren.
Sobald Sie script/figwheel-repl.sh ausgeführt haben, wird ein Clojure-Nrepl ausgeführt, und Sie können "Jack in" in "Jack in" um eine weitere Clojure-Reply "zu erhalten, dann eine andere ClojureScript-Reply, ähnlich wie wir es in Kursiv gemacht haben:
Bestätigen Sie, dass Ihr NREPL mit script/figwheel-repl.sh noch ausgeführt wird.
Führen Sie aus einem Terminal den folgenden Befehl aus:
lein repl :connect
Sie sollten jetzt eine Clojure -Wiedergabe mit der Eingabeaufforderung haben, owlet.server=> .
Geben Sie wie bei Cursive den folgenden Clojure -Code an die Eingabeaufforderung ein:
(figwheel-sidecar.repl-api/cljs-repl)
Sie sollten die Ausgabe wie diese sehen:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Mit einem kleinen zusätzlichen Setup können Sie mit der Amazing Dirac Devtools -Browser -Debugging -Umgebung an Owlet arbeiten. Sie werden die App weiterhin mit Figwheel ausführen, sodass modifizierte Dateien weiterhin automatisch kompiliert und geladen werden. Die Browser -Reply wird jedoch in Dirac ausgeführt. Die Dirac -Umgebung im Browser ist tatsächlich eine Chromverlängerung, die aus einer individuellen Gabel von Chrom Devtools besteht, dem in Chrome integrierten JavaScript -Debugging -Tool. Es wird jedoch nur Funktionen verwendet, die nur von der neuesten Version von Chrome Devtools bereitgestellt werden, weshalb die Kanarische Version von Chrome erforderlich ist.
Wenn der oben begonnene script/figwheel-repl.sh -Prozess ausgeführt wird, stoppen Sie es (Control-D).
Laden Sie die Desktop -Anwendung, Google Chrome Canary, herunter und installieren Sie sie.
Wenn Sie es geöffnet haben, beenden Sie Chrom Canary.
Stellen Sie im Terminal sicher, dass das aktuelle Arbeitsverzeichnis nach wie vor das LEADME.MD -Datei enthält.
Führen Sie in der Befehlszeile aus
script/start-chrome-canary.sh
Sie sehen ein leeres Chromfenster mit Ort http: // localhost: 3000/. Es ist leer, weil wir den Owlet Server noch nicht gestartet haben.
In diesem Befehl müssen Sie übrigens den Browser starten, wenn Sie mit Dirac an Owlet arbeiten. Siehe unten.
Installieren Sie die Erweiterung Dirac Devtools und gewähren Sie den Zugriff auf Ihre Daten. Sie sollten ein wenig grünes Symbol rechts neben der Adressleiste im Fenster sehen.
Da Sie Chrome Canary mit dem obigen Skript gestartet haben, wird die Erweiterung tatsächlich im Verzeichnis gespeichert
.dirac-chrome-profile/, sodass das Installieren oder Ändern einiger Einstellungen weder alle vorhandenen Einstellungen oder Erweiterungen, die Sie in Chrom haben, nicht beeinträchtigt werden, wenn Sie das Chrom- oder Chrom-Canary-Icon doppelklicken.
Jetzt, da Chrome Canary und die Dirac Devtools -Erweiterung lokal im OWLET -Projektverzeichnis installiert sind, verwenden wir es mit Owlet.
Stellen Sie im Terminal sicher, dass das aktuelle Arbeitsverzeichnis nach wie vor das LEADME.MD -Datei enthält.
Starten Sie die App wie oben mit Figwheel, aber diesmal mit der Option --dirac :
script/figwheel-repl.sh dirac
Wenn Sie Folgendes sehen, hat der NREPL gestartet und der Dirac -Server wartet auf den Browser -Client:
...
owlet.server=>
Dirac Agent v0.8.8
Connected to nREPL server at nrepl://localhost:8230.
Agent is accepting connections at ws://localhost:8231.
Wenn Chrome Canary nicht bereits ausgeführt wird, starten Sie es, indem Sie Folgendes in einem separaten Terminalfenster ausführen:
script/start-chrome-canary.sh
Sie sollten nun die Owlet -App sehen, die im Fenster ausgeführt wird, das auftaucht.
Sobald Sie Chrome Canary auf diese Weise gestartet haben, können Sie es offen lassen, auch wenn Sie die Owlet -App und die Replay neu starten. Wie immer können Sie die App mit Ansicht-> diese Seite neu laden (Befehlshift-R) neu laden.
Klicken Sie auf das Symbol "Dirac Devtools". Das Fenster "Dirac Devtools" sollte angezeigt werden. Beachten Sie die Anweisungen zum Umschalten zwischen ClojureScript- und JavaScript-Repliten (Control-,). Wenn Sie die Fehlermeldung "CLJS Devtools: Einige benutzerdefinierte Formatters wurden nicht gerendert" sehen, dann sehen Sie einfach Ansicht-> diese Seite neu laden (Befehlsverschiebung-R).
Obwohl Sie möglicherweise die Gewohnheit haben, Befehlsoption zu tippen-I, tun Sie es nicht! Öffnen Sie die regulären Chrom -Devtools nicht .
Probieren Sie die nette Wiederholung auf der Registerkarte Konsole aus und sehen Sie, wie Klammern automatisch ausgeglichen sind. Pfeiltasten nehmen Sie im Reply -Verlauf nach oben und unten, Symbole werden abgeschlossen, wenn Sie eingeben, die Ausgabe werden farbige EDN -Daten (nicht dunkel JS -Objekte), Datenstrukturen werden als Collapsible -Widgets dargestellt, um Platz zu sparen und mehr zu sparen!
Probieren Sie auch den Debugger aus. Es funktioniert genauso wie der Chrome Devtools -Debugger, außer dass Quellcode sowohl ClojureScript als auch das JavaScript ist, zu dem es kompiliert wird. In der Registerkarte Quellen bohren Sie nach oben -> localhost: 4000 -> js/kompiliert -> Out , klicken Sie auf ein Interesse auf ein Owlet. Wenn die App am Haltepunkt anhält, schauen Sie sich die aktuellen Variablen im Bereich des Debuggers an. Geben Sie dann wieder in der Registerkarte Konsole ClojureScript -Formulare in die Repl. Sie werden im Kontext des Haltepunkts bewertet. Klicken Sie auf die Schaltfläche Lebenslauf oder Taste F8, um die App fortzusetzen.
Mit Dirac müssen Sie nicht kursiv aufgeben. So wie wir uns mit der Figwheel CLJS -Reply verbanden, können wir uns mit der Dirac Reply verbinden.
Wenn Sie eine Repl im Kursiv laufen, stoppen Sie es, indem Sie in der Symbolleiste auf das X klicken.
Gehen Sie zu Run -> Run ... und wählen Sie die oben erstellte Replon -Konfiguration wie zuvor.
Connecting to remote nREPL server...
Clojure 1.8.0
Jetzt, wie zuvor, sind wir mit dem Clojure -NREPL verbunden, aber diesmal werden wir uns mit der Dirac ClojureScript Repl verbinden. Bewerten Sie den folgenden Clojure -Code im Textfeld unten im Reply -Toolfenster:
(dirac! :join)
Sie sollten so etwas wie diese Ausgabe sehen:
...
Your current nREPL session is a joined Dirac session (ClojureScript) which targets 'the most recent Dirac session'
...
To quit, type: :cljs/quit
=> nil
Wie oben erwähnt, ist es eine gute Idee, einen neuen Repl -Befehl hinzuzufügen und eine Tastaturverknüpfung zu definieren, um den Befehl (dirac! :join) für Sie einzugeben.
Sie können sich mit der Dirac -Reply verbinden, genau wie wir es mit der Figwheel Reply mit nur einem kleinen Unterschied getan haben. Stellen Sie natürlich zuerst sicher, dass der Prozess, den Sie mit script/figwheel-repl.sh dirac Tun Sie stattdessen:
Geben Sie wie bei Cursive den folgenden Clojure -Code an die Eingabeaufforderung ein:
(dirac! :join)
Sie sollten die Ausgabe wie diese sehen:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Wenn Sie einen Ausdruck im Dirac ClojureScript -Repl bewerten, wird das Ergebnis erwartungsgemäß im terminalen oder kursiven Repl -Fenster nach => angezeigt. Nebenwirkungen wie gedruckte Ausgangs- oder Ausnahmestapelspuren werden jedoch nur in der Dirac Devtools -Konsole angezeigt. Dies kann verwirrend sein, insbesondere wenn Sie eine Druckanweisung eingefügt haben und nichts sehen oder dass Sie nicht merken, dass etwas kaputt ist, weil Sie keine Ausnahme sehen! Sie müssen in der Dirac Devtools -Konsole nachsehen. Die Konsole spiegelt den von Ihnen eingegebenen Ausdruck, ihr Ergebnis und alle gedruckten Nebenwirkungen wider. Halten Sie also einfach Chrome Canary in der Nähe und das Dirac Devtools Fenster griffbereit.
Die ISC -Lizenz
Copyright (c) Code für Denver und Mitwirkende
Die Erlaubnis, diese Software zu verwenden, zu kopieren, zu ändern und/oder zu verteilen, wird hiermit gewährt, vorausgesetzt, die oben genannte Copyright -Mitteilung und diese Berechtigungsbekanntmachung erscheint in allen Kopien.
Die Software wird "wie es ist" bereitgestellt, und der Autor lehnt alle Garantien in Bezug auf diese Software ab, einschließlich aller impliziten Garantien für Handelsfähigkeit und Fitness. In keinem Fall haftet der Autor für besondere, direkte, indirekte oder Folgeschäden oder Schäden, die sich aus dem Verlust der Nutzung, Daten oder Gewinne ergeben, sei es in Vertragsmaßnahmen, Fahrlässigkeit oder anderen unerlaubten Handlungen, die sich aus oder im Zusammenhang mit der Verwendung oder Leistung dieser Software ergeben.
