owlet
1.0.0
Owlet adalah kumpulan kegiatan mandiri berbasis web yang dirancang untuk siswa sekolah menengah dan menengah untuk mempelajari keterampilan teknologi melalui eksplorasi kreatif. Slide ini menjelaskan motivasi di balik proyek.
Dihasilkan menggunakan luminus versi 2.9.11.68
lein run
lein figwheel
lein auto sassc once
Arahkan ke http: // localhost: 3000/
Pastikan Anda memiliki versi terbaru dari Java Development Kit. Jika tidak, unduh penginstal dari halaman unduhan Oracle. Pilih Terima Perjanjian Lisensi di bagian atas panel untuk versi terbaru, lalu klik nama file untuk platform Anda, misalnya , JDK-8U112-MACOSX-X64.DMG . Buka folder unduhan Anda, buka file .dmg, dan ikuti instruksi. Untuk memverifikasi, masukkan java -version di terminal. Anda harus melihat sesuatu seperti berikut:
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)
Perhatikan bagaimana versi - dalam hal ini "112" - cocok dengan file yang Anda unduh.
Anda juga akan memerlukan utilitas baris perintah git , lein , dan rlwrap yang diinstal pada sistem Anda. Pada Mac, cara termudah untuk mendapatkannya adalah dengan terlebih dahulu menginstal homebrew, kemudian di baris perintah terminal, jalankan ini:
brew install git leiningen rlwrap
Akhirnya, kompiler sassc
brew install sassc
Sekarang, untuk menyalin kode OWLET ke mesin Anda, cd pertama ke tempat yang Anda inginkan dari direktori OWLET, lalu klon repositori ini:
git clone https://github.com/codefordenver/owlet.git
Sekarang jika Anda melakukan ls , Anda akan melihat direktori baru, owlet . Pergi kesana:
cd owlet
Untuk mengerjakan proyek ini, yang benar -benar Anda butuhkan hanyalah terminal, browser, dan editor teks apa pun. Namun, ada banyak yang bisa dikatakan untuk menggunakan plugin kursif dalam ide IntelliJ Jetbrain. Karena memahami bagaimana berbagai bagian kode Anda dan ketergantungannya terhubung bersama, Anda dapat melakukan refactoring kode, penyelesaian kode pintar, navigasi satu klik ke definisi variabel, langsung melihat dokumen, dan menangkap kesalahan arity dan ejaan. Terbaik dari semuanya, di luar kotak Anda dapat menjalankan val- p rint- l oop (repl) yang tahu tentang kode Anda. Eksperimen dengan cepat dengan kode langsung Anda, berjalan di baris perintah REPL, muat perubahan kecil ke REPL, beralih namespaces, atau jalankan tes unit - semua hanya dengan beberapa tombol.
Untuk memulai dengan ide IntelliJ dan kursif, ikuti instruksi pemasangan kursif. Kemudian impor proyek leiningen yang ada, yaitu Owlet.
Untuk mengonfigurasi rept kursif yang terhubung ke aplikasi kami yang sedang berjalan, kami perlu membuat konfigurasi Run/Debug.
Buka IntelliJ dan Pilih Item Menu Jalankan -> Edit Konfigurasi ...
Klik tombol + di kiri atas dan pilih Clojure Rept .
Pilih remote .
Masukkan nama di bidang nama (misalnya, Owlet nRepl ).
Pilih tombol Radio Gunakan port repl leiningen .
Hapus centang kotak Activate Tool Box di bagian bawah.
Klik tombol OK untuk menyimpan konfigurasi rept Anda.
Sekarang, dengan asumsi Anda memiliki clojure nrepl dimulai di terminal (lihat menjalankan aplikasi, di atas), Anda dapat menghubungkannya dari kursif kapan saja:
Pergi ke Run -> Run ... , lalu pilih Konfigurasi Rept Anda (disebut "OWLET NREPL" di atas). Jendela Alat Rept Kursive Baru akan muncul. Anda harus segera melihat ini di jendela repl:
Connecting to remote nREPL server...
Clojure 1.8.0
Sekarang kami terhubung ke Clojure NREPL, Buat Rept Clojurescript dengan mengevaluasi kode clojure berikut di kotak teks di bagian bawah jendela alat repl:
(figwheel-sidecar.repl-api/cljs-repl)
Anda harus melihat sesuatu seperti output ini:
...
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil
Sekarang, karena kita hanya "mendongkrak" ke server FigWheel yang sama, ketika Anda memodifikasi dan menyimpan file .cljs, FigWheel akan melihat dan secara otomatis memuatnya kembali. Dari repl, Anda dapat mengontrol aplikasi saat berjalan, karena Anda mengevaluasi kode dalam konteks aplikasi langsung. Plus, Anda memiliki akses ke alat rept kursif yang berinteraksi dengan editor, seperti:
Beralih repl ns ke file saat ini
Muat file di repl
Kirim formulir sebelum Caret untuk replikan
Jalankan tes di NS saat ini di repl
Tambahkan perintah rept baru
Misalnya, ide yang bagus adalah menambahkan perintah rept Anda sendiri untuk mengevaluasi kode cljs-repl , di atas. Setelah Anda memiliki jendela repl, pilih Tools -> Rept -> Tambahkan perintah rept baru . Berikan nama perintah Anda, pilih tombol Radio Execute , dan masukkan (figwheel-sidecar.repl-api/cljs-repl) seperti di atas. Pilih kotak centang spesifik proyek dan OK . Kemudian untuk akses yang mudah, Anda dapat mendefinisikan pintasan keyboard yang Anda pilih di IntelliJ Idea -> Preferensi ... -> keymap .
Setelah Anda menjalankan script/figwheel-repl.sh , nrepl clojure sedang berjalan, dan Anda dapat "jack in" untuk mendapatkan repl clojure lain, lalu replcript lain repl, mirip dengan bagaimana kami melakukannya dalam kursif:
Konfirmasikan bahwa NREPL Anda dimulai dengan script/figwheel-repl.sh masih berjalan.
Dari terminal, jalankan perintah berikut:
lein repl :connect
Anda sekarang harus memiliki clojure repl dengan prompt, owlet.server=> .
Seperti halnya kursif, masukkan kode clojure berikut di prompt:
(figwheel-sidecar.repl-api/cljs-repl)
Anda harus melihat output seperti ini:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Dengan sedikit pengaturan tambahan, Anda dapat mengerjakan OWLET menggunakan lingkungan debugging browser Dirac devtools yang menakjubkan. Anda masih akan menjalankan aplikasi dengan FigWheel, sehingga file yang dimodifikasi masih akan dikompilasi dan dimuat secara otomatis, tetapi REPL browser akan berjalan di Dirac. Lingkungan Dirac di browser sebenarnya adalah ekstensi chrome yang terdiri dari garpu khusus Chrome Devtools, alat debugging JavaScript yang dibangun menjadi Chrome. Namun, menggunakan fitur yang hanya disediakan oleh versi terbaru dari Chrome Devtools, itulah sebabnya versi Canary Chrome diperlukan.
Jika proses script/figwheel-repl.sh dimulai di atas berjalan, maka hentikan (control-d).
Unduh dan instal aplikasi desktop, Google Chrome Canary.
Jika Anda membukanya, keluar dari Chrome Canary.
Di terminal, pastikan direktori kerja saat ini masih berisi file readme.md ini.
Di baris perintah, jalankan
script/start-chrome-canary.sh
Anda akan melihat jendela chrome kosong dengan lokasi http: // localhost: 3000/. Ini kosong karena kami belum memulai Owlet Server.
Ngomong -ngomong, perintah ini adalah bagaimana Anda harus memulai browser setiap kali Anda mengerjakan Owlet dengan Dirac. Lihat di bawah.
Pasang ekstensi Dirac Devtools, memberikannya akses ke data Anda. Anda akan melihat ikon hijau kecil di sebelah kanan bilah alamat di jendela.
Karena Anda memulai Chrome Canary dengan skrip di atas, ekstensi sebenarnya akan disimpan dalam direktori
.dirac-chrome-profile/, sehingga memasangnya atau mengubah beberapa pengaturan tidak akan mempengaruhi (atau dipengaruhi oleh) pengaturan atau ekstensi yang ada di Chrome ketika dimulai secara normal, katakan dengan mengklik dua kali chrome atau krom canary icon.
Sekarang Canary Chrome dan ekstensi Dirac Devtools dipasang secara lokal di direktori proyek OWLET, mari kita gunakan dengan Owlet.
Di terminal, pastikan direktori kerja saat ini masih berisi file readme.md ini.
Seperti di atas, mulailah aplikasi dengan FigWheel, tetapi kali ini menggunakan opsi --dirac :
script/figwheel-repl.sh dirac
Ketika Anda melihat yang berikut ini, NREPL telah dimulai dan server Dirac sedang menunggu klien browser:
...
owlet.server=>
Dirac Agent v0.8.8
Connected to nREPL server at nrepl://localhost:8230.
Agent is accepting connections at ws://localhost:8231.
Jika Chrome Canary belum berjalan, mulai dengan menjalankan yang berikut di jendela terminal terpisah:
script/start-chrome-canary.sh
Anda sekarang harus melihat aplikasi Owlet berjalan di jendela yang muncul.
Setelah Anda memulai Chrome Canary dengan cara ini, Anda dapat membiarkannya terbuka, bahkan jika Anda memulai ulang aplikasi OWLET dan repl. Seperti biasa, Anda dapat dengan bersih memuat ulang aplikasi dengan tampilan-> memuat ulang halaman ini (command-shift-r).
Klik ikon bilah alat Dirac Devtools. Jendela konsol Dirac Devtools akan muncul. Perhatikan instruksi di sana tentang beralih antara clojurescript dan JavaScript repls (control-,). Jika Anda melihat pesan kesalahan, "cljs devtools: beberapa format kustom tidak diterjemahkan", maka cukup lihat-> memuat kembali halaman ini (command-shift-r).
Meskipun Anda mungkin terbiasa mengetikkan komando-option-I, jangan! Jangan buka chrome devtools biasa.
Cobalah rept yang bagus di tab konsol dan lihat bagaimana tanda kurung secara otomatis seimbang, tombol panah membawa Anda ke atas dan ke bawah dalam riwayat rept, simbol diselesaikan saat Anda mengetik, output adalah data EDN yang diwarnai (bukan objek JS yang tidak jelas), struktur data disajikan sebagai widget yang dapat dilipat untuk menghemat ruang dengan rapi, dan banyak lagi!
Cobalah debugger juga. Ini berfungsi seperti debugger Chrome Devtools, kecuali bahwa kode sumber adalah Clojurescript dan JavaScript yang dikompilasi. Di tab Sumber , bor ke atas -> localhost: 4000 -> js/compiled -> out , klik pada file minat .cljs. Ketika aplikasi berhenti di breakpoint, lihat variabel saat ini di bagian lingkup debugger. Kemudian kembali ke tab konsol , masukkan formulir Clojurescript ke repl. Mereka akan dievaluasi dalam konteks breakpoint. Klik tombol resume atau tombol F8 untuk membiarkan aplikasi berlanjut.
Dengan Dirac, Anda tidak perlu berhenti kursif. Sama seperti kami terhubung dengan FigWheel CLJS REPL, di atas, kami dapat terhubung dengan Dirac Rept.
Jika Anda memiliki repl dalam kursif, hentikan dengan mengklik X di toolbarnya.
Pergi ke jalankan -> jalankan ... dan pilih konfigurasi rept yang kami buat di atas, seperti sebelumnya, Anda harus segera melihat ini di jendela:
Connecting to remote nREPL server...
Clojure 1.8.0
Sekarang, seperti sebelumnya, kami terhubung ke Clojure NREPL, tetapi kali ini kami akan terhubung ke Dirac Clojurescript REPL. Evaluasi kode clojure berikut di kotak teks di bagian bawah jendela alat repl:
(dirac! :join)
Anda harus melihat sesuatu seperti output ini:
...
Your current nREPL session is a joined Dirac session (ClojureScript) which targets 'the most recent Dirac session'
...
To quit, type: :cljs/quit
=> nil
Seperti disebutkan di atas, itu ide yang bagus untuk menambahkan perintah rept baru dan tentukan pintasan keyboard untuk mengetik perintah (dirac! :join) untuk Anda.
Anda dapat terhubung dengan Dirac Rept, seperti yang kami lakukan dengan FigWheel Rept, dengan hanya sedikit perbedaan. Tentu saja, pertama-tama pastikan proses yang Anda mulai dengan script/figwheel-repl.sh dirac masih berjalan, lalu cukup ikuti arah di atas, sampai langkah terakhir. Sebaliknya, lakukan yang ini:
Seperti halnya kursif, masukkan kode clojure berikut di prompt:
(dirac! :join)
Anda harus melihat output seperti ini:
...
To quit, type: :cljs/quit
nil
cljs.user=>
Saat Anda mengevaluasi ekspresi di Dirac ClojureScript REPL, hasilnya akan ditampilkan setelah => di terminal atau jendela REPR Kursif, seperti yang diharapkan. Namun, efek samping seperti output cetak atau jejak tumpukan pengecualian hanya akan ditampilkan di konsol Dirac Devtools . Ini bisa membingungkan, terutama jika Anda telah memasukkan pernyataan cetak dan Anda tidak melihat apa pun, atau Anda tidak menyadari ada sesuatu yang rusak karena Anda tidak melihat pengecualian! Anda perlu melihat di konsol Dirac Devtools. Konsol akan mencerminkan ekspresi yang Anda masukkan, hasilnya, dan efek samping yang dicetak. Jadi simpan saja Chrome Canary di dekatnya dan jendela Dirac Devtools berguna.
Lisensi ISC
Kode Hak Cipta (C) untuk Denver dan Kontributor
Izin untuk menggunakan, menyalin, memodifikasi, dan/atau mendistribusikan perangkat lunak ini untuk tujuan apa pun dengan atau tanpa biaya dengan ini diberikan, dengan ketentuan bahwa pemberitahuan hak cipta di atas dan pemberitahuan izin ini muncul di semua salinan.
Perangkat lunak ini disediakan "sebagaimana adanya" dan penulis menyangkal semua jaminan sehubungan dengan perangkat lunak ini termasuk semua jaminan tersirat dari kemampuan diperjualbelikan dan kebugaran. Dalam hal apa pun penulis tidak akan bertanggung jawab atas kerusakan khusus, langsung, tidak langsung, atau konsekuensial atau kerusakan apa pun yang akibat hilangnya penggunaan, data atau laba, baik dalam tindakan kontrak, kelalaian atau tindakan menyiksa lainnya, yang timbul dari atau sehubungan dengan penggunaan atau kinerja perangkat lunak ini.
