owlet
1.0.0
Owlet est une collection d'activités autoguidées sur le Web conçues pour les élèves du collège et du secondaire pour acquérir des compétences technologiques grâce à une exploration créative. Ces diapositives expliquent la motivation derrière le projet.
Généré à l'aide de Luminus version 2.9.11.68
lein run
lein figwheel
lein auto sassc once
Accédez à http: // localhost: 3000 /
Assurez-vous d'avoir une version récente du kit de développement Java. Sinon, téléchargez l'installateur à partir de la page Oracle Downloads. Sélectionnez Accepter le contrat de licence en haut du panneau pour la dernière version, puis cliquez sur le nom de fichier pour votre plateforme, par exemple , JDK-8U112-MACOSX-X64.DMG . Accédez à votre dossier de téléchargements, ouvrez le fichier .dmg et suivez les instructions. Pour vérifier, entrez java -version dans un terminal. Vous devriez voir quelque chose comme les suivants:
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)
Remarque comment la version - dans ce cas "112" - correspond au fichier que vous avez téléchargé.
Vous aurez également besoin que les utilitaires de commande de commande git , lein et rlwrap sont installés sur votre système. Sur un Mac, le moyen le plus simple de les obtenir est d'installer d'abord Homebrew, puis dans une ligne de commande du terminal, exécutez ceci:
brew install git leiningen rlwrap
Enfin, le compilateur SASSC
brew install sassc
Maintenant, pour copier le code owlet sur votre machine, premier cd à l'endroit où vous souhaitez que le répertoire des owlet soit, puis clone ce référentiel:
git clone https://github.com/codefordenver/owlet.git
Maintenant, si vous faites ls , vous devriez voir un nouveau répertoire, owlet . Allez-y:
cd owlet
Pour travailler sur ce projet, tout ce dont vous avez vraiment besoin est un terminal, un navigateur et tout éditeur de texte. Cependant, il y a beaucoup à dire pour utiliser le plugin cursif dans l'idée IntelliJ de JetBrain. Puisqu'il comprend comment les différentes parties de votre code et ses dépendances se connectent ensemble, vous pouvez effectuer le refactorisation de code, l'achèvement du code intelligent, la navigation en un clic vers une définition de variable, afficher instantanément les docstrings et les erreurs d'arité et d'orthographe. Mieux encore, hors de la boîte, vous pouvez exécuter un read- e Val- p rint- l oop (REPL) qui connaît votre code. Expérimentez rapidement avec votre code en direct et en cours d'exécution dans la ligne de commande du REP, chargez une petite modification dans les espaces de noms REP, ou exécutez des tests unitaires - le tout avec quelques touches.
Pour commencer avec IntelliJ Idea et Cursive, suivez les instructions d'installation cursives. Ensuite, importez un projet Leiningen existant, à savoir les owlet.
Pour configurer les réponses cursives connectées à notre application en cours d'exécution, nous devons créer une configuration d'exécution / débogage.
Ouvrez Intellij et sélectionnez l'élément de menu Exécuter -> Modifier les configurations ...
Cliquez sur le bouton + en haut à gauche et choisissez Clojure REPL .
Choisissez la télécommande .
Entrez un nom dans le champ Nom (par exemple, Owlet nRepl ).
Choisissez le bouton radio Utilisez le port Leiningen REP .
Décochez la fenêtre d'outil Activez la boîte en bas.
Cliquez sur le bouton OK pour enregistrer votre configuration de remplacement.
Maintenant, en supposant que vous avez commencé un Clojure dans le terminal (voir exécuter l'application ci-dessus), vous pouvez vous y connecter à partir de cursive à tout moment:
Allez à Run -> Exécuter ... , puis sélectionnez votre configuration de remplacement (appelé "Owlet Nrepl" ci-dessus). Une nouvelle fenêtre d'outil de réponse cursive apparaîtra. Vous devriez immédiatement voir cela dans la fenêtre de remplacement:
Connecting to remote nREPL server...
Clojure 1.8.0
Maintenant que nous sommes connectés à la Clojure Nrepl, créez un REP de Clojurescript en évaluant le code Clojure suivant dans la zone de texte en bas de la fenêtre de l'outil de remplacement:
(figwheel-sidecar.repl-api/cljs-repl)
Vous devriez voir quelque chose comme cette sortie:
...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil
Maintenant, comme nous ne faisons que "Jacking in" au même serveur Figheel, lorsque vous modifiez et enregistrez un fichier .cljs, Figheel le remarquera et le rechargera automatiquement. À partir du REP, vous pouvez contrôler l'application pendant son exécution, car vous évaluez le code dans le contexte de l'application en direct. De plus, vous avez accès aux outils de REP cursive qui interagissent avec l'éditeur, tels que:
Passer des réponses au fichier actuel
Chargez le fichier dans REP
Envoyer le formulaire avant le caret pour remplacer
Exécutez des tests dans NS actuel dans REP
Ajouter une nouvelle commande REP
Par exemple, une bonne idée serait d'ajouter votre propre commande REPT pour évaluer le code cljs-repl , ci-dessus. Une fois que vous avez une fenêtre REPL, sélectionnez Tools -> REPL -> Ajouter une nouvelle commande REPL . Donnez un nom à votre commande, sélectionnez le bouton Radio Exécuter et entrez (figwheel-sidecar.repl-api/cljs-repl) comme ci-dessus. Sélectionnez la case à cocher spécifique au projet et OK . Ensuite, pour un accès facile, vous pouvez définir un raccourci clavier de votre choix dans Intellij Idea -> Préférences ... -> keymap .
Une fois que vous avez exécuté script/figwheel-repl.sh , un Nrepl Clojure est en cours d'exécution, et vous pouvez "Jack in" pour obtenir un autre Clojure REPOT, puis un autre Clojurescript REP, similaire à la façon dont nous l'avons fait en cursive:
Confirmez que votre NREPL a commencé par script/figwheel-repl.sh est toujours en cours d'exécution.
À partir d'un terminal, exécutez la commande suivante:
lein repl :connect
Vous devriez maintenant avoir un Clojure REPL avec Invite, owlet.server=> .
Comme pour cursive, entrez le code Clojure suivant à l'invite:
(figwheel-sidecar.repl-api/cljs-repl)
Vous devriez voir une sortie comme ceci:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Avec une petite configuration supplémentaire, vous pouvez travailler sur Owlet en utilisant l'incroyable environnement de débogage du navigateur Dirac Devtools. Vous allez toujours exécuter l'application avec Figwheel, donc les fichiers modifiés se compileront et se chargeront automatiquement, mais le navigateur REP sera exécuté dans Dirac. L'environnement Dirac sur le navigateur est en fait une extension chromée composée d'une fourche personnalisée de chrome Devtools, l'outil de débogage JavaScript intégré à Chrome. Cependant, il utilise les fonctionnalités fournies uniquement par la dernière version de Chrome Devtools, c'est pourquoi la version canari de Chrome est requise.
Si le processus script/figwheel-repl.sh démarré ci-dessus est en cours d'exécution, alors arrêtez-le (Control-D).
Téléchargez et installez l'application de bureau, Google Chrome Canary.
Si vous l'avez ouvert, quittez Chrome Canary.
Dans le terminal, assurez-vous que le répertoire de travail actuel est toujours celui contenant ce fichier readme.md.
À la ligne de commande, exécutez
script/start-chrome-canary.sh
Vous verrez une fenêtre chromée vide avec l'emplacement http: // localhost: 3000 /. Il est vide car nous n'avons pas encore commencé le serveur Owlet.
Soit dit en passant, cette commande est de savoir comment vous devez démarrer le navigateur chaque fois que vous travaillez sur owlet avec Dirac. Voir ci-dessous.
Installez l'extension Dirac Devtools, en accordant un accès à vos données. Vous devriez voir une petite icône verte à droite de la barre d'adresse dans la fenêtre.
Depuis que vous avez commencé Chrome Canary avec le script ci-dessus, l'extension sera en fait enregistrée dans le répertoire
.dirac-chrome-profile/, donc l'installer ou la modification de certains paramètres n'affectera pas (ni ne sera affecté par) les paramètres ou les extensions existantes que vous pourriez avoir dans Chrome lorsque vous démarrez normalement, disons en double-cliquez l'icône Chrome ou Chrome Canary.
Maintenant que Chrome Canary et l'extension Dirac Devtools sont installés localement dans le répertoire du projet Owlet, utilisons-le avec owlet.
Dans le terminal, assurez-vous que le répertoire de travail actuel est toujours celui contenant ce fichier readme.md.
Comme ci-dessus, démarrez l'application avec Figheel, mais cette fois en utilisant l'option --dirac :
script/figwheel-repl.sh dirac
Lorsque vous voyez ce qui suit, le NREPL a commencé et le serveur Dirac attend le client du navigateur:
...
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 n'est pas déjà en cours d'exécution, commencez-le en exécutant ce qui suit dans une fenêtre de terminal séparé:
script/start-chrome-canary.sh
Vous devriez maintenant voir l'application Owlet s'exécuter dans la fenêtre qui apparaît.
Une fois que vous avez démarré Chrome Canary de cette manière, vous pouvez le laisser ouvert, même si vous redémarrez l'application Owlet et le REP. Comme toujours, vous pouvez nettoyer proprement l'application avec View -> Force Recharger cette page (Command-Shift-R).
Cliquez sur l'icône de la barre d'outils Dirac Devtools. La fenêtre de la console Dirac Devtools devrait apparaître. Remarquez les instructions sur la commutation entre Clojurescript et JavaScript REPLS (CONTRÔLE-,). Si vous voyez le message d'erreur, "CLJS Devtools: Certains formateurs personnalisés n'ont pas été rendus", alors faites simplement une visualisation -> Force Recharger cette page (Command-Shift-R).
Bien que vous ayez l'habitude de taper l'option de commandement - je ne le fais pas! N'ouvrez pas le chrome régulier de Devtools.
Essayez le Nice Repost dans l'onglet Console et voyez comment les parenthèses sont automatiquement équilibrées, les touches de flèches vous emmènent de haut en bas dans l'historique des réponses, les symboles sont terminés lorsque vous tapez, la sortie est des données EDN colorisées (pas des objets JS obscurs), les structures de données sont présentées comme des widgets pliables pour épargner soigneusement l'espace, et plus encore!
Essayez aussi le débogueur. Cela fonctionne comme le débogueur Chrome Devtools, sauf que le code source est à la fois Clojurescript et le JavaScript pour lequel il compile. Dans l'onglet Sources , percez vers le haut -> LocalHost: 4000 -> JS / Compilé -> Out , cliquez sur un fichier d'intérêt .cljs owlet .cljs, puis définissez un point d'arrêt qui sera touché lorsque vous faites quelque chose dans l'interface graphique de l'application. Lorsque l'application s'arrête au point d'arrêt, regardez les variables actuelles dans la section de portée du débogueur. Ensuite, dans l'onglet Console , entrez les formulaires Clojurescript dans le REP. Ils seront évalués dans le contexte du point d'arrêt. Cliquez sur le bouton de CV ou la touche F8 pour laisser l'application continuer.
Avec Dirac, vous n'avez pas à abandonner cursive. Tout comme nous nous sommes connectés avec les Cljs de la roue Fig, nous pouvons nous connecter avec le Dirac REP.
Si vous avez un REPL à cursive, arrêtez-le en cliquant sur le X dans sa barre d'outils.
Allez à l'exécution -> Exécuter ... et sélectionnez la configuration REP que nous avons créée ci-dessus, comme auparavant, vous devriez immédiatement voir ceci dans la fenêtre:
Connecting to remote nREPL server...
Clojure 1.8.0
Maintenant, comme auparavant, nous sommes connectés au Clojure Nrepl, mais cette fois, nous nous connecterons au Dirac Clojurescript REP. Évaluez le code Clojure suivant dans la zone de texte en bas de la fenêtre de l'outil de remplacement:
(dirac! :join)
Vous devriez voir quelque chose comme cette sortie:
...
Your current nREPL session is a joined Dirac session (ClojureScript) which targets 'the most recent Dirac session'
...
To quit, type: :cljs/quit
=> nil
Comme mentionné ci-dessus, c'est une bonne idée d' ajouter une nouvelle commande REPT et de définir un raccourci clavier pour taper la commande (dirac! :join) pour vous.
Vous pouvez vous connecter avec le Dirac REP, tout comme nous l'avons fait avec le Figheel REP, avec seulement une petite différence. Bien sûr, assurez-vous d'abord que le processus que vous avez commencé avec script/figwheel-repl.sh dirac est toujours en cours d'exécution, puis suivez simplement les instructions ci-dessus, jusqu'à la dernière étape. Au lieu de cela, faites celui-ci:
Comme pour cursive, entrez le code Clojure suivant à l'invite:
(dirac! :join)
Vous devriez voir une sortie comme ceci:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Lorsque vous évaluez une expression dans le REP de Dirac Clojurescript, le résultat sera affiché après => dans la fenêtre REP de terminal ou cursive, comme prévu. Cependant, les effets secondaires tels que les traces de sortie de sortie ou d'exception seront affichés uniquement dans la console Dirac Devtools . Cela peut être déroutant, surtout si vous avez inséré une déclaration d'impression et que vous ne voyez rien, ou si vous ne réalisez pas que quelque chose a cassé parce que vous ne voyez pas d'exception! Vous devez regarder dans la console Dirac Devtools. La console reflétera l'expression que vous avez entrée, son résultat et tous les effets secondaires imprimés. Alors gardez simplement Chrome Canary à proximité et la fenêtre Dirac Devtools à portée de main.
La licence ISC
Copyright (c) Code pour Denver et contributeurs
L'autorisation d'utiliser, de copier, de modifier et / ou de distribuer ce logiciel à quelque fin que ce soit avec ou sans frais est accordée, à condition que l'avis de droit d'auteur ci-dessus et cet avis d'autorisation apparaissent dans toutes les copies.
Le logiciel est fourni "tel quel" et l'auteur décline toutes les garanties en ce qui concerne ce logiciel, y compris toutes les garanties implicites de qualité marchande et de forme physique. En aucun cas, l'auteur ne sera responsable des dommages spéciaux, directs, indirects ou conséquents ou de dommages-intérêts résultant d'une perte d'utilisation, de données ou de bénéfices, que ce soit dans une action de contrat, de négligence ou d'autres actions délictuelles, résultant ou en relation avec l'utilisation ou les performances de ce logiciel.
