Erste iOS app Produktkatalog als Anfänger erstellen?

Du erstellst daraus in dem Sinne keine Datei, die irgendwo abgespeichert und dann eingelesen wird. Hast du dich mal mit HTTP Requests/Responses auseinander gesetzt? Du sendest einen (GET/POST) Request an deine API mit bestimmten Parametern, diese nimmt den entgegen, führt einen Query an deine DB aus und sendet das Ergebnis zurück als Response in JSON-Formatierung.
 
Tokolosh schrieb:
Du erstellst daraus in dem Sinne keine Datei, die irgendwo abgespeichert und dann eingelesen wird. Hast du dich mal mit HTTP Requests/Responses auseinander gesetzt?

Nein, das habe ich noch nicht. Ich habe bisher tatsächlich nur Tutorials und Dokumentationen gelesen/gesehen, in denen man die Daten in folgender Form erhalten hat:

Code:
{
  "login": "octocat",
  "id": 1,
  "node_id": "MDQ6VXNlcjE=",
  "avatar_url": "https://github.com/images/error/octocat_happy.gif",
  "gravatar_id": "",
  "url": "https://api.github.com/users/octocat",
  "html_url": "https://github.com/octocat",
  "followers_url": "https://api.github.com/users/octocat/followers",
  "following_url": "https://api.github.com/users/octocat/following{/other_user}",
  "gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
  "organizations_url": "https://api.github.com/users/octocat/orgs",
  "repos_url": "https://api.github.com/users/octocat/repos",
  "events_url": "https://api.github.com/users/octocat/events{/privacy}",
  "received_events_url": "https://api.github.com/users/octocat/received_events",
  "type": "User",
  "site_admin": false,
  "name": "monalisa octocat",
  "company": "GitHub",
  "blog": "https://github.com/blog",
  "location": "San Francisco",
  "email": "octocat@github.com",
  "hireable": false,
  "bio": "There once was...",
  "public_repos": 2,
  "public_gists": 1,
  "followers": 20,
  "following": 0,
  "created_at": "2008-01-14T04:33:35Z",
  "updated_at": "2008-01-14T04:33:35Z"
}
siehe: https://developer.github.com/v3/users/#get-all-users

Wenn ich meine Daten in dieser Form in der JSON Datei hätte, und die Datei direkt aufgerufen hätte, wäre mir persönlich das logischer.

Ich bin mir nicht sicher, ob ich als Anfänger das so hinbekomme, wie von dir beschrieben. Eigene API usw. hört sich kompliziert an :/

Edit: Wenn ich es richtig verstehe, könnte ich aber einfach die JSON Datei mit meinen Daten erstellen und diese dann aufrufen. Wenn ich nach HTTP Request google stoße ich wieder auf den Request per axios, der auch in meinen Tutorials genutzt wurde, um auf die entsprechende JSON Datei zuzugreifen: https://malcoded.com/posts/react-http-requests-axios/

Oder verstehe ich das komplett falsch?
 
Zuletzt bearbeitet:
Ne gänzlich falsch verstehst du das nicht, allerdings weißt du wohl nur noch nicht, warum du HTTP Requests benutzen möchtest ;)

Natürlich kannst du eine Datei einlesen, aber das ist nicht unbedingt weniger kompliziert, als einen GET Request an eine API zu schicken und die response einfach auszugeben. Vor allem, weil das genau das ist, was deine Frontenf-Anwendung soäter machen soll. Ob nun Axios, Fetch oder xhttp ist egal. Wenn dein Tutorial Axios behandelt, dann versuch dich daran zu hangeln. Ist natürlich problematisch, wenn man nicht wirklich versteht, was dahinter steckt. Ich würde es so machen:
1. Test-api im internet suchen (zb dein Github Beispiel)
2. Den Link einmal mit dem Browser aufrufen und sich die Response in Browser angucken.
3. dann in React an einer passende Stelle einen GET-Request zu genau dieser URL machen und erwarten, dass JSON zurückgeliefert wird. Mit Axios oder Fetch wohl am einfachsten.
4. Das Ergebnis bei einem „Success“ einfach mit console.log(Ergebnis); rausschreiben und dir das in der Browser Entwicklungsconsole angucken. Du müsstest dann eine formatierte Ausgabe von dem bekommen, was du auch über das normale Aufrufen der URL im Browser als JSON String zurück bekommst.

Ich hoffe das war verständlich formuliert.
 
  • Gefällt mir
Reaktionen: zlep
Ok, danke.

Wie gesagt, einfach die Datei "einzulesen" war mir jetzt eigentlich logisch(er). Ich dachte, ich habe die JSON Datei auf meinem Server. In React (Native) rufe ich die Datei auf, wodurch ich eben die benötigten Daten erhalte. Diese kann ich dann wie gewünscht weiterverarbeiten (per Props weiterreichen, usw.).

Wahrscheinlich stelle ich mich blöd an, aber leider verstehe ich den Unterschied zu der API-Methode immer noch nicht.
 
Ganz einfach, weil du die Daten nicht aus einer Datei lesen und vor allem nicht bearbeiten willst. Dafür gibt es eben Datenbanken und das entsprechende Backend, welches diese „bedient“.

Deine React Anwendung ist dafür da um z.B. folgendes zu tun:
Ansicht „Alle Produkte“ in Frontend-Anwendung wird aufgerufen -> Request an Backend wird asynchron gesendet -> Backend besorgt „alle Produkte“ aus DB -> Backend sendet „alle Produkte“ an React Frontend zurück -> Frontend zeigt diese an.

Click auf ein bestimmtes Produkt -> Request an Backend -> Backend holt Infos zu eben nur diesem Produkt aus DB -> Backend liefert Infos an Frontend zurück -> Frontend zeigt Details zu dem Produkt an.

Das jetzt mal vereinfacht beschrieben... Alles läuft asynchron ab und als Benutzer der Anwendung bekommst du diese Schritte gar nicht wirklich mit.
 
  • Gefällt mir
Reaktionen: zlep
Ah, ok, das ergibt Sinn. Aber wenn das Backend "sendet", dann tut es das über eine JSON-Datei? Also in deinem Beispiel:

Ansicht „Alle Produkte“ in Frontend-Anwendung wird aufgerufen -> Request an Backend wird asynchron gesendet -> Backend besorgt „alle Produkte“ aus DB -> Backend sendet „alle Produkte“ an React Frontend zurück (in einer JSON-Datei in entsprechendem Format:
{ id: "1",
artikelnummer: "1234",
name: "Artikel 1},
{
id: "2",
artikelnummer: "5678",
name: "Artikel 2"
})
-> Frontend zeigt diese an.

Falls ich das jetzt so endlich richtig verstanden habe, nach was müsste ich denn nun genau Ausschau halten, um diese Requests erstellen zu können? Hast du eventuell ein Link zu einem nützlichen Tutorial, an dem ich mich entlanghangeln könnte?

Vielen Dank noch mal

Edit: Wäre in diesem Fall z.B. Firebase eine einfache Lösung für mich? Also meine Produkte bei Firebase in einer Datenbank und dorthin dann die Requests?
 
Zuletzt bearbeitet:
zlep schrieb:
Ah, ok, das ergibt Sinn. Aber wenn das Backend "sendet", dann tut es das über eine JSON-Datei?

Über einen JSON-„String“ in der HTTP-Response. Es werden keine Dateien ausgeliefert, sondern ein Stream mit Daten. Guck dir einfach mal an, wie das HTTP Protokoll funktioniert am Beispiel einer simplen HTML Seite. Das gleiche passiert dann eben, wenn im HTTP Response Header bei Content-Type: application/json steht anstatt text/html ;)

Aber ja so ungefähr sieht das dann aus. Und auf der Gegenseite, also in Frontend kann dieser JSON String dann eben verarbeitet werden, weil du eine Antwort in JSON format erwartest und Javascript damit umgehen kann. Deswegen kannst du auch sowas machen, wie aus der Response nur die Artikelnummern der Produkte verwerten oder oder oder


Edit:
Ich kenne mich mit Firebase nicht wirklich aus und ich weiß nicht, was du vorhast. Allerdings brauchst du natürlich ein Backend für deine Anwendung oder irgendeine Quelle, die dir die Daten liefert, die du Anzeigen möchtest
 
Zuletzt bearbeitet:
Tokolosh schrieb:
Ich kenne mich mit Firebase nicht wirklich aus und ich weiß nicht, was du vorhast. Allerdings brauchst du natürlich ein Backend für deine Anwendung oder irgendeine Quelle, die dir die Daten liefert, die du Anzeigen möchtest

Dank deiner Erläuterung habe ich jetzt zumindest den Hintergrund verstanden. Mir fehlt allerdings leider immer noch ein Ansatz, wie ich mehr darüber erfahren kann bzw. wo ich das Benötigte lernen kann.

Wie gesagt, vor habe ich eigentlich nur eine einfache Datenbank mit Produkten:

ID | Artikelnummer | Beschreibung | Breite | Höhe | usw.

Die App soll dann eigentlich nur die Daten erhalten, sodass ich diese in der App anzeigen kann.

  • Ich würde eine simple Einstiegsseite erstellen mit einer Kategorieübersicht.
  • Nach Klick auf die Kategorie kommt man zur Artikelübersicht dieser Kategorie
  • Nach Klick auf einen Artikel kommt man zum entsprechenden Artikel mit Beschreibung, usw.

Das wars eigentlich schon. Hatte ich mir als Anfangsprojekt mal so ausgesucht und dachte, dass wird nicht so wahnsinnig kompliziert. Den React Native Teil (Frontend) kriege ich auch auf jeden Fall hin. Mir fehlt nur einfach das Wissen für das Backend bzw. weiß ich überhaupt nicht, nach was ich genau suchen muss.
 
Du müsstest ein PHP-Skript (oder beliebige andere Sprache) schreiben, welches die Produktdaten aus der DB ausliest und im JSON-Format ausgibt. Dieses Skript müsste dann unter einer URL wie "https://www.meineseite.de/products.json" aufrufbar sein.

Für Anleitungen dazu kannst du nach "php mysql to json" oder ähnlichem googlen.

Als verbesserte Version wäre es denkbar, dass es noch ein zusätzliches Skript gibt, um Details über einen Artikel zu bekommen, z.B. unter "meineseite.de/product_details.json?product_id=12345". Dann könnte "products.json" nur noch die wichtigsten Basisdaten über alle Artikel liefern, und "product_details.json" die detaillierteren Daten für einen bestimmten, per URL-Parameter ausgewählten, Artikel (z.B. erst dann, wenn der Nutzer diesen explizit in der App angeklickt hat). Damit würden insgesamt weniger Daten übertragen werden.
 
  • Gefällt mir
Reaktionen: zlep
zlep schrieb:
Wie gesagt, vor habe ich eigentlich nur eine einfache Datenbank mit Produkten:

ID | Artikelnummer | Beschreibung | Breite | Höhe | usw.

Die App soll dann eigentlich nur die Daten erhalten, sodass ich diese in der App anzeigen kann.

  • Ich würde eine simple Einstiegsseite erstellen mit einer Kategorieübersicht.
  • Nach Klick auf die Kategorie kommt man zur Artikelübersicht dieser Kategorie
  • Nach Klick auf einen Artikel kommt man zum entsprechenden Artikel mit Beschreibung, usw.

Es kommt darauf an was und wie du lernen willst. Das klingt doch nach einer super Lern-Anwendung. Allerdings würde ich einfach erstmal anfangen die Anwendung so zu entwickeln, dass du deine eigenen Daten auvh verwenden kannst. Ohne gleich ein Web2.0 Frontend-Framework davorzuschnallen. Ich würde es so machen:

Installier dir Nodejs (wenn du bei Javascript bleiben willst) und entwickel eine kleine Anwendung, die Datenbank Querys ausführt und die Ergebnisse in HTML zurückliefert. So, dass du z.B. Folgende URLs aufrufen kannst:

http://localhost/categories //liefert alle Kategorien aufgelistet
http://localhost/category/? //liefert dann zb alle Artikel für die angegebene ID (ID=?) zurück als eine Liste oder Tabelle für diese Kategorie

Dann verknüpfst du das miteinander und machst die Kategorien unter /categories auswählbar, so dass du zu /category/? (? ist hier eine ID einer Kategorie) Weitergeleitet wirst und so weiter .. sowas eben.

Alles simple halten und Schritt für Schritt durchgehen. Du wirst genug Zeit brauchen eine Datenbank aufzusetzen mit der du dich über deine Anwendung verbinden kannst. Aber das gehört eben dazu.

Dann kannst du am Ende einfach das „Rausschreiben“ als HTML ersetzen mit JSON und dein Frontend mit einem Framework deiner Wahl umsetzen.

Als Backend-Anwendung könnte dich expressjs interessieren. Meine URL-Beispiele sind z.B. Routing Beispiele mit express. Das wollte ich nur ergänzen..
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: zlep
Danke euch beiden, auch für eure Geduld. :)

Also PHP ist kein Problem. Daten aus MySQL per PDO auslesen habe ich schon oft gemacht. So ein Script könnte ich mir also problemlos basteln.

Ich schaue mir das alles nächste Woche noch mal genauer an. Danke noch mal und schönes WE.
 
Achso, wenn PHP kein Problem ist, dann guck dir mal REST APIs mit PHP an. Damit hättest du dann ein Backend für dein React Frontend ;)
 
Hallo,

ich bin nun ein gutes Stück weiter gekommen. Ich habe mir nun in PHP mit PDO eine Rest API geschrieben.
Ich habe nun verschiedene APIs zur Verfügung:

1) meineseite.de/category/ <- listet mir alle Kategorien auf
2) meineseite.de/produkte/ <- listet mir alle Produkte auf
3) meineseite.de/produkte/id=? <- listet mir alle Produkte einer bestimmten Kategorie auf
4) meineseite.de/produkt/id=? <- listet mir das ein Produkt mit der ID auf

(An der Namensgebung könnte ich wahrscheinlich noch arbeiten, aber ist ja sowieso nur für den internen Gebrauch)

Wenn ich nun an meine App denke, stelle ich es mir so vor:

- Kategorieübersicht (fetch zu alle Kategorien (1))

- Klick auf eine Kategorie -> Übersicht über alle Produkte dieser Kategorie. D.h. ich übergebe mit params die Kategorie-ID und nehme diese mit getParams auf der Produktübersichtsseite wieder auf. Dann mache ich einen neuen fetch zu (3), also alle Produkte einer bestimmten Kategorie. Das Fragezeichen ist dann die Variable, also die ID, die ich mit getParams aufgenommen habe.

- Klick auf ein Produkt -> Produktdetails.
Hier nun meine Frage: Ist es nun sinnvoll, das gleiche Spiel zu wiederholen, sprich, wieder einen neuen fetch, dieses mal zu (4) zu machen. (ID übergeben, auf der Produktseite holen und den fetch zu machen)?

Ich hoffe, ihr versteht was ich meine.
Vielen Dank
 
Du hast dich ja gut informiert, klingt sehr gut.

Ja diese Vorgehensweise, dass man sich immer mal eben Daten besorgt die jetzt gerade benötigt werden ist typisches Web2.0 verhalten.
Ich meine, dass React/Vue etc auch eine Möglichkeit bieten fetchresults zu cachen und so lokal die Daten clientseitig zu haben, falls mal keine Verbindung zum Datenbankserver besteht. Stichwort dafür wäre Progressive Web App. Hab ich aber so noch nicht mit gearbeitet.
 
  • Gefällt mir
Reaktionen: zlep
Super, danke.

Ja, das meinte ich, ob es wirklich sinnvoll ist, jedes mal einen neuen fetch zu machen (der ja dann immer Daten laden muss, bei jedem Screen-Wechel). Oder ob es eine Möglichkeit gibt, alle Daten ein einziges Mal zu laden und dann irgendwie immer zwischen den Screens hin und her zu schieben (mit params). Wüsste jetzt nur nicht ganz genau, wie ich das dann anstellen würde.

Aber jetzt versuche ich es dann erst mal so umzusetzen.
Danke
 
Wie stellst du dir das denn vor, alle Daten ein einziges Mal zu laden? Du weißt ja vorher nicht, welches Produkt der Nutzer letztendlich aufrufen wird.

Was du aber machen kannst, ist es, alle Daten nach einmaligem Aufrufen lokal zu cachen, sodass es zumindest nicht passiert, dass man immer wieder die Liste der Kategorien fetchen muss, wenn der Nutzer dorthin navigiert.
 
Wahrscheinlich habe ich da einen Denkfehler. Ich hatte es mir so vorgestellt, dass alle benötigten Daten beim Start der App in eine Art Cache geladen wird. Wenn der Nutzer dann auf eine Kategorie klickt, mache ich die gleiche Abfrage (mit params die ID weitergeben und mit getParams die ID aufnehmen) und dann -statt einen fetch durch die API - eine Abfrage des Caches.

Oder irgendwie so :)

Aber wenn der erste von mir beschriebene Weg der richtige ist, umso besser, dann steht mein Konzept für die App ja schon, was ja die halbe Miete ist :)

Mir macht dann nur noch die Datenmenge ein bisschen Sorgen. Denn selbst wenn ich immer nur die Produkte aus der entsprechenden Kategorie lade, habe ich eine relativ große Kategorie mit mindestens 2000 Produkten. Ich kann gerade nicht einschätzen, wie groß die MySQL DB in dem Fall werden wird. Ein paar MB vielleicht? Auch wenn es sich nur um Text handelt? Ist das ein Problem?
 
Naja die größe der DB hat nichts mit deiner Anwendung zu tun. Außerdem selektierst du ja die Daten die du haben möchtest und lädst dir keinen Dump der kompletten Datenbank runter.

btw. sind 2000 Einträge ein Witz. Bau das erstmal so, wie du gesagt hast. Dann wirst du ja sehen, ob du Performance Probleme bekommst.
 
  • Gefällt mir
Reaktionen: zlep
Hallo,

ich wollte mal kurz eine Zwischenmeldung geben und am Schluss habe ich auch noch mal eine Frage.

Ich bin wirklich sehr gut weitergekommen für das, dass ich am Anfang absolut keine Ahnung hatte :)

- Meine verschiedenen API-Endpunkte (getCategories, getCategoryProducts, getSingleProduct) funktionieren. Für die "Produkte der jeweiligen Kategorie" habe ich nun doch einen Endpunkt mit Pagination geschrieben, sodass immer nur 100 Produkte geladen werden und der User am Ende der Liste auf "load more" klicken kann, um die nächsten 100 Produkte zu laden. Eventuell setze ich das noch mit einer "infinity Scroll" um, anstatt einem "load more"-Button.

- Das Grundgerüst der App in React Native steht ebenfalls. Alle Screens sind angelegt und funktionieren. Was noch fehlt ist das komplette UI. Aber das stellt mich nun vor keine Herausforderung mehr.

- Eventuell setze ich noch eine Suchfunktion um. Dazu dann vielleicht später noch mal ein paar Fragen :D

Was mir nun aber noch dringend auf dem Herzen liegt:

In wieweit muss ich bzgl. meiner API-Endpunkte auf Sicherheit achten? Es handelt sich nur um GET-Requests. Der MySQL/PHP-Part ist mit PDO gesichert. Das sollte also sicher sein.
Gibt es sonst irgendwelche Sicherheitslücken, die eine API haben kann? Sensible Daten habe ich nicht. Alle Daten könnten schlimmstenfalls per URL aufgerufen werden, das wäre aber kein Problem. Also z.B. product?id=134. Das ist ja kein Geheimnis.

Was ich mir nur vorstellen könnte, wäre, dass ich keine Art von Limitierung eingebaut habe. Also, dass in der Minute nur X mal die API aufgerufen werden kann. Könnte das zum Problem werden? Wie wahrscheinlich ist es, dass Hacker/Bots eine völlig bedeutungslose App wie meine, auseinandernehmen und die API versuchen auszunutzen?

TLDR: Welche Sicherheitsmaßnahmen muss man bei einer API vornehmen, die nur unsensible Daten holt?

Vielen Dank noch mal an alle
 
Wenn die API nur Daten ausliest und keine Veränderungen ermöglicht, sollte das Risiko sehr überschaubar sein. SQL-Injection wäre vermutlich die größte Gefahr, aber das sollte durch PDO verhindert werden.

Aber wirklich ausschließen, dass deine Software Lücken enthält, kann ein Außenstehender natürlich nicht. Generell ist es ratsam, sich mit den verbreiteten Angriffsmethoden vertraut zu machen, um ein Gespür für Sicherheit zu entwickeln.

Ein Request-Limit würde ich erstmal nicht implementieren. Wenn jemand deinen Server per DoS lahmlegen will, wird er vermutlich immer Wege finden. Aber wenn deine Limits zu niedrig eingestellt sind, vergraulst du unter Umständen legitime Nutzer.
 
Zurück
Oben