Skip to content

Menersar/scratch-extensions-2

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
images
images
 
 
scratch-gui
scratch-gui
 
 
scratch-vm
scratch-vm
 
 
translations
translations
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

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

scratch-extension scratch3

Resources

Readme

License

BSD-3-Clause license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Languages