Smarthome App #1: Projekt erstellen & erste Schritte

Im heutigen Tutorial wird mit der Programmierung der Smarthome-App für Android-Geräte begonnen. Im Laufe dieses Beitrags werde ich dir zeigen, wie du Android Studio installierst, das Projekt erstellen kannst und die ersten Aufgaben erledigst.

Das Video zum Tutorial

JDK & Android Studio

In Android Studio wird die Programmiersprache Java genutzt. Damit du mit Java arbeiten kannst, muss das Java Development Kit installiert sein. Du kannst dir hier das JDK herunterladen. Wenn der Download abgeschlossen ist, musst du das JDK noch auf deinem Computer installieren. Anschließend kannst du dir Android Studio herunterladen und nach dem Download auf deinem PC installieren. Nach der Installation startest du Android Studio und kannst nun ein neues Projekt erstellen.

Projekt erstellen

Hier klickst du auf "Start a new Android Studio Project" und gibst im nächsten Schritt bei "Application Name" "Smarthome" und bei "Company Domain" "smarthome-blogger.de" ein. Den Ort des Projektordners kannst du dir frei aussuchen. Klicke auf "Next" und setze im nächsten Schritt einen Haken bei "Wear", falls du vorhast auch eine App für deine Android Smartwatch zu erstellen. Jetzt klickst du erneut auf "Next" und wählst "Empty Activity". Nach einem weiteren Klick auf "Next" gibst du der Activity den Namen "LoginActivity" und gehst mit "Next" weiter zum nächsten Schritt. Dort wählst du "Add No Activity", da die App für AndroidWear erst später erstellt wird. Mit "Finish" schließt du die Projekterstellung ab.

Vorbereitung zur Programmierung

Bevor im nächsten Teil des Tutorials mit der eigentlichen Programmierung der App begonnen wird, werden zunächst noch ein paar kleinere Aufgaben erledigt, wie das das Setzen der Berechtigungen, das Definieren von Ressourcen-Dateien und das Einbinden benötigter Bibliotheken.

Berechtigungen definieren

Um die Berechtigungen der App zu setzen klickst du in Android Studio ganz links auf "Projekt", um die Dateien anzuzeigen. Dort öffnest du nun die Datei mobile -> manifests -> AndroidManifest.xml.

Die AndroidManifest-Datei findest du hier.

Über dem application-Tag fügst du folgende Zeile hinzu, um der App zu ermöglichen Internetverbindungen aufzubauen:

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

Farben und Abstände definieren

Als nächstes werden die Farben für die App definiert. Dazu öffnest du die Datei mobile -> res -> values -> colors.xml und ersetzt den Code mit folgendem:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="colorHeaderStart">#00CCFF</color>
	<color name="colorPrimary">#0099cc</color>
	<color name="colorPrimaryDark">#0077aa</color>
	<color name="colorAccent">@color/colorPrimary</color>

	<color name="textColorDark">#666666</color>
	<color name="textColorLight">#ffffff</color>

	<color name="layoutBackground">#eeeeee</color>
</resources>

Um Abstände und Größen festzulegen, öffnest du die Datei mobile -> res -> values -> dimens.xml und fügst dort die folgenden 4 Zeilen ein:

<dimen name="cardViewElevation">4dp</dimen>
<dimen name="cardViewCornerRadius">4dp</dimen>
<dimen name="recyclerItemHeight">200dp</dimen>
<dimen name="recyclerItemWidth">120dp</dimen>

Benötigte Bibliotheken hinzufügen

Um die Bibliotheken hinzuzufügen, öffnest du die Datei Gradle Scripts -> build.gradle (Module: mobile) und fügst im Block "dependencies" diese 3 Zeilen hinzu:

compile 'com.android.volley:volley:1.0.0'
compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:recyclerview-v7:23.4.0'

Volley ist eine Bibliothek zum Senden von HTTP-Post-Anfragen, CardView ist ein Design-Element aus den Google Material-Design-Richtlinien und RecyclerView ist eine Liste, bei der die Elemente nur dann geladen werden, wenn sie auch angezeigt werden, um Listen mit vielen Elementen immer flüssig darzustellen.

Weitere Activity anlegen

Nun wird noch eine neue Activity hinzugefügt, die Später einmal das Hauptmenü der App wird. Klicke dazu wie im Bild zu sehen mit der rechten Maustaste auf eine Java-Datei und wähle New -> Activity -> Navigation Drawer Activity.

So kannst du eine neue Activity erstellen.

Gib der Activity den Namen MainActivity und klicke auf "Finish", um sie zum Projekt hinzuzufügen. Füge der Datei MainActivity.java nun über der onCreate-Methode die folgende Zeile hinzu:

final static String EXTRA_ROOMS = "EXTRA_ROOMS";

Mit einem Extra können Daten, die zwischen Activities ausgetauscht werden eindeutig identifiziert werden.

Klasse für Server-Verbindung anlegen

Als letzte wird die Klasse "HTTPRequest" erstellt. Klicke dazu mit der rechten Maustaste auf eine bereits erstellte Java-Klasse, dann New und anschließend Java Class. Dort gibst du den Namen "HTTPRequest" ein und klickst auf "Ok".

Jetzt wird die Klasse HTTPRequest erstellt.

In die Klasse "HTTPRequest" fügst du nun eine Methode und ein Interface ein. Die Methode "sendRequest" stellt die Verbindung zum Server her und sendet die in requestData enthaltenen Werte als Post-Parameter in der Anfrage mit. Anschließend wird das je nach Antwort des Servers entweder die onRequestResult- oder die onError-Methode des übergebenen Callback-Objektes aufgerufen. Das Interface HTTPRequestCallback wird von einer aufrufenden Klasse implementiert und dadurch festgelegt, was bei einem Aufruf von onRequestResult bzw. onError passieren soll. Bei einem Aufruf von sendRequest wird eine Instanz von HTTPRequestCallback als Parameter übergeben.

/**
 * Sendet eine HTTP-Post-Request an den Server
 * @param context
 * @param requestData
 * @param serverIp
 * @param callback
 */
public static void sendRequest(final Context context, final Map<String,String> requestData, String serverIp,
                               final HTTPRequestCallback callback){

    RequestQueue MyRequestQueue = Volley.newRequestQueue(context);

    String url = "http://"+serverIp+"/api.php";

    StringRequest MyStringRequest = new StringRequest(Request.Method.POST, url, new Response.Listener<String>() {
        @Override
        public void onResponse(String response) {
            Log.i("RequestResult", response);

            callback.onRequestResult(response);
        }
    }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
            callback.onError("Server nicht erreichbar");
        }
    }){
        protected Map<String, String> getParams(){
            return requestData;
        }
    };

    MyRequestQueue.add(MyStringRequest);

}

/**
 *F&uuml;hrt Callback in implementierenden Klassen aus
 */
public interface HTTPRequestCallback{
    void onRequestResult(String result);

    void onError(String msg);
}

Das war's für heute mit der Android App. Im nächsten Tutorial wird der Login-Bildschirm vorläufig designed und auch implementiert.

Über den Autor

Sascha Huber

Hallo, ich bin Sascha, der Gründer von Smarthome Blogger.

Mit einer Leidenschaft für Technologie und einem Hintergrund als Software Engineer habe ich 2016 Smarthome Blogger gegründet. Mein Ziel war es schon immer, innovative Lösungen zu entdecken, die unser Leben einfacher und intelligenter gestalten können. In meinem beruflichen Leben arbeite ich täglich mit Software und Technik, aber auch in meiner Freizeit bin ich stets auf der Suche nach neuen technischen Spielereien und Möglichkeiten, mein Zuhause zu automatisieren und zu verbessern.

Auf Smarthome Blogger teile ich mein Wissen, meine Erfahrungen und meine Begeisterung für alles rund um das Thema Smarthome.

Dieser Beitrag hat dir gefallen?

Dann abonniere doch unseren Newsletter!