scratch www
2.2.3 Hotfix
Ini adalah klien web sumber terbuka Scratch! Ini adalah kode untuk sebagian besar situs Scratch.
Secara khusus, basis kode ini mencakup kode untuk:
Proyek awal-www memiliki banyak aspek desain yang khusus untuk sistem backend kami. Untuk menggunakannya pada proyek Anda sendiri, Anda harus melihat semua tempat di mana ia melakukan panggilan backend, dan membuat sistem backend Anda sendiri untuk menjalankan fungsi tersebut.
Proyek scratch-gui, di sisi lain, dirancang untuk dapat digunakan oleh siapa saja, tanpa perlu membuat sistem backend, meskipun proyek ini juga dapat mendukung sistem backend untuk penghematan proyek dan aset.
Kami menyambut kontribusi Anda pada basis kode ini! Anda mungkin ingin memulai dengan menelusuri daftar masalah terbuka yang diberi label "dibutuhkan bantuan".
Berkontribusi pada scratch-www bisa jadi lebih sulit daripada berkontribusi pada scratch-gui. Hal ini karena scratch-gui dapat dijalankan sendiri, tanpa memerlukan layanan lain untuk berjalan, sedangkan scratch-www perlu berkomunikasi dengan beberapa sistem backend yang dijalankan oleh tim Scratch (lihat "Bagaimana ini cocok dengan repo Scratch lainnya" di atas). Jika Anda masih baru dalam berkontribusi pada kode sumber Scratch, kami sarankan Anda mulai dengan mengenal scratch-gui dan daftar masalah terbukanya yang berlabel "dibutuhkan bantuan".
Untuk berkontribusi, ikuti langkah-langkah standar untuk berkontribusi pada proyek di GitHub.
Lihat file LISENSI di repo ini.
Berikut adalah beberapa sumber daya untuk membantu Anda memahami cara kami bekerja pada basis kode Scratch:
Teknologi inti penting yang digunakan basis kode ini meliputi:
Pengujian kami menggunakan:
Pastikan Anda telah menginstal:
Penting untuk memastikan bahwa semua dependensi adalah yang terbaru karena kode awal-www hanya berfungsi dengan versi dependensi tertentu. Anda dapat memperbarui paket dengan menggunakan perintah:
npm installPeringatan berikut dapat diabaikan dengan aman:
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of redux@^2.0.0 || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.7 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.Saat ini ada di static/js/lib .
Untuk mengkompilasi kode sumber ke dalam kumpulan HTML dan JavaScript yang dapat dibaca browser, Anda dapat membuat versi sementara situs di mesin Anda yang dapat Anda akses melalui browser web Anda.
Anda dapat "membangun" situs satu kali saja, dengan menjalankan:
npm run buildAtau, Anda dapat menjalankan server yang membangun kembali file saat Anda mengeditnya, dengan menjalankan perintah:
npm run translate
npm start CATATAN: npm run translate membangun direktori intl. Situs akan dibangun dengan baik tanpanya, tetapi string teks yang dapat diterjemahkan tidak akan muncul dengan benar sampai Anda membangun file intl.
Selama pengembangan, npm start mengawasi setiap pembaruan yang Anda buat pada file dalam format ./static atau ./src dan memicu pembangunan kembali proyek. Dalam pengembangan, build disimpan di memori, dan tidak disajikan dari direktori ./build .
Setelah Anda membangun situs lokal, menggunakan npm run build atau npm start , situs yang dihosting di mesin lokal Anda dapat diakses oleh browser web dengan memasukkan localhost:8333 ke bilah alamat browser Anda.
Saat menjalankan npm start , berikut beberapa pesan log penting yang harus diperhatikan:
webpack: bundle is now VALID. – Bundel telah dimuat ke dalam memori dan sekarang dapat dilihat di browser. Ini akan muncul setelah npm start menyelesaikan pengaturannya, dan juga setelah pembaruan yang Anda buat pada file telah dikompilasi ulang untuk dilihat di browser.webpack: bundle is now INVALID. – Jika Anda melihat ini, berarti Anda telah melakukan pembaruan pada file yang masih dikompilasi untuk dilihat browser. Halaman akan tetap dapat dilihat, namun mereka belum akan melihat pembaruan apa pun yang Anda buat. Untuk menghentikan proses npm start yang membuat situs tersedia untuk browser web Anda (dibuat di atas dalam "Untuk Membangun"), gunakan ^C (kontrol-c) di terminal.
npm start dapat dikonfigurasi dengan variabel lingkungan berikut, dengan mengaturnya di awal perintah, sebelum npm start :
| Variabel | Bawaan | Keterangan |
|---|---|---|
API_HOST | https://api.scratch.mit.edu | Nama host untuk permintaan API |
ASSET_HOST | https://assets.scratch.mit.edu | Nama host untuk permintaan aset |
BACKPACK_HOST | https://backpack.scratch.mit.edu | Nama host untuk permintaan ransel |
PROJECT_HOST | https://projects.scratch.mit.edu | Nama host untuk permintaan proyek |
FALLBACK | '' | Lokasi pass-through untuk situs lama |
THUMBNAIL_URI | /internalapi/project/thumbnail/{}/set/ | Templat URI untuk memperbarui thumbnail proyek, {} digantikan oleh ID proyek saat menjalankan permintaan |
THUMBNAIL_HOST | '' | Nama host untuk layanan pengunggah |
GTM_ID | '' | ID Google Pengelola Tag |
GTM_ENV_AUTH | '' | Info env dan autentikasi Google Pengelola Tag |
NODE_ENV | null | Jika bukan production , aplikasi bertindak seperti pengembangan |
PORT | 8333 | Port untuk server dev (http://localhost:XXXX) |
CATATAN: Karena secara default API_HOST=https://api.scratch.mit.edu , perlu diketahui bahwa, secara default, Anda akan melihat dan berinteraksi dengan data nyata di situs web Scratch.
Sebagian besar pengujian unit kami dijalankan menggunakan Jest, tetapi pengujian unit lama menggunakan kerangka TAP.
Untuk membangun aplikasi dan menjalankan semua pengujian unit dan pelokalan, gunakan perintah:
npm test Untuk menjalankan file pengujian unit tunggal dari baris perintah menggunakan Jest, gunakan perintah:
node_modules/.bin/jest ./test/unit/PATH/TO/FILENAME.test.js CATATAN: ganti PATH/TO/FILENAME dengan jalur sebenarnya ke file yang ingin Anda jalankan.
Pengujian integrasi kami mengasumsikan bahwa lingkungan yang lebih besar sedang berjalan daripada sekadar www saja; misalnya, banyak situs yang mengharuskan pengguna uji untuk dapat masuk ke situs, sehingga memerlukan dukungan backend dan basis data.
Secara default, pengujian dijalankan terhadap instance Staging kami, namun Anda dapat meneruskannya di lokasi berbeda dengan variabel lingkungan ROOT_URL (lihat di bawah) jika Anda ingin menjalankan pengujian terhadap lokasi lain--misalnya, build lokal Anda.
Semua pengujian integrasi kami menggunakan Jest sebagai kerangka pengujian kami.
Untuk menjalankan semua pengujian integrasi dari baris perintah:
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu UNOWNED_SHARED_PROJECT_ID= # UNOWNED_UNSHARED_PROJECT_ID=# OWNED_SHARED_PROJECT_ID=# OWNED_UNSHARED_PROJECT_ID=# npm run test:integration Pengujian ini menggunakan banyak pengguna dengan nama pengguna dan kata sandi yang sama. Mereka menggunakan nama pengguna yang Anda berikan dengan SMOKE_USERNAME serta nama pengguna yang sama dengan 1, 2, 3, 4, 5, dan 6 (segera menjadi angka yang lebih tinggi juga) yang ditambahkan di akhir nama tersebut. Jadi jika Anda menggunakan nama pengguna "test" maka akan menggunakan nama pengguna "test1", "test2", "test3", dll. Pastikan Anda telah membuat akun dengan pola ini dan menggunakan kata sandi yang sama untuk semua akun yang terlibat.
Anda dapat menggunakan kumpulan nama pengguna apa pun yang sesuai dengan pola ini. Setiap akun harus berbagi kata sandi yang sama, yang diteruskan sebagai SMOKE_PASSWORD.
Beberapa variabel lingkungan perlu diteruskan agar pengujian dapat dijalankan. Kebanyakan dari mereka memiliki default yang mengarah ke server pementasan.
Untuk menjalankan satu file dari baris perintah menggunakan Jest:
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/jest ./test/integration/filename.test.jsUntuk menjalankan satu file dari baris perintah menggunakan TAP:
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/tap ./test/integration-legacy/smoke-testing/filename.js -R classic --no-coverage --timeout=3600-R classic membuat tap menggunakan gaya pelaporan lama, yang menghindari kesalahan dengan paket "nyc".--no-coverage karena kami tidak menggunakan fitur pelacakan cakupan taptimeout adalah untuk panjang keseluruhan rangkaian pengujian tap; jika Anda mendapatkan kesalahan batas waktu, Anda mungkin perlu menyesuaikan nilai ini (beberapa tes Selenium memerlukan waktu untuk dijalankan) Tes integrasi dapat dijalankan menggunakan Saucelabs, layanan online yang dapat menguji beberapa kombinasi browser/OS dari jarak jauh. (Saat ini, semua pengujian ditulis untuk digunakan pada Chrome di Mac).
Anda memerlukan akun Saucelabs untuk menggunakannya untuk pengujian. Jika Anda memilikinya, Anda dapat menemukan Kunci Akses Anda:
Untuk menjalankan pengujian menggunakan Saucelabs, jalankan perintah:
SMOKE_USERNAME=username SMOKE_PASSWORD=password SAUCE_USERNAME=saucelabsUsername SAUCE_ACCESS_KEY=saucelabsAccessKey ROOT_URL=https://scratch.mit.edu npm run test:integration:remoteCATATAN: Saat ini tes Jest tidak akan dijalankan dengan Saucelabs.
| Variabel | Bawaan | Keterangan |
|---|---|---|
ROOT_URL | scratch.ly | Lokasi tempat Anda ingin menjalankan pengujian |
SMOKE_USERNAME | None | Nama pengguna untuk pengguna Scratch yang Anda masuki untuk menguji |
SMOKE_PASSWORD | None | Kata sandi untuk pengguna Scratch yang Anda masuki untuk mengujinya |
SMOKE_REMOTE | false | Tes dengan Sauce Labs atau tidak. Benar jika menjalankan test:smoke:sauce |
SMOKE_HEADLESS | false | Jalankan browser dalam mode tanpa kepala. Terkelupas saat ini |
SAUCE_USERNAME | None | Nama pengguna untuk akun Sauce Labs Anda |
SAUCE_ACCESS_KEY | None | Kunci Akses untuk Sauce Labs ditemukan di Pengaturan Pengguna |
Penerapan ke pementasan atau produksi akan mengunggah kode ke S3 dan mengonfigurasi Fastly.
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| Variabel | Bawaan | Keterangan |
|---|---|---|
FASTLY_SERVICE_ID | '' | ID layanan cepat untuk bin/configure-fastly.js |
FASTLY_API_KEY | '' | Kunci API cepat untuk bin/configure-fastly.js |
FASTLY_ACTIVATE_CHANGES | false | Aktifkan perubahan dan hapus semua setelah konfigurasi |
AWS_ACCESS_KEY_ID | '' | ID kunci akses AWS untuk S3 |
AWS_SECRET_ACCESS_KEY | '' | Kunci akses rahasia AWS untuk S3 |
S3_BUCKET_NAME | '' | Nama bucket S3 yang akan di-deploy |
Saat diterapkan, API Fastly digunakan untuk mengkloning konfigurasi VCL yang aktif, hanya memperbarui komponen yang relevan dengan konten dari file routes.json repo ini, dan mengaktifkan konfigurasi VCL baru.
Sebagian besar file rute.json sederhana, tetapi beberapa bidang tidak jelas tujuannya.
routeAlias membantu kami menjaga keseluruhan panjang dan kompleksitas kode perbandingan regex di Fastly agar tidak menjadi terlalu besar. Ada satu regex besar yang kami uji dengan cepat terhadap URL permintaan masuk untuk mengetahui apakah URL tersebut dapat membalas dengan file statis di S3; jika tidak ditemukan kecocokan, kami berasumsi kami perlu meneruskan permintaan ke scratchr2. Kita dapat menguji setiap regex pattern rute di routes.json , tetapi banyak yang serupa, jadi kita hanya mengambil kumpulan unik dari semua entri routeAlias , yang lebih pendek dan lebih cepat.
Untuk pengembangan di Windows, Anda mungkin perlu menggunakan program yang menyediakan antarmuka Unix.
Ada beberapa opsi untuk melakukan ini:
Selain itu, Anda perlu menginstal Node; berikut instruksi untuk menginstal Node di WSL.
Kami sedang dalam proses transisi ke klien web ini dari struktur Scratch yang ada. Saat kami bertransisi, akan ada beberapa masalah yang berkaitan dengan bagaimana klien ini perlu berinteraksi dengan infrastruktur yang ada agar dapat berfungsi dengan baik dalam produksi.
Selain bermigrasi untuk menggunakan ini sebagai klien web kami, Scratch juga bertransisi menggunakan backend API baru, Scratch REST API (sumber tertutup). Karena ini juga sedang dalam pengembangan dan belum selesai, kami bersiap untuk kembali menggunakan titik akhir Scratch yang ada jika titik akhir API tidak ada – yang merupakan tempat FALLBACK digunakan.
Sebagian besar masalah yang kami hadapi saat ini berkisar pada penggunaan FALLBACK . Variabel ini digunakan untuk menentukan URL mana yang akan digunakan jika permintaan gagal dalam konteks klien web ini, atau saat menggunakan API_HOST . Jika tidak ditentukan dalam proses, permintaan tersebut tidak akan digunakan, dan permintaan apa pun yang tidak dibuat melalui klien web atau API tidak akan dapat dijangkau.
Pengaturan FALLBACK=https://scratch.mit.edu memungkinkan klien web mengambil data dari situs web Scratch di lingkungan pengembangan Anda. Namun, karena masalah keamanan, mencoba mengirim data ke Scratch melalui lingkungan pengembangan Anda tidak akan berhasil. Ini berarti hal-hal berikut akan rusak untuk sementara waktu:
Selain itu, jika Anda menyetel FALLBACK=https://scratch.mit.edu , ketahuilah bahwa mengeklik tautan ke bagian situs web yang belum dimigrasi (saat ini seperti Discuss , Profile , My Stuff , dll.) akan membawa Anda ke situs web Scratch itu sendiri.
