Allgemeine Überlegungen zur App-Entwicklung
- Programmierung eines RSS-Feed Readers
- für Stormstory WebSite (http://stormstory.de/feed/), NV-Blog (http://nvblog.isurfstormarn.de/index.php/feed/) und eigenen RSS-Feed von einer belibigen Website öffnen
- schlichtes Design
- verschiedene Buttons um zwischen den einzelnen Beiträgen wechseln zu können
- Textfeld mit der Möglichkeit zum Scrollen
- Textfeld mit der Beitragsnummer
- Überschrift des Beitrages soll über dem eigentlichen Beitrag angezeigt werden als seperater Block
Was ist ein RSS-Feed überhaupt?
RSS (Really Simple Syndication) sind Dateiformate für Web-Feeds. Die Bereitstellung von Daten im RSS-Format wird auch als RSS-Feed bezeichnet.
Informationenen über App Inventor
Ursprünglich wurde App Inventor von dem Unternehmen Google Inc. als eine Entwicklungsumgebung entwickelt, um Anwendungen für Android
zu konzipieren. Android ist sowohl ein Betriebssystem, als auch eine Software Plattform für mobile Enderäte wie Smartphones oder Tablets.
App Inventor ermöglicht es, per Drag and Drop, grafische Blöcke zu erstellen.
Als eine closed Beta wurde die Software erstmals am 12. Juli 2010 für registrierte Nutzer zur Verfügung gestellt. Seit dem 15. Dezember
gleichen Jahres war sie öffentlich zugänglich.
App Inventor arbeitet mit den Open-Blocks der Java-Bibliothek. Die Software arbeitet vor dem Hintergrund, den Einstieg in die
Programmierung von Applikationen für Smartphones/Tablets zu erleichtern
Aufgebaut ist App Inventor in zwei Arbeitsebenen; die Design-Ebene und die Blocks-Ebene.
Die Design-Ebene ermöglicht es dem Nutzer ein Layout für die eigene App zu gestalten. Dafür stehen viele verschiedene
Auswahlmöglichkeiten zur Verfügung. In der Blocks-Ebene können die einzelnen Komponenten der verschiedenen Blöcke zueinander in
Beziehung gesetzt werden und durch Parameter sowie Kontrollstrukturen in eine logische Ordnung gebracht werden. Beispielsweise
gibt es Blöcke für for-Schleifen und mathematische Funktionen.
Das App-Design
Erklärung der einzelnen Blöcke
Der erste Block ist dafür zuständig, eine Liste zu erstellen, aus welcher der entsprechende RSS-Feed ausgewählt werden kann. Zur Auswahl stehen der NV-Blog, die Stormstory-WebSite und ein eigener Feed, für welchen der Nutzer eine eigene rssUrl eingeben muss. In der Liste wird jeweils die Überschrift der drei Komponenten angezeigt.
Wenn die App geöffnet wird, ist “Screen 1” zu sehen. Ebenfalls auf “Screen 1” zu sehen ist ein Textbutton mit “wähle Feed … “. Wenn der Nutzer diesen anklickt, wird dieser auf eine Liste (”set IstFeeds.Elements to create empty list”) weitergeleitet. Dieser Liste werden die oben genannten “global feeds” durch den blauen Block hinzugefügt und der Nutzer kann einen auswählen.
Wählt der Nutzer “Eigener Feed” aus der Liste, wird ihm eine Nachricht zusammen mit einem Textfeld angezeigt, in welches eine beliebige rssUrl eingetragen werden kann (zu sehen im if-Block). Wurde ein eigener Feed angegeben oder einer aus der vorgegebenen Liste ausgewählt, wird geprüft, ob dieser existiert. Wenn ja wird dieser ausgeführt und wenn nicht wird dem Nutzer dies ebenfalls mitgeteilt.
Zur Navigation werden vier Buttons verwendet. Der erste Button (btnFirst) bringt den Nutzer zum ersten Beitrag, dieser trägt die index-Nummer “1”. Der zweite Button (btnPrevious) dient dazu, zum vorigen Beitrag in der Liste zu navigieren. Dafür wird der “global itemIndex” abgefragt und minus eins gerechnet, um die index-Nummer des vorigen Beitrags zu ermitteln. Der nächste Button (btnNext) funktioniert nach dem gleichen Prinzip, es wird lediglich nicht minus, sonder plus eins auf den “global itemIndex” gerechnet, um zu dem nächsten Beitrag in der Liste zu gelangen. Der letzte Button (btnLast) bringt den Nutzer zum letzten Beitrag in der Liste. Hierfür wird die gesamte Länge der Liste ermittelt und die index-Nummer auf diesen Wert gesetzt.
Um die Buttons nutzen zu können, müssen diese vorher aktiviert werden. Dafür ist der nächste Block zuständig.
Um den Feed anzuzeigen werden die Labell “lblStatus” und “lblDescription” und der Button “Item” benötigt. Zunächst wird der “global itemIndex” festgesetzt, beim Start ist dieser auf eins festgelegt. Auf welchem Beitrag man sich zur Zeit befindet, wird durch “lblStatus” im Schema “1 von 1” angezeigt. Dann wird der Inhalt des RSS-Feed angezeigt, die Überschrift im “btnItem” und der Text im “lblDescription”.
Stundenprotokoll über unsere Arbeit
Mittwoch, der 22.02.2017
Wir haben uns heute damit auseinandergesetzt, wie man einen RSS-Feed mithilfe von XML erstellt. Da wir noch keine Erfahrungen über den RSS-Feed gesammelt haben, informierten wir uns zuerst generell über dieses Thema. Mit dem neu gewonnenem Wissen probieren wir aus, einen RSS-feed selber zu schreiben. Hierfür verwendeten wir das Programm Notepad. Unser erster Versuch:
Für den weiteren Verlauf unseres Projekts benötigen wir keinen eigenen RSS-Feed, da beispielsweise der RSS-Feed von Stromstory und dem NV-Blog öffentlich zugänglich ist.
Donnerstag, der 23.02.2017
Wir haben uns heute damit beschäftigt, uns den RSS-Feed der Stormstory Website genauer anzuschauen und gleichzeitig zu verstehen. Ein Problem, das uns sofort aufgefallen ist ,war die Zeile “Du musst dich anmelden, um diesen Inhalt zu sehen”, welche in der Beschreibung jedes Beitrags steht.
Da die Behebung dieses Problems nicht in unseren Händen liegt, sondern beim Stormstory-Team selber, haben wir uns dafür entschieden, eine App zu entwickeln, die verschiedene RSS-Feeds anzeigen kann z.B. auch unseren NV-Blog, da in diesem nicht die oben markierten Zeile zu finden ist, sondern der Text der Website. In der zweiten Hälfte der Stunde haben wir uns mit dem Programm App Inventor 2 befasst. Mit dieser Software von Google ist es möglich, per Drag and Drop, Apps für Smartphones/Tablets zu programmieren. Um dieses besser zu verstehen, haben wir uns verschiedene Tutorials auf Youtube angeschaut.
Mittwoch, der 01.03.2017
Neue Stunde, neue Erfahrungen. Da wir es in der Stunde am Donnerstag nicht geschafft haben, uns anzuschauen, wie ein RSS-Feed in einer App über App Inventor 2 angezeigt wird, haben wir uns verschiedene Videos angeschaut und uns mit Hilfe von Google Groups Beispiele angesehen. Leider waren die meisten auf Spanisch oder Italienisch, weshalb uns diese für unserer Verständnis nicht wesentlich weiter geholfen haben.Donnerstag, der 02.03.2017
Heute haben wir uns gemeinsam weitere Videos angesehen und erste grobe Überlegungen für eine eigene App entwickelt. Wir haben uns dazu entschieden, dass wir erstmal ein einfaches Design anstreben. Dieses Design versuchten wir in App Inventor 2 zu verwirklichen, jedoch war dieses schwerer als gedacht, da wir nicht auf Anhieb wussten, für welche Information welcher Block steht und wir das zuerst herausfinden mussten. Damit beschäftigten wir uns den Rest der Stunde.Mittwoch, der 08.03.2017
Zu dem heutigen Zeitpunkt haben wir ansatzweise verstanden und angefangen erste funktionsfähige Blocks zu programmieren. Wir haben angefangen Blocks zu erstellen, die es ermöglichen einen RSS-Feed anzeigen zu lassen beziehungsweise einen eigenen RSS-Feed einzugeben. Zudem sind einige Blocks dazu in der Lage, zwischen den Überschriften der WebSiten hin und her zu wechseln.Donnerstag, der 09.03.2017
Heute haben wir weitere Befehle geschrieben, die es ermöglichen den RSS-Feed von der WebSite auf unserer App darzustellen. Das hat leider noch nicht ganz so wie erwartet geklappt, denn der Feed wurde nicht geladen und die Seite blieb weiß. Zwischenzeitlich haben wir mit Hilfe eines Schultablets immer wieder nachschauen können, wie sich die App und ihre Funktionen verändern.Donnerstag, der 16.03.2017
Wir haben es heute geschafft, dass die App die einzelnen Überschriften von den beiden RSS-Feeds anzeigt. Jedoch wird nicht der jeweilige Inhalt der Seiten angezeigt. Wir haben uns überlegt, worin das Problem liegen könnte und haben einige Befehle leicht verändert. Dies hat uns leider auch nicht weitergeholfen, denn das Problem ist immer noch vorhanden. Deshalb haben wir im Internet nachgesehen, wie dieses behoben werden kann, sind bisher aber noch nicht fündig geworden.Dienstag, der 21.03.2017
Wir haben in der heutigen Stunde versucht das Problem der vorigen Stunde zu lösen, haben jedoch nur hinbekommen, nur einen kurzen Teil des Textes anzeigen zu lassen. Außerdem haben wir die Stunde genutzt, um ein wenig an unserer Dokumentation zu arbeiten.Donnerstag, der 23.03.2017
Heute in der Stunde haben wir noch einige Kleinigkeiten an unserer App verändert und das Problem der letzten Stunden beheben können. Sie hat endlich den gesamten Text angezeigt und wir haben uns gefreut, endlich eine funktionierende App programmiert zu haben.
Fazit
Insgesamt hat uns die Arbeit mit diesem Projekt viel Spaß gemacht.
Am Anfang hatten wir einige Zweifel, ob wir es überhaupt
schaffen würden in einer sehr kurzen Zeit eine funktionstüchtige App zu programmieren, da wir bisher noch keinerlei Erfahrungen
mit der App-Programmierung gesammelt haben. App-Inventor 2 war somit ein neues Gebiet für uns beide und wir haben uns in den
ersten Stunden gründlich mit dieser Software auseinandergesetzt und uns mehrere Videos dazu angeschaut. Diese haben uns jedoch
nicht immer viel weitergeholfen, weil sie größtenteils nicht auf Deutsch beziehungsweise Englisch sind. Zudem hatten wir vorher
kein Wissen über RSS-Feed und xml, weshalb wir uns dafür entschieden haben, einen kleinen Exkurs zu machen (siehe Stundenprotokoll
am 22.02.2017). Danach haben wir uns mit dem RSS-Feed des NV-Blogs und dem von der Stormstory WebSite befasst, da wir diese für
den geplanten RSS-Feed - Reader benötigen. Nun hatten wir uns das Wissen angeeignet und haben in den weiteren Informatik-Stunden
die passende App in App-Inventor 2 programmiert. Währenddessen haben wir immer mehr Freude am Projekt gehabt und auch kleine
Fehler haben uns nicht aus der Ruhe gebracht, sondern eher noch mehr angespornt. Beispielsweise hatten wir immer das Problem, dass
bei dem NV-Blog nur die Überschrift sowie die ersten Sätze des Beitrages angezeigt wurden und nicht der gesamte Text. Worin das
Problem lag, wussten wir vorerst nicht. Glücklicherweise haben wir bemerkt, dass im RSS-Feed des NV-Blog unter “description” nicht
der ganze Beitrag angezeigt wird, sondern erst unter “content:encoded”. Als wir das in den entsprechenden Blocks geändert hatten,
hat die App endlich einwandfrei funktioniert.
Jedoch hören wir an diesem Zeitpunkt nicht auf mit der App. In den nächsten
Informatik-Stunden haben wir beispielsweise noch vor Bilder hinzuzufügen, da sich diese bisher noch nicht anzeigen lassen.
Zusammenfassend beurteilen wir unser Projekt als gelungen und sind sehr froh darüber, dieses in Anspruch genommen zu haben. Schade
ist jedoch, dass die Beiträge von Stormstory sich nicht anzeigen lassen. Wir hoffen auf die Unterstützung des Stormstory-Teams, um
dieses Problem aus der Welt zu schaffen.
Quellen und Inspiration