Da ich bei allen Anleitungen und Dokumentationen zur Erstellung von Scratch-3-Erweiterungen auf diverse Probleme und Fehler, meist aufgrund diverser Paket-Inkompatibilitäten und veralteten Anleitungen, gestoßen bin, habe ich nach Eigenrecherche die folgende Anleitung zur Erstellung von Scratch-3-Erweiterungen zusammengetragen.
Den Großteil der Informationen zur Erstellung dieser Anleitung sind der folgenden Seite entnommen.
https://medium.com/@hiroyuki.osaki/how-to-develop-your-own-block-for-scratch-3-0-1b5892026421
Folgendes Repository wurde als Grundlage der Pakete scratch-vm
und scratch-gui
sowie für Tests neuer Scratch-Erweiterungen verwendet.
https://github.com/MrYsLab/s3onegpio
Die Informationen der folgenden offiziellen Anleitung zum Publishen der Scratch-GUI auf GitHub-Pages wurden für die Erstellung eines Builds, zum Ausführen von Scratch im Offline-Modus, verwendet.
https://github.com/LLK/scratch-gui/wiki/Publishing-to-GitHub-Pages
- Optional: Bereinigen des
npm
-Cache und Entfernen vonNodeJS
undnpm
vom System.
sudo npm cache clean --force
sudo apt remove nodejs npm
- Installieren der
Node
-Version, die mit der offiziellen Distibution ausgeliefert wird, undnpm
auf dem System.- Optional: Verwenden der Option
--fix-missing
- Die Kommandozeilenoption
apt-get --fix-missing
wird in Linux eingesetzt, um während einer Installation oder eines Updates fehlende oder fehlerhafte / beschädigte Pakete zu handhaben.- Diese Pakete werden zurückgestellt und ermöglicht es, die fehlenden Pakete zu reparieren oder eventuell die Ursache des Problems zu lösen.
- Besonders nützlich in Situationen, in denen Pakete Pakete nicht abgerufen werden können oder bei denen die ntegritätsprüfung fehlgeschlagen ist.
- Die Kommandozeilenoption
- Optional: Verwenden der Option
sudo apt-get install nodejs npm --fix-missing
- Installieren des
npm
-Version-Managers,n
, und damit Neuinstallieren vonNodeJS v16.0.0
.
sudo npm install --global n
sudo n 16.0.0
- Optional: Überprüfen der
NodeJS
-Version.
(Ausgabe solltev16.0.0
zurückgeben.)- Optional: Wenn die "alte" Version zurückgegeben wird:
- Lösung 1: Öffnen eines neuen Terminal-Fensters.
oder - Lösung 2: Zurücksetzen des 'Location-Hash' mit eines der folgenden Befehle:
- Für 'bash', 'zsh', 'ash', 'dash', und 'ksh':
hash -r
oder - Für 'csh' und 'tcsh':
rehash
- Für 'bash', 'zsh', 'ash', 'dash', und 'ksh':
- Lösung 1: Öffnen eines neuen Terminal-Fensters.
- Optional: Wenn die "alte" Version zurückgegeben wird:
node --version
- Installiernen von
yarn
.
(Viele Anleitungen verwendennpm
; zuverlässig hat es bei mir mityarn
funktioniert.)
sudo npm install --global yarn
- Herunterladen und Entpacken des GitHub-Repositories
scratch-extension
.
https://github.com/Menersar/scratch-extensions
- Optional: Deinstallieren von
NodeJS
.
winget uninstall Node.js
- Installieren von
NodeJS v16.0.0
.
winget install OpenJS.NodeJS --version 16.0.0
- Optional: Überprüfen der
NodeJS
-Version.
(Ausgabe solltev16.0.0
zurückgeben.)
node --version
- Installieren von
yarn
.
(Viele Anleitungen verwendennpm
; zuverlässig hat es bei mir mityarn
funktioniert.)
winget install Yarn.Yarn
- Installieren von
webpack
mityarn
.
(Hauptsächlich verwendet, um JavaScript-Dateien für Browsernutzung zu bündeln.)
yarn add webpack --dev
- Herunterladen und Entpacken des GitHub-Repositories
scratch-extension
.
https://github.com/Menersar/scratch-extensions
Installieren und Verbinden von scratch-vm
und scratch-gui
, um sie zusammen zu modifizieren und kompilieren zu können.
(scratch-gui wird als Parent-Projekt festgelegt, scratch-vm wird mit dem Parent verbunden.)
- Wechseln in den Ordner scratch-vm.
cd scratch-extensions
cd scratch-vm
- Installieren von
scratch-vm
und Festlegen als Ziel für das Verbinden.
yarn install
yarn link
- Wechseln in den Ordner scratch-gui.
cd ..
cd scratch-gui
- Verbinden und Installieren von
scratch-gui
mitscratch-vm
.
yarn link scratch-vm
yarn install
- Wechseln in den Ordner scratch-gui.
cd scratch-gui
- Starten der Scratch-GUI.
yarn start
Bei erfolgreichem Kompilieren wird Compiled successfully.
im Terminal ausgegeben und der Scratch-Service startet.
- Aufrufen der Scratch-Oberfläche über folgende Adresse.
http://localhost:8601
Die Adresse wird während des Kompilierens mit Project is running at http://0.0.0.0:8601/
im Terminal ausgegeben.
Änderungen, wie neue Erweiterungen, werden in der Scratch-GUI nach erfolgreichem Kompilieren übernommen und dargestellt.
Speichern von Änderungen in scratch-vm
oder scratch-gui
löst einen Kompilierungsvorgang automatisch aus.
(Solange der Scratch-Service auf http://0.0.0.0:8601/
läuft.)
- Optional: Aufrufen der Scratch-GUI über einen erstellten Scratch-GUI-Build.
(Über die erzeugteindex.html
in /scratch-gui/build.)
- Wechseln in den Ordner scratch-gui.
cd scratch-gui
- Erstellen eines Builds für
github.io
.
(Dieser ist zu finden unter/scratch-gui/build
.)
(Über die Dateiindex.html
in dem Ordner ist Scratch mit den Erweiterungen offline aufrufbar.)
yarn run build
- Optional: Erzeugen eines Commits und Pushs des Builds auf den eigenen GitHub-Pages-Branch.
(Er sollte dann überhttps://USER-NAME.github.io/scratch-gui/
einzusehen sein.)
(StattUSER-NAME
den Namen des GitHub-Benutzers des GitHub-Pages-Branchs angeben.)
npm run deploy
- Alternativ, Optional: Publishen des Builds in ein bestimmtes Verzeichnis.
(Er ist dann überhttps://USER-NAME.github.io/scratch-gui/.BRANCH-NAME
aufrufbar.)
(StattUSER-NAME
den Namen des GitHub-Benutzers des GitHub-Pages-Branchs angeben.)
(StattBRANCH-NAME
den Namen des Branches, auf dem gepublished werden soll, angeben.)
npm run deploy -- -e BRANCH-NAME
Jede Extension kann einen oder mehrere Blöcke besitzen.
- Hinzufügen des Ordners
scratch3_EXTENSION-NAME
dem folgenden Pfad.
(StattEXTENSION-NAME
den Namen der neuen Erweiterung angeben.)
scratch-vm/src/extensions/scratch3_EXTENSION-NAME
- Anlegen der Datei
index.js
in dem Ordner.
scratch-vm/src/extensions/scratch3_EXTENSION-NAME/index.js
-
Angeben und Definieren der Erweiterungs-Blöcke in der Datei.
-
Öffnen der Datei extension-manager.js zur Implementierung des Erweiterungsmenüs.
scratch-vm/src/extension-support/extension-manager.js
- Hinzufügen der neuen Erweiterung, über die Zeile
EXTENSION-ID: () => require ('EXTENSION-RELATIVE-PATH')
, in der Datei.
(StattEXTENSION-ID
die ID der neuen Extension (ausindex.js
) angeben.)
(StattEXTENSION-RELATIVE-PATH
den Pfad zuscratch3_EXTENSION-NAME
angeben.)
(StattEXTENSION-NAME
den Namen der neuen Erweiterung angeben.)
EXTENSION-ID: () => require('../extensions/scratch3_EXTENSION-NAME')
Zur Nutzung der neu implementierten Scratch-Erweiterung muss sie der Erweiterungsbibliothek von Scratch hinzugefügt werden.
Optional können Bilddateien, zur visuellen Darstellung der neuen Erweiterung in der Scratch-Bibliothek, eingebunden werden.
- Optional: Hinzufügen des Ordners
EXTENSION-NAME
dem folgenden Pfad.
(StattEXTENSION-NAME
den Namen der neuen Erweiterung angeben.)
scratch-gui/src/lib/libraries/extensions/EXTENSION-NAME
- Optional: Platzieren der Bilddateien
EXTENSION-NAME.IMAGE-FORMAT
undEXTENSION-NAME-small.IMAGE-FORMAT
im neuen Ordner.
(Hintergrund:EXTENSION-NAME.IMAGE-FORMAT
,600 x 372
; Icon:EXTENSION-NAME-small.IMAGE-FORMAT
,180 x 180
.)
(StattEXTENSION-NAME
Namen der neuen Erweiterung angeben.)
(StattIMAGE-FORMAT
Format der jeweiligen Bilddatei angeben; getestete Formate:png
,jpg
undsvg
.)
scratch-gui/src/lib/libraries/extensions/EXTENSION-NAME/EXTENSION-NAME-small.IMAGE-FORMAT
scratch-gui/src/lib/libraries/extensions/EXTENSION-NAME/EXTENSION-NAME.IMAGE-FORMAT
- Öffnen der Datei index.jsx.
scratch-gui/src/lib/libraries/extensions/index.jsx
-
Angeben notwendiger Informationen und Referenzen in der Datei zur Darstellung der neuen Erweiterung in der Scratch-Bibliothek.
Als Beispiel dient die folgende Implementierung und Verwendung des Scratch-Moduls exampleExtension
.
Die implementierte Erweiterung soll in der Scratch-Erweiterungsbibliothek, inklusive Beispiel-Icons, aufgeführt werden.
Durch Ausgewählen soll sie mit einem implementieren Block in der Scratch-Oberfläche erscheinen.
Der Block soll in die Scratch-Oberfläche gezogen und ein String angegeben werden.
Durch Ausführen des Blocks soll der mitgegebene String in der Konsole ausgegeben werden.
-
Hinzufügen: Ordner
scratch3_exampleExtension
in /scratch-vm/src/extensions/. -
Hinzufügen: Datei
index.js
in dem Ordner. -
Abändern: Erweiterungs-Blöcke angeben und definieren in der Datei.
-
Öffnen: Datei
extension-manager.js
in /scratch-vm/src/extension-support. -
Abändern: Erweiterung hinzufügen in der Datei.
-
Optional: Hinzufügen: Ordner
exampleExtension
in /scratch-gui/src/lib/libraries/extensions. -
Optional: Hinzufügen: Bilddateien
exampleExtension.png
undexampleExtension-small.png
in dem Ordner.
(Hintergrund: exampleExtension.png,600 x 372
; Icon: exampleExtension-small.png,180 x 180
.) -
Öffnen: Datei
index.jsx
in /scratch-gui/src/lib/libraries/extensions. -
Abändern: Angaben zur Darstellung der Erweiterung in der Scratch-Bibliothek hinzufügen in der Datei.