Ionic Search + Refresher [GUIDE Instant Suche]

Ionic Beginner Tutorial Steffen Lippke Serach Refrsher

Wie hast Du dieses Tutorial gefunden?

Über Google!

Damit Du ein Google in Deine App einbauen kannst, zeige ich Dir wie Ionic Suchen verwendet

Die Kombination aus der Ionic Searchbar und dem Refresher verkürzt Du nervende Such- und Scroll-Zeiten effizient.

Beginnen wir!

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

Herausforderung & Ziel: Einträge schnell finden

Herausforderung und Ziel
Herausforderung und Ziel

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

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

 

 

 

Unser Ziel: Bessere Notizen

Heute  arbeiten wir weiter an der Notiz-App aus 2. Tutorial. Zur den Notizen kommt eine Suchleiste mit einem Refresher erweitern. Diese sind bei vielen ein zentraler Grundbestandteil. 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 getestet haben

Lerninhalte

Alle Apps die wir bisher gebaut haben, basierten auf einer statische Datengrundlage. Nur mit einem Neustart können wir die App auf den neusten Stand bringen.

Mit dem Refresher bleiben abgerufenen Inhalte aktuell. Mit einem Wisch nach unten laden die Texte und Bild-Inhalte neu und der Server sendet die relvanten Bits über die Leitung.

Das FrameworkIonic bietet eine Möglichkeit, um die fertige Module für eine Suche zu ermöglichen und der App aufzufrischen.

In diesem Tutorial lernst Du…

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

 

 

2. Kapitel

Konzept: Zwei neue Komponenten

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Man nehme etwa HTML, zwei Prisen Typescript  und ein paar selbst geschriebenen Funktionen: Fertig ist die Suche.

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

 

 

 

Schnelle Suche – Instant-Power für Deiene App

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 im Hintergrund eine hoch performante Suche zu Verfügung stellt.

Suche mit Angular Ion Searchbar
Suche mit Angular Ion Searchbar

Refresher – Immer top-aktuell sein

Der Refresher erscheint als Warte-Animation, 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. Loading.io stellt viele coole CSS-Ladebalken / Ladekreis-Animationen zu Verfügung. Du kannst aber auch selbst, welche schreiben.

 

Refresher in Aktion Ion Refresher
Refresher in Aktion Ion Refresher

3. Kapitel

Grundlagen: Wie funktioniert Ionic Search?

Theorie einfach erklärt
Grundlagen einfach erklärt

Die Ionic Searchbar basiert auf einem HTML-Grundgrüst.

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

 

 

 

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

Die Ein-Weg-Bindung ion-input, ähnlich dem Klick-Ergeinis 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.

Mehr zu Ein-Weg-Bindung: Angular Dokumentation Syntax

Suche: In 4 Schritten zum Ergebnis.

  1. Daten-Provider abfragen – neuste Daten vom Server herunterladen.
  2. Wert aus dem Eingabefeld 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 direkt unterhalb des <ion-content> Tags. Mit einem Wisch nach unten, erscheint das Ladesymbol unterhalb der NavBar.

Wie die Suchleiste besitzt auch der Refresher eine eigene Ein-Weg-Bindung (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 Refresh-Vorgang stattfinden soll. Asynchron bedeutet, dass zur Aktualisierung die eigentliche Anwendung nicht anhält, sondern der Code im Hintergrund die Text- und Bilddaten lädt.

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 das Aktualiseren 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 Tag, der die Funktion doRefresh() über den (ionRefresh) anbindet.

Provider meldet sich - Daten holen

Die Suchleiste findest Du innerhalb der Notiz Karte. Diese löst die getNotes() Funktion aus, die ein Tipp-Eregeins 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 recievedNotes statt items (viel zu allgemein).

 

initialNotes() setzt die Notiz-Anzeige auf den Ausgangszustand (alle Notuzen) zurück.

In getNotes() brauchen wir zur Suche einen Vergleich von Sucheingaben mit den Notiz-Texten. 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 schreiben, 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 musst Du die JSON anpassen. Damit auch noch der Home Screen die Informationen anzeigt, fügt weiterer Angular Interpolationen 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 Tutorials.

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.