หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

นกฮูก

Owlet เป็นชุดของกิจกรรมนำทางด้วยตนเองบนเว็บที่ออกแบบมาสำหรับนักเรียนมัธยมต้นและมัธยมปลายเพื่อเรียนรู้ทักษะเทคโนโลยีผ่านการสำรวจเชิงสร้างสรรค์ สไลด์เหล่านี้อธิบายถึงแรงจูงใจเบื้องหลังโครงการ

สร้างขึ้นโดยใช้ Luminus เวอร์ชัน 2.9.11.68

เพื่อเรียกใช้แอพในพื้นที่:

เรียกใช้เว็บเซิร์ฟเวอร์ 

 lein run

เรียกใช้เซิร์ฟเวอร์การพัฒนาส่วนหน้า 

 lein figwheel

เรียกใช้ Sass Watcher 

 lein auto sassc once

ไปที่ http: // localhost: 3000/

ข้อกำหนดเบื้องต้น

การติดตั้ง

  • ตรวจสอบให้แน่ใจว่าคุณมีชุดพัฒนา Java เวอร์ชันล่าสุด ถ้าไม่ดาวน์โหลดตัวติดตั้งจากหน้า Oracle Downloads เลือก ยอมรับข้อตกลงใบอนุญาต ที่ด้านบนของแผงควบคุมสำหรับเวอร์ชันล่าสุดจากนั้นคลิกชื่อไฟล์สำหรับแพลตฟอร์มของคุณ เช่น 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 วิธีที่ง่ายที่สุดในการรับพวกเขาคือการติดตั้ง homebrew ก่อนจากนั้นในบรรทัดคำสั่งเทอร์มินัลให้ดำเนินการนี้: 

     brew install git leiningen rlwrap

    ในที่สุดคอมไพเลอร์ sassc 

     brew install sassc

โคลน repo

  • ตอนนี้เพื่อคัดลอกรหัส OWLET ลงในเครื่องของคุณ cd แรกไปยังที่ที่คุณต้องการให้ไดเรกทอรี OWLET เป็นที่เก็บข้อมูลนี้: โคลนที่เก็บนี้: 

     git clone https://github.com/codefordenver/owlet.git

  • ตอนนี้ถ้าคุณทำ ls คุณควรเห็นไดเรกทอรีใหม่ owlet ไปที่นั่น: 

     cd owlet

เครื่องมือพัฒนาพิเศษ

Codebase ของเรา (ส่วนใหญ่) ตามคำแนะนำสไตล์นี้

Figwheel clojurescript repl ในความคิด cursive/intellij

ในการทำงานในโครงการนี้สิ่งที่คุณต้องการจริงๆคือเทอร์มินัลเบราว์เซอร์และตัวแก้ไขข้อความใด ๆ อย่างไรก็ตามมีหลายสิ่งที่ต้องพูดถึงการใช้ปลั๊กอิน Cursive ในแนวคิด Intellij ของ Jetbrain เนื่องจากเข้าใจว่าส่วนต่าง ๆ ของรหัสและการพึ่งพาของคุณเชื่อมต่อเข้าด้วยกันคุณสามารถทำการปรับโครงสร้างรหัสเสร็จสมบูรณ์รหัสอัจฉริยะการนำทางหนึ่งคลิกไปยังคำจำกัดความของตัวแปรดูเอกสารและจับข้อผิดพลาดและการสะกดคำ ที่ดีที่สุดของทั้งหมดออกจากกล่องคุณสามารถเรียกใช้ r ead- e val- p rint- l oop (repl) ที่รู้เกี่ยวกับรหัสของคุณ ทดลองใช้อย่างรวดเร็วกับการใช้งานสดของคุณรหัสการรันในบรรทัดคำสั่งของ REPL โหลดการเปลี่ยนแปลงเล็กน้อยลงใน REPL สลับเนมสเปซหรือเรียกใช้การทดสอบหน่วย - ทั้งหมดนี้มีเพียงแค่การกดแป้นพิมพ์

ในการเริ่มต้นด้วยความคิด Intellij และคำสาปให้ทำตามคำแนะนำในการติดตั้ง จากนั้นนำเข้าโครงการ Leiningen ที่มีอยู่คือ Owlet

ในการกำหนดค่า Cursive Repl ที่เชื่อมต่อกับแอพที่กำลังทำงานอยู่เราจำเป็นต้องสร้างการกำหนดค่าการเรียกใช้/การดีบัก

  • เปิด Intellij และเลือกรายการเมนู รัน -> แก้ไขการกำหนดค่า ...

  • คลิกปุ่ม + ที่ด้านบนซ้ายและเลือก Clojure REPL

  • เลือก ระยะไกล

  • ป้อนชื่อในฟิลด์ ชื่อ (เช่น Owlet nRepl )

  • เลือกปุ่มตัวเลือก ใช้พอร์ต leiningen repl

  • ยกเลิกการเลือกกล่อง เปิดใช้งานหน้าต่างเครื่องมือ ที่ด้านล่าง

  • คลิกปุ่ม OK เพื่อบันทึกการกำหนดค่า REPL ของคุณ

ตอนนี้สมมติว่าคุณมี clojure nrepl เริ่มต้นในเทอร์มินัล (ดูการรันแอปพลิเคชันด้านบน) คุณสามารถขอจากการพูดคุยได้ตลอดเวลา:

  • ไปที่ Run -> Run ... จากนั้นเลือก REPL CONFIG ของคุณ (เรียกว่า "OWLET NREPL" ด้านบน) หน้าต่างเครื่องมือ REPL CURSIVE ใหม่จะปรากฏขึ้น คุณควรเห็นเพียงแค่นี้ในหน้าต่างแทนที่: 

     Connecting to remote nREPL server...
Clojure 1.8.0

  • ตอนนี้เราเชื่อมต่อกับ clojure nrepl แล้วให้สร้าง clojurescript repl โดยการประเมินรหัส clojure ต่อไปนี้ในกล่องข้อความที่ด้านล่างของหน้าต่างเครื่องมือ REPL: 

     (figwheel-sidecar.repl-api/cljs-repl)

    คุณควรเห็นอะไรเช่นนี้ออกมา: 

     ...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil

ตอนนี้เนื่องจากเราเป็นเพียงแค่ "แจ็คใน" ไปยังเซิร์ฟเวอร์ Figwheel เดียวกันเมื่อคุณแก้ไขและบันทึกไฟล์. cljs figwheel จะสังเกตเห็นและโหลดซ้ำโดยอัตโนมัติ จาก REPL คุณสามารถควบคุมแอพได้เนื่องจากกำลังทำงานอยู่เนื่องจากคุณกำลังประเมินรหัสในบริบทของแอพสด นอกจากนี้คุณยังสามารถเข้าถึงเครื่องมือ Repl Cursive ที่โต้ตอบกับตัวแก้ไขเช่น:

  • สลับเปลี่ยน ns เป็นไฟล์ปัจจุบัน

  • โหลดไฟล์ใน REPL

  • ส่งแบบฟอร์มก่อนที่จะดูแลไปยัง REPL

  • เรียกใช้การทดสอบใน NS ปัจจุบันใน REPL

  • เพิ่มคำสั่ง REPL ใหม่

ตัวอย่างเช่นความคิดที่ดีคือการเพิ่มคำสั่ง REPL ของคุณเองเพื่อประเมินรหัส cljs-repl ด้านบน เมื่อคุณมีหน้าต่างแทนที่แล้วให้เลือก เครื่องมือ -> repl -> เพิ่มคำสั่ง REPL ใหม่ ให้ชื่อคำสั่งของคุณเลือกปุ่ม Execute และป้อน (figwheel-sidecar.repl-api/cljs-repl) ดังกล่าวข้างต้น เลือกช่องทำเครื่องหมาย เฉพาะโครงการ และ ตกลง จากนั้นสำหรับการเข้าถึงได้ง่ายคุณสามารถกำหนดคีย์บอร์ดทางลัดที่คุณเลือกใน Intellij Idea -> การตั้งค่า ... -> Keymap

clojurescript เพิ่มเติม repls

เมื่อคุณเรียกใช้ script/figwheel-repl.sh แล้ว clojure nrepl กำลังทำงานอยู่และคุณสามารถ "แจ็คใน" เพื่อรับอีก clojure repl แล้วอีก clojurescript repl คล้ายกับวิธีที่เราทำในการพูดคุยกัน:

  • ยืนยันว่า NREPL ของคุณเริ่มต้นด้วย script/figwheel-repl.sh ยังคงทำงานอยู่

  • จากเทอร์มินัลเรียกใช้คำสั่งต่อไปนี้: 

     lein repl :connect

    ตอนนี้คุณควรมี clojure repl ด้วยพรอมต์, owlet.server=>

  • เช่นเดียวกับ Cursive ให้ป้อนรหัส Clojure ต่อไปนี้ที่พรอมต์: 

     (figwheel-sidecar.repl-api/cljs-repl)

    คุณควรเห็นผลลัพธ์เช่นนี้: 

     ...
To quit, type: :cljs/quit
nil
cljs.user=>

การดีบักกับ Dirac

ด้วยการตั้งค่าพิเศษเล็กน้อยคุณสามารถทำงานกับ Owlet โดยใช้สภาพแวดล้อมการดีบักเบราว์เซอร์ Dirac Devtools ที่น่าทึ่ง คุณจะยังคงเรียกใช้แอพด้วย Figwheel ดังนั้นไฟล์ที่แก้ไขจะยังคงคอมไพล์และโหลดโดยอัตโนมัติ แต่เบราว์เซอร์ REPL จะทำงานใน DIRAC สภาพแวดล้อม Dirac บนเบราว์เซอร์เป็นส่วนขยายของโครเมี่ยมซึ่งประกอบด้วยส้อมที่ปรับแต่งของ Chrome Devtools เครื่องมือการดีบัก JavaScript ที่สร้างขึ้นใน Chrome อย่างไรก็ตามมันใช้ประโยชน์จากคุณสมบัติที่จัดทำโดย Chrome Devtools เวอร์ชันล่าสุดซึ่งเป็นสาเหตุที่ต้องใช้ Chrome เวอร์ชัน Canary

การติดตั้ง Dirac

  • หากกระบวนการ script/figwheel-repl.sh เริ่มต้นขึ้นด้านบนกำลังทำงานให้หยุด (control-d)

  • ดาวน์โหลดและติดตั้งแอปพลิเคชันเดสก์ท็อป Google Chrome Canary

  • หากคุณเปิดออกให้ออกจาก Chrome Canary

  • ในเทอร์มินัลตรวจสอบให้แน่ใจว่าไดเรกทอรีการทำงานปัจจุบันยังคงเป็นไฟล์ที่มีไฟล์ readme.md นี้

  • ที่บรรทัดคำสั่งเรียกใช้ 

     script/start-chrome-canary.sh

    คุณจะเห็นหน้าต่างโครเมี่ยมเปล่าพร้อมตำแหน่ง http: // localhost: 3000/ มันว่างเปล่าเพราะเรายังไม่ได้เริ่มต้นเซิร์ฟเวอร์ Owlet

    อย่างไรก็ตามคำสั่งนี้เป็นวิธีที่คุณจะต้องเริ่มต้นเบราว์เซอร์เมื่อใดก็ตามที่คุณทำงานกับ Owlet กับ Dirac ดูด้านล่าง

  • ติดตั้งส่วนขยาย Dirac Devtools ให้การเข้าถึงข้อมูลของคุณ คุณควรเห็นไอคอนสีเขียวเล็กน้อยทางด้านขวาของแถบที่อยู่ในหน้าต่าง

    เนื่องจากคุณเริ่มต้นโครเมี่ยม Canary ด้วยสคริปต์ด้านบนส่วนขยายจะถูกบันทึกไว้ในไดเรกทอรี. .dirac-chrome-profile/ ดังนั้นการติดตั้งหรือเปลี่ยนการตั้งค่าบางอย่างจะไม่ส่งผลกระทบต่อการตั้งค่าหรือส่วนขยายที่มีอยู่ในโครเมี่ยม

ใช้ Dirac

ตอนนี้ Canary และส่วนขยาย Dirac Devtools ได้รับการติดตั้งในท้องถิ่นในไดเรกทอรี Owlet Project แล้วลองใช้กับ 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 ที่ทำงานในหน้าต่างที่ปรากฏขึ้น

    เมื่อคุณเริ่มต้นโครเมี่ยมขมิ้นด้วยวิธีนี้คุณสามารถเปิดไว้แม้ว่าคุณจะรีสตาร์ทแอพ Owlet และ REPL เช่นเคยคุณสามารถโหลดแอปใหม่ด้วย มุมมอง-> บังคับให้โหลดหน้านี้ใหม่ (คำสั่ง Shift-R)

  • คลิกไอคอนแถบเครื่องมือ Dirac Devtools หน้าต่างคอนโซล Dirac Devtools ควรปรากฏขึ้น หมายเหตุคำแนะนำเกี่ยวกับการสลับระหว่าง clojurescript และ JavaScript REPLS (control-,) หากคุณเห็นข้อความแสดงข้อผิดพลาด "CLJS Devtools: Formatters ที่กำหนดเองบางตัวไม่ได้แสดงผล" จากนั้นเพียงแค่ ดู-> บังคับให้โหลดหน้านี้ใหม่ (Command-Shift-R)

    แม้ว่าคุณอาจจะเป็นนิสัยในการพิมพ์คำสั่งตัวเลือก-ฉันอย่า! อย่า เปิด Chrome Devtools ปกติ

  • ลองใช้สิ่งที่ดีในแท็บ คอนโซล และดูว่าวงเล็บมีความสมดุลโดยอัตโนมัติปุ่มลูกศรจะนำคุณขึ้นและลงในประวัติการแทนที่สัญลักษณ์จะเสร็จสมบูรณ์ในขณะที่คุณพิมพ์เอาต์พุตเป็นข้อมูล EDN สี (ไม่ใช่วัตถุ JS ที่ปิดบัง) โครงสร้างข้อมูลจะถูกนำเสนอ

  • ลองใช้ดีบั๊กด้วย มันใช้งานได้เหมือนตัวดีบัก Chrome Devtools ยกเว้นซอร์สโค้ดนั้นเป็นทั้ง clojurescript และ JavaScript ที่รวบรวมไว้ ในแท็บ แหล่ง ที่มาเจาะลงไป ด้านบน -> localhost: 4000 -> js/compiled -> ออก , คลิกที่ไฟล์ OWLET .cljs ที่น่าสนใจจากนั้นตั้งค่าเบรกพอยต์ที่จะถูกตีเมื่อคุณทำอะไรบางอย่างใน GUI ของแอป เมื่อแอปหยุดที่จุดพักให้ดูตัวแปรปัจจุบันในส่วน ขอบเขต ของดีบักเกอร์ จากนั้นกลับไปที่แท็บ คอนโซล ให้ป้อน clojurescript แบบฟอร์มลงใน REPL พวกเขาจะได้รับการประเมินในบริบทของเบรกพอยต์ คลิกปุ่มเรซูเม่หรือคีย์ F8 เพื่อให้แอปดำเนินการต่อ

dirac clojurescript repl ในความคิด cursive/intellij

ด้วย Dirac คุณไม่ต้องยอมแพ้ เช่นเดียวกับที่เราเชื่อมต่อกับ Figwheel CLJS REPL ด้านบนเราสามารถเชื่อมต่อกับ DIRAC REPP

  • หากคุณมี RELUN RUNNING ใน Cursive ให้หยุดโดยคลิกที่ X ในแถบเครื่องมือ

  • ไปที่ Run -> Run ... และเลือกการแก้ไขที่เราสร้างไว้ด้านบนเหมือนก่อนหน้านี้คุณควรเห็นสิ่งนี้ทันทีในหน้าต่าง: 

     Connecting to remote nREPL server...
Clojure 1.8.0

  • ตอนนี้ก่อนหน้านี้เราเชื่อมต่อกับ Clojure Nrepl แต่คราวนี้เราจะเชื่อมต่อกับ Dirac Clojurescript REPL ประเมินรหัส Clojure ต่อไปนี้ในกล่องข้อความที่ด้านล่างของหน้าต่างเครื่องมือ REPL: 

     (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

ดังที่ได้กล่าวไว้ข้างต้นเป็นความคิดที่ดีที่จะ เพิ่มคำสั่ง REPL ใหม่ และกำหนดแป้นพิมพ์ลัดเพื่อพิมพ์คำสั่ง (dirac! :join) ให้คุณ

เพิ่มเติม dirac clojurescript repls

คุณสามารถเชื่อมต่อกับ Dirac Repl เหมือนกับที่เราทำกับ Figwheel Repl โดยมีความแตกต่างเล็กน้อย แน่นอนก่อนอื่นให้ตรวจสอบให้แน่ใจว่ากระบวนการที่คุณเริ่มต้นด้วย script/figwheel-repl.sh dirac ยังคงทำงานอยู่จากนั้นเพียงทำตามคำแนะนำด้านบนจนถึงขั้นตอนสุดท้าย ทำอย่างนี้แทน:

  • เช่นเดียวกับ Cursive ให้ป้อนรหัส Clojure ต่อไปนี้ที่พรอมต์: 

     (dirac! :join)

    คุณควรเห็นผลลัพธ์เช่นนี้: 

     ...
To quit, type: :cljs/quit
nil
cljs.user=>

Dirac Repl Caveat

เมื่อคุณประเมินนิพจน์ใน Dirac clojurescript REPL ผลลัพธ์จะปรากฏขึ้นหลังจาก => ในหน้าต่างเทอร์มินัลหรือการเปลี่ยนแบบอสุจิตามที่คาดไว้ อย่างไรก็ตามผลข้างเคียงเช่นเอาต์พุตที่พิมพ์ออกมาหรือร่องรอยสแต็กข้อยกเว้นจะแสดง เฉพาะในคอนโซล Dirac Devtools เท่านั้น สิ่งนี้อาจทำให้เกิดความสับสนโดยเฉพาะอย่างยิ่งถ้าคุณแทรกคำสั่งการพิมพ์และคุณไม่เห็นอะไรเลยหรือคุณไม่รู้อะไรเลยเพราะคุณไม่เห็นข้อยกเว้น! คุณต้องดูคอนโซล Dirac Devtools คอนโซลจะสะท้อนการแสดงออกที่คุณป้อนผลลัพธ์ และ ผลข้างเคียงที่พิมพ์ออกมา ดังนั้นเพียงแค่ให้ Chrome Canary ใกล้เคียงและหน้าต่าง Dirac Devtools มีประโยชน์

ใบอนุญาต

ใบอนุญาต ISC

รหัสลิขสิทธิ์ (c) สำหรับเดนเวอร์และผู้ร่วมให้ข้อมูล

การอนุญาตให้ใช้คัดลอกแก้ไขและ/หรือแจกจ่ายซอฟต์แวร์นี้เพื่อวัตถุประสงค์ใด ๆ ที่มีหรือไม่มีค่าธรรมเนียมจะได้รับอนุญาตโดยระบุว่าการแจ้งลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะปรากฏในสำเนาทั้งหมด

ซอฟต์แวร์มีให้ "ตามที่เป็นอยู่" และผู้เขียนปฏิเสธการรับประกันทั้งหมดเกี่ยวกับซอฟต์แวร์นี้รวมถึงการรับประกันโดยนัยเกี่ยวกับความสามารถในการค้าและการออกกำลังกาย ไม่ว่าในกรณีใดผู้เขียนจะต้องรับผิดชอบต่อความเสียหายพิเศษทางตรงทางอ้อมหรือผลสืบเนื่องหรือความเสียหายใด ๆ ที่เกิดจากการสูญเสียการใช้ข้อมูลหรือผลกำไรไม่ว่าจะเป็นการกระทำของสัญญาความประมาทเลินเล่อหรือการกระทำที่ทรมานอื่น ๆ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด