owlet
1.0.0
Owlet은 창의적 탐구를 통해 기술 기술을 배울 수 있도록 중학교 및 고등학생을 위해 설계된 웹 기반 셀프 가이드 활동 모음입니다. 이 슬라이드는 프로젝트의 동기를 설명합니다.
루미누스 버전 2.9.11.68을 사용하여 생성
lein run
lein figwheel
lein auto sassc once
http : // localhost : 3000/로 이동하십시오.
최근 버전의 Java 개발 키트가 있는지 확인하십시오. 그렇지 않은 경우 Oracle 다운로드 페이지에서 설치 프로그램을 다운로드하십시오. 최신 버전의 패널 상단에서 라이센스 계약 수락을 선택한 다음 플랫폼의 파일 이름 ( 예 : JDK-8U112-MacOSX-X64.dmg) 을 클릭하십시오. 다운로드 폴더로 이동하여 .dmg 파일을 열고 지침을 따르십시오. 확인하려면 터미널에 java -version 입력하십시오. 다음과 같은 것을 볼 수 있습니다.
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)
이 경우 "112"버전이 다운로드 한 파일과 일치하는 방법에 유의하십시오.
또한 시스템에 명령 줄 유틸리티 git , lein 및 rlwrap 설치되어 있어야합니다. Mac에서 가장 쉬운 방법은 먼저 홈브류를 설치 한 다음 터미널 명령 줄에서 다음을 수행하는 것입니다.
brew install git leiningen rlwrap
마지막으로 SASSC 컴파일러
brew install sassc
이제 Owlet 코드를 컴퓨터에 복사하려면 Owlet 디렉토리가 원하는 위치로 첫 번째 cd 다음 에이 저장소를 복제하십시오.
git clone https://github.com/codefordenver/owlet.git
이제 ls 수행하면 새 디렉토리 인 owlet 표시됩니다. 가기 :
cd owlet
이 프로젝트에서 작업하려면 터미널, 브라우저 및 텍스트 편집기 만 있으면됩니다. 그러나 JetBrain의 Intellij 아이디어에서 필기체 플러그인을 사용하는 데 많은 말이 있습니다. 코드의 다른 부분과 그 종속성이 어떻게 연결되는지 이해하기 때문에 코드 리팩토링, 스마트 코드 완료, 변수 정의로의 원 클릭 탐색, 즉시 docstrings를보고 아티브 및 철자 오류를 잡을 수 있습니다. 무엇보다도, 상자 밖에서 당신은 당신의 코드에 대해 알고있는 red - e val- p rint -l oop (REPL)를 실행할 수 있습니다. Repl의 명령 줄에서 라이브 실행 코드를 신속하게 실험하고, 작은 변경 사항을 REPL에로드하거나, 네임 스페이스를 전환하거나, 단위 테스트를 실행하십시오.
Intellij 아이디어와 필기체로 시작하려면 필기체 설치 지침을 따르십시오. 그런 다음 기존 Leiningen 프로젝트, 즉 Owlet을 가져옵니다.
실행중인 앱에 연결된 필기체 대체를 구성하려면 Run/Debug 구성을 만들어야합니다.
Intellij를 열고 메뉴 항목 실행 -> 구성 편집 ...
왼쪽 상단의 + 버튼을 클릭하고 Clojure Repl을 선택하십시오.
리모컨을 선택하십시오.
이름 필드에 이름을 입력하십시오 (예 : Owlet nRepl ).
라디오 버튼을 선택하여 Leiningen Relt 포트를 사용하십시오 .
상자를 선택 취소 하단에서 도구 창을 활성화하십시오 .
확인 버튼을 클릭하여 REPL 구성을 저장하십시오.
이제 터미널에서 Clojure nrepl이 시작되었다고 가정하면 (위의 응용 프로그램 실행 참조) 언제든지 필기체에서 연결할 수 있습니다.
실행 -> 런 ... 그런 다음 대체 구성 (위의 "Owlet Nrepl"이라고 함)을 선택하십시오 (위의 "Owlet Nrepl"). 새로운 필기체 대체 도구 창이 나타납니다. 당신은 즉시 대체 창에서 이것을보아야합니다.
Connecting to remote nREPL server...
Clojure 1.8.0
이제 Clojure nrepl에 연결되었으므로 Repl Tool Wind
(figwheel-sidecar.repl-api/cljs-repl)
이 출력과 같은 것을 볼 수 있습니다.
...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil
이제 우리는 단지 동일한 무화과 휠 서버에 "잭킹"하기 때문에 .cljs 파일을 수정하고 저장할 때 Figwheel은 자동으로 다시로드합니다. REPL에서 라이브 앱의 맥락에서 코드를 평가하고 있기 때문에 앱을 실행중인 앱을 제어 할 수 있습니다. 또한 편집자와 상호 작용하는 필기체 대체 도구에 액세스 할 수 있습니다.
대체 n을 현재 파일로 전환하십시오
REPL에 파일을로드하십시오
CARET 전에 양식을 대체하기 전에 보냅니다
현재 NS에서 테스트를 실행합니다
새 REPH 명령을 추가하십시오
예를 들어, 좋은 아이디어는 자신의 REP 명령을 추가하여 위의 cljs-repl 코드를 평가하는 것입니다. Repl Window가 있으면 도구를 선택하십시오 -> Repl-> 새 REP 명령을 추가하십시오 . 명령에 이름을 지정하고 라디오 실행 버튼을 선택하고 위와 같이 (figwheel-sidecar.repl-api/cljs-repl) 를 입력하십시오. 프로젝트 특정 확인란을 선택하고 확인하십시오 . 그런 다음 쉽게 액세스하려면 Intellij Idea-> 선호도 ...-> Keymap 에서 선택한 키보드 단축키를 정의 할 수 있습니다.
script/figwheel-repl.sh 실행하면 Clojure nrepl이 실행 중이며 다른 Clojure Repl을 얻기 위해 "Jack"을 할 수 있습니다. 그런 다음 다른 Clojurescript Repl은 다음과 비슷합니다.
NREPL이 script/figwheel-repl.sh 로 시작했는지 확인하십시오.
터미널에서 다음 명령을 실행하십시오.
lein repl :connect
이제 프롬프트가있는 clojure repl이 있어야합니다. owlet.server=> .
필기체와 마찬가지로 프롬프트에서 다음 Clojure 코드를 입력하십시오.
(figwheel-sidecar.repl-api/cljs-repl)
다음과 같은 출력이 표시됩니다.
...
To quit, type: :cljs/quit
nil
cljs.user=>
약간의 추가 설정으로 Amazing Dirac Devtools 브라우저 디버깅 환경을 사용하여 Owlet에서 작업 할 수 있습니다. 여전히 무화과로 앱을 실행하므로 수정 된 파일은 여전히 자동으로 컴파일되고로드되지만 브라우저 대체는 Dirac에서 실행됩니다. 브라우저의 Dirac 환경은 실제로 Chrome에 내장 된 JavaScript 디버깅 도구 인 Chrome Devtools의 맞춤형 포크로 구성된 크롬 확장입니다. 그러나 최신 버전의 Chrome Devtools에서만 제공되는 기능을 사용하므로 Canary 버전의 Chrome이 필요합니다.
위에서 시작된 script/figwheel-repl.sh 프로세스가 실행중인 경우 (Control-D)를 중지하십시오.
데스크톱 응용 프로그램 인 Google Chrome Canary를 다운로드하여 설치하십시오.
당신이 그것을 열면, 크롬 카나리아를 그만두십시오.
터미널에서 현재 작업 디렉토리가 여전히이 readme.md 파일을 포함하는 디렉토리인지 확인하십시오.
명령 줄에서 실행하십시오
script/start-chrome-canary.sh
위치 http : // localhost : 3000/이있는 빈 크롬 창이 표시됩니다. Owlet 서버를 아직 시작하지 않았기 때문에 비어 있습니다.
그건 그렇고,이 명령은 Dirac과 함께 Owlet에서 작업 할 때마다 브라우저를 시작하는 방법입니다. 아래를 참조하십시오.
Dirac DevTools 확장자를 설치하여 데이터에 대한 액세스 권한을 부여하십시오. 창의 주소 표시 줄의 오른쪽에 약간의 녹색 아이콘이 표시됩니다.
위의 스크립트를 사용하여 Chrome Canary를 시작 했으므로 확장은 실제로 디렉토리에 저장됩니다
.dirac-chrome-profile/이 설치하거나 일부 설정을 변경하면 Chrome 또는 Chrome Canary 아이콘을 이중 클릭하여 Chrome에서 가질 수있는 기존 설정이나 확장에 영향을 미치지 않습니다.
Chrome Canary와 Dirac Devtools 확장 프로그램이 Owlet Project Directory에 로컬로 설치되었으므로 Owlet과 함께 사용해 보겠습니다.
터미널에서 현재 작업 디렉토리가 여전히이 readme.md 파일을 포함하는 디렉토리인지 확인하십시오.
위와 같이 Figwheel로 앱을 시작하지만 이번에는 --dirac 옵션을 사용합니다.
script/figwheel-repl.sh dirac
다음이 표시되면 NREPL이 시작되었고 Dirac 서버가 브라우저 클라이언트를 기다리고 있습니다.
...
owlet.server=>
Dirac Agent v0.8.8
Connected to nREPL server at nrepl://localhost:8230.
Agent is accepting connections at ws://localhost:8231.
Chrome Canary가 아직 실행되지 않은 경우 별도의 터미널 창에서 다음을 실행하여 시작하십시오.
script/start-chrome-canary.sh
이제 Owlet 앱이 팝업되는 창에서 실행되는 것을 볼 수 있습니다.
이런 식으로 Chrome Canary를 시작하면 Owlet 앱과 Repl을 다시 시작하더라도 열어 두십시오. 항상 그렇듯이 보기-> Force Reload (Command-Shift-R)로 앱을 클린으로 다시로드 할 수 있습니다.
Dirac DevTools 도구 모음 아이콘을 클릭하십시오. Dirac DevTools 콘솔 창이 나타납니다. Clojurescript와 JavaScript Repls (Control-,) 사이의 전환에 대한 지침에 유의하십시오. "CLJS DEVTOOLS : 일부 사용자 정의 포맷터가 렌더링되지 않았다"라는 오류 메시지가 표시되면 이 페이지 (Command-Shift-R)를 Reload에게 보는 것입니다.
당신은 명령-옵션 -I를 입력하는 습관에있을 수 있지만, 그렇지 않습니다! 일반적인 Chrome Devtools를 열지 마십시오 .
콘솔 탭에서 멋진 대체를 시도하고 괄호가 자동으로 균형을 이루는 방법을 확인하고 화살표 키는 회신 기록에서 당신을 위아래로 가져 가고, 입력 할 때 기호가 완료되고, 출력은 채색 된 EDN 데이터 (모호한 JS 객체가 아님)이며, 데이터 구조는 공간을 깔끔하게 저장하기위한 가단 위젯으로 표시됩니다!
디버거도 사용해보십시오. 소스 코드가 Clojurescript와 JavaScript가 컴파일하는 JavaScript라는 점을 제외하고는 Chrome DevTools 디버거처럼 작동합니다. 소스 탭에서 상단 -> 로컬 호스트 : 4000-> js/compiled-> out 으로 드릴 다운하고 관심있는 owlet .cljs 파일을 클릭 한 다음 앱의 GUI에서 무언가를 할 때 발생하는 중단 점을 설정하십시오. 앱이 중단 점에서 중지되면 디버거의 범위 섹션에서 현재 변수를보십시오. 그런 다음 콘솔 탭으로 돌아가서 Clojurescript 양식을 Repl에 입력하십시오. 그들은 중단 점의 맥락에서 평가 될 것입니다. 이력서 버튼 또는 키 F8을 클릭하여 앱을 계속할 수 있도록하십시오.
Dirac을 사용하면 필기체를 포기할 필요가 없습니다. 위의 Figwheel CLJS Repl과 연결된 것처럼, 우리는 Dirac Repl과 연결할 수 있습니다.
필기체로 대체를 실행하는 경우 도구 모음에서 X를 클릭하여 중지하십시오.
실행 -> 실행 ... 그리고 위에서 만든 대체 구성을 선택하십시오.
Connecting to remote nREPL server...
Clojure 1.8.0
이제와 같이, 우리는 Clojure nrepl에 연결되었지만 이번에는 Dirac Clojurescript Repl에 연결합니다. REPL 도구 창의 하단에있는 텍스트 상자에서 다음 clojure 코드를 평가하십시오.
(dirac! :join)
이 출력과 같은 것을 볼 수 있습니다.
...
Your current nREPL session is a joined Dirac session (ClojureScript) which targets 'the most recent Dirac session'
...
To quit, type: :cljs/quit
=> nil
위에서 언급했듯이 새로운 REP 명령을 추가 하고 키보드 단축키를 정의하여 (dirac! :join) 명령을 입력하는 것이 좋습니다.
우리가 Figwheel Repl과 마찬가지로 작은 차이만으로 Dirac Repl과 연결할 수 있습니다. 물론, 먼저 script/figwheel-repl.sh dirac 으로 시작된 프로세스가 여전히 실행 중이 있는지 확인한 다음 마지막 단계까지 위의 지시 사항을 따르십시오. 대신, 이것을 수행하십시오.
필기체와 마찬가지로 프롬프트에서 다음 Clojure 코드를 입력하십시오.
(dirac! :join)
다음과 같은 출력이 표시됩니다.
...
To quit, type: :cljs/quit
nil
cljs.user=>
Dirac Clojurescript Repl에서 표현식을 평가할 때, 결과는 예상대로 터미널 또는 필기체 대체 창에 => 후에 표시됩니다. 그러나 인쇄 출력 또는 예외 스택 추적과 같은 부작용은 Dirac DevTools 콘솔에만 표시됩니다. 특히 인쇄문을 삽입하고 아무것도 보지 못하거나 예외가 보이지 않기 때문에 무언가가 깨지지 않는 경우 혼란 스러울 수 있습니다! Dirac DevTools 콘솔을 살펴 봐야합니다. 콘솔은 입력 한 표현, 결과 및 인쇄 된 부작용을 반영합니다. 따라서 Chrome Canary를 근처에두고 Dirac Devtools 창을 편리하게 유지하십시오.
ISC 라이센스
덴버 및 기고자에 대한 저작권 (C) 코드
위의 저작권 통지 와이 권한 통지가 모든 사본에 표시되면,이 소프트웨어 사용, 복사, 수정 및/또는 배포 허가를받을 수 있습니다.
이 소프트웨어는 "있는 그대로"제공되며 저자는 상업성 및 체력에 대한 모든 묵시적 보증을 포함 하여이 소프트웨어와 관련하여 모든 보증을 부인합니다. 어떠한 경우에도 저자는이 소프트웨어의 사용 또는 성과와 관련하여 발생하거나 발생하는 계약, 과실 또는 기타 불법 행위의 행동에 관계없이 사용, 데이터 또는 이익으로 인한 특별, 직접, 간접적 또는 결과적 손해 또는 손해에 대해 책임을지지 않습니다.
