bildersuche v0.0.21

Bildersuche

• npm run start to run local development server
  • open localhost:4200 on your browser
• npm run build to produce bundle that is deployable

Aufgabenstellung:

Dauer: Ca 3-4 Stunden.

✓ Es soll eine kleine Webanwendung gebaut werden.
✓ Die Technologie ist frei wählbar.
✓ Die Webanwendung soll über einen Webserver verfügbar sein, der gerne auf einem lokalen Entwicklungsrechner laufen kann. ~~
✓ ~~Nach Eingabe eines Suchbegriffs in der Anwendung sollen mehrere Bilder als Suchergebnis angezeigt werdenWenn z.B. nach "Obama" gesucht wird, sollen Bilder von Obama angezeigt werden

✓ Die Bilder sollen in mehreren Spalten oder als Liste angezeigt werden.

✓ Bei Klick auf ein Bild sollen auf einem weiteren Screen ein paar beliebige Details zum Bild angezeigt werden (z.B. Höhe, Breite, Autor, Datum).

✓ Als Backend soll eine Bildersuchservice mit einer REST Schnittstelle angebunden werden. Auswahl:

• https://docs.microsoft.com/en-us/azure/cognitive-services/bing-image-search/
• https://pixabay.com/api/docs/
• etc.

Zu der Arbeitsprobe gehört auch eine gute Präsentation der Ergebnisse. Diese sollte wie bei einem Zwischenergebnis vor dem Kunden oder den Kollegen des Projektteams durchgeführt werden.

Ausblick

• caching der bilder, um sie in der eigenen domain zu haben?
• loading spinner, wenn die bilder noch nicht geladen sind -> user experience impro
• besseres styling
• bessere fehlermeldungen, wenn zB 0 results
• hover in der lightbox displays the metainfo