Visual Studio Code auf dem iPad nutzen

Kürzlich stand ich vor dem Problem, dass mir im Urlaub mein Hauptcomputer nicht zur Verfügung steht. Ich reise im Urlaub normalerweise nur mit einer leichten IT-Ausstattung, in diesem Fall meinem iPad Pro und ein paar Kabeln und Ladegeräten. Das ist eine bewusste Entscheidung, da ich nicht zu viel — im besten Fall gar keine — Zeit damit verbringen möchte, vor meinem Computer zu sitzen. Es gibt aber Situationen, in denen man schnell etwas reparieren muss: zum Beispiel, wenn eine meiner Webseiten kaputtgeht oder ein anderer Dienst nicht mehr läuft. Selbst wenn das theoretisch möglich wäre, ist es schwierig, solche Dinge auf einem Smartphone zu beheben, ohne eine IDE wie VSCode[arch] zur Verfügung zu haben.

Ich brauchte also ein Setup, mit dem ich zumindest dringende Dinge reparieren kann, ohne gleichzeitig in Versuchung zu geraten, mehr als das zu tun.

Warum iOS VSCode nicht nativ unterstützt

Apples iOS ist ein stark reglementiertes Betriebssystem. Das bringt viele Vorteile mit sich, hat aber auch Nachteile. Einer davon ist, dass man keine Apps installieren kann, die auf ein zugrunde liegendes Betriebssystem angewiesen sind. VSCode nutzt intensiv die vom Betriebssystem bereitgestellte Shell. Da iOS keine Shell bereitstellt, ist es schwierig, diese Apps zu portieren. Die App müsste eine komplette Linux-Distribution enthalten, um denselben Funktionsumfang bieten zu können.

Diese Einschränkung führt dazu, dass VSCode auf einem vollwertigen Betriebssystem laufen muss statt direkt auf dem iPad. Aber keine Sorge, es wird sich trotzdem so anfühlen, als würde es direkt auf deinem iPad laufen.

Hardware-Setup

Da wir ein portables und leichtes Setup aufbauen wollen, verwenden wir Komponenten, die auch abseits des Stromnetzes laufen können und eine kleine Bauform haben.

Stückliste

1. Raspberry Pi 4 (8GB)[arch]: du kannst auch die 4GB-Variante wählen, aber man kann nie genug Speicher haben!
2. USB-C-zu-USB-C-Kabel: Achte darauf, dass es Power Delivery und Datenübertragung unterstützt.
3. Micro-SD-Karte mit 128GB oder mehr. Ich selbst nutze eine SanDisk Ultra 400GB Class 10 Karte.
4. Gehäuse für den Raspberry Pi
5. iPad Pro mit USB-C-Anschluss
6. (Bluetooth-)Tastatur & Maus für das iPad

RPis USB-C-Port als Netzwerkschnittstelle einrichten

Wir konfigurieren den USB-C-Port des Raspberry so, dass er als Netzwerkkarte für dein iPad fungiert. Dadurch kann das iPad mit deinem Raspberry kommunizieren, während es gleichzeitig in seinem WLAN-Netzwerk bleibt, um internetbasierte Dienste nutzen zu können.

Verbinde dich per SSH mit deinem Pi und führe die folgenden Schritte aus. Alternativ kannst du deine SD-Karte an einem Computer einbinden und die Schritte 1-3 durch Bearbeiten der Dateien dort durchführen.

1. Bearbeite /boot/config.txt und füge dtoverlay=dwc2 hinzu. Dadurch wird der USB-OTG-Modus auf deinem Raspberry aktiviert.

2. Füge modules-load=dwc2 an das Ende von /boot/cmdline.txt an. Dadurch erhält der Kernel den Befehl, dieses Modul als Parameter zu laden

3. Falls SSH noch nicht aktiviert ist, aktiviere es, indem du eine leere Datei namens ssh in /boot/ anlegst. Das Anlegen aktiviert den SSH-Server beim nächsten Boot

4. Bearbeite /etc/modules und füge libcomposite in einer neuen Zeile am Ende der Datei hinzu. Dadurch wird sichergestellt, dass die USB-Gadget-Treiber geladen werden

5. Bearbeite /etc/dhcpd.conf und füge denyinterfaces usb0 hinzu. Da wir nicht wollen, dass unsere USB-Netzwerkschnittstelle von DHCP konfiguriert wird, schließen wir das hier explizit aus

6. Installiere dnsmasq mit sudo apt-get install dnsmasq. dnsmasq fungiert als DHCP-Server für die USB-basierte Netzwerkschnittstelle. Es stellt sicher, dass die Ethernet-Schnittstelle deines iPads eine IP-Adresse erhält.

7. Erstelle eine neue Datei /etc/dnsmasq.d/usbnetwork mit folgendem Inhalt:

   /etc/dnsmasq.d/usbnetwork #L1-L4 Kopieren

   1interface=usb0
   2dhcp-range=10.55.0.2,10.55.0.6,255.255.255.248,1h
   3dhcp-option=3
   4leasefile-ro

8. Erstelle /etc/network/interfaces.d/usb0 mit folgendem Inhalt:

   /etc/network/interfaces.d/usb0 #L1-L5 Kopieren

   1auto usb0
   2allow-hotplug usb0
   3iface usb0 inet static
   4  address 10.55.0.1
   5  netmask 255.255.255.248

9. Erstelle /root/usb.sh und füge Ben Hardills großartigen Code[arch] zur Konfiguration der Hardware-Eigenschaften ein:

   /root/usb.sh #L1-L31 Kopieren

    1#!/bin/bash
    2cd /sys/kernel/config/usb_gadget/
    3mkdir -p pi4
    4cd pi4
    5echo 0x1d6b > idVendor # Linux Foundation
    6echo 0x0104 > idProduct # Multifunction Composite Gadget
    7echo 0x0100 > bcdDevice # v1.0.0
    8echo 0x0200 > bcdUSB # USB2
    9echo 0xEF > bDeviceClass
   10echo 0x02 > bDeviceSubClass
   11echo 0x01 > bDeviceProtocol
   12mkdir -p strings/0x409
   13echo "fedcba9876543211" > strings/0x409/serialnumber
   14echo "Ben Hardill" > strings/0x409/manufacturer
   15echo "PI4 USB Device" > strings/0x409/product
   16mkdir -p configs/c.1/strings/0x409
   17echo "Config 1: ECM network" > configs/c.1/strings/0x409/configuration
   18echo 250 > configs/c.1/MaxPower
   19# Add functions here
   20# see gadget configurations below
   21# End functions
   22mkdir -p functions/ecm.usb0
   23HOST="00:dc:c8:f7:75:14" # "HostPC"
   24SELF="00:dd:dc:eb:6d:a1" # "BadUSB"
   25echo $HOST > functions/ecm.usb0/host_addr
   26echo $SELF > functions/ecm.usb0/dev_addr
   27ln -s functions/ecm.usb0 configs/c.1/
   28udevadm settle -t 5 || :
   29ls /sys/class/udc > UDC
   30ifup usb0
   31service dnsmasq restart

10. Mache die Datei mit chmod +x /root/usb.sh ausführbar

11. Füge /root/usb.sh in /etc/rc.local vor der Zeile exit 0 hinzu, damit es bei jedem Systemstart automatisch ausgeführt wird.

Nachdem du deinen Pi (neu) gestartet hast, solltest du auf deinem iPad eine neue Netzwerkschnittstelle sehen:

VSCode einrichten

Ich gehe davon aus, dass du raspbian[arch] auf deinem Pi installiert hast. Falls nicht, folge den Anweisungen hier[arch], um dahin zu gelangen.

Um VSCode auf dem Pi auszuführen und vom iPad aus zugänglich zu machen, verwenden wir code-server[arch]. Code-server verpackt VSCode und seine Abhängigkeiten in einen Dienst, auf den du über deinen Browser zugreifen kannst.

Code-server auf deinem Raspberry Pi installieren

1. Installiere yarn mit sudo apt-get install yarn

2. Installiere code-server global mit yarn global add code-server

3. Du solltest code-server jetzt mit yarn run code-server starten können

4. Passe die Code-Server-Konfiguration an deine Netzwerkkonfiguration an. Bearbeite ~/.config/code-server/config.yaml und füge folgende Konfiguration ein:

   ~/.config/code-server/config.yaml #L1-L5 Kopieren

   1bind-addr: 10.55.0.1:8080
   2auth: password
   3password: changeme
   4cert: true
   5cert-host: raspberrypi.local

5. Deine code-server-Instanz sollte jetzt von deinem iPad aus über Safari oder einen anderen Browser unter https://raspberrypi.local:8080 erreichbar sein. Falls das nicht funktioniert, versuche, das WLAN auf deinem iPad vorübergehend zu deaktivieren. Du kannst es wieder aktivieren, nachdem VSCode in Safari geladen wurde.

An diesem Punkt solltest du die VSCode-Anmeldeaufforderung sehen, die nach dem Passwort (changeme) fragt, das wir in der YAML-Datei konfiguriert haben. Um VSCode korrekt nutzen zu können, müssen wir auf dem iPad noch weitere Konfigurationen vornehmen. Lies weiter!

Detailliertere Anweisungen zur Installation von code-server findest du hier[arch].

Code-server beim Systemstart automatisch starten

Damit code-server bei jedem Systemstart automatisch startet, müssen wir es bei systemd registrieren. Erstelle eine neue Datei /lib/systemd/system/code-server.service mit folgendem Inhalt:

 1[Unit]
 2Description=code-server
 3After=network.target
 4
 5[Service]
 6Type=simple
 7ExecStart=yarn exec code-server
 8Restart=always
 9User=pi
10Group=pi
11
12[Install]
13WantedBy=multi-user.target

Führe dann systemctl daemon-reload aus, um den neuen Dienst zu aktivieren.

Du kannst den Status von code-server nun mit systemctl status code-server prüfen. Er sollte dir mitteilen, dass er active (running) ist. Falls nicht, kannst du versuchen, ihn mit systemctl restart code-server neu zu starten.

VSCode zum Homescreen deines iPads hinzufügen

Der Zugriff auf VSCode über den Safari-Browser des iPads ist nicht ganz einfach, da VSCode Web-Sockets verwendet, um mit dem Backend zu kommunizieren, das auf deinem Raspberry Pi läuft. Damit diese Kommunikation funktioniert, muss die Verbindung verschlüsselt sein (HTTPS oder TLS). Glücklicherweise stellt code-server ein Zertifikat für dich bereit. Diesem Zertifikat muss auf dem iPad vertraut werden.

Zertifikat auf dem iPad importieren

1. Suche auf dem Raspberry nach der Datei ~/.local/share/code-server/raspberrypi_local.crt und kopiere sie auf dein iPad.
2. Öffne raspberrypi_local.crt in der Dateien-App und folge den Dialogen, um dem importierten Zertifikat zu vertrauen.
3. Öffne die Einstellungen-App und navigiere zu Allgemein -> Info -> Zertifikatsvertrauenseinstellungen (unten in der Liste) und aktiviere den Schalter Vollständiges Vertrauen für Root-Zertifikate aktivieren für das Zertifikat namens raspberrypi.local.

   

VSCode als Progressive Web App zum Homescreen hinzufügen

1. Öffne https://raspberrypi.local:8080 in Safari
2. Klicke auf das Teilen-Symbol
3. Wähle Zum Home-Bildschirm und vergib einen Namen

   

   Du solltest jetzt VSCode öffnen können, indem du auf das gerade erstellte Symbol tippst.

Herzlichen Glückwunsch!

Du hast gerade ein vollständig portables Software-Entwicklungs-Setup erstellt, das sogar ohne Internetverbindung genutzt werden kann. Lass mich in den Kommentaren wissen, was du davon hältst!