# Visual Studio Code auf dem iPad nutzen > Ein iPad als Computerersatz zu nutzen ist bei Aufgaben abseits der Entwicklung einfach — aber wie sieht es mit Coding aus? Hier ist ein vollständig portables VSCode-Setup, das sogar offline funktioniert. - URL: https://blog.goroot.de/de/post/Visual-Studio-Code-auf-dem-iPad-nutzen/ - Erstveröffentlichung: 2021-07-29 - Lastmod: 2021-07-29 - 1238 Wörter, 6 min - Tags: vscode, development, raspberry-pi - Autor: Michael Kolb — goroot (https://blog.goroot.de/de/) --- 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](https://code.visualstudio.com) 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)](https://www.raspberrypi.org/products/raspberry-pi-4-model-b/): 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: ```ini {file="/etc/dnsmasq.d/usbnetwork"} interface=usb0 dhcp-range=10.55.0.2,10.55.0.6,255.255.255.248,1h dhcp-option=3 leasefile-ro ``` 8. Erstelle `/etc/network/interfaces.d/usb0` mit folgendem Inhalt: ```ini {file="/etc/network/interfaces.d/usb0"} auto usb0 allow-hotplug usb0 iface usb0 inet static address 10.55.0.1 netmask 255.255.255.248 ``` 9. Erstelle `/root/usb.sh` und füge [Ben Hardills großartigen Code](https://www.hardill.me.uk/wordpress/2019/11/02/pi4-usb-c-gadget/) zur Konfiguration der Hardware-Eigenschaften ein: ```bash {file="/root/usb.sh"} #!/bin/bash cd /sys/kernel/config/usb_gadget/ mkdir -p pi4 cd pi4 echo 0x1d6b > idVendor # Linux Foundation echo 0x0104 > idProduct # Multifunction Composite Gadget echo 0x0100 > bcdDevice # v1.0.0 echo 0x0200 > bcdUSB # USB2 echo 0xEF > bDeviceClass echo 0x02 > bDeviceSubClass echo 0x01 > bDeviceProtocol mkdir -p strings/0x409 echo "fedcba9876543211" > strings/0x409/serialnumber echo "Ben Hardill" > strings/0x409/manufacturer echo "PI4 USB Device" > strings/0x409/product mkdir -p configs/c.1/strings/0x409 echo "Config 1: ECM network" > configs/c.1/strings/0x409/configuration echo 250 > configs/c.1/MaxPower # Add functions here # see gadget configurations below # End functions mkdir -p functions/ecm.usb0 HOST="00:dc:c8:f7:75:14" # "HostPC" SELF="00:dd:dc:eb:6d:a1" # "BadUSB" echo $HOST > functions/ecm.usb0/host_addr echo $SELF > functions/ecm.usb0/dev_addr ln -s functions/ecm.usb0 configs/c.1/ udevadm settle -t 5 || : ls /sys/class/udc > UDC ifup usb0 service 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: ![iPad Einstellungen Netzwerkschnittstelle](settings-network-interface.png) ## VSCode einrichten Ich gehe davon aus, dass du [raspbian](https://www.raspbian.org) auf deinem Pi installiert hast. Falls nicht, [folge den Anweisungen hier](https://www.raspberrypi.org/software/), um dahin zu gelangen. Um VSCode auf dem Pi auszuführen und vom iPad aus zugänglich zu machen, verwenden wir [code-server](https://github.com/cdr/code-server). 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: ```yaml {file="~/.config/code-server/config.yaml"} bind-addr: 10.55.0.1:8080 auth: password password: changeme cert: true cert-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](https://coder.com/docs/code-server/v3.11.0/install#yarn-npm)._ ## 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: ```ini {file="/lib/systemd/system/code-server.service"} [Unit] Description=code-server After=network.target [Service] Type=simple ExecStart=yarn exec code-server Restart=always User=pi Group=pi [Install] WantedBy=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`. ![Zertifikatsvertrauenseinstellungen](./certificate-trust-settings.jpg) **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 ![zum Homescreen hinzufügen](./add-to-homescreen.png) 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!