Anleitung: Wie man ein iPad für die WordPress Theme-Entwicklung nutzt

Ich habe kürzlich mit dem Studium begonnen und musste, bevor ich mir ein MacBook Air kaufte (die M1-Chips sind übrigens fantastisch), ein iPad Pro für die Uni verwenden. Da ich aber Informatik studiere, musste ich einen Weg finden, es zum Programmieren zu nutzen. Daher begann meine Suche nach dem besten Weg, auf einem iPad zu programmieren.

Die ersten Optionen, die ich fand, waren gut, aber nicht großartig, da ich keinen Code oder Programme ausführen konnte, die ich wollte, mangels Kommandozeilen- oder Root-Zugriff. Ich hätte Plattformen wie Coder, Gitpod, GitHub Codespaces oder sogar Replit nutzen können, aber das war nicht das, wonach ich suchte.

Aber dann fand ich das perfekte Programm. Es ist kostenlos, Open-Source und selbst-hostbar. Es ist auch die Basis für Coder, eine Plattform, die ich bei meiner Suche gefunden habe. Es heißt code-server und ist im Grunde ein gehosteter VS Code mit vollem Dateisystemzugriff auf Ihren Server.

Zuerst war mein Anwendungsfall für die Java-Programmierung (das ist die Sprache, die wir im Kurs lernen), aber bald erkannte ich, dass ich es auch für andere Programmieraufgaben nutzen konnte, nämlich für die Entwicklung von WordPress-Themes!

Anforderungen

Sie benötigen zwei Dinge, um loszulegen

Einen Linux-Server mit Root-Zugriff. Ich persönlich nutze einen VPS von OVH. Ein Raspberry Pi funktioniert, aber die Schritte sind aufwändiger und gehen über den Rahmen dieses Artikels hinaus.
Ein iPad oder jedes andere Gerät, das normalerweise nicht zum Programmieren verwendet werden kann (z. B. ein Chromebook).

Ich gehe davon aus, dass Sie auf demselben Server arbeiten wie Ihre WordPress-Website. Außerdem wurde dieser Leitfaden mit Ubuntu 20.04.2 LTS geschrieben.

Installation

Wir müssen uns zuerst per SSH mit unserem Server verbinden. Wenn Sie ein iPad verwenden, empfehle ich Termius, da es für unsere Bedürfnisse sehr gut funktioniert. Sobald wir auf unserem Server angemeldet sind, installieren wir code-server, was Root-/Sudo-Zugriff erfordert.

Die Installation ist sehr einfach; tatsächlich ist es nur ein einziger Terminalbefehl. Es ist auch derselbe Befehl, wenn Sie ihn aktualisieren

curl -fsSL https://code-server.dev/install.sh | sh

Konfiguration

Sobald code-server installiert ist, gibt es ein paar Möglichkeiten, wie wir es konfigurieren können. Wir *könnten* einfach code-server ausführen und es würde funktionieren – aber es würde auch kein HTTPS haben und nur eine grundlegende Authentifizierung bieten. Ich möchte immer HTTPS aktiviert haben und außerdem verlangt meine Domain es sowieso.

Um HTTPS zu aktivieren, gibt es wieder ein paar Möglichkeiten. Die erste in der Dokumentation von code-server verwendet Let's Encrypt mit einem Reverse-Proxy wie NGINX oder Caddy. Das funktioniert zwar großartig, erfordert aber viel manuelle Konfiguration und ich wollte mich damit nicht herumschlagen. code-server bietet jedoch eine weitere Option, --link, die großartig funktioniert, obwohl sie sich noch im Beta-Stadium befindet. Dieses Flag richtet ein TLS-Zertifikat, GitHub-Authentifizierung und eine dedizierte cdr.co-URL ein! Alles ohne jegliche Konfiguration unsererseits! Wie cool ist das denn? Um es einzurichten, führen Sie diesen Befehl aus (kein Root-/Sudo-Zugriff für dies erforderlich, jeder normale Benutzer funktioniert)

code-server --link

Dies erstellt eine URL für uns, um uns mit unserem GitHub-Konto anzumelden, damit es weiß, welches Konto autorisiert werden soll. Sobald dies geschehen ist, erhalten wir eine dedizierte URL und sind startklar! Jeder Benutzer hat seine eigene Konfiguration und sein eigenes GitHub-Konto, daher denke ich, dass es technisch möglich sein könnte, mehrere Instanzen gleichzeitig für mehrere Personen auszuführen. Ich habe es jedoch nicht getestet.

Nachdem das GitHub-Konto konfiguriert wurde, drücken wir Ctrl+C, um den Vorgang zu beenden.

Das Ausführen von code-server --link gibt uns eine Login-URL.

Wenn wir auf die URL in Termius tippen, können wir sie in Safari öffnen.

GitHub autorisiert Ihr Konto nach der Anmeldung.

Sobald die App autorisiert ist, sollten Sie direkt in eine vertraute Oberfläche gelangen!

Zurück in unserer SSH-Sitzung können wir sehen, dass die permanente URL jetzt verfügbar ist! Beachten Sie, dass sie nur funktioniert, wenn code-server ausgeführt wird.

Einrichten von WordPress Theme-Abhängigkeiten

Es gibt viele Möglichkeiten, ein WordPress-Theme zu entwickeln, aber ich mag die Art und Weise, wie Automattics underscores (_s) funktioniert, sehr, daher verwenden wir es als Ausgangspunkt.

Um _s nutzen zu können, installieren wir Composer. Da ich davon ausgehe, dass Sie auf demselben Server wie Ihre WordPress-Website arbeiten, ist PHP bereits installiert. Obwohl ich die Schritte hier auflisten könnte, hat die Composer-Website sie bereits besser aufbereitet, als ich es je könnte.

Sobald Composer installiert ist, müssen wir Node.js installieren, indem wir diese Befehle im Terminal ausführen

cd ~
curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
node -v

Diese Befehle fügen das aktualisierte Node PPA hinzu – da das in Ubuntu enthaltene sehr veraltet ist (Node 10!) – installieren dann Node und ermitteln dessen Version.

Der letzte Befehl sollte etwas wie v16.6.1 zurückgegeben haben, was bedeutet, dass wir bereit sind!

Das Theme einrichten

Um das _s-Theme einzurichten, führen wir npx degit automattic/_s my-cool-theme aus. Dies lädt den _s-Code in einen Ordner namens my-cool-theme herunter. Wenn Sie das Theme direkt in Ihrem WordPress-Themes-Verzeichnis haben möchten, können Sie diesen Ordner entweder verschieben, einen Symlink darauf erstellen oder den vollständigen Pfad zum Ordner im vorherigen Befehl angeben. Ich bevorzuge es persönlich, meine Dateien zu zippen, indem ich npm run bundle ausführe und sie dann manuell in meinem themes-Ordner entpacke.

Sobald all das erledigt ist, führen wir code-server --link aus, öffnen unseren Browser und navigieren zu unserer URL!

In unserer VS Code-Instanz können wir den Ordner öffnen, der unser Theme enthält, und die Schnellstartschritte für _s befolgen, um unser Theme korrekt zu benennen. Dann führen wir im integrierten Terminal composer install und npm install aus. Dies installiert alle erforderlichen Pakete für das Theme. Ich werde nicht erklären, wie ein WordPress-Theme funktioniert, da viele erfahrenere Leute dies bereits getan haben.

Und... das war's! Unser Server hat jetzt alles, was wir brauchen, um einige großartige WordPress-Themes mit einem iPad oder einem anderen Gerät mit Browser und Tastatur zu entwickeln. Wir könnten wahrscheinlich sogar eine Xbox benutzen, sobald deren neuer Browser veröffentlicht wird.

Wie die Entwicklung aussieht

Alles, worüber wir gesprochen haben, klingt theoretisch großartig, oder? Wahrscheinlich fragen Sie sich aber, wie es tatsächlich ist, auf einem iPad mit dieser Konfiguration zu entwickeln. Ich habe das folgende Video aufgenommen, um zu zeigen, wie es für mich ist. Es ist ein paar Minuten lang, gibt aber meiner Meinung nach eine gute Reflexion der Dinge, die bei der WordPress-Entwicklung auftreten.

Ein paar Hinweise zu diesem Setup

Da code-server das Open-Source-VS-Code verwendet – nicht die Version von Microsoft –, fehlen einige Dinge. Es verwendet auch nicht den Marktplatz von Microsoft für Erweiterungen, was bedeutet, dass nicht alle Erweiterungen verfügbar sind. Wir können uns nicht bei unserem Microsoft- oder GitHub-Konto anmelden, um unsere Einstellungen zu synchronisieren, aber wir können auch die Settings Sync extension verwenden, obwohl ich persönlich Schwierigkeiten hatte, sie zum Synchronisieren meiner Erweiterungen zu verwenden. Jeder Linux-Benutzer hat seine eigenen Einstellungen und Erweiterungen, die in diesem Ordner gespeichert sind: ~/.local/share/code-server. Es ist eine ähnliche Ordnerstruktur wie bei einer regulären VS Code-Installation.

Es gibt auch Möglichkeiten, code-server als Dienst anstelle einer direkten SSH-Sitzung auszuführen, damit er immer läuft, aber ich ziehe es vor, ihn zu öffnen, wenn ich ihn brauche.

Einige iPad-spezifische Tipps

Wenn Sie vorhaben, ein iPad wie ich zu nutzen, hier sind einige Tipps, um Ihr Erlebnis angenehmer zu gestalten!

Aktivieren Sie die Standortverfolgungsfunktion in Termius, da sie die SSH-Verbindung am Leben erhält, auch wenn die App im Hintergrund läuft.
Öffnen Sie die Website über Safari, dann öffnen Sie das Freigabeblatt, um sie zu Ihrer Startseite hinzuzufügen! PWAs sind der Renner
Safari speichert Dinge sehr aggressiv und das Löschen ist sehr nervig. Der einzige Weg, den ich gefunden habe, ist im Grunde das Löschen des Browserverlaufs, was nicht ideal ist. Es gibt kein „Hard Refresh“ wie bei jedem anderen Desktop-Browser. Chrome behandelt es möglicherweise besser.
Kaufen Sie sich eine Bluetooth-Tastatur oder sogar eine Hülle (Brydge ist eine gute Wahl), denn das lässt es sich eher wie ein Laptop als ein Tablet anfühlen. Eine physische Tastatur macht das Erlebnis tausendmal angenehmer als eine Bildschirmtastatur!
Das iPad „verliert“ manchmal den Fokus des Editors, besonders beim Wechseln zwischen Apps, was das Tippen unmöglich macht. Ich behebe das normalerweise, indem ich auf die Seitenleiste tippe und dann in den Editor.