M2 Dev iOS - Anthony Da Cruz

#Application Unsplash

#📌 Modalités / Rendu

🧑‍🏫 Projet évalué

  • Modalités :
    • Travail en solo
    • Durée : ~7h à ~14h
  • Rendu :
    • Créez un projet public sur Github
    • Incluez dans le projet ou dans un gist un fichier Answers.md avec les réponses aux questions que vous allez rencontrer durant le projet.
    • Notez pour chaque reponse, le numéro de l’étape, son nom et le numéro de l’exercice.
  • Vous devrez terminer l’application chez vous pour la prochaine fois.

#Utilisation d’une API

Un des éléments les plus utiles dans la vie d’un développeurs c’est l’art de consommer des API, sur iOS vous pouvez évidemment le faire, et c’est même très simple avec SwiftUI et async/await.

Ça n’a pas toujours été le cas, et il y a encore quelques années il fallait utiliser des librairies comme Alamofire pour faire des appels réseau car les solutions natives étaient très peu intuitives et très peu pratiques.

#What to build ?

Nous allons maintenant créer une application mobile qui fait appel à une API pour afficher des images et réaliser des actions dessus.

Les écrans à faire :

  • Un écran d’accueil avec une liste d’images
  • Un écran de détail avec une image en plein écran
  • Un écran par catégorie avec une liste d’images

C’est une app de “Fond d’écran” comme il en existe plein, mais ce sera la vôtre ! Vous êtes libre de faire le design que vous voulez. Libérez votre âme de designer (et pas d’artiste)

#Inscription sur Unsplash

Pour la suite de l’exercice vous allez devoir vous créer un compte Unsplash pour pouvoir accéder à leur API.

Profitez en pour suivre ce super photographe https://unsplash.com/@akhu 😈

  1. C’est par ici : https://unsplash.com/developers
  2. Créez ensuite une application et remplissez le formulaire
  3. Récupérez votre clé d’API et testez là sur un outil comme Insomnia ou Postman

#Un test rapide

Nous n’utiliserons que l’authentification “Public” soit : https://unsplash.com/documentation#public-authentication → Testez sur votre client HTTP favoris (Postman, Insomnia, etc.) la route suivante :

sh
https://api.unsplash.com/photos/random

Faite en sorte que la clé d’api soit passé en queryParameter, lisez bien la documentation pour savoir comment faire.

Vous devriez avoir une réponse de ce genre :

json
{
	"id": "-ahOKp3g4-I",
	"slug": "a-small-village-on-the-edge-of-a-body-of-water--ahOKp3g4-I",
	"created_at": "2023-10-13T17:55:09Z",
	"updated_at": "2023-12-27T00:56:07Z",
	"promoted_at": "2023-12-16T09:24:01Z",
	"width": 7519,
	"height": 6015,
	"color": "#737373",
	"blur_hash": "LFB3Ka=sI;EL.AR:aee-5tOZ$#$f",
	"description": "Simple Manarola",
	"alt_description": "a small village on the edge of a body of water",
	"breadcrumbs": [],
	"urls": {
		"raw": "https://images.unsplash.com/photo-1697219590638-d2db7748802e?ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8&ixlib=rb-4.0.3",
		"full": "https://images.unsplash.com/photo-1697219590638-d2db7748802e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8&ixlib=rb-4.0.3&q=85",
		"regular": "https://images.unsplash.com/photo-1697219590638-d2db7748802e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8&ixlib=rb-4.0.3&q=80&w=1080",
		"small": "https://images.unsplash.com/photo-1697219590638-d2db7748802e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8&ixlib=rb-4.0.3&q=80&w=400",
		"thumb": "https://images.unsplash.com/photo-1697219590638-d2db7748802e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8&ixlib=rb-4.0.3&q=80&w=200",
		"small_s3": "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1697219590638-d2db7748802e"
	},
	"links": {
		"self": "https://api.unsplash.com/photos/a-small-village-on-the-edge-of-a-body-of-water--ahOKp3g4-I",
		"html": "https://unsplash.com/photos/a-small-village-on-the-edge-of-a-body-of-water--ahOKp3g4-I",
		"download": "https://unsplash.com/photos/-ahOKp3g4-I/download?ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8",
		"download_location": "https://api.unsplash.com/photos/-ahOKp3g4-I/download?ixid=M3w1MzYyNDN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2ODkwMjV8"
	},
	"likes": 116,
	"liked_by_user": false,
	"current_user_collections": [],
	"sponsorship": null,
	"topic_submissions": {
		"architecture-interior": {
			"status": "rejected"
		},
		"travel": {
			"status": "approved",
			"approved_on": "2023-10-19T14:05:02Z"
		}
	},
	"user": {
		"id": "oyuyNC0GjRI"
    //...

Si vous avez ça, bravo, votre clé d’API fonctionne, vous pouvez maintenant passer à la suite.

3-Intégrer1-Projet