Added iOS Track for learnapollo #38

nikolasburk · 2017-01-07T18:32:06Z

No description provided.

marktani

Amazing tutorial!
Hope the suggestions are clear.

Other general suggestions:

required is GraphQL lingo for mandatory, please update the uses of mandatory accordingly
the gap between text and code snippets seems to be too wide at some parts, meaning that you describe necessary code changes but don't provide the according code snippet. This makes it difficult to even know wherr the code should be put, let alone what exactly you are supposed to do. my experience is that it's probably better to err on the side of holding hands too much rather than too little when it comes to code snippets. interested to hear your opinion on this one.
in the same vein, please make sure to update code snippets that are supposed to be copied with the ```swift@path syntax. Snippets that are not supposed to be copied don't need the @path part

marktani · 2017-01-08T09:45:21Z

content/tutorial-ios/ios-01.md

+
+Then add the following two lines after the import statements:
+
+```swift


use ```swift@path/to/file syntax to enable copy button for snippets that the reader should copy and paste in his code (see React or RN tracks for example)

marktani · 2017-01-08T09:47:23Z

content/tutorial-ios/ios-02.md

+This is the 2nd exercise in the **iOS Track** of this Apollo Client Tutorial!
+
+## Goal
+


pokedex: -> pokedex.

marktani · 2017-01-08T09:49:07Z

content/tutorial-ios/ios-02.md

+
+This query will return the `id` and the `name` of the `Trainer` that is called `__NAME__`.
+
+> Note: You can copy this query directly into the [GraphiQL](https://api.graph.cool/simple/v1/__PROJECT_ID__) playground and inspect the results there.


refer to the built in GraphiQL rather than the URL

marktani · 2017-01-08T09:53:12Z

content/tutorial-ios/ios-02.md

+      default:
+          fatalError("ERROR: Unknown section")
+      }
+```


marktani · 2017-01-08T09:58:03Z

content/tutorial-ios/ios-03.md

+
+## Introduction
+
+Open the directory that contains the 3rd exercise (`exercise-03`) and open `pokedex-apollo.xcworkspace`. It already contains a running version of the code you wrote in the previous lesson.


for the React track it's not always the case that exercise-n+1 starts right where exercise-n ended. Especially "wiring up" things like import statements and setting up new routes to the router have been added to allow the reader to focus on the Apollo-specific tasks. Might be worth to consider a similar approach for the iOS track. Just thought I mentioned it, it's not mandatory :)

marktani · 2017-01-08T10:20:32Z

content/tutorial-ios/ios-06.md

+}
+```
+
+That's a lot of of code, let's try to understand what it does! In the very beginning, we check if we're currently in the _editing state_ - if that is the case we are going to perform the mutation using the strings that are written in the text fields. Therefore, we first make sure that the required data is provided using a `guard` statement. We then start the activity indicator to indicate to the user that a network request has started. Finally, we instantiate the `UpdatePokemonMutation` that was generated by `apollo-codegen` based on the mutation we added in `PokemonDetailViewController.graphql`. Subsequently, we call `perform` on our `ApolloClient` instance passing the instance of the mutation as well as a callback to deal with the return value. Since we are using our `PokemonDetails` fragment again, we can simply extract this from the return value inside the callback and assign it the `pokemonDetails` property. This will automatically update the UI because of the `didSet` property observer. 


a lot of of -> a lot of

marktani · 2017-01-08T10:23:26Z

content/tutorial-ios/ios-06.md

+
+### Updating The UI
+
+That is because the data in the `ownedPokemons` array in `PokedexTableViewController` is independent from the data we just updated in `PokemonDetailViewController`, so we have to manually update it. Let's do so again with a closure. Add the following property to `PokemonDetailViewController`:


I think wording can be improved here. The data is not unrelated (it's supposed to be the same!) it's just that Apollo doesn't know that - how would it?

marktani · 2017-01-08T10:25:43Z

content/tutorial-ios/ios-06.md

+## Recap
+
+Congratulations, you have implemented the last bit of functionality for this tutorial! 🚀 Let's recap what we learned in this lesson:
+- Mutations for updating and deleting existing data entries are syntactially similar to mutations for adding new data entries as well to queries


improve wording

marktani · 2017-01-08T10:26:08Z

content/tutorial-ios/ios-06.md

+
+Congratulations, you have implemented the last bit of functionality for this tutorial! 🚀 Let's recap what we learned in this lesson:
+- Mutations for updating and deleting existing data entries are syntactially similar to mutations for adding new data entries as well to queries
+- The result of a mutation can contain any data that we specify - we can conveniently this data to update the UI


improve wording

marktani · 2017-01-08T10:26:50Z

src/utils/content.ts

@@ -110,6 +110,25 @@ export const chapters: Chapter[] = [
    title: '05 - Basic Mutations',
    alias: 'rne-05',
  }]),
+  new Chapter('iOS', 'tutorial-ios', true, 'Learn how to easily get started iOS and GrahQL with Apollo Client. You will use the prepared application as a playground to experiment with an iOS Pokedex App.', [{


change to reflect that the track is more than a playground. check other texts for comparison

marktani · 2017-01-08T10:36:00Z

content/tutorial-ios/ios-01.md

+
+The **Apollo iOS client** can be installed through Cocoapods or Carthage. Since we are using Cocoapods in this project, go ahead and open the `Podfile` and add the following line:
+
+```ruby


…ctive

…iler error

marktani · 2017-01-09T11:49:00Z

content/tutorial-ios/ios-01.md

+
+## Introduction
+
+Sign up with GitHub to receive your own `pokedex-apollo` project here:


Please be consistent with your usage of pokedex-ios, pokedex-apollo, apollo-pokedex.

marktani · 2017-02-09T19:08:49Z

content/tutorial-ios/ios-04.md


 Welcome to the 4th exercise in the **iOS Track** of this Apollo Client Tutorial!


 ## Goal

-In this exercise, our **goal** is to add new Pokemons to the Pokedex. Therefore, we are going to learn about _mutations_.
+In this exercise, our **goal** is to display a _detail view_ for a Pokemon when the user selects it in the table view. Therefore, we are going to learn about a new GraphQL feature that allow to reuse sub-parts of a query: Fragments! 


that allows us

marktani · 2017-02-09T19:10:39Z

content/tutorial-ios/ios-04.md


+With the new `PokemonDetailViewController` we now have have two differents areas in our app where we need to access a Pokemon's `name` and `url` (the `PokemonCell` is the second one). Currently, the only way for us to do so is by using the generated struct `TrainerQuery.Data.Trainer.OwnedPokemon` in both places. However, with this approach we are coupling the data requirements of the `PokemonCell` very tightly to the ones of our `PokemonDetailViewController`. This might turn out very inconvenient when our data requirements change in the future and suddenly one area should include more, less or complemetely different data. Fragments enable independent usage of the same data in various locations, which decouples the data requirements of different views and greatly improves our flexibility!


complemetely

marktani · 2017-02-09T19:14:13Z

content/tutorial-ios/ios-04.md

+}
+```
+
+Since we don't actually set the `pokemonDetails` property yet, but try to access it, the app will crash if you test this feature now. This is because the property is declared as an implicitly unwrapped optional!


implicitely

marktani · 2017-02-09T19:14:49Z

content/tutorial-ios/ios-04.md


+In this lesson, we learned about using fragments and why they are essential for using the **Apollo iOS client**. Let's revisit the key learning of this exercise:


key learnings

marktani · 2017-02-09T19:15:27Z

content/tutorial-ios/ios-05.md

@@ -1,224 +1,189 @@
-# Tutorial 05 - Fragments
+# Basic Mutations


Tutorial 05 - Basic Mutations

marktani · 2017-02-09T19:38:16Z

content/tutorial-ios/ios-05.md


-Run the app and tap on a Pokemon in your Pokedex, the `PokemonDetailViewController` should now display the image, name and url of the Pokemon you selected.
+In this exercise, we added functionality to our app that allows to add a new Pokemon to our Pokedex and take advantage of the caching and automatic UI updates that's implementing in the **Apollo iOS client**. Here is a summary of what we learned:


that's implemented

nikolasburk added 5 commits January 7, 2017 15:20

worked on further content and moved images to proper location

148770d

added chapter 6

1f31afe

finetuning and polishing of the lessons

38bd5dd

tested and polished exercise-01

f37ed27

tested and polished exercise-02

3bbd4c9

marktani requested changes Jan 8, 2017

View reviewed changes

marktani reviewed Jan 8, 2017

View reviewed changes

nikolasburk added 6 commits January 8, 2017 13:06

updated a few files while going through tutorial from a user's perspe…

f87264a

…ctive

improved wording

da83f52

made all code snippets copyable

5fe11f5

fixed issue in third chapter where newer Apollo version caused a comp…

53980e0

…iler error

fixed issue in fifth chapter where newer Apollo version caused a comp…

c570f9a

…iler error

added hint how to solve versioning issue in first chapter

22a533e

marktani requested changes Jan 9, 2017

View reviewed changes

Nilan and others added 6 commits January 9, 2017 13:00

add download for pokedex-ios

cc75de5

fixed minor issue in chapter 3

b2a28b9

changed usage of 'mandatory' to 'required'

0a5daf5

minor fixes

fac07f3

updated description of iOS track

7960af7

updated tutorial to include caching and automatic UI updates

18240c8

marktani reviewed Feb 9, 2017

View reviewed changes

content/tutorial-ios/ios-05.md Outdated

@@ -1,224 +1,189 @@

# Tutorial 05 - Fragments

# Basic Mutations

Copy link

marktani Feb 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tutorial 05 - Basic Mutations

marktani reviewed Feb 9, 2017

View reviewed changes

marktani merged commit a7c85f2 into master Feb 9, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added iOS Track for learnapollo #38

Added iOS Track for learnapollo #38

nikolasburk commented Jan 7, 2017

marktani left a comment

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017

marktani Jan 8, 2017 •

edited

Loading

marktani Jan 9, 2017

marktani Feb 9, 2017

marktani Feb 9, 2017

marktani Feb 9, 2017

marktani Feb 9, 2017

marktani Feb 9, 2017

marktani Feb 9, 2017


		Then add the following two lines after the import statements:

		```swift

		This is the 2nd exercise in the iOS Track of this Apollo Client Tutorial!

		## Goal


		This query will return the `id` and the `name` of the `Trainer` that is called `__NAME__`.

		> Note: You can copy this query directly into the [GraphiQL](https://api.graph.cool/simple/v1/__PROJECT_ID__) playground and inspect the results there.


		## Introduction

		Open the directory that contains the 3rd exercise (`exercise-03`) and open `pokedex-apollo.xcworkspace`. It already contains a running version of the code you wrote in the previous lesson.


		### Updating The UI

		That is because the data in the `ownedPokemons` array in `PokedexTableViewController` is independent from the data we just updated in `PokemonDetailViewController`, so we have to manually update it. Let's do so again with a closure. Add the following property to `PokemonDetailViewController`:


		The Apollo iOS client can be installed through Cocoapods or Carthage. Since we are using Cocoapods in this project, go ahead and open the `Podfile` and add the following line:

		```ruby


		## Introduction

		Sign up with GitHub to receive your own `pokedex-apollo` project here:


		With the new `PokemonDetailViewController` we now have have two differents areas in our app where we need to access a Pokemon's `name` and `url` (the `PokemonCell` is the second one). Currently, the only way for us to do so is by using the generated struct `TrainerQuery.Data.Trainer.OwnedPokemon` in both places. However, with this approach we are coupling the data requirements of the `PokemonCell` very tightly to the ones of our `PokemonDetailViewController`. This might turn out very inconvenient when our data requirements change in the future and suddenly one area should include more, less or complemetely different data. Fragments enable independent usage of the same data in various locations, which decouples the data requirements of different views and greatly improves our flexibility!


		In this lesson, we learned about using fragments and why they are essential for using the Apollo iOS client. Let's revisit the key learning of this exercise:

		@@ -1,224 +1,189 @@
		# Tutorial 05 - Fragments
		# Basic Mutations


		Run the app and tap on a Pokemon in your Pokedex, the `PokemonDetailViewController` should now display the image, name and url of the Pokemon you selected.
		In this exercise, we added functionality to our app that allows to add a new Pokemon to our Pokedex and take advantage of the caching and automatic UI updates that's implementing in the Apollo iOS client. Here is a summary of what we learned:

Added iOS Track for learnapollo #38

Added iOS Track for learnapollo #38

Conversation

nikolasburk commented Jan 7, 2017

marktani left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marktani Jan 8, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marktani Jan 8, 2017 •

edited

Loading