mathcoach/mathcoach-ide-api.git

<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@mathcoach/ide-api</title><meta name="description" content="Documentation for @mathcoach/ide-api"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/search.js" id="tsd-search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base=".">
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
<div class="field">
<div id="tsd-toolbar-links"></div></div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@mathcoach/ide-api</a></div>
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
<div class="container container-main">
<div class="col-content">
<div class="tsd-page-title">
<h2>@mathcoach/ide-api</h2></div>
<div class="tsd-panel tsd-typography"><a id="md:mathcoach-ide-api-version-400" class="tsd-anchor"></a><h1><a href="#md:mathcoach-ide-api-version-400">MathCoach IDE API <small><code>Version 4.0.0</code></small></a></h1><p>In diesem Paket (<a href="https://bayes.htwsaar.de/gitblit/summary/mathcoach!mathcoach-ide-api.git">Das Gitblit Repository findet sich hier</a>) 
ist die öffentliche Schnittstelle zur MathCoach Entwicklungsumgebung (IDE) definiert. Mithilfe 
dieser Schnittstelle können externe Werkzeuge (z.B. Editoren) erstellt werden. Ziel ist, dass 
diese Werkzeuge für den Anwender komfortable - in die IDE integriert -zur Verfügung gestellt werden 
können. Darüber hinaus werden als Ergänzung einige Hilfsfunktionen zum Bau von Werkzeugen angeboten.</p>
<p><img src="media/usage_author.gif" alt="Demo"></p>
<p><em>Beispielhafte Anwendung: Eine Datei (<code>file.demo.json</code> - auch &quot;Kontext-Datei&quot; genannt) wird angelegt. Diese kann direkt durch das Werkzeug (Demo-Editor) geladen werden. Das Werkzeug kann die Kontext-Datei beschreiben (um zu demonstrieren, dass es ein internes Datenmodell persistent speichern kann). Weiterhin kann das Werkzeug eine Groovy-Aufgabe generieren und die Aufgaben-Vorschau anzeigen lassen.</em></p>
<a id="md:version" class="tsd-anchor"></a><h2><a href="#md:version">Version</a></h2><p>Achtung: nur exakte Versionen in <code>dependencie</code>.</p>
<ul>
<li>Update parcel (sowohl 1.12.4 als auch 2.x.y) führt zum <em>Compile Fehler</em>.</li>
</ul>
<a id="md:idee" class="tsd-anchor"></a><h2><a href="#md:idee">Idee</a></h2><p>Grundlegende Idee ist, dass ein externes Werkzeug nahtlos in die MathCoach IDE integriert werden 
kann. Bestimmte Dateien werden anhand ihrer Dateiendung mit dem Werkzeug verknüpft, sodass der
Benutzer das passende Werkzeug durch einen einfache Klick im Datei-Explorer starten kann. Diese 
Datei wird im folgenden <em>Kontext-Datei</em> genannt und soll dazu dienen, das interene Datenmodell (also
alle Informationen, die der Benutzer im Werkzeug angibt) zu speichern. Das Werkzeug soll das gespeicherte 
Datenmodell zu einem späteren Zeitpunkt wieder laden können.</p>
<p>Ein Werkzeug kann beispielsweise MathCoach-Aufgaben (Groovy-Datei) generieren. Weitere Funktionalitäten
der IDE - beispielsweise das Starten der generierten Aufgabe in der Aufgaben-Vorschau der IDE - sind 
ebenfalls für den Werkzeugentwickler verfügbar.</p>
<p>Das Realisieren von Werkzeugen auf diese Art und Weise hat zahlreiche Vorteile:</p>
<ul>
<li>Werkzeuge werden einheitliche und benutzerfreundlich zur Verfügung gestellt</li>
<li>Grundlegende Funktionalitäten (Anlegen von Dateien, Navigieren im Dateisystem) werden bereits 
durch die IDE bereitgestellt. So können Werkzeug-Entwickler ihren Fokus auf das Werkzeug legen.</li>
<li>Die IDE kann gefährliche Situationen (z.B. das Überschreiben von Dateien) abfangen
und den Benutzer entscheiden lassen, wie fortgefahren werden soll.</li>
</ul>
<a id="md:entwicklung-externer-werkzeuge" class="tsd-anchor"></a><h2><a href="#md:entwicklung-externer-werkzeuge">Entwicklung externer Werkzeuge</a></h2><p>Externe Werkzeuge laufen ausschließlich im Webbrowser des Benutzers - es muss also
auf <code>HTML</code>, <code>JavaScript</code> und <code>CSS</code> gesetzt werden. Außerdem muss das Werkzeug unter 
der Domain des jeweiligen MathCoach-Servers erreichbar sein. Zur Entwicklungszeit legt man das Werkzeug 
dazu im www-Verzeichnis ab. Die von der IDE bereitgestellte <code>ide-lib.js</code> Bibliothek 
muss eingebunden werden.</p>
<pre><code><span class="hl-0">&lt;</span><span class="hl-1">script</span><span class="hl-0"> </span><span class="hl-1">src</span><span class="hl-0">=</span><span class="hl-2">&quot;/mathcoach/ui/ide/ide-lib.js&quot;</span><span class="hl-0">/&gt; </span>
</code><button>Copy</button></pre>
<p>Dabei darf der MathCoach-Server <strong>nicht</strong> fest in die URL eincodiert werden. Andernfalls
kann es zu Problemen kommen, wenn das Werkzeug auf unterschiedlichen Server bereitgestellt 
wird oder ohne IDE lauffähig sein soll. Bei korrekter Verwendung steht die IDE API nun 
durch die globale Varialbe <code>MC</code> zur Verfügung - <a href="./interfaces/mathcoach.api.html">Dokumentation der IDE API</a>.</p>
<blockquote>
<p><strong>Hinweis</strong>: Es steht <strong>ausschließlich</strong> die API, welche über die globale Variable <code>MC</code>
definiert ist, zur Verfügung! Hilfsfunktionen wie <code>Helpers.enableOfflineUsageIfNecessary()</code> 
sind grundsätzlich nicht verfügbar und müssen vom Werkzeugentwickler eingebunden 
werden - siehe &quot;Hilfunktionen für Werkzeug-Entwickler&quot; weiter unten.</p>
</blockquote>
<blockquote>
<p><strong>Hinweis</strong>: Erst, wenn das Werkzeug in die IDE integriert und aus dieser heraus
gestartet wurde, kann die IDE API verwendet werden! Soll das Werkzeug auch ohne die 
IDE nutzbar sein (z.B. zum Testen), muss dies bei der Implementierung berücksichtigt
werden. Konnte die <code>ide-lib.js</code> nicht eingebunden werden (weil das Werkzeug ohne IDE 
gestartet wurde - darum darf auch kein Server fest eincodiert werden), steht die 
globale Variable <code>MC</code> nicht zur Verfügung (<code>typeof MC === &quot;undefined&quot;</code>). Hier kann das 
Werkezug eine Fallunterscheidung treffen und beispielsweise eine eigene Implementierung 
über die globale Variable <code>MC</code> bereitstellen. Siehe auch <code>Helpers.enableOfflineUsageIfNecessary()</code> 
weiter unten.</p>
</blockquote>
<a id="md:empfohlenes-vorgehen" class="tsd-anchor"></a><h3><a href="#md:empfohlenes-vorgehen">Empfohlenes Vorgehen</a></h3><p>Damit externe Werkzeuge ein einheitliches Verhalten aufweisen, sollte wie folgt vorgegangen werden.</p>
<p>Als erstes muss sichergestellt werden, dass die MathCoach IDE API auch verfügbar ist. Dies ist 
beispielsweise nicht der Fall, wenn das Werkzeug ohne die IDE gestartet wurde oder die IDE (aus
welchen Gründen auch immer) nicht einsatzbereit ist.</p>
<pre><code><span class="hl-3">if</span><span class="hl-0">(</span><span class="hl-4">typeof</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0"> === </span><span class="hl-2">&quot;undefined&quot;</span><span class="hl-0">){</span><br/><span class="hl-0">    </span><span class="hl-6">// Hinweis: Hier kann die IDE API nachgebildet werden,</span><br/><span class="hl-0">    </span><span class="hl-6">// sodass das Werkzeug auch &quot;Offline&quot; funktioniert. </span><br/><span class="hl-0">    </span><span class="hl-6">// Also: MC = { isReady: async () =&gt; true, ...}</span><br/><span class="hl-0">    </span><span class="hl-3">throw</span><span class="hl-0"> </span><span class="hl-4">new</span><span class="hl-0"> </span><span class="hl-7">Error</span><span class="hl-0">(</span><span class="hl-2">&quot;IDE Lib nicht eingebunden&quot;</span><span class="hl-0">); </span><span class="hl-6">// TODO: show error to user</span><br/><span class="hl-0">}</span><br/><span class="hl-4">const</span><span class="hl-0"> </span><span class="hl-5">isReady</span><span class="hl-0"> = </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-7">isReady</span><span class="hl-0">();</span><br/><span class="hl-3">if</span><span class="hl-0">(!</span><span class="hl-1">isReady</span><span class="hl-0">){</span><br/><span class="hl-0">    </span><span class="hl-3">throw</span><span class="hl-0"> </span><span class="hl-4">new</span><span class="hl-0"> </span><span class="hl-7">Error</span><span class="hl-0">(</span><span class="hl-2">&quot;Die MathCoach-API ist nicht einsatzbereit.&quot;</span><span class="hl-0">); </span><span class="hl-6">// TODO: show error to user</span><br/><span class="hl-0">}</span><br/><span class="hl-0">...</span>
</code><button>Copy</button></pre>
<p>Von nun an kann die IDE API vollständig genutzt werden. Zunächst sollte die Kontext-Datei (die 
Datei, mit der das Werkzeug gestartet wurde) geladen werden.</p>
<p>Ist der Inhalt der Kontext-Datei leer, wurde die Datei neu angelegt und zum ersten mal geöffnet.
Nun soll das Werkzeug:</p>
<ul>
<li>Sich initialisieren. Es ist sinnvoll, dass das Werkzeug mit einem beispielhaften
Datenmodell inititalisiert wird.</li>
<li>Das interne Datenmodell in die Kontext-Datei schreiben </li>
<li>Die zugehörige Aufgabe generieren. Siehe auch <code>contextFileToExerciseFile</code> in der <a href="./modules/helpers.html">Dokumentation der Hilfsfunktionen</a>.</li>
</ul>
<p>Andernfalls kann das zuvor gespeichertes Datenmodell aus der Kontext-Datei in den 
Editor geladen werden. Anschließend sollte die generierten Aufgaben in der Vorschau gestartet werden, sodass der 
Benutzer besser abschätzen kann, wie sich Änderungen im Werkzeug auf die Aufgabe auswirken.</p>
<pre><code><span class="hl-4">let</span><span class="hl-0"> </span><span class="hl-1">contextFile</span><span class="hl-0"> = </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-7">getContextFile</span><span class="hl-0">(); </span><span class="hl-6">// Datei, mit der der Editor gestartet wurde</span><br/><span class="hl-4">let</span><span class="hl-0"> </span><span class="hl-1">contextFileContent</span><span class="hl-0"> = </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-1">fs</span><span class="hl-0">.</span><span class="hl-7">readFile</span><span class="hl-0">(</span><span class="hl-1">contextFile</span><span class="hl-0">);</span><br/><span class="hl-4">let</span><span class="hl-0"> </span><span class="hl-1">contextFileIsEmpty</span><span class="hl-0"> = </span><span class="hl-1">contextFileContent</span><span class="hl-0"> === </span><span class="hl-2">&quot;&quot;</span><span class="hl-0">;</span><br/><br/><span class="hl-4">let</span><span class="hl-0"> </span><span class="hl-1">exerciseFile</span><span class="hl-0"> = </span><span class="hl-7">contextFileToExerciseFile</span><span class="hl-0">(</span><span class="hl-1">contextFile</span><span class="hl-0">);</span><br/><br/><span class="hl-3">if</span><span class="hl-0">(</span><span class="hl-1">contextFileIsEmpty</span><span class="hl-0">){</span><br/><span class="hl-0">    </span><span class="hl-6">// TODO: Datenmodell anlegen (Idealerweise mit beispielhaften Inhalt)</span><br/><span class="hl-0">    </span><span class="hl-6">// TODO: Datenmodell in Kontext-Datei schreiben, z.B. mit JSON.stringify(...)</span><br/><span class="hl-0">    </span><span class="hl-4">let</span><span class="hl-0"> </span><span class="hl-1">dataModelAsString</span><span class="hl-0"> = </span><span class="hl-5">JSON</span><span class="hl-0">.</span><span class="hl-7">stringify</span><span class="hl-0">({</span><span class="hl-6">/* TODO */</span><span class="hl-0">});</span><br/><span class="hl-0">    </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-1">fs</span><span class="hl-0">.</span><span class="hl-7">writeFile</span><span class="hl-0">(</span><span class="hl-1">contextFile</span><span class="hl-0">, </span><span class="hl-1">dataModelAsString</span><span class="hl-0">);</span><br/><span class="hl-0">    </span><span class="hl-6">// TODO: Aufgabe generieren</span><br/><span class="hl-0">    </span><span class="hl-4">let</span><span class="hl-0"> </span><span class="hl-1">generatedExerciseCode</span><span class="hl-0"> = </span><span class="hl-2">&quot;startup { print(&#39;Hallo Welt!&#39;) }&quot;</span><span class="hl-0">; </span><br/><span class="hl-0">    </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-1">fs</span><span class="hl-0">.</span><span class="hl-7">writeFile</span><span class="hl-0">(</span><span class="hl-1">exerciseFile</span><span class="hl-0">, </span><span class="hl-1">generatedExerciseCode</span><span class="hl-0">);</span><br/><span class="hl-0">}</span><span class="hl-3">else</span><span class="hl-0">{</span><br/><span class="hl-0">    </span><span class="hl-6">// TODO: Datenmodell laden, z.B. mit JSON.parse(contextFileContent)</span><br/><span class="hl-0">    </span><span class="hl-6">// TODO: (Aufgabe neu generieren)</span><br/><span class="hl-0">    </span><span class="hl-6">// TODO: init application based on your data model</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-6">// Aufgabe anzeigen</span><br/><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-1">navigator</span><span class="hl-0">.</span><span class="hl-7">navigateToExercise</span><span class="hl-0">(</span><span class="hl-1">exerciseFile</span><span class="hl-0">);</span>
</code><button>Copy</button></pre>
<p>Jedes Werkzeug sollte über eine &quot;Speichern&quot;-Funktion verfügen, mit der der Benutzer:</p>
<ul>
<li>Das interne Datenmodell in die Kontext-Datei speichert (sodass es später wieder geladen werden kann)</li>
<li>Die zugehörige Aufgabe wird generiert und die Vorschau zu dieser navigiert</li>
</ul>
<a id="md:hilfsunktionen-für-werkzeug-entwickler-ide-tool-utils" class="tsd-anchor"></a><h3><a href="#md:hilfsunktionen-für-werkzeug-entwickler-ide-tool-utils">Hilfsunktionen für Werkzeug-Entwickler (IDE-Tool-Utils)</a></h3><p><a href="./modules/helpers.html">Dokumentation der Hilfsfunktionen</a></p>
<p>Dieses Paket beinhaltet zusätzlich Hilfsfunktionen (auch IDE-Tool-Utils genannt) für 
Werkzeug-Entwickler. Diese sind aktuell in <code>TypeScript</code> implementiert, liegen jedoch 
auch als ES6-JavaScript und Standalone-Bibliothek zur direkten Verwendung vor. Keine der 
Hilfsfunktionen wird durch die <code>ide-lib.js</code> ausgeliefert!</p>
<blockquote>
<p><strong>Hinweis</strong>: Hilfunktionen ohne Build-System bereitzustellen gestaltet sich schwierig und
bringt große Nachteile mit sich:</p>
<ul>
<li>Als reine JavaScript-Datei - platziert auf einem Server - ist die die 
Offline-Fähigkeit (siehe <code>Helpers.enableOfflineUsageIfNecessary()</code>) von Werkzeugen nicht 
gewährleistet, da eine Internetverbindung zum Zugriff notwendig ist.</li>
<li>Werden Dateien oder Code-Ausschnitte von Hand kopiert, muss der Werkzeug-Entwickler sich
um das Aktualisieren kümmern.</li>
</ul>
<p>Als Kompromiss werden die Hilsfunktionen als reine JavaScript-Datei (ES5 oder ES6) 
bereitgestellt, sodass diese auch ohne TypeScript nutzbar sind.</p>
</blockquote>
<p>Die IDE-Tool-Utils können wie folgt genutzt werden</p>
<a id="md:build-system-mit-typescript-empfohlen" class="tsd-anchor"></a><h4><a href="#md:build-system-mit-typescript-empfohlen">Build-System mit TypeScript (empfohlen)</a></h4><p>Das Paket <code>@mathcaoch/ide-api</code> muss als npm-Abhängikeit in der <code>package.json</code> des Werkzeugs
angegeben werden. Fortan können die in TypeScript implementierten Hilfsfunktionen - aber 
auch die Schnittstellen der IDE-API - komfortabel verwendet werden. Eine bestmögliche Typsicherheit ist 
gegeben.</p>
<pre><code><span class="hl-3">import</span><span class="hl-0"> { </span><span class="hl-1">Helpers</span><span class="hl-0">, </span><span class="hl-1">MathCoach</span><span class="hl-0"> } </span><span class="hl-3">from</span><span class="hl-0"> </span><span class="hl-2">&quot;@mathcoach/ide-api&quot;</span><span class="hl-0">;</span><br/><span class="hl-1">Helpers</span><span class="hl-0">.</span><span class="hl-7">enableOfflineUsageIfNecessary</span><span class="hl-0">()</span><br/><span class="hl-0">...</span><br/><span class="hl-4">const</span><span class="hl-0"> </span><span class="hl-5">file</span><span class="hl-0">:</span><span class="hl-8">MathCoach</span><span class="hl-0">.</span><span class="hl-8">File</span><span class="hl-0"> = </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-7">getContextFile</span><span class="hl-0">()</span>
</code><button>Copy</button></pre>
<a id="md:build-system-es6-javascript" class="tsd-anchor"></a><h4><a href="#md:build-system-es6-javascript">Build-System ES6+ JavaScript</a></h4><p>Das Paket <code>@mathcaoch/ide-api</code> muss als npm-Abhängikeit in der <code>package.json</code> des Werkzeugs
angegeben werden. Fortan können die in ES6 JavaScript vorliegenden Hilfsfunktionen 
verwendet werden. Die Entwicklungsumgebung sollte grundlegende Hilfen (Autovervollständigung und eingebettete Dokumentation) anbieten.</p>
<pre><code><span class="hl-3">import</span><span class="hl-0"> { </span><span class="hl-1">Helpers</span><span class="hl-0"> } </span><span class="hl-3">from</span><span class="hl-0"> </span><span class="hl-2">&quot;@mathcoach/ide-api/dist/es6&quot;</span><br/><span class="hl-1">Helpers</span><span class="hl-0">.</span><span class="hl-7">enableOfflineUsageIfNecessary</span><span class="hl-0">();</span><br/><span class="hl-0">...</span><br/><span class="hl-4">const</span><span class="hl-0"> </span><span class="hl-5">file</span><span class="hl-0"> = </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-7">getContextFile</span><span class="hl-0">();</span>
</code><button>Copy</button></pre>
<a id="md:standalone" class="tsd-anchor"></a><h4><a href="#md:standalone">Standalone</a></h4><p>Die Hilfsfunktionen liegen als eigenständige Bibliothek vor ( siehe 
<code>./dist/lib/mathcoach-ide-tool-utils.js</code>). Diese muss händisch kopiert, in das Werkzeug 
eingebunden und mit ihm ausgeliefert werden. Über die globale Variable <code>MC_IDE_TOOL_UTILS</code> 
können die Hilfsfunktionen angesprochen werden. Die verwendete Entwicklungsumgebung kann
in der Regel nur wenig Unterstütztung anbieten (siehe auch <em>Typdefinition auch ohne Build-System nutzen</em>).</p>
<pre><code><span class="hl-6">// tool.html</span><br/><span class="hl-0">&lt;</span><span class="hl-1">script</span><span class="hl-0"> </span><span class="hl-1">src</span><span class="hl-0">=</span><span class="hl-2">&quot;/mathcoach/ui/ide/ide-lib.js&quot;</span><span class="hl-0">/&gt; </span><br/><span class="hl-0">&lt;</span><span class="hl-1">script</span><span class="hl-0"> </span><span class="hl-1">src</span><span class="hl-0">=</span><span class="hl-2">&quot;mathcoach-ide-tool-utils.js&quot;</span><span class="hl-0">/&gt; </span><br/><span class="hl-0">&lt;</span><span class="hl-1">script</span><span class="hl-0"> </span><span class="hl-1">src</span><span class="hl-0">=</span><span class="hl-2">&quot;tool.js&quot;</span><span class="hl-0">/&gt; </span><br/><br/><span class="hl-6">// tool.js</span><br/><span class="hl-4">const</span><span class="hl-0"> { </span><span class="hl-5">Helpers</span><span class="hl-0"> } = </span><span class="hl-5">MC_IDE_TOOL_UTILS</span><span class="hl-0">;</span><br/><span class="hl-1">Helpers</span><span class="hl-0">.</span><span class="hl-7">enableOfflineUsageIfNecessary</span><span class="hl-0">();</span><br/><span class="hl-0">...</span><br/><span class="hl-4">const</span><span class="hl-0"> </span><span class="hl-5">file</span><span class="hl-0"> = </span><span class="hl-3">await</span><span class="hl-0"> </span><span class="hl-5">MC</span><span class="hl-0">.</span><span class="hl-1">ide</span><span class="hl-0">.</span><span class="hl-7">getContextFile</span><span class="hl-0">();</span>
</code><button>Copy</button></pre>
<a id="md:beispiele" class="tsd-anchor"></a><h3><a href="#md:beispiele">Beispiele</a></h3><p>Im Verzeichnis <code>./examples/</code> finden sich Beispiele für externe Werkzeuge.</p>
<a id="md:entwicklung-kleinerer-werkzeuge" class="tsd-anchor"></a><h3><a href="#md:entwicklung-kleinerer-werkzeuge">Entwicklung kleinerer Werkzeuge</a></h3><p>Für kleiner Werkzeuge bietet es sich an im www-Verzeichnis zu entwickeln  (z.B.
<code>myTool/tool.html</code> und <code>myTool/tool.js</code>). Die MathCoach-IDE stellt Autovervollständigung beim
Editieren der <code>tool.js</code>-Datei zur Verfügung. Da es sich um eine JavaScript-Datei handelt,
ist keine Typsicherheit gegeben. Das Werkzeug muss lokal in die IDE integriert werden, siehe
weiter unten.</p>
<p><img src="media/usage_tool_developer.gif" alt="Demo"></p>
<p><em>Über einen Deklarations-Eintrag in der Datei <code>ide-settings.json</code> kann ein Werkzeug (lokal) in
die IDE integriert werden. Der Benutzer kann über das Kontext-Menü Dateien, die mit dem Werkzeug 
geöffnet werden können, anlegen. Wird im WWW-Teil des Dateisystems entwickelt, bietet die IDE 
grundlegende Unterstütztung beim Editieren von JavaScript-Dateien</em></p>
<a id="md:entwicklung-größerer-werkzeuge" class="tsd-anchor"></a><h3><a href="#md:entwicklung-größerer-werkzeuge">Entwicklung größerer Werkzeuge</a></h3><p>Für größere Werkzeuge sollten etablierte Entwicklungswerkzeuge verwendet werden, beispielsweise:</p>
<ul>
<li><a href="https://nodejs.org/en/">npm</a> um externe Bibliotheken (u.A. dieses Paket) einzubinden</li>
<li><a href="https://webpack.js.org/">webpack</a> oder <a href="https://parceljs.org/">Parcel</a> als Build-System um den Quellcode des Werkzeuges zu &quot;bündeln&quot;</li>
<li><a href="https://www.typescriptlang.org/">TypeScript</a> zum typsischeren Programmieren (und/oder Dateien zu ES6 oder ES5 konformen JavaScript umzuformen)</li>
<li><a href="https://git-scm.com/">Git</a> zur Versionierung des Quellcodes</li>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a> als Entwicklungsumgebung</li>
<li>Unit und End-To-End Tests</li>
</ul>
<p>Das &quot;gebündelte&quot; Werkzeug muss nach dem Build-Prozess in das WWW-Verzeichnis kopiert und ebenfalls 
lokal in die IDE integriert werden, siehe weiter unten.</p>
<a id="md:mathcoach-api-als-npm-package-einbinden" class="tsd-anchor"></a><h4><a href="#md:mathcoach-api-als-npm-package-einbinden">MathCoach-API als npm-Package einbinden</a></h4><p>Die MathCoach-API kann auch als npm-Package eingebunden werden, sodass eine typsichere
und komfortable Entwicklung (z.B. mit Visual Studio Code) möglich ist. Außerdem wird es 
möglich die angebotenen <a href="./modules/helpers.html">Hilfsfunktionen</a> zu einzubinden. Hierzu muss
die <code>package.json</code> des Werkzeug-Projektes wie folgt ergänzt werden:</p>
<pre><code><span class="hl-0">{</span><br/><span class="hl-0">    ...</span><br/><span class="hl-0">    </span><span class="hl-2">&quot;devDependencies&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0">        </span><span class="hl-2">&quot;@mathcoach/ide-api&quot;</span><span class="hl-1">:</span><span class="hl-0"> </span><span class="hl-2">&quot;git+https://bayes.htwsaar.de/gitblit/r/mathcoach/mathcoach-ide-api.git&quot;</span><br/><span class="hl-0">    },</span><br/><span class="hl-0">    ...</span><br/><span class="hl-0">}</span>
</code><button>Copy</button></pre>
<p>Der Git-Repo URL kann man eine Versionsnummer anhängen (z.B. <code>&quot;.../mathcoach/mathcoach-ide-api.git#3.0.0&quot;</code> 
für Version <code>3.0.0</code>), sodass die API, falls notwendig, versioniert <a href="https://semver.org/lang/de/">(Semantic Versioning)</a> werden kann. Verfügbare Versionen sind Git-Tags und können in der Weboberfläche des Git-Repositories
oder über die Konsole (<code>git tag --list</code>) eingesehen werden. </p>
<p>Nun können Hilfsfunktionen (in TypeScript) wie folgt eingebunden werden.  </p>
<pre><code><span class="hl-3">import</span><span class="hl-0"> { </span><span class="hl-1">Helpers</span><span class="hl-0"> } </span><span class="hl-3">from</span><span class="hl-0"> </span><span class="hl-2">&quot;@mathcoach/ide-api&quot;</span><span class="hl-0">;</span>
</code><button>Copy</button></pre>
<p>Die Typedefinition sollte automatisch verfügbar sein, sodass der Umgang mit der 
IDE API (Einstiegspunkt ist die globale Variable <code>MC</code>) durch eine Entwicklungsumgebung 
wie Visual Studio Code unterstützt wird. Falls nicht, muss man die Typdefinition händisch 
einbinden (siehe <em>Typdefinition auch ohne Build-System nutzen</em>).</p>
<a id="md:typdefinition-auch-ohne-build-system-nutzen" class="tsd-anchor"></a><h4><a href="#md:typdefinition-auch-ohne-build-system-nutzen">Typdefinition auch ohne Build-System nutzen</a></h4><p>Beim Arbeiten mit Visual Studio Code kann man auch ohne Einsatz weiterer Entwicklungswerkzeuge 
und Build-Systeme von der Typdefinition der IDE API profitieren. Hierzu muss ein spezielles 
Kommentar (Triple-Slash Directive) an den Anfang der JavaScript-Datei platziert 
werden (<code>path</code> falls nötig anpassen): </p>
<pre><code><span class="hl-6">/// </span><span class="hl-9">&lt;</span><span class="hl-10">reference</span><span class="hl-6"> </span><span class="hl-11">path</span><span class="hl-0">=</span><span class="hl-2">&quot;../node_modules/@mathcoach/ide-api/dist/es6/MathCoach.d.ts&quot;</span><span class="hl-9">/&gt;</span>
</code><button>Copy</button></pre>
<p>Dies sorgt dafür, dass Visual Studio Code Autovervollständigung samt Dokumentation der 
IDE API anbieten kann. Sollte es bei Verwendung von TypeScript notwendig sein, kann man eine
Datei wie <code>global.d.ts</code> anlegen und die Triple-Slash Directive dort einmalig hinterlegen.</p>
<a id="md:zertifikat-problem-beheben" class="tsd-anchor"></a><h4><a href="#md:zertifikat-problem-beheben">Zertifikat-Problem beheben</a></h4><p>Falls es Probleme mit dem HTW Zertifikat gibt, muss das Zertifikat von Newton ggf. von
Hand hinzugefügt werden. Nur so kann npm auf das Git-Repository zugreifen und den 
Inhalt automatisch herunterladen.</p>
<pre><code><span class="hl-1">cd</span><span class="hl-0"> /</span><span class="hl-1">usr</span><span class="hl-0">/</span><span class="hl-1">local</span><span class="hl-0">/</span><span class="hl-1">share</span><span class="hl-0">/</span><span class="hl-1">ca</span><span class="hl-0">-</span><span class="hl-1">certificates</span><span class="hl-0">/</span><br/><span class="hl-1">sudo</span><span class="hl-0"> </span><span class="hl-1">mkdir</span><span class="hl-0"> </span><span class="hl-1">newton</span><span class="hl-0">.</span><span class="hl-1">htwsaar</span><span class="hl-0">.</span><span class="hl-1">de</span><br/><br/><span class="hl-1">sudo</span><span class="hl-0"> </span><span class="hl-1">cp</span><span class="hl-0"> </span><span class="hl-1">path</span><span class="hl-0">/</span><span class="hl-1">to</span><span class="hl-0">/</span><span class="hl-1">newton</span><span class="hl-0">.</span><span class="hl-1">htwsaar</span><span class="hl-0">.</span><span class="hl-1">de</span><span class="hl-0">.</span><span class="hl-1">crt</span><span class="hl-0"> /</span><span class="hl-1">usr</span><span class="hl-0">/</span><span class="hl-1">local</span><span class="hl-0">/</span><span class="hl-1">share</span><span class="hl-0">/</span><span class="hl-1">ca</span><span class="hl-0">-</span><span class="hl-1">certificates</span><span class="hl-0">/</span><span class="hl-1">newton</span><span class="hl-0">.</span><span class="hl-1">htwsaar</span><span class="hl-0">.</span><span class="hl-1">de</span><span class="hl-0">/</span><br/><br/><span class="hl-1">sudo</span><span class="hl-0"> </span><span class="hl-1">chown</span><span class="hl-0"> </span><span class="hl-12">755</span><span class="hl-0"> /</span><span class="hl-1">usr</span><span class="hl-0">/</span><span class="hl-1">local</span><span class="hl-0">/</span><span class="hl-1">share</span><span class="hl-0">/</span><span class="hl-1">ca</span><span class="hl-0">-</span><span class="hl-1">certificates</span><span class="hl-0">/</span><span class="hl-1">newton</span><span class="hl-0">.</span><span class="hl-1">htwsaar</span><span class="hl-0">.</span><span class="hl-1">de</span><br/><span class="hl-1">sudo</span><span class="hl-0"> </span><span class="hl-1">chown</span><span class="hl-0"> </span><span class="hl-12">644</span><span class="hl-0"> /</span><span class="hl-1">usr</span><span class="hl-0">/</span><span class="hl-1">local</span><span class="hl-0">/</span><span class="hl-1">share</span><span class="hl-0">/</span><span class="hl-1">ca</span><span class="hl-0">-</span><span class="hl-1">certificates</span><span class="hl-0">/</span><span class="hl-1">newton</span><span class="hl-0">.</span><span class="hl-1">htwsaar</span><span class="hl-0">.</span><span class="hl-1">de</span><span class="hl-0">/</span><span class="hl-1">newton</span><span class="hl-0">.</span><span class="hl-1">htwsaar</span><span class="hl-0">.</span><span class="hl-1">de</span><span class="hl-0">.</span><span class="hl-1">crt</span><br/><span class="hl-1">sudo</span><span class="hl-0"> </span><span class="hl-1">update</span><span class="hl-0">-</span><span class="hl-1">ca</span><span class="hl-0">-</span><span class="hl-1">certificates</span>
</code><button>Copy</button></pre>
<a id="md:werkzeuge-in-die-ide-integrieren" class="tsd-anchor"></a><h2><a href="#md:werkzeuge-in-die-ide-integrieren">Werkzeuge in die IDE integrieren</a></h2><p>Damit die IDE das Werkzeug integrieren kann, muss eine Werkzeug-Deklaration registriert werden. Zur
Entwicklungszeit kann der Werkzeug-Entwickler dies lokal vornehmen. Anschließend können verknüpfte
Dateien mit dem Werkzeug geöffnet und erstellt werden (siehe Kontext-Menüs im IDE-Explorer).
Eine Freischaltung des Werkzeugs für alle Autoren erfolgt durch einen Administrator.</p>
<a id="md:lokal-nur-für-den-entwickler-des-werkzeugs" class="tsd-anchor"></a><h3><a href="#md:lokal-nur-für-den-entwickler-des-werkzeugs">Lokal (Nur für den Entwickler des Werkzeugs)</a></h3><p>In der IDE muss eine Werkzeug-Deklaration angelegt werden, dazu muss die Einstellungsdatei <code>ide-settings.json</code> 
editiert werden. Damit Änderungen an der Einstellungsdatei wirksam werden, muss die MathCoach IDE neu 
geladen (Seite neu laden) werden.</p>
<pre><code><span class="hl-0">{</span><br/><span class="hl-0">    ...</span><br/><span class="hl-0">    </span><span class="hl-2">&quot;editor.external.declarations&quot;</span><span class="hl-0">: [</span><br/><span class="hl-0">        {</span><br/><span class="hl-0">            </span><span class="hl-2">&quot;displayName&quot;</span><span class="hl-1">:</span><span class="hl-0"> </span><span class="hl-2">&quot;Dummy&quot;</span><span class="hl-0">,</span><br/><span class="hl-0">            </span><span class="hl-2">&quot;entry&quot;</span><span class="hl-1">:</span><span class="hl-0"> </span><span class="hl-2">&quot;/mathcoach/www/YOURNAME/tool.html&quot;</span><span class="hl-0">,</span><br/><span class="hl-0">            </span><span class="hl-2">&quot;description&quot;</span><span class="hl-1">:</span><span class="hl-0"> </span><span class="hl-2">&quot;...&quot;</span><span class="hl-0">,</span><br/><span class="hl-0">            </span><span class="hl-2">&quot;developer&quot;</span><span class="hl-1">:</span><span class="hl-0"> </span><span class="hl-2">&quot;...&quot;</span><span class="hl-0">,</span><br/><span class="hl-0">            </span><span class="hl-2">&quot;extension&quot;</span><span class="hl-1">:</span><span class="hl-0"> </span><span class="hl-2">&quot;fib.json&quot;</span><br/><span class="hl-0">        }</span><br/><span class="hl-0">        ...</span><br/><span class="hl-0">    ],</span><br/><span class="hl-0">    ...</span><br/><span class="hl-0">}</span>
</code><button>Copy</button></pre>
<table>
<thead>
<tr>
<th>Schlüssel</th>
<th>Beschreibung</th>
<th>Beispiel</th>
</tr>
</thead>
<tbody><tr>
<td><code>&quot;description&quot;</code></td>
<td>Eine kurze Beschreibung</td>
<td><code>&quot;Editor zum Erstellen von Fill-In-Blank Aufgaben.&quot;</code></td>
</tr>
<tr>
<td><code>&quot;developer&quot;</code></td>
<td>Namen der Werkzeug-Entwickler</td>
<td><code>&quot;John Doe, Jane Doe&quot;</code></td>
</tr>
<tr>
<td><code>&quot;displayName&quot;</code></td>
<td>Der Name des Werkzeugs</td>
<td><code>&quot;Fill-In-Blank-Editor&quot;</code></td>
</tr>
<tr>
<td><code>&quot;documentation&quot;</code></td>
<td><strong>Optional</strong>. Link zur Werkzeug-Dokumentation. Diese muss sich auf dem selben Server wie die IDE befinden.</td>
<td><code>&quot;/mathcoach/www/YOURNAME/fib/docs.html&quot;</code></td>
</tr>
<tr>
<td><code>&quot;entry&quot;</code></td>
<td>Der Einstiegspunkt für das Werkzeugs. Dieser muss sich auf dem selben Server wie die IDE befinden.</td>
<td><code>&quot;/mathcoach/www/YOURNAME/fib/tool.html&quot;</code></td>
</tr>
<tr>
<td><code>&quot;extension&quot;</code></td>
<td>Dateien anhand der Datei-Erweiterung mit dem Werkzeug verknüpfen. Hier sollte etwas Eindeutiges gewählt werden.</td>
<td><code>&quot;fib.json&quot;</code> für Dateien wie <code>someExercise.fib.json</code></td>
</tr>
</tbody></table>
<a id="md:global-für-alle-autoren" class="tsd-anchor"></a><h3><a href="#md:global-für-alle-autoren">Global (Für alle Autoren)</a></h3><ul>
<li>Das Werkzeug samt Werkzeug-Deklaration muss an einen Administrator übergeben werden</li>
<li>Der Administrator schaltet das Werkzeug nach einer kurzen Prüfung (Keine Konflikte mit anderen
Dateierweiterung, usw) frei. Beim nächsten Release von MathCoach ist das Werkzeug dann für alle
Autoren verfügbar.</li>
</ul>
<a id="md:infos-zu-diesem-repository" class="tsd-anchor"></a><h2><a href="#md:infos-zu-diesem-repository">Infos zu diesem Repository</a></h2><pre><code><span class="hl-0">.</span><br/><span class="hl-0">├── </span><span class="hl-5">CHANGELOG</span><span class="hl-0">.</span><span class="hl-1">md</span><span class="hl-0">                </span><span class="hl-6">// Dokumentation von Änderungen der API</span><br/><span class="hl-0">├── </span><span class="hl-1">examples</span><span class="hl-0">                    </span><span class="hl-6">// Beispiele</span><br/><span class="hl-0">│   ├── ...</span><br/><span class="hl-0">│   └── ...</span><br/><span class="hl-0">├── </span><span class="hl-1">media</span><span class="hl-0">                       </span><span class="hl-6">// Grafiken</span><br/><span class="hl-0">│   └── ...</span><br/><span class="hl-0">├── </span><span class="hl-1">test</span><span class="hl-0">                        </span><span class="hl-6">// Unit Tests</span><br/><span class="hl-0">│   └── ...</span><br/><span class="hl-0">├── </span><span class="hl-1">src</span><span class="hl-0">                         </span><span class="hl-6">// Hilfsfunktionen für Werkzeugentwickler</span><br/><span class="hl-0">│   ├── </span><span class="hl-1">index</span><span class="hl-0">.</span><span class="hl-1">ts</span><span class="hl-0">                </span><span class="hl-6">// Einstiegspunkt</span><br/><span class="hl-0">│   └── ...</span><br/><span class="hl-0">├── </span><span class="hl-1">mathcoach</span><span class="hl-0">-</span><span class="hl-1">api</span><span class="hl-0">.</span><span class="hl-1">d</span><span class="hl-0">.</span><span class="hl-1">ts</span><span class="hl-0">          </span><span class="hl-6">// Typ-Definition der API</span><br/><span class="hl-0">├── </span><span class="hl-1">package</span><span class="hl-0">.</span><span class="hl-1">json</span><br/><span class="hl-0">├── </span><span class="hl-3">package</span><span class="hl-0">-</span><span class="hl-1">lock</span><span class="hl-0">.</span><span class="hl-1">json</span><br/><span class="hl-0">├── </span><span class="hl-5">README</span><span class="hl-0">.</span><span class="hl-1">md</span><br/><span class="hl-0">└── </span><span class="hl-1">tsconfig</span><span class="hl-0">.</span><span class="hl-1">json</span>
</code><button>Copy</button></pre>
<a id="md:dokumentation-erzeugen" class="tsd-anchor"></a><h4><a href="#md:dokumentation-erzeugen">Dokumentation erzeugen</a></h4><pre><code><span class="hl-1">npm</span><span class="hl-0"> </span><span class="hl-1">install</span><span class="hl-0"> &amp;&amp; </span><span class="hl-1">npm</span><span class="hl-0"> </span><span class="hl-1">run</span><span class="hl-0"> </span><span class="hl-1">build</span>
</code><button>Copy</button></pre>
<a id="md:release-einer-neuen-version" class="tsd-anchor"></a><h4><a href="#md:release-einer-neuen-version">Release einer neuen Version</a></h4><ul>
<li>Version der API in der <code>package.json</code> eintragen</li>
<li>Version in der Überschrift der <code>README.md</code> eintragen</li>
<li>Beispiele und Changelog aktualisieren</li>
<li>IDE-Projekt prüfen:  <code>package.json</code>, <code>ide-lib.js</code>, ...</li>
<li>Final: Release Tag setzen <code>git tag -a VERSION -m &#39;...&#39;</code> und pushen</li>
</ul>
</div></div>
<div class="col-sidebar">
<div class="page-menu">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg>Settings</h3></summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4><form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
<details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg>On This Page</h3></summary>
<div class="tsd-accordion-details">
<ul>
<li>
<ul>
<li><a href="#md:mathcoach-ide-api-version-400"><span>Math<wbr/>Coach IDE API <wbr/>Version 4.0.0</span></a></li>
<li>
<ul>
<li><a href="#md:version"><span>Version</span></a></li>
<li><a href="#md:idee"><span>Idee</span></a></li>
<li><a href="#md:entwicklung-externer-werkzeuge"><span>Entwicklung externer <wbr/>Werkzeuge</span></a></li>
<li>
<ul>
<li><a href="#md:empfohlenes-vorgehen"><span>Empfohlenes <wbr/>Vorgehen</span></a></li>
<li><a href="#md:hilfsunktionen-für-werkzeug-entwickler-ide-tool-utils"><span>Hilfsunktionen für <wbr/>Werkzeug-<wbr/>Entwickler (IDE-<wbr/>Tool-<wbr/>Utils)</span></a></li>
<li>
<ul>
<li><a href="#md:build-system-mit-typescript-empfohlen"><span>Build-<wbr/>System mit <wbr/>Type<wbr/>Script (empfohlen)</span></a></li>
<li><a href="#md:build-system-es6-javascript"><span>Build-<wbr/>System ES6+ <wbr/>Java<wbr/>Script</span></a></li>
<li><a href="#md:standalone"><span>Standalone</span></a></li></ul></li>
<li><a href="#md:beispiele"><span>Beispiele</span></a></li>
<li><a href="#md:entwicklung-kleinerer-werkzeuge"><span>Entwicklung kleinerer <wbr/>Werkzeuge</span></a></li>
<li><a href="#md:entwicklung-größerer-werkzeuge"><span>Entwicklung größerer <wbr/>Werkzeuge</span></a></li>
<li>
<ul>
<li><a href="#md:mathcoach-api-als-npm-package-einbinden"><span>Math<wbr/>Coach-<wbr/>API als npm-<wbr/>Package einbinden</span></a></li>
<li><a href="#md:typdefinition-auch-ohne-build-system-nutzen"><span>Typdefinition auch ohne <wbr/>Build-<wbr/>System nutzen</span></a></li>
<li><a href="#md:zertifikat-problem-beheben"><span>Zertifikat-<wbr/>Problem beheben</span></a></li></ul></li></ul></li>
<li><a href="#md:werkzeuge-in-die-ide-integrieren"><span>Werkzeuge in die IDE integrieren</span></a></li>
<li>
<ul>
<li><a href="#md:lokal-nur-für-den-entwickler-des-werkzeugs"><span>Lokal (<wbr/>Nur für den <wbr/>Entwickler des <wbr/>Werkzeugs)</span></a></li>
<li><a href="#md:global-für-alle-autoren"><span>Global (<wbr/>Für alle <wbr/>Autoren)</span></a></li></ul></li>
<li><a href="#md:infos-zu-diesem-repository"><span>Infos zu diesem <wbr/>Repository</span></a></li>
<li>
<ul>
<li><a href="#md:dokumentation-erzeugen"><span>Dokumentation erzeugen</span></a></li>
<li>
<ul>
<li><a href="#md:release-einer-neuen-version"><span>Release einer neuen <wbr/>Version</span></a></li></ul></li></ul></li></ul></li></ul></li></ul></div></details></div>
<div class="site-menu">
<nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4-path"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)" id="icon-4-text"></path></svg><span>@mathcoach/ide-<wbr/>api</span></a>
<ul class="tsd-small-nested-navigation">
<li>
<details class="tsd-index-accordion" data-key="Helpers"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg><a href="modules/Helpers.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>Helpers</span></a></summary>
<div class="tsd-accordion-details">
<ul class="tsd-nested-navigation">
<li><a href="classes/Helpers.InMemoryStorage.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>In<wbr/>Memory<wbr/>Storage</span></a></li>
<li><a href="functions/Helpers.contextFileToExerciseFile.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg><span>context<wbr/>File<wbr/>To<wbr/>Exercise<wbr/>File</span></a></li>
<li><a href="functions/Helpers.createStorageBasedApi.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>create<wbr/>Storage<wbr/>Based<wbr/>Api</span></a></li>
<li><a href="functions/Helpers.enableOfflineUsageIfNecessary.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>enable<wbr/>Offline<wbr/>Usage<wbr/>If<wbr/>Necessary</span></a></li>
<li><a href="functions/Helpers.isFile.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg><span>is<wbr/>File</span></a></li></ul></div></details></li>
<li>
<details class="tsd-index-accordion" data-key="MathCoach"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg><a href="modules/MathCoach.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>Math<wbr/>Coach</span></a></summary>
<div class="tsd-accordion-details">
<ul class="tsd-nested-navigation">
<li><a href="interfaces/MathCoach.Api.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg><span>Api</span></a></li>
<li><a href="interfaces/MathCoach.File.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg><span>File</span></a></li>
<li><a href="interfaces/MathCoach.FileSystemApi.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg><span>File<wbr/>System<wbr/>Api</span></a></li>
<li><a href="interfaces/MathCoach.IdeApi.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg><span>Ide<wbr/>Api</span></a></li>
<li><a href="interfaces/MathCoach.NavigatorApi.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg><span>Navigator<wbr/>Api</span></a></li></ul></div></details></li></ul></nav></div></div></div>
<div class="tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
<div class="overlay"></div></body></html>