Skip to content

Menersar/scratch-extensions-2

Repository files navigation

INHALTSVERZEICHNIS

  1. Vorwort und Credits
  2. Anleitung
    1. Entwicklungsumgebung vorbereiten
      1. Raspberry Pi OS
      2. Windows 10, 11
    2. Scratch ausführen
      1. Scratch-Pakete installieren
      2. Scratch-GUI starten
      3. Scratch-GUI aufrufen
    3. Scratch-Erweiterung implementieren
      1. Scratch-Block implementieren
      2. Scratch-GUI implementieren
  3. Beispiel
    1. Scratch-Erweiterung implementieren
      1. Scratch-Block implementieren
      2. Scratch-GUI implementieren
    2. Scratch-Erweiterung verwenden

VORWORT UND CREDITS

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

ANLEITUNG

1. ENTWICKLUNGSUMGEBUNG VORBEREITEN

– RASPBERRY-PI-OS –

  • Optional: Bereinigen des npm-Cache und Entfernen von NodeJS und npm vom System.
sudo npm cache clean --force
sudo apt remove nodejs npm
  • Installieren der Node-Version, die mit der offiziellen Distibution ausgeliefert wird, und npm 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.
sudo apt-get install nodejs npm --fix-missing
  • Installieren des npm-Version-Managers, n, und damit Neuinstallieren von NodeJS v16.0.0.
sudo npm install --global n
sudo n 16.0.0
  • Optional: Überprüfen der NodeJS-Version.
    (Ausgabe sollte v16.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
node --version
  • Installiernen von yarn.
    (Viele Anleitungen verwenden npm; zuverlässig hat es bei mir mit yarn funktioniert.)
sudo npm install --global yarn

– WINDOWS 10, 11 –

  • 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 sollte v16.0.0 zurückgeben.)
node --version
  • Installieren von yarn.
    (Viele Anleitungen verwenden npm; zuverlässig hat es bei mir mit yarn funktioniert.)
winget install Yarn.Yarn
  • Installieren von webpack mit yarn.
    (Hauptsächlich verwendet, um JavaScript-Dateien für Browsernutzung zu bündeln.)
yarn add webpack --dev

2. SCRATCH AUSFÜHREN

2.1. SCRATCH-PAKETE INSTALLIEREN

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.)

cd scratch-extensions
cd scratch-vm
  • Installieren von scratch-vm und Festlegen als Ziel für das Verbinden.
yarn install
yarn link
cd ..
cd scratch-gui 
  • Verbinden und Installieren von scratch-gui mit scratch-vm.
yarn link scratch-vm 
yarn install

2.2. SCRATCH-GUI STARTEN

cd scratch-gui
  • Starten der Scratch-GUI.
yarn start

Bei erfolgreichem Kompilieren wird Compiled successfully. im Terminal ausgegeben und der Scratch-Service startet.


2.3. SCRATCH-GUI AUFRUFEN


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.)




2.4. SCRATCH-GUI BUILDEN

cd scratch-gui
  • Erstellen eines Builds für github.io.
    (Dieser ist zu finden unter /scratch-gui/build.)
    (Über die Datei index.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 über https://USER-NAME.github.io/scratch-gui/ einzusehen sein.)
    (Statt USER-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 über https://USER-NAME.github.io/scratch-gui/.BRANCH-NAME aufrufbar.)
    (Statt USER-NAME den Namen des GitHub-Benutzers des GitHub-Pages-Branchs angeben.)
    (Statt BRANCH-NAME den Namen des Branches, auf dem gepublished werden soll, angeben.)
npm run deploy -- -e BRANCH-NAME

3. SCRATCH-ERWEITERUNG IMPLEMENTIEREN

3.1. SCRATCH-BLOCK IMPLEMENTIEREN

Jede Extension kann einen oder mehrere Blöcke besitzen.

  • Hinzufügen des Ordners scratch3_EXTENSION-NAME dem folgenden Pfad.
    (Statt EXTENSION-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.
    (Statt EXTENSION-ID die ID der neuen Extension (aus index.js) angeben.)
    (Statt EXTENSION-RELATIVE-PATH den Pfad zu scratch3_EXTENSION-NAME angeben.)
    (Statt EXTENSION-NAME den Namen der neuen Erweiterung angeben.)
EXTENSION-ID: () => require('../extensions/scratch3_EXTENSION-NAME')

3.2. SCRATCH-GUI IMPLEMENTIEREN

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.
    (Statt EXTENSION-NAME den Namen der neuen Erweiterung angeben.)
scratch-gui/src/lib/libraries/extensions/EXTENSION-NAME
  • Optional: Platzieren der Bilddateien EXTENSION-NAME.IMAGE-FORMAT und EXTENSION-NAME-small.IMAGE-FORMAT im neuen Ordner.
    (Hintergrund: EXTENSION-NAME.IMAGE-FORMAT, 600 x 372; Icon: EXTENSION-NAME-small.IMAGE-FORMAT, 180 x 180.)
    (Statt EXTENSION-NAME Namen der neuen Erweiterung angeben.)
    (Statt IMAGE-FORMAT Format der jeweiligen Bilddatei angeben; getestete Formate: png, jpg und svg.)
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
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.

  • Starten der Scratch-GUI.

BEISPIEL

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.

1. SCRATCH-ERWEITERUNG IMPLEMENTIEREN

1.1. SCRATCH-BLOCK IMPLEMENTIEREN

1.2. SCRATCH-GUI IMPLEMENTIEREN

2. SCRATCH-ERWEITERUNG VERWENDEN

Starten der Scratch-GUI.

Konsolen-Befehl:


Erwartete Konsolen-Ausgabe:


Aufrufen der Scratch-GUI.

Adresse der Scratch-Oberfläche:


Öffnen der Scratch-Erweiterungs-Bibliothek über den Button unten links in der Scratch-GUI.

Auswählen der Erweiterung in der Bibliothek.

Ziehen des Blocks der Erweiterung auf die Scratch-Block-Oberfläche in der Scratch-GUI.

Optional: Eingeben eines alternativen String über das Textfeld des Blocks.

Hinzufügen eines Ereignisses, um die Funktion des Blocks auszuführen.

Auslösen des Ereignisses.

Optional: Öffnen der Konsole und Überprüfen der Ausgabe.

About

No description or website provided.

Topics

Resources

License

Stars

Watchers

Forks

Languages