App Entwicklung für Smartphone und Tablet by Jens-Thomas Meyer

Android

jtmeyer — 2021-07-19 06:04:17 UTC

Das Unternehmen Android wurde 2003 von Andy Rubin gegründet, um Software für Mobiltelefone und standortbezogene Dienste zu entwickeln. Bei der Entwicklung von Android wurden vorwiegend bereits bestehende Komponenten unter Open-Source-Lizenzen neu zusammengestellt (Linux-Kernel, Java, C).
2005 kaufte Google das Unternehmen Android und gab am 5.November 2007 bekannt das Mobiltelefon-Betriebssystem Android weiterzuentwickeln. Seit Oktober 2008 ist Android offiziell verfügbar.

Android

jtmeyer — 2021-07-19 09:38:08 UTC

IOS

jtmeyer — 2021-07-19 09:40:27 UTC

Microsoft Windows Phone

jtmeyer — 2021-07-19 09:45:26 UTC

BlackBerry OS

jtmeyer — 2021-07-19 09:47:20 UTC

Tizen

jtmeyer — 2021-07-19 09:49:17 UTC

Ubuntu Touch

jtmeyer — 2021-07-19 09:51:13 UTC

Sailfish OS

jtmeyer — 2021-07-19 09:53:40 UTC

Symbian

jtmeyer — 2021-07-19 09:54:56 UTC

Firefox OS

jtmeyer — 2021-07-19 09:56:19 UTC

WebOS

jtmeyer — 2021-07-19 09:57:21 UTC

Fire OS

jtmeyer — 2021-07-19 09:59:14 UTC

Android Entwicklungswerkzeuge

jtmeyer — 2021-07-19 10:06:40 UTC

MIT App Inventor

jtmeyer — 2022-06-20 09:51:18 UTC

MIT Appinventor

jtmeyer — 2022-06-23 12:33:33 UTC

Das Massachusetts Institute of Technology hat in einer Gruppe von Prof Hal Abelson ein Programm entwickelt, mit dem Apps für Android Systeme und IOS Systeme entwickelt werden können. Zur Programmierung wurde Python verwendet, das auf beiden Systemen verfügbar ist. Dadurch wird nicht das Android Studio mit der Programmiersprache Java oder von Apple Swift/ Xcode benötigt. Die Programmierung erfolgt über Blöcke, ähnlich dem vom MIT stammenden Programm Scratch.

Definition des Funktionsumfangs

jtmeyer — 2022-06-24 06:11:32 UTC

Mit dem MIT App Inventor soll eine App zum Übersetzen von Wörtern oder Sätzen aus dem Deutschen in andere Sprachen entwickelt werden.

In der ersten Version soll die App übersetzen in Englisch, Französisch, Spanisch und Italienisch.
Die Eingabe soll sowohl über den Text als auch über eine Spracheingabe erfolgen.
Die Ausgabe des Ergebnisses soll als Text und Sprachausgabe erfolgen.

Definition der Funktion

jtmeyer — 2022-06-24 06:20:23 UTC

Mit dem MIT App Inventor soll ein einfaches Pong Spiel für das Smartphone entwickelt werden.

Der Ball soll sich in zufällige Richtungen bewegen.
Der Schläger soll sich zu der Position bewegen, die auf dem Bildschirm angetippt wird.
Die Bewegung des Schlägers erfolgt nur in x-Richtung.

jtmeyer — 2022-06-24 06:36:14 UTC

Schritt 1 : Aufbau des Bildschirms (User Interface)

jtmeyer — 2022-06-24 07:38:29 UTC

Für die Entwicklung der App wird im ersten Schritt mit dem Designer der Bildschirm mit den notwendigen Elementen aufgebaut. Im zweiten Schritt wird dann die Funktion der Elemente (Blöcke) programmiert.
Das Bild zeigt eine Auswahl von Elementen für das User Interface, aus denen wir jetzt die Elemente auswählen können und mit der Maus auf den Bildschirm bewegen können und dort platzieren können.
Wir benötigen:

5 Labels zur Beschriftung der Funktionen
eine input Text Box
ein Button für die Spracheingabe
vier Buttons für die Übersetzungen

Diese musst du zunächst untereinander auf dem Screen platzieren. Dann sollte es so aussehen wie im folgenden Bild.

jtmeyer — 2022-06-24 07:43:23 UTC

Ändern der Beschriftung

jtmeyer — 2022-06-24 08:02:10 UTC

Danach änderst du für jedes Element den Anzeigenamen auf dem Screen und den Namen der Komponenten:

Aus Label1 wird Texteingabe durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
inputTextBox wird nicht verändert.
Aus Button1 wird Spracheingabe durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Label2 wird Englisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Button2 wird übersetze englisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Label3 wird Französisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Button3 wird übersetze französisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Label4 wird Spanisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Button4 wird übersetze spanisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Label5 wird Italienisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.
Aus Button5 wird übersetze italienisch durch Umbenennen unter Komponenten und ändern des Anzeigetextes unter Eigenschaften.

Das Ergebnis sollte dann wie im Bild oben aussehen.

Unsichtbare Elemente

jtmeyer — 2022-06-24 08:17:20 UTC

Unsere App benutzt einige Elemente, die auf dem Screen nicht sichtbar sind. Du findest diese unter Medien. Wir benötigen:

4 mal den Translator
4 mal TextToSpeech
1 mal SpeechRecognizer

Du kannst diese Elemente unter Medien mit der Maus irgendwo auf den Screen ziehen. Sie werden dann unterhalb angezeigt.

jtmeyer — 2022-06-24 08:18:12 UTC

Schritt 2 : Programmierung

jtmeyer — 2022-06-24 09:29:12 UTC

Wir programmieren nun:

die Spracheingabe
die Übersetzung in Englisch
die Sprachausgabe

Für die anderen Sprachen kannst du diese Elemente kopieren (rechte Maustaste) und entsprechend ändern.

Spracheingabe

jtmeyer — 2022-06-24 09:48:13 UTC

Klicke links unter Blocks auf die Spracheingabe und schiebe den Block "when Spracheingabe Click" in das Programmierfenster.
Dann wird aus den Funktionen der Spracheingabe der Block "Call speechrecognizer.GetText" (lila) ausgewählt und in den Block hereingezogen. Das Ergebnis siehst du im nächsten Bild.

jtmeyer — 2022-06-24 09:49:30 UTC

Spracheingabe in Textfeld

jtmeyer — 2022-06-24 10:12:50 UTC

Im Anschluss wird der gesprochene Text in das Textfeld übertragen.
Dazu gibt es zwei Elemente:

"when speechrecognizer before getting text"
"when speechrecognizer after getting text"

Mit dem ersten Befehl wird das Textfeld geleert, mit dem zweiten Befehl wird der neue Text hineingeschrieben.

Um das Textfeld zu leeren wählst du einen leeren Text aus dem Menü Text (ganz oben) aus.

Den gesprochenen Text überträgst du mit dem Block "SpeechRecognizer Result" in das Textfeld (Bild oben).

jtmeyer — 2022-06-24 10:13:38 UTC

Übersetzung Englisch Teil 1

jtmeyer — 2022-06-24 10:29:57 UTC

Die Übersetzung wird mit dem Button "übersetze Englisch" ausgeführt.
Du wählst aus dem Menü (links) den Block:

"when übersetze EN click"

aus. Dann wählst du aus dem Translator den Block:

"call Translator1 RequestTranslation"

aus (siehe oben).

Die Sprache "de-en" gibst du über ein Textfeld ein, aus dem Menü für die Textbox wählst du "TextBox1.Text" für den Text, der übersetzt werden soll.

Übersetzung Englisch Teil 2

jtmeyer — 2022-06-24 10:56:30 UTC

Jetzt wird aus dem Translator1 der Block:

"when Translator1 GetTranslation"

ausgewählt. Aus "übersetze EN" wird der Block:

"set übersetze En.Text"

ausgewählt. Die Übersetzung findest du durch Anklicken des roten "translation" --> "get translation".

Zum Schluss kommt jetzt noch die Sprachausgabe. Nehme aus dem Menü "TextToSpeech" den Block:

"call TextToSpeach".Speak"

und füge dort "get translation" ein.

Jetzt ist Englisch fertig. Juhu!!!!! Speichern nicht vergessen!

Screen einrichten

jtmeyer — 2022-06-26 09:39:07 UTC

Schritt 1 : Aufbau des Bildschirms. In diesem Video wird gezeigt, wie die Komponenten auf dem User Interface platziert werden.

Unsichtbare Elemente

jtmeyer — 2022-06-26 11:30:21 UTC

In diesem Video wird das Hinzufügen der Komponenten Spracheingabe, SpeechRecognizer und TextToSpeech gezeigt. Diese Komponenten sind auf dem Screen unsichtbar, können aber programmiert werden.

Spracheingabe, Speech Recognizer, Text to Speech

jtmeyer — 2022-06-26 11:34:53 UTC

In diesem Video wird die Programmierung der Spracheingabe, des SpeechRecognizers und der Übertragung des Textes in die Textbox gezeigt.

Übersetzung Englisch und Ausgabe als Sprache und als Text.

jtmeyer — 2022-06-26 12:47:12 UTC

Jetzt wird der gesprochene oder eingegebene Text ins Englische übersetzt und als Sprache und Text ausgegeben.

Erweiterung des Übersetzers

jtmeyer — 2022-06-26 13:05:26 UTC

Im letzten Schritt wird der Übersetzer erweitert für Französisch, Spanisch und Italienisch.

Finale App - Endprodukt

jtmeyer — 2022-06-26 15:40:23 UTC

Dieses ist die endgültige Version der Übersetzer App.

Erstellen einer App

jtmeyer — 2022-06-27 13:21:52 UTC

Eine eigene App für das Smartphone erstellen ist nützlich, aber auch schwierig. Es gibt viele App Baukästen, die einfach aussehen aber bald schwierig werden. Wir wollen es versuchen und benutzen dazu LearningApps.org. Klicke dazu auf den nächsten Block und du kommst zu der Webseite von LearningApps.

jtmeyer — 2022-06-27 13:22:22 UTC

Eine App mit LearningApps erstellen

jtmeyer — 2022-06-27 13:22:52 UTC

Auf der Seite hast du jetzt mehrere Möglichkeiten. Du kannst dir schon fertige Apps anschauen (Apps durchsuchen) oder eine neue App erstellen (hier gibt es viele Vorlagen).

jtmeyer — 2022-06-27 13:23:25 UTC

Auf dem Smartphone anschauen

jtmeyer — 2022-06-27 13:23:50 UTC

Um eine fertige zu benutzen, musst du die anklicken, jetzt startet die App. Um sie auf dein Smartphone zu laden, siehst du weiter unten auf der rechten Seite einen QR Code. Wähle diesen an und scanne ihn mit deinem QR Scanner. Jetzt ist die App auf deinem Smartphone.

jtmeyer — 2022-06-27 13:24:04 UTC

Schritt 1 : Aufbau des Bildschirms (User Interface)

jtmeyer — 2022-06-30 06:59:28 UTC

Im ersten Schritt wird die Benutzeroberfläche (User Interface) des Spiels erstellt. Wir erstellen mit dem App Inventor eine neue Datei und nennen diese Pong.
Aus dem Menü User Interface benötigen wir ein Label, ein Textfeld und einen Button für den Start. Im Menü Layout findest du ganz oben das HorizontalArrangement. dadurch wird die horizontale Anordnung dieser Elemente eingestellt. Dieses wird zunächst auf den Screen gezogen. Dann werden die Elemente Label, TextBox und Button in das horizontal Arrangement hineingezogen. Ändere dann die Breite der TextBox auf 30%, das Label und der Button bleiben bei automatic. Für das gesamte HorizontalArrangement stellst du eine Höhe von 10% ein, dann verbleiben 90% für das Spiel. Für die Breite wird FillParent eingestellt, so dass der gesamte Bildschirm in der Breite ausgefüllt wird.

Schritt 1: Screen einrichten Teil 1

jtmeyer — 2022-06-30 08:21:46 UTC

Im ersten Schritt wird der Screen eingerichtet. Im oberen Teil des Screens benötigst du eine Anzeige des Spielstands und einen Startbuuton.

Schritt 2: Screen einrichten Teil 2

jtmeyer — 2022-06-30 08:26:42 UTC

Im zweiten Teil wird das Spielfeld eingerichtet. Auf dem Spielfeld werden der Ball und der Schläger positioniert. Den Schläger kannst du dir als Rechteck mit einem Zeichenprogramm (paint, LibreOffice Draw) herstellen und dann hochladen.

Schritt 2: Spielfeld einrichten

jtmeyer — 2022-06-30 08:55:54 UTC

Das Spielfeld wird auf den verbleibenden 90% der Fläche eingerichtet. Dazu wird aus dem Menü Drawing and Animation ein canvas (Leinwand) ausgewählt und auf den Screen gezogen. Bei den Einstellungen wird jetzt die Höhe auf 90% und die Breite auf FillParent festgelegt.
Danach wird aus dem Menü Drawing and Animation der Ball herübergezogen und oben in der Mitte platziert. Du kannst die Position über Einstellungen x und y überprüfen.
Für den Schläger wird das Element ImageSprite aus dem Menü in der Mitte unten platziert. Bei Komponenten siehst du unten den Eintrag Media. Hier kannst du ein Bild des Schlägers hochladen. Zeichne dazu mit paint oder LibreOffice Draw ein Rechteck und speichere dieses als gif oder jpeg. Danach lade das File hoch. Gehe jetzt zu den Komponenten und klicke auf ImageSprite. Du siehst jetzt ganz rechts die Eigenschaften und den Eintrag picture. Hier kannst du den Namen deines Schlägers eintragen. Jetzt wird der Schläger angezeigt.
Zum Abschluss kannst du für das Spielfeld eine Hintergrundfarbe wählen.
Speichern nicht vergessen!!!!

Schritt 3: Programmierung, Teil1

jtmeyer — 2022-07-02 11:19:39 UTC

Im dritten Schritt wird mit der Programmierung begonnen. Zunächst wird der Startbuttom programmiert. Der Ball und der Schläger werden auf die Ausgangsposition gesetzt. Der Zählerstand wird auf "0" gesetzt.

Schritt 3: Programmierung Startbuttom

jtmeyer — 2022-07-02 11:41:26 UTC

Zunächst programmierst du die Funktion des Startbottums. Dazu wechselts du zu den Blöcken. Klicke jetzt den Startbuttom links unter Blöcken an und wähle das erste Element "when >Start< click". Dann klickst du den Ball an. Scrolle herunter, um die Aktionen zu finden. Die x- und y-Positionen sollen für den Ball auf die Ausgangsposition gesetzt werden. Die Geschwindigkeit (Speed) und das Aktualisierungsintervall (Intervall) müssen gesetzt werden (Werte sind 5 und 10). Die Richtung des Balls (Heading) wird über einen Zufallsgenerator aus dem Bereich 210° bis 330° gewählt (270° wäre senkrecht nach unten). Dann klicke links auf image sprite (Paddle) und setze hier auch x und y der Ausgangspostion (diese kannst du im Designer ablesen). Zum Schluss muss noch der Inhalt der TextBox auf 0 gesetzt werden.

Schritt 4: Programmierung der Bewegung des Schlägers

jtmeyer — 2022-07-02 12:01:15 UTC

Der Schläger soll nur in x-Richtung bewegt werden. Dieses geschieht durch Anklicken des Bildschirms (der Canvas, der Leinwand). Dann geht der Schläger zu der angeklickten x-Position.

Schritt 4: Bewegung des Schlägers

jtmeyer — 2022-07-02 12:18:23 UTC

Die Bewegung des Schlägers erfolgt durch Anklicken des canvas (der Leinwand) nur in x-Richtung. Du öffnest die Blöcke und die canvas an und wählst "when >canvas< TouchDown". Nun klickst du das imageSprite (paddle) an und wählst "set imageSprite x". Die Position erhälst du durch anklicken des roten x ("get x") und fügst diese Posiotion ein.

Schritt 5: Programmierung des Schlägers, Teil 1

jtmeyer — 2022-07-02 17:05:11 UTC

In diesem Schritt wird die Kollision mit dem Schläger programmiert. Der Ball wird reflektiert und der Zähler wird um 1 erhöht.

Schritt 5: Programmierung des Schlägers

jtmeyer — 2022-07-03 08:47:31 UTC

Danach musst du die Interaktion von Ball und Schläger programmieren. Wenn du mit dem Schläger den Ball triffst, soll der Ball reflektiert werden, d.h. seine Richtung wird umgekehrt, und der Zählerstand soll um "1" erhöht werden.
Du definierst eine Variable "treffer", in die die Anzahl der Treffer geschrieben wird.
Klicke jetzt Blocks ganz links den Ball1 an. Wähle "when Ball1 collide with". und wähle aus dem Control Menü die if-Anweisung. Aus der Logik nehme den Vergleich und füge dort >get other< ("other anklicken") und das >paddle< (Paddle anklicken, ganz unten) ein.
Wenn der Ball den Schläger trifft soll:

die Richtung durch "set Ball1 Heading" auf 360° - "Ball1 Heading" geändert werden,
die Treffer durch "set treffer Text" um 1 erhöht werden. Aus dem Menü Math die Addition.

Schritt 6: Programmierung des Spielfeldes

jtmeyer — 2022-07-03 15:44:02 UTC

Wenn der Ball auf die Seitenwände oder die obere Begrenzung trifft, soll der Ball reflektiert werden, wenn der Ball den Boden berührt ist das Spiel beendet. Im folgenden Bild wird gezeigt, wie die Wände nummeriert sind. Der Boden erhält "-1", d.h. wenn edge den Wert "-1" hat, wird das Spiel gestoppt. Ist der Wert ungleich "-1" wird der Ball reflektiert (Bounce).

Definition der Ränder des Spielfeldes

jtmeyer — 2022-07-03 15:49:49 UTC

Die Ränder des Spielfeldes(Edge) werden durch Zahlen gekennzeichnet:

Edge +1 ist die obere Begrenzung,
Edge -1 ist die untere Begrenzung,
Edge -3 ist die rechte Begrenzung,
Edge -3 ist die linke Begrenzung.

Programmierung der Interaktion mit den Seitenwänden.

jtmeyer — 2022-07-10 10:15:00 UTC

In diesem Video wird die Programmierung der Interaktion mit den Seitenwänden gezeigt.