Erste iOS app Produktkatalog als Anfänger erstellen?

[zlep]

Hallo,

vorab: Ich habe noch nie eine iOS App programmiert. Ich kann HTML, CSS, PHP und ein wenig Javascript.
Ist es eurer Meinung nach für einen Anfänger möglich, einen Produktkatalog als iOS App zu erstellen?

Der Katalog müsste im Prinzip nur Kategorien haben. In diesen Kategorien sind die Produkte mit Bild aufgelistet und wenn ich ein Produkt auswähle, komme ich zu einer detaillierten Beschreibung.
Sinnvoll wäre natürlich noch eine Suchfunktion.

Wenn ich nichts vergessen habe, müsste es das eigentlich schon gewesen sein.

Machbar oder soll ich es vergessen?

Danke euch.

 

[BlubbsDE]

Hast doch alles, was Du brauchst. Baue eine mobil fähige Webseite und mach aus der Webseite eine App.

 

[zlep]

Hast doch alles, was Du brauchst. Baue eine mobil fähige Webseite und nach aus der Webseite eine App.

Hi, habe ich mir auch schon überlegt, aber das wäre dann keine App, die man im Appstore veröffentlichen kann, oder? Hatte das schon mal versucht zu googeln und ich dachte, ich hätte mir die Frage mit nein beantwortet.

 

[BlubbsDE]

Sicher. Solche Wrapper wird es auch zu Hauf fürs iOS kennen. Kenne das iOS bzw. die App Programmierung dafür nicht. Aber wenn ich google gibts da zig Treffer.

 

[zlep]

Hast recht.
Sowas hier? https://de.appypie.com/konvertieren-website-zur-mobilen-apps

Und das soll funktionieren? Kann ich gar nicht glauben
Falls ja, danke dir.

 

[uburoi]

Ich muss gestehen, dass ich mich als Amateur mit XCode und Swift schwer tue, obwohl ich mir mit anderen Sprachen schon einige (und auch durchaus aufwändigere) Anwendungen programmiert habe (allerdings nur für den Desktop).
Für eine anständige native App braucht es m.E. schon einige Einarbeitung...

Gruß Jens

 

[abcddcba]

Es gibt auch Entwickler, die entwickeln direkt Cross-Plattform, z.B. mit Xamarin, das waere dann C# als Sprache.

Oder React Native, also das waere dann in Javascript zu programmieren.

Fuer die naechste App werde ich aber mal spasses-halber mit Flutter rumspielen. Man kann nur dazulernen.

 

[Sparta8]

Musst dich ein wenig einlesen und dann entscheiden welches Tool für dich am besten ist. Es gibt viele Tools mit denen du über HTML, CSS & JS native Apps erstellen kannst.

z.B. https://www.hongkiat.com/blog/mobile-frameworks/

Einfach googlen nach: HTML CSS JS native app

 

[zlep]

Oder React Native, also das waere dann in Javascript zu programmieren.

Habe mich nun vor einiger Zeit tatsächlich für React Native entschieden. Javascript kann ich ja grundsätzlich (nicht auf Profi-Level, aber für den Anfang und zum Testen sollte es erst mal reichen). Nun lerne ich seit einigen Tagen React und auch da komme ich ganz gut voran. Als nächstes wäre dann React Native dran. Ich denke, für meine Anforderungen an einen einfach Produktakatalog sollte das als Anfänger im Bereich des Möglichen liegen. Lerne natürlich ständig dazu und das macht ja dann letztlich auch Spaß.

Bevor ich anfange ist mir nur eines nicht klar. Google hat mir auch nicht so richtig weitergeholfen:

Wenn ich den Katalog im Web umsetzen würde, hätte ich die ganzen Daten (Artikelname, Artikelnummer, Länge, Breite, Höhe, usw.) ja in einer MySQL-Datenbank und würde die dann einfach mit PHP auslesen und darstellen.

Wie läuft das nun aber mit Javascript, genauer gesagt mit React? Und letztlich bei einer App (in React Native)? Eine App hat ja nicht zwingend eine Online-Verbindung und kann sich die Daten von einem Server ziehen.

Wie genau würde ich das also anstellen? Für mich als Anfänger wäre es wahrscheinlich am einfachsten, die Daten hardzucoden, aber das ist bestimmt der falsche Weg, oder? Oder würde das notfalls gehen?

Danke

 

[Tokolosh]

Mit den ganzen Javascript Frontend Frameworks, wie React, Vue, Angular werden so genannte Progressive Webapps entwickelt. Sie sind letztendlich dazu da, um die Daten, die von einer Datenbank oder einer REST-API oder sonstigen API zur Verfügung gestellt werden dem Benutzer darzustellen. Das geschieht meistens durch AJAX-Requests.
Wie du schon sagst, müssen die Daten ja irgendwo herkommen. Eine PWA bietet caching Möglichkeiten um einmal hergeholte Daten nicht immer wieder anfragen zu müssen und somit laufen sie auch "offline". Was aber nicht bedeutet, dass dann alle Funktionen gegeben sind.

Letztendlich kommst du nicht darum herum die Daten über ein Netzwerk zu aktualisieren.

 

[zlep]

Letztendlich kommst du nicht darum herum die Daten über ein Netzwerk zu aktualisieren.

Ok, danke. Aber was bedeutet das nun konkret? Baue ich die "App" in React Native und hole die Daten tatsächlich per PHP (am besten dann wohl per PDO) aus einer ganz normalen MySQL-Datenbank? Das ist doch bestimmt nicht richtig.

 

[cx01]

Doch, genau so läuft es ab.

Du programmierst einen Server in PHP, der Daten aus der Datenbank ausliest und in einem leicht zu verarbeitendem Format (z.B. JSON) anbietet. Deine React Native-App ruft dann per HTTP-Anfrage diese JSON-Daten von deinem Server ab und kann sie dann anzeigen.

 

[zlep]

Verstehe ich das richtig, dass ich im Prinzip meine Daten in eine ganz normale MySQL-Datenbank einpflege und aus dieser eine JSON-Datei generiere. Die Datei enthält dann die Daten aus der DB.
Letztlich wird dann nur noch diese JSON-Datei in React-Native "eingebunden" und aus dieser hole ich dann meine benötigten Daten. Im Prinzip also, wie wenn ich die Daten erst mal hardcoden würde?

Mit hardcoden meine ich:

state = {
    katalog: [
        {
            id: 1,
            Artikelname: Blabla,
            Artikelnummer: 1234
        },
        {
            id: 2,
            Artikelname: blablabla,
            Artikelnummer: 23455
        }
    ]
}

 

[cx01]

Es ist empfehlenswert, dass deine App bei jedem Start die JSON-Daten vom Server neu lädt. Die Daten hardzucoden ist eher nachteilhaft, weil du ja dann für jede Änderung die ganze App im App-Store hochladen musst.

Wenn die Daten sich allerdings fast nie verändern, wäre hardcoden auch eine Lösung.

 

[new Account()]

Im Prinzip also, wie wenn ich die Daten erst mal hardcoden würde?

Jein: Ja, aber das Holen vom Server benötigt natürlich Zeit.

 

[zlep]

Ok, danke euch. Aber der Gedanke dahinter ist korrekt?

Daten in MySql DB -> JSON-Datei (mit den Daten) -> App lädt JSON-Datei vom Server und erhält dadurch alle benötigten Daten

Oder ich erstelle direkt nur die JSON-Datei? Wenn ich es richtig verstehe, ist eine JSON-Datei sehr simpel aufgebaut: https://jsonplaceholder.typicode.com/todos

 

[Tokolosh]

Ja, so läuft das ab.
Du kannst dir zum Testen natürlich so eine JSON-Dummy-API bauen oder im Internet suchen.
In deinem Beispiel-Link, sendest du auch einen HTTP (GET/POST) Request an eine API, das siehst du nur nicht. Diese API liefert dir eine JSON-Datei und dein Browser kann diese direkt formatiert darstellen. Also genau das, was du haben möchtest.

Letztendlich müssen 2 Sachen gegeben sein, wie schon anderen gesagt haben:
Die Daten müssen über
1. Einen HTTP-Request angefragt
und
2. muss das Ergebnis als JSON ausgeliefert werden.
Denn so funktionieren diese Frameworks.

Wenn das gegeben ist, ist es erstmal völlig egal, wie dein Backend aussieht oder ob es überhaupt ein Backend gibt. Frontend und Backend sind losgelöst von einander, wie du schon bemerkt hast. Das ist eine der Stärken dieser Frontend-Frameworks.

Ergänzung:
Das ist übrigens heutzutage im Web Standard. Du hast mehrere kleine Anwendungen, die nur über eine Schnittstelle mit einander kommunizieren. In diesem Fall ist die Schnittstelle eben das HTTP-Protokoll. Somit musst du dir, wenn du eine Frontendanwendung mit Vue, React, Angular entwickeln willst keine Gedanken über ein Backend machen, sondern DEFINIERST nur, welche Daten die Schnittstelle zu liefern hat. Z.B. wie die JSON-Datei aussehen soll und baust dementsprechend deine Components zusammen.

 

[new Account()]

2. muss das Ergebnis als JSON ausgeliefert werden.
Denn so funktionieren diese Frameworks.

Muss nicht.
Du kannst das Ergebnis fast beliebig ausliefern (z.B. XML, JSON, PROTO, ...).
Du kannst auch Frameworks wie GRPCWeb nutzen, was eine typsichere Abstraktion wäre, sodass du dich nicht mehr mit JSON-Dateien und dessen Parsen rumschlagen must.

 

[Tokolosh]

Das stimmt schon. Da es sich bei den Frameworks um Javascript handelt, bietet sich JSON jedoch an. Habe zugegebener Maßen aber noch nicht mit anderen Formaten in Java-Frontends gearbeitet.

 

[zlep]

Hallo,

ich hoffe, es ist ok, wenn ich hier immer wieder meine Fragen zu diesem "Projekt" einwerfe, anstatt einen neuen Thread aufzumachen.

Die Grundlagen von React habe ich jetzt soweit drauf und mit React Native habe ich auch schon begonnen, mich zu beschäftigen. Der Plan für meine App steht in groben Zügen in meinem Kopf (ist ja auch nicht so umfangreich).

Startseite = Kategorien
Kategorien -> Produktübersicht
Produktübersicht -> Einzelnes Produkt
(vielleicht noch eine Favoritenfunktion o.ä.)

Was mich aber immer noch beschäftigt ist die API Anbindung:

1.) Wenn ich meine Produkte in einer MySQL DB speichere und daraus eine JSON Datei erstelle, wird diese Datei wahrscheinlich ziemlich groß. Ich schätze jetzt mal ganz grob vielleicht so 5000 Produkte mit jeweils ca. 10 Einträgen (Breite, Höhe, Gewicht, usw). = 50.000 Einträge

Ist das nicht zu viel? Kann die App diese Menge an Daten "einlesen"?

2.) Nur um noch mal nachzufragen: Diese JSON-Datei kann ich auf meinen eigenen Webserver hochladen und dort einfach per URL in meiner React Native App eine GET Anfrage auf die https://meinserver/datei.json machen? Damit hole ich mir alle benötigten Daten?

Sorry, dass ich da noch mal so nachfragen muss.
Vielen Dank