Wer eine eigene Webseite hat denkt vielleicht auch daran, dass es doch cool wäre, wenn die Website einfach als App im Play Store verfügbar wäre.
Das hat mehrere Vorteile – es braucht keinen Browser, damit Benutzer die eigene Webseite besuchen können. Die Wahrscheinlichkeit, dass Benutzer die Seite regelmäßig besuchen steigt, wenn es sich um eine App handelt gegenüber einer normalen Webseite.
Die Vorgehensweise ist vergleichsweise einfach, wenn man ein bisschen technisch versiert ist. Kosten entstehen hierbei keine.
Visual Studio als Programmieroberfläche für deine App
Mithilfe von Visual Studio können wir eine Webseite in eine App für Android verwandeln. Dazu benötigst du am Besten einen Windows Computer (oder Laptop) und lädst dir Visual Studio 2022 Community herunter.
Heruntergeladen wird der Visual Studio Installer. Bei der Abfrage, welche Pakete du installiere möchtest wählst du „.NET Multi-Platform App UI-Entwicklung“ und danach markierst du Rechts „Xamarin“ und klickst auf „Installieren“.
Visual Studio Start und Ersteinrichtung
Damit du nicht alles neu erstellen musst, habe ich das Basisprojekt vorbereitet und du kannst es hier herunterladen. Download aus iCloud
Nach der Installation und dem Download startest du Visual Studio (z.B. über das Startmenü). Es öffnet sich ein Dialog – hier wählst du „Bestehendes Projekt öffnen“.
Wähle nun das Projekt aus, welches du grade heruntergeladen hast.
Auf der Rechten Seite findest du den Projektmappen-Explorer. Hier wählst du die mainactivity.cs und doppelklickst sie.
Es öffnet sich nun der Code-Editor. Hier scrollst du herunter bis zur Zeile 35 und änderst dort die URL in deine eigene.
Öffne nun über den Projektmappen-Explorer den Ordner „Resources“ und den Unterordner „values“. Dort doppelklickst du strings.xml.
Im Editor änderst du den Namen Webview_Android in den gewünschten Namen deiner App.
Nun kannst du alles speichern und die App im Emulator testen. Dazu klickst du oben einfach auf den Playbutton – möglicherweise musst du zunächst ein Gerät installieren. Dieses Vorgehen ist allerdings wirklich selbsterklärend.
Optimierungen der App
Wenn alles nun so funktioniert wie gewünscht, können ein paar Anpassungen vorgenommen werden, um die App zu personalisieren. Hierzu können z.B. die Logos ausgetauscht werden. Dazu müssen die png-Files im Projekt einfach ausgetauscht werden.
Tausche dazu die .png Files in den mipmap-Unterordnern im gezeigten Screenshot gegen deine eigenen Logos aus. Um Anpassungen am Quellcode zu verhindern, nennst du sie am Besten genauso, wie sie im Original hießen.
Fertig mit der App – fürs erste
Deine App ist damit soweit fertig. Schau dich gerne im Visual Studio weiter um, um ggf. weitere Personalisierungen in deiner App vorzunehmen, oder sie zu verbessern.
Ich werde einen 2. Teil dieser Anleitung schreiben, in der wir die App aus Visual Studio exportieren und für den Upload in den Play Store vorbereiten. Ich werde dann hier den Link einfügen.