...
 
Commits (3)
# Expo## Extra: Expo als Entwicklungsumgebung, mit Android/iOS simulator oder client auf Smartphone
## Expo als Entwicklungsumgebung
## Projekt initialisieren
Ein kurzer Überblick über das Setup und die Tools für die schnelle Entwicklung mit Android/iOS-Simulator oder Client auf Smartphone für unser Beispiel:
## Tools und Projekt initialisieren
```shell
npm install exp --global
exp register
exp login
exp register
exp login
exp init spotify-graphql-client-react-native-expo --projectType blank
cd spotify-graphql-client-react-native-expo
exp start
# in neuer shell:
exp ios # oder: exp android
[exp] Your URL is: exp://xxxx.spot-cli.exp.direct:80
[exp] Logs for your project will appear below. Press Ctrl+C to exit.
in simulator, open expo, + button, add url and ...
```
![exp start](https://blog.codecentric.de/files/2017/11/spotify-expo-cli-exp-start.png)
Es erzeugt einen QR und eine URL, z.B.
Auf dem Smartphone kann der erzeugte QR Code oder die URL in der Expo-App eingescannt werden, so dass auch auf einem echten Gerät getestet werden kann.
```
[exp] Your URL is: exp://7m-2tf.lowsky.spot-cli.exp.direct:80
[exp] Logs for your project will appear below. Press Ctrl+C to exit.
in simulator, open expo, + button, add url and ...
```
Diese kann jetzt im iOS Simulator genutzt werden. Am einfachsten funktioniert es mit dem Expo Cli Tool per
Diese kann auch im Simulator genutzt werden. Am einfachsten funktioniert es mit dem Expo Cli Tool per
```
# in neuer shell:
exp ios # oder unter Windows: exp android
# in neuer shell, iOS Simulator oder Android Simulator
exp ios
exp android
```
Auf dem Smartphone kann der QR Code in der Expo App eingescannt werden, so dass auch auf einem
nativen Gerät getestet werden kann.
This diff is collapsed.
......@@ -194,8 +194,8 @@ geöffnet werden, und wir erhalten das gleiche Ergebnis:
![graphiql-hi](https://blog.codecentric.de/files/2016/09/graphiql-hi.png)
Im Editor-Fenster links wurde automatisch die Abfrage eingetragen und ausgeführt.
Hier können wir durch das Schema tool-gestützt Syntax Highlighting und auch **Auto-Vervollständigung** nutzen!
Im Editor-Fenster links wurde automatisch die Abfrage eingetragen und ausgeführt.-
Hier können wir durch das Schema tool-gestützt SyntaxHighlighting und auch **Auto-Vervollständigung** nutzen!
![graphiql-hi-with-docs](https://blog.codecentric.de/files/2016/09/graphiql-hi-with-docs.png)
......@@ -228,7 +228,7 @@ const schema = new GraphQLSchema({
Nach dem Neustart des Servers steht das neue Schema in Graphiql zu Verfügung.
Das ist unsere API-Dokumentation, ähnlich wie bei z.B. Swagger, aber
mit GraphQL wird keine zusätzlicher Schritt notwendig um die Documentation zu generieren!
mit GraphQL wird keine zusätzlicher Schritt notwendig um die Dokumentation zu generieren!
Graphiql fragt das Schema im Hintergrund über die gleiche Schnittstelle ab.
Das Schema kann auch per GraphQL gelesen werden, so stehen zum Beispiel alle Typdefinitionen zu Verfügung!
......@@ -256,7 +256,7 @@ Dazu lassen wir uns das bestehende Schema mit dem `printSchema`-Modul in einer d
```javascript
// data/printSchema.js
import { printSchema } from 'graphql';
import schema from './schema';
import schema from './data/schema';
console.log(printSchema(schema));
```
......@@ -272,8 +272,7 @@ type Query {
### Schema Definition per GraphQL SDL
Umgekehrt werden wir dieses Format als eine komplaktere Alternative zur bisherigen Definition unseres Schemas im Server
verwenden!
Umgekehrt werden wir dieses Format als eine kompakte Alternative zur bisherigen Definition unseres Schemas im Server verwenden!
1. Dazu benutzen wir einfach `buildSchema` aus dem `graphql` Modul:
......@@ -317,7 +316,7 @@ auf die wir gleich genauer eingehen werden:
3. Auch wenn GraphQL nur in baumartigen Strukturen zurückliefern kann, kann jede Abfrage auch Daten aus
einem **zyklischen Graphen** abrufen:
Zum Beispiel bei folgedem Szenario: Eine Suche in Twitter nach allen "Followern der Follower" eines Twitter-Benutzers enthält typischerweise auch der Startknoten, wenn sich Twitter-Benutzer gegenseitig folgen.
Zum Beispiel bei folgendem Szenario: Eine Suche in Twitter nach allen "Followern der Follower" eines Twitter-Nutzers enthält typischerweise auch der Startknoten, wenn sich Twitter-Nutzer gegenseitig folgen.
Mit solchen Abfragen wächst die Ergebnismenge natürlich schnell exponentiell an.
Als Lösung gibt es in der `sangria` Scala Bibliothek ein Modul zur abschätzung der Abfrage-Komplexität anhand der Zahl der Ebenen.
......