Ionic Search / Refesher – Guide für’s Schnelles Suchen

Ionic Beginner Tutorial Steffen Lippke Serach RefrsherWie finden 89 % der Nutzer diesen Guide?

Über eine Suche in Google!

Damit Du auch ein Mini-Google in Deine App einbauen kannst, zeige ich Dir heute, wie Du mit einer Suchleiste arbeitest.

In Kombination mit der Ionic Searchbar und einem Refresher verkürzt Du nervende Such- und Scroll Zeit effizient.

Es ist Zeit für ein Upgrade für Deiner Ionic App!

Inhalt - Weg zur Suche und Refresh

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Ziel: Einträge schneller finden + auffrischen lassen

Herausforderung und Ziel
Herausforderung und Ziel

Eine der wichtigsten Funktionen für jede Rezepte-, Mail oder News-App, ist die Suchfunktion.

Die Suchfunktion erleichtert das schnelle Finden von Einträgen enorm und reduziert unnötiges Scrollen.

 

 

 

Unser Ziel: Bessere Notizen

Heute wollen wir Die Notizapp aus Tutorial zwei um eine Suche und einen Refresher erweitern. Diese sind Grundbestandteil jeder App. Für die Entwicklung weitere Apps wirst Du diese Komponenten häufiger verwenden.

So soll die App als fertiges Ergebnis am Ende aussehen:

Searchbar sucht nach Begriffen
Searchbar sucht nach Begriffen

Technische Grundlagen - Dein Vorwissen

  • Ionic Umgebung: Wenn Du vorher noch nicht mit Ionic gearbeitet hast, bearbeite das Beginner Tutorial, um Dir die notwendigen Grundlagen kennenzulernen.
  • 1-2h mit Ionic gecodet haben

Lerninhalte für diese Tutorial

Alle Apps die wir bisher gebaut haben, sind statisch gewesen. Nur mit einem Neustart können wir die App auf den neusten Stand bringen. Mit dem Refresher bleiben abgerufenen Inhalte aktuell, da mit einem Wisch nach unten die Daten neu vom Server abgerufen werden.

Ionic bietet auch eine Möglichkeit, um die Module für die Suche und das Auffrischen der App einfach zu integrieren.

In diesem Tutorial lernst Du…

  • … wie Du zu Deiner App eine Suchleiste hinzufügst und mit Leben füllst
  • … wie Du die Daten mit eine Refresher aktualisierst und anpasst

 

 

2. Kapitel

Konzept: Zwei neue Komponenten

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Man nehme etwa HTML, etwa Code von Ionic und ein paar selbst geschriebenen Funktionen fertig ist die Suche.

Hier erfährst Du, was die zwei neuen Komponenten können.

 

 

 

Schnelle Suche – HTML Komponente mit Power.

Mit einer Suchleiste filtern wir die Notizen in der Ionic App. Dazu durchsuchen wir die JSON Datei auf Übereinstimmungen im Text. Die Instant Suche findet Einträge besonders schnell, da Angular eine hoch performante Suche zu Verfügung stell.

Suche mit Angular Ion Searchbar
Suche mit Angular Ion Searchbar

Refresher – Aus Deine Mails schon bekannt.

Der Refresher ist die Animation, die erscheint, wenn Du Deine Mails erneut vom Server abrufen möchtest. Das kleine GIF Bild kannst Du, wenn Du möchtest, mit Texten oder anderen Symbolen anpassen. Mit diesen Optionen kannst Du gut an Dein eigenes Thema anpassen.

 

Refresher in Aktion Ion Refresher
Refresher in Aktion Ion Refresher

3. Kapitel

Grundlagen: Wie funktioniert Mein Google?

Theorie einfach erklärt
Grundlagen einfach erklärt

Wie alle anderen Ionic Komponenten beinhaltet der HTML Code auch die Searchbar.

Um der Suchleiste zum Leben zu erwecken, solltest Du zusätzlich solltest die Ionic Such-Funktion in das zugehörige TypeScirpt einfügen ....

 

 

 

... Sonst hast Du nur ein Eingabefeld für die Suche, welches nicht reagiert.

Die Ein-Weg-Bindung (ion-input), ähnlich dem Klickevent beim Button, bindet eine getItems() Funktion an die Komponenten an.

Tippt der Nutzer in die Suchleiste etwas ein, löst der HTML Tag diese Funktion mit jedem getippten Buchstaben aus.

Suche: In 4 Schritten zum Ergebnis.

  1. Provider abfragen – neuste Daten vom Server herunterladen.
  2. Wert aus dem Inputfeld lesen.
  3. Vergleich zwischen Eingabe und Einträge in der Liste
  4. Gebe nur die Einträge zurück, die auch die Eingabe nach dem Text entsprechen.

Mehr Power mit den Ion-Refresher

Der Refresher in Ionic findet sich meistens direkt unterhalb des <ion-content> Tags. Mit einen Wisch nach unten, erscheint das Feld unterhalb der NavBar.

Wie die Suchleiste besitzt auch der Refresher ein eigenenss Event (ion-refresh).

Die Funktion sollte in den meisten Fällen eine asynchrone Synchronisierung des Inhalts auslösen. Als Standard sind 2000 ms in Ionic eingestellt, in dem Ionic den Refresher anzeigt.

Den Refresher kannst Du schnell an Dein Design anpassen. Verändere das Icon und den anzuzeigenden Text vor der Aktualisierung (pulling) und während des Abrufs der Daten (refreshing).

4. Kapitel

Coden: Mit eigenen TypeScript Funktionen arbeiten

Coding und Umsetzung
Coding zur Umsetzung

Beim Coden sehen wir uns noch mal näher an, was die einzelnen Funktionen in TypeScript leisten, um eine Suche und ein Refreshen zu ermöglichen.

Zuerst einmal die HTML: Du legst die Grundlage zum Anzeigen der Ergebnisse mit let note of notes. Wie schon angekündigt steht unterhalb des ion-content direkt der ion-refesher, der die Funktion doRefresh() über den (ionRefresh) anbindet.

Provider meldet sich - Daten holen
Provider meldet sich - Daten holen

Die Suchleiste findest Du innerhalb der Notizkarte. Diese löst die getNotes() Funktion aus, die ein Eintipp-Event mit überträgt.

Die home.ts beinhaltet die beiden wichtigsten Funktionen. Der jsonInternProvider lädt die Daten der JSON in die Variablen in notes und recievedNotes, da wir zwischen anzuzeigenden und verfügbaren Datensätze unterscheiden müssen.

 

Clean CodeClean Code: Hinterlasse Code immer sauberer als zuvor

Wenn Du mit Deinem Code arbeitest, solltest Du, nachdem Du das Projekt bearbeitet hast, der Code besser sortiert und formatiert sein als zuvor.

Nutze z. B. aussagekräftige Variablennamen wie revievedNotes statt items (viel zu allgemein).

 

initialNotes() setzt die Notizanzeige auf den Ausgangszustand, alle mögliche Ergebnisse, zurück.

In getNotes() brauchen wir zum Suche einen Vergleich von Sucheingaben mit den Notiztexten. Zur Eliminierung von Tippfehlern schneidet trim() die Leerzeichen an beiden Seiten ab. Mit toLowerCase() vermeiden wir, dass der Nutzer auch noch die Groß- und Kleinschreibung beachten muss. Die Funktion gibt nur die Einträge zurück, in den die Funktion vergleichbare Textabschnitte findet.

doRefesh() hat die gleiche Aufgabe wie der Konstruktor und setzt die Ergebnisse auf den Ausgangszustand zurück.

 

5. Kapitel

Erweiterungen: Mehr Infos, Mehr Felder.

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Findest Du, dass die App ist noch zu einfach gehalten?

Möchtest Du mehr Möglichkeit, wie in einer echten Notizapp haben?

Dann erweitere die App mit weiteren Datenfeldern.

 

 

Noch ein paar Vorschläge, wie Du Diene App weiterbauen kannst. Natürlich kannst Du auch eine Idee in die Kommentare scheriben, die ich im nächsten Tutorial etwas ausführen kann.

ErweiterungErweiterung: Mehr Notiz Infos

Name, Priorität, Status, Bilder, Projekt, Kategorie. Sei kreativ und füge weitere Felder für Deine Notiz App hinzu.
Dafür muss Du die JSON anpassen. Damit auch noch der Home Screen die Infos anzeigt, fügt weiterer Angular Interpolations mit {{}} hinzu.

und denken an das JSON:

 

Steffen's TippSteffen's Tipp: Vorausschauende JSON

Bevor Du die JSON änderst solltest Du Dir im Klaren sein, welche neue Funktionen, Strings, Booleans die App aus der JSON braucht.

Denke an weitere, zukünftige Versionen Deiner App, sodass Du deine JSON nicht mehrmals ändern musst. Kopiere einen unausgefüllten, datenlosen Block, um weitere Objekte schneller und ohne Löschen hinzuzufügen.

6. Kapitel

Fazit: Noch bessere Notizen

Ziel und Fazit
Ziel und Fazit

Suche und Refresher.

Du hast in diesem Tutorial zwei wesentliche Komponenten von Ionic kennengelernt. Probiere weitere aus und schreibe mir von Deinen Erfahrungen.

Refresher in Aktion Ion Refresher
Refresher in Aktion Ion Refresher

Die Dokumentation von Ionic ist zwar nur auf Englisch, aber gut strukturiert und verständlich.

Schreib mal in die Kommentare Deine Vorschläge für das nächste Ionic Tutorial in Deutsch.

Vielen Dank!

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.