tas2580
Blog über Webentwicklung und Linux Server

Webseite als Android App

tas2580  

Heutzutage gibt es für fast alles eine App, da wäre es doch praktisch wenn man das Angebot das man als Webseite hat auch als App hätte. Das Problem ist nur das man dazu alles nochmal neu entwickeln muss. Außerdem gibt es verschiedene Betriebssysteme für Smartphones. Man muss seine Anwendung also gleich mehrmals schreiben um alle Systeme abdecken zu können. Viel einfacher wäre es doch einfach eine Webseite zu erstellen und dann eine App zu basteln die einfach die Webseite anzeigt. Das hat den Vorteil das man nicht ständig Updates beim User einspielen muss und man das Angebot auch ohne App einfach mit dem Browser nutzen kann. Ich habe mir mal angescheut wie das für Android geht und will das hier kurz beschreiben.

Android Studio installieren

Eigentlich arbeite ich ja viel mit Eclipse was auch sehr gut zum entwickeln von Android Apps geeignet ist, da ich mir aber beim letzten Versuch das Android SDK für Eclipse zu installieren alles zerschossen habe versuche ich es dieses mal mit Android Studio.

Android Studio kann man hier runterladen, das Paket muss einfach nur entpackt werden. Danach kann man es mit /bin/studio.sh ausführen. Ich wurde allerdings erst mal mit folgender Fehlermeldung begrüßt:

tools.jar' seems to be not in Android Studio classpath. Please ensure JAVA_HOME points to JDK rather than JRE.

Um das zu beheben muss man openjdk-7-jdk nachinstallieren, also einfach als Root auf der Konsole:

apt-get install openjdk-7-jdk

Jetzt startet Android Studio problemlos, beim ersten Start kann man eine neue Konfiguration anlegen oder eine schon vorhandene Auswählen. Danach müssen noch einige Lizenzen abgenickt werden und man kann mit einem neuen Project beginnen.

Project anlegen

Für die App legt man ein neues Project an, dazu muss man einen Namen für das Project vergeben, ich habe hier Webbrowser gewählt. Außerdem muss man noch eine Domain angeben, hier habe ich tas2580.net gewählt. Der Vollständige Name der App ist dann also net.tas2580.webbrowser. Im nächsten Schritt kann man auswählen für welche Android Version man seine App entwickeln möchte, ich habe hier einfach mal 4.0.3 gewählt. Nun kann man eine Vorlage auswählen aus der man seine App erstellen möchte, hier habe ich Blank Activity gewählt. Jetzt muss man der Activity noch einen Namen geben, hier habe ich wieder Webbrowser angegeben. Android Studio erstellt jetzt eine leere App in der schon die wichtigsten Dateien vorhanden sind.

App erstellen

Als erstes muss die AndroidMainifest.xml bearbeitet werden, die Datei ist für die Eigenschaften der App zuständig. Mein Code sieht folgendermaßen aus:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.tas2580.website" >
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

In der Datei werden zu erst die benötigten Rechte angegeben, hier wird nur Internetzugriff also <uses-permission android:name="android.permission.INTERNET" />benötigt. Dann werden die Eigenschaften der App angegeben. Das Icon und der Name der App wird aus dem Project geholt, man könnte auch @string/app_name durch einen beliebigen String austauschen um den Namen seiner App zu ändern. Sauberer ist aber natürlich das über die Projecteinstellungen zu machen.

Als nächstes muss man den Webbrowser in die res/layout/activity_main.xml einfügen. Die Datei ist für das Aussehen der App zuständig. Mit dem Editor kann man alle möglichen Steuerelemente und Textfelder einfügen. Das kann man entweder per Drang&Drop machen oder man bearbeitet direkt den Code. Hier muss nur ein Webview Element eingefügt werden in dem später unsere Webseite angezeigt werden soll. Mein Code sieht folgendermaßen aus:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingTop="1dp"
    android:paddingBottom="1dp"
    tools:context=".MainActivity">
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

In der Datei wird oben angegeben wie groß die Activity sein soll und wie breit ihr Rahmen sein soll, in dem Beispiel hat der Rahmen eine Dicke von 1dp. Unten werden die Eigenschaften für das WebView Element angegeben das hier die komplette Größe des Elternelements also der Activity einnimmt. Wenn man noch einen Text über dem WebView Element anzeigen will muss man es entsprechend anpassen. Der Visuelle Designer hilft einem dabei.

Als letztes muss noch die java/net.tas2580.webbrowser/MainActivity bearbeitet werden. In der Datei steht der eigentliche Programmcode der App. Bei mir sieht er folgendermaßen aus:

package net.tas2580.website;
import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
    private WebView webView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        webView.loadUrl("https://tas2580.net");
        webView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView viewx, String urlx) {
                if (urlx.contains("tas2580.net")) {
                    viewx.loadUrl(urlx);
                } else {
                    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(urlx));
                    startActivity(i);
                }
                return true;
            }
        });

        return;
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (webView.canGoBack()) {
                        webView.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }

        }
        return super.onKeyDown(keyCode, event);
    }
}

Oben werden erst mal per import die benötigten Komponenten geladen. In der MainActivity Klasse wird dann der Webbrowser initialisiert und die Einstellungen festgelegt, hier kann man z.B. die Unterstützung für JavaScript oder DomStorage abschalten. mit webView.loadUrl("https://tas2580.net"); gibt man an welche URL beim Start der App geladen werden soll.

webView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView viewx, String urlx) {
                viewx.loadUrl(urlx);
                return false;
            }
        });

Der Teil gibt an das Links in der App geöffnet werden sollen und nicht der Standard Browser geöffnet werden soll.

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_BACK:
                    if (webView.canGoBack()) {
                        webView.goBack();
                    } else {
                        finish();
                    }
                    return true;
            }

        }
        return super.onKeyDown(keyCode, event);
    }

Der Teil sorgt dafür das der Back Button eine Seite zurück springt statt die App zu beenden.

Das war schon der komplette Code den man für eine App die eine Webseite anzeigt benötigt.

App erstellen

Bevor man die App endgültig erstellt sollte man sie erst mal testen. Dazu bringt Android Studio eine VM mit in der man verschiedene Android Versionen auf verschiedenen Geräten starten kann. Mit Run->Run 'app' sollte ein Handy erscheinen in dem ein Android mit der App gestartet wird. Wenn man wie ich ein 32Bit System verwendet muss man vorher unter Run->Edit Configurations im Tab Emulator unter Additional command line options: -force-32bit eintragen. Da man sonst eine Fehlermeldung erhellt:

ERROR: 32-bit Linux Android emulator binaries are DEPRECATED, to use them you will have to do at least one of the following: - Use the '-force-32bit' option when invoking 'emulator'. - Set ANDROID_EMULATOR_FORCE_32BIT to 'true' in your environment. Either one will allow you to use the 32-bit binaries, but please be aware that these will disappear in a future Android SDK release. Consider moving to a 64-bit Linux system before that happens.

Wenn die VM erfolgreich startet kann man dort die App erst mal ausgiebig testen. Wenn alles so läuft wie man es möchte kann man unter Build->Make Project eine APK Datei erstellen die man auf ein Android Telefon kopieren und benutzen kann.

Die App kann natürlich noch weiter ausgebaut werden, so hat man nur eine sehr einfache Version ohne Menu oder sonstigen Funktionen. Um eine Webseite als App zu Verfügung zu stellen reicht das aber erstmal aus. Die Webseite die man anzeigen lässt sollte natürlich für kleine Bildschirme optimiert sein das sie sich gut bedienen lässt. Wenn man auf der Seite HTML5 Formulare verwendet kann der User Eingaben sehr bequem machen und es gibt kaum noch einen Unterschied zu einer richtigen App.

Das Ergebnis kann hier runter geladen werden.

Über den Autor

tas2580

Weitere Informationen über mich findest du hier.

Ähnliche Beiträge


Kommentare

Ich danke dir für diesen Beitrag. Er ist leicht verständlich und hat mir obwohl ich fast garnichts über Android Apps programmieren weiß sehr geholfen.

Doof finde ich nur das der Nexus 5 Simulator so lange braucht :/

Vielen Dank für den tollen Beitrag, er hat mir sehr geholfen.

Die Manifest.xml- Datei muss bei mir folgendermassen aussehen, sonst gibts ne Fehlermeldung:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="XXXXX" >

<uses-permission android:name="android.permission.INTERNET" />

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Bei einer Bildschirmauflösung von max 1024X800px lässt sich Android Studio quasie nicht verwenden da der Button "Next" ausserhalb des sichtbaren Bereiches liegt. Da nutzt es auch nix die Statusleiste auszublenden.
Nach langem hin und her bin ich auf die Idee gekommen den Monitor auf Hochformat umzustellen. Dann geht es, nur die Bedienung des Touchpads ist dann doch etwas gewöhnungsbedürftig.
Nun habe ich seit rund 4 Stunden so einen hübschen Ladebalken auf meinem Bildschirm "Building "My Aplication" Gradl project info".
Gibt es keine einfache Möglichkeit einen einfachen Webview als APK hinzubekommen?? Ich bin auf diverse Baukästensysteme gestoßen. Einige können sogar das was ich brauche (Externe Links im Browser und einen selbstdeffinierten User Agent). Allerdings versuchen die Baukastenanbieter die fertige App mit Werbung und die Teile benötigen Berechtigungen die ich selber nie installieren würde. (Alles was Zugriff auf meinen Standort haben will fliegt augenblicklich vom Gerät)
Andre "Baukästen" sind werbefrei (Web2APK) können aber keinen UserAgent.

Hat da mal einer ne Empfehlung oder Lust mir son Ding zu coden?? Vieleicht ist ein kleines Trinkgeld ja günstiger als ein neuer Computer :-)

Wenn du mir ne E-Mail mit der URL deiner Webseite und ein Icon schickst kann ich dir daraus eine App bauen.

Erst einmal herzlichen Dank für dein Angebot @Tobias

Ich habe Dir ja auch schon ganz fleißig eine E Mail geschrieben. Jetzt und hier schreie ich laut „Stopp“. Das mit der Primitivversion, also dem einfachen Vebview, das hat sich erledingt. Kann ich selber :-)
Für alle die das auch können wollen und mit Android Studio so ihre Probleme haben, hier eine Bedienanleitung:
Im Playstore gibt es eine APP mit dem Namen „APK Editor Pro“. Nicht verwand und nicht verschwägert, aber damit geht’s. Nicht ganz umsonst, aber billiger als die Baukästen.
Wenn ihr die App habt, dann kommt ihr hier her zurück und ladet euch die tas2580 App herunter. Rasch installieren das Teil und dann den APK Editor Pro öffnen und die App tas2580 zum editieren auswählen.
„Vollständiges Bearbeiten“ wählen. Dann auf den Reiter „Dateien“ und dann auf den Knopf mit der Beschriftung „DEX → Smali“
Euer Telefon rechnet einige Minuten. Irgendwann ist es fertig. Am unteren Bildschirmrand findet ihr ein Suchfeld. Da schreibt ihr rein „https://tas2580.net“ und klickt auf Suchen.
Ihr findet die smali/net/tas2580/website/MainActivity.smali
Innerhalb dieser Datei findet ihr den String „const-string v1, „https://tas2580.net“ den ersetzt ihr durch „const-string v1, „https://www.meine-tolle-seite.de
Und wenn eure Page nicht „meine-tolle-seite.de“ heißt, dann schreibt ihr da halt was anderes rein. Schon klar, oder??
Jetzt muss nur noch der Teilstring ersetzt werden den die Linkurl enthalten soll die innerhalb eurer App geöffnet werden soll. Wenn ihr nur den Teil da oben ändert, dann öffnet sich erst die App, und dann euer Browser der dann „meine-tolle-seite.de“ aufruft. Nicht Sinn der Sache.
Tobias beschreibt das da oben wo das definiert ist, dummerweise stimmt das nach dem compilieren der App scheinbar nicht mehr.
Das was wichtig ist, das findet ihr in der „smali/net/tas2580/website/MainActivity$1.smali“ Mann beachte das „$1“.
In dieser Datei findet ihr den String „const-string v1, „tas2580.net““
Da ersetzt ihr das tas2580.net wieder gegen „meine-tolle-seite.de“ Wem es was nutzt, mann kann es auch gegen „meine-tolle-seite.de/verzeichniss ersetzen. Wenn man die App nur für einen Teil seiner Webseite basteln möchte.
So wie ich :-)
Anschließend oben rechts auf „Speichern“ und dann auf „Installieren“ und schon habt ihr ne App für eure Webseite. Ganz ohne euch damit rumzuärgern den passenden Pfad zum SDK in eurem Android Studio zu definieren.
Ich hoffe die Infos sind dem ein oder anderen Skiptkiddy nützlich.
Was ich jetzt noch rausfinden muss: Wie setze ich nen User Agent??
Und wie geht das mit dem Signieren??
Wenn mir da noch jemand helfen mag... ansonsten habe ich Ausdauer beim googeln :-)

Angeblich kann man den Useragent mit
webView.getSettings().setUserAgentString("Android");
setzen. Habe das aber noch nicht probiert.
Ich bin grad auch dabei das hier bei den Tools einzubauen. Also ein Tool bei dem man seine URL angibt und dann die passende APK bei raus kommt. Ich habe nur noch so meine Probleme mit dem Android Compiler, werde das aber hoffentlich bald lösen können.


Kommentar schreiben

URLs werden automatisch umgewandelt.
[b]DEIN TEXT[/b] für Fett gedruckt
[quote]DEIN ZITAT[/quote] für Zitate
[code]DEIN CODE[/code] für Code
captcha