SlideShare une entreprise Scribd logo
ASP.NET Web API: créer et
consommer un service REST
Si besoin, contactez-moi:

@DumontRenaud
renaud@mic-

belgique.be
-

ASP.NET MVC

-

Planning

Qu’est-ce qu’un service REST?

Le routing

-

CodeFirst : modèle de base de données

-

Web API ControllerSerialization JSON /
XML

-

Client Web avec Knockout
Qui suis-je ?
IT Evangelist au Microsoft Innovation Center
- Travaille avec la communauté sur le développement d’apps Windows Phone,
Windows 8, Kinect for Windows et Windows Azure
- Speaker régulier dans des conférences

Passionné de programmation, technologies et musique
- Participe à tous les évènements communautaires en Belgique et dans le
nord de la France
- Blogueur technique http://www.renauddumont.be
- Microsoft MVP Client Development depuis juillet 2013
Ou plutôt « REST-like ». On

REST

garde le bon pour se simplifier
la vie.
REST: qu’est-ce que c’est?
Representational State Transfer
REST est un style d’architecture dans lequel un client peut communiquer avec un serveur pour obtenir des
informations sur des données. REST un indépendant de tout protocole (moyen de communication).
Chaque donnée (objet) est identifiable par un URI (Unique Resource Identifier). REST utilise la notion d’hypermedia.
La communication entre le client et le serveur est dite Stateless. C’est-à-dire que chaque requête doit contenir
toutes les informations nécessaires pour pouvoir être traitée indépendamment des autres.
Le format des données reçues par le client est indépendant de celui utilisé pour le stockage des données.
Format de données indépendant
Je suis Renaud Dumont (abonné n° 45334)
Je veux le livre ISBN 282240142X au format Papier
Voici le livre « Développez en
HTML 5 pour Windows 8 »,
co-écrit par Loic Bar, Simon
Boigelot et Renaud Dumont

Je suis l’abonné n° 45334
Je veux le livre ISBN 282240142X
au format Ebook
Voici le livre numérique
« Développez en HTML 5
pour Windows 8 », co-écrit
par Loic Bar, Simon Boigelot
et Renaud Dumont
Des requêtes Stateless
Je suis Renaud Dumont (abonné n° 45334)
Je veux le livre ISBN 282240142X au format Papier
Voici le livre « Développez en
HTML 5 pour Windows 8 »,
co-écrit par Loic Bar, Simon
Boigelot et Renaud Dumont
Pourrais-je également avoir le livre ISBN
2092508261 au format Papier?
Bonjour, qui êtes-vous?
Ensemble de données reliées par des liens
hypermédia
Je suis Renaud Dumont (abonné n° 45334)
Je veux le livre ISBN 282240142X au format Papier
Voici le livre « Développez en
HTML 5 pour Windows
8 », co-écrit par Loic Bar
(AF3DS3), Simon Boigelot
(A54DF3), …
Je suis Renaud Dumont (abonné n° 45334)
Pourrais-je avoir la fiche de l’auteur Loic Bar (AF3DS3)?

Loïc Bar est un entrepreneur de 25 ans travaillant
dans le secteur ICT. Il a créé sa première boîte en
2008, juste après la fin de ses études et a travaillé
pour des références telles que McKinsey,
Microsoft, Coca-Cola, …
Protocole
HTTP

L’architecture REST se marie
plutôt bien avec HTTP.
Le protocole HTTP a toutes ces qualités (1/2)
Requête du client
-

Contacte une URL (URI)

-

Donne une information sur l’action à
effectuer (GET)

-

Donne les paramètres nécessaires à
l’identification (par cookies, ou dans le

header)
-

Indique le type de format attendu
Le protocole HTTP a toutes ces qualités (2/2)
Réponse du serveur
-

Renvoie l’état de la réponse (200 OK)

-

Le contenu de la réponse (body): une
page HTML

-

Donne des informations relatives au type
de contenu (text/html, utf-8)

-

Informations relatives aux politiques de
caching (no-cache)
ASP.NET MVC

Un bon début, mais peut mieux
faire.
Modèle – Vue – Contrôleur

User input
Requête http

Contrôleur

Modifier
l’état

Fournir des
données

Récupérer
l’état

Modèle

Vue

Output
HTML, …
Le Contrôleur
-

Chaque contrôleur définit des
actions

-

Une Action répond à une requête de
l’utilisateur en composant une
réponse

-

L’action peut éventuellement
modifier des données du modèle ou
en récupérer l’état
La vue
-

La Vue est un mélange de code HTML
et de C#.

-

Le View Engine Razor est utilisé pour
générer de véritables pages HTML à
partir des Vues.

-

La vue est responsable de l’affichage du
modèle et de la création d’interfaces
avec laquelle l’utilisateur peut interagir.
Le Modèle
-

Le modèle par défaut se compose d’une
classe UserProfile extensible pour la
gestion des profils utilisateurs.

-

Une classe héritant de DbContext
représente notre connexion avec la
base de données.

-

Le DbContext définit des DbSet<T>
correspondant à des tables de la base de
données.
Le template ASP.NET MVC 4 / Internet Application

Site web basique avec système
d’identification et d’autorisation.
Coup d’œil.
Code First

Partir du template de base et
puis tout casser.
Créer sa propre application
Application de gestion de tâches, Trello-like
Mettre de l’ordre

On est pas obligés d’aimer les
templates.
Gestion des TodoItem
- Créer une classe TodoItem ( Text, CreatedAt, Author, AssignedTo, ? )
en utilisant des conventions de nommage
- Ajouter un DbSet au DbContext pour représenter une table
- Scaffolding du Contrôleur et des Vues
- Test de l’application et observation de la table créée
Modification du modèle (1)
- AuthorId et AssignedToId sont requis par défaut : un entier n’est pas
nullable. Changement du type en int?
- Text doit être requis : annotation
- CreatedAt: utilisation de jQueryUI
- Et puis… forçons l’identification, et gérons ce qui ne dépend pas de
l’utilisateur côté serveur. Utilisation du helper HiddenFor(…)
Contexte modifié?
-

Lors de la première initialisation du
projet, la base de donnée est créé en
fonction des classes.

-

Si on modifie ces classes, le Context
n’est plus en phase avec la base de
données. Une exception est levée.

-

Utiliser un DatabaseInitializer (pratique
lors du développement) ou effectuer
une migration.
Premier client

Pourquoi ne peut-on pas
s’arrêter là?
Scénario courant
Un développeur que je ne connais pas veut créer une application
tierce pour les utilisateurs de mon site web.
You can't parse [X]HTML with regex.
http://bit.ly/parsehtml
Rappelez-vous REST
Une même ressource accessible dans différents formats,
indépendamment de se représentation.
Web API,
Bonjour!

Un service à la carte
API Controller

Si vous avez compris les
Controllers, vous êtes prêt pour les
API Controller.
Quelques différences (1/3) : Routing
Les API Controllers utilisent des routes différentes, pour pouvoir les
distinguer des contrôleurs classiques.
La route par défaut ne définit pas d’Action.
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
Quelques différences (2/3) : le type de retour
Les API Controllers ne font appel à aucune Vue.
Ils renvoient des données brutes en guise de réponse, ou des objets de
type HttpResponseMessage.
// GET api/TodoItem
public IEnumerable<TodoItem> GetTodoItems()
{
return db.TodoItems.AsEnumerable();
}
Quelques différences (2/3) : utilisation des messages
HTTP
GET, POST, PUT, DELETE. Convention de nommage ou attributs.
// POST api/TodoItem
public HttpResponseMessage PostTodoItem(TodoItem todoitem)
{
if (ModelState.IsValid)
{
db.TodoItems.Add(todoitem);
db.SaveChanges();
// do something
}
else
{
// do something else

}
}
Client Web

JavaScript, HTML, MVVM et
KnockoutJS
Une page all-in-one
- Mettre à jour les librairies de base: jQuery, jQueryUI, Modernizr, KnockoutJS
- Utilisation de Twitter Bootstrap (…, ou Foundation, ou ce que vous voulez. Mais ne
perdons pas de temps)
- Création d’un TodoList Controller

- Ajout d’une page Index
- Référencement des scripts nécéssaires: KnockoutJS et notre code perso.
Model-View-ViewModel
Notifications

Model

ViewModel

Business logic and
data

Presentation Logic

DataBinding
Commands

View
UI & UI Logic

On doit pouvoir imaginer le contenu de
l’interface en observant le ViewModel
Mon premier binding avec Knockout

Index.html
henallux.main.js
@{
ViewBag.Title = "Index";
}

var Henallux = {
viewModel: function () {
var __this = this;
__this.appTitle = ko.observable("Ma Super TodoList");
},

<h2 data-bind="text: appTitle"></h2>
@section scripts{
@Scripts.Render("~/bundles/knockoutjs")
@Scripts.Render("~/bundles/main")
}
};

initialize: function () {
var viewModel = new Henallux.viewModel();
ko.applyBindings(viewModel);
}

Henallux.initialize();
Lecture

HTTP GET : /api/TodoItem
Consommer l’API (1/4) : récupération des données
Pour pouvoir effectuer des requêtes sur notre API directement en
JavaScript, nous allons utiliser les requêtes AJAX avec jQuery
On entre dans le Web 2.0
Les requêtes AJAX permettent de faire du développement asynchrone ( !=
parallèle) avec l’utilisation des Promise.
JavaScript supporte nativement le JSON (JavaScript Object Notation)
Consommer l’API (1/4) : récupération des données
Les ObservableArray permettent
de définir des tableaux qui

seront observés en permanence
et notifieront l’interface de tout
changement.
KnockoutJS permet de binder
une collection à l’aide du motclé foreach en utilisant un
template définit en HTML.

henallux.main.js
__this.todoItems = ko.observableArray([]);
__this.loadData = function () {
$.ajax('http://localhost:1980/api/todoitem')
.then(function (items) {
for (var i in items) {
__this.todoItems.push(items[i]);
}
});
}

Index.html
<div data-bind="template: { name: 'todoitem-template', foreach: todoItems }"></div>

<script type="text/html" id="todoitem-template">
<div class="todoitem">
<h3><span style="font-style: italic;">Created by </span><span databind="text: Author.Username"></span></h3>
<p data-bind="text: Text"></p>
<p>Created at: <span data-bind="text: CreatedAt"></span></p>
</div>
</script>
Consommer l’API (1/4) : récupération des données
En théorie, une API REST utilise la notion d’hypermédia pour représenter les

associations entre objets.
Dans ce contexte-ci, on peut estimer qu’obtenir un TodoItem seul, sans

UserProfile n’a aucun sens et l’inclure d’office dans votre réponse.

Au risque de fâcher Roy T. Fielding…
Consommer l’API (1/4) : récupération des données
Possibilité de faire des jointures sur les tables en LinqToSql:
// GET api/TodoItem
public IEnumerable<TodoItem> GetTodoItems()
{
return db.TodoItems.Include("Author").AsEnumerable();
}
Suppression

HTTP DELETE :
/api/TodoItem/5
Consommer l’API (2/4) : suppression de données.
L’API.
L’action de suppression
d’un TodoItem s’attend à
recevoir un message
HTTP de type DELETE.
Il faut également fournir

en paramètre l’id de
l’élément à supprimer.

// DELETE api/TodoItem/5
public HttpResponseMessage DeleteTodoItem(int id)
{
TodoItem todoitem = db.TodoItems.Find(id);
if (todoitem == null)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
}
db.TodoItems.Remove(todoitem);
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException ex)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
}
return Request.CreateResponse(HttpStatusCode.OK, todoitem);
}
Consommer l’API (2/4) : suppression de données.
L’AJAX.
Avec AJAX, il suffit de
préciser le type de
method comme étant
DELETE.

__this.deleteTodoItem = function (todoItem) {
var url = Henallux.serviceUrl + 'api/todoitem/' + todoItem.TodoItemId;
$.ajax(url, {
method: 'DELETE'
}).then(function (result) {
Henallux.viewModel.todoItems.remove(todoItem);
Henallux.viewModel.statusMessage("TodoItem supprimé.");
Henallux.viewModel.statusType("success");
}, function (error) {
Henallux.viewModel.statusMessage("Un erreur est survenue pendant l
a suppression de cet item.");
Henallux.viewModel.statusType("warning");
});
}
Consommer l’API (2/4) : suppression de données.
L’HTML.
KnockoutJS permet non seulement de binder des données,
mais également des fonctions sur des évènements. C’est le
principe des Commandes.
<script type="text/html" id="todoitem-template">
<div class="todoitem">

<span type="button" class="close" data-bind="click: $parent.deleteTodoItem" aria-hidden="true">&times;</span>
<h3><span style="font-style: italic;">Created by </span><span data-bind="text: Author.UserName"></span></h3>
<p data-bind="text: Text"></p>
<p>Created at: <span data-bind="text: CreatedAt"></span></p>
</div>
</script>
Insertion

HTTP POST: /api/TodoItem
Consommer l’API (3/4) : insertion de données.
L’API.
Le POST prend en

paramètre un objet de

// POST api/TodoItem

[Authorize]
public HttpResponseMessage PostTodoItem(TodoItem todoitem)
{
if (ModelState.IsValid)
{

var user = db.UserProfiles.FirstOrDefault(u => u.UserName == User.Identity.Name);
if (user == null)
return Request.CreateErrorResponse(HttpStatusCode.Unauthorized, “blablabla");

type TodoItem.

todoitem.AuthorId = user.UserId;
todoitem.CreatedAt = todoitem.ModifiedAt = DateTime.UtcNow;

Il faut envoyer ces

db.TodoItems.Add(todoitem);
db.SaveChanges();

données avec notre

HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, todoitem);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = todoitem.TodoItemId }));
return response;

requête AJAX.

}
else
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}
}
Consommer l’API (3/4) : insertion de données.
HTML.
Quelques champs input vont permettre de récolter les données de l’utilisateur.

Un bouton pour déclencher la commande d’insertion.
<div>
<label>Texte</label>

<input type="text" id="new-todo-input-text" style="display: block;" />
</div>
<div>
<label>Assigné à... (Id)</label>

<input type="text" id="new-todo-input-assignedToId" style="display: block;" />
</div>

<button type="button" class="btn btn-primary" data-bind="click: insertTodoItem">Save changes</button>
Consommer l’API (3/4) : insertion de données.
JavaScript.
Récupération des valeurs dans les

__this.insertTodoItem = function () {
var text = $('#new-todo-input-text').val();
var assignedToId = $('#new-todo-input-assignedToId').val();

champs input.

if (!text) {
return;
}

Possibilité de validation client-side.

$.ajax(Henallux.serviceUrl + "api/todoitem", {
method: "POST",
data: JSON.stringify({
Text: text,
AssignedToId: assignedToId
}),
contentType: "application/json"
}).then(function (result) {
Henallux.viewModel.todoItems.push(result);

Utilisation de la méthode POST.
Envoi d’un objet au format JSON.

}, function (error) {
// handle error
});

Gestion de la réponse.
}
Modification

HTTP PUT: /api/TodoItem/5
Do it yourself
Analysez les APIs

Contenu connexe

Tendances

Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
Nazih Heni
 
Entity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity FrameworkEntity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity Framework
Microsoft
 
Javascript pour les développeurs C#
Javascript pour les développeurs C#Javascript pour les développeurs C#
Javascript pour les développeurs C#
Microsoft
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
Nazih Heni
 
Active Server Pages (ASP)
Active Server Pages (ASP)Active Server Pages (ASP)
Active Server Pages (ASP)
Saïd Radhouani
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
SOAT
 
Principes De Base De Asp .Net
Principes De Base De Asp .NetPrincipes De Base De Asp .Net
Principes De Base De Asp .NetGregory Renard
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
SOAT
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7
Jean-Baptiste Vigneron
 
Node.js
Node.jsNode.js
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
Ouadie LAHDIOUI
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
Esokia
 
Asp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futurAsp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futur
Microsoft
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
Stéphane HULARD
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
ekino
 
.NET Framework
.NET Framework.NET Framework
.NET Framework
Jean-Baptiste Vigneron
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
Hugo Hamon
 
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Xavier Lacot
 
02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC 02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC
Cellenza
 

Tendances (20)

Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 
Entity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity FrameworkEntity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity Framework
 
Javascript pour les développeurs C#
Javascript pour les développeurs C#Javascript pour les développeurs C#
Javascript pour les développeurs C#
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
Active Server Pages (ASP)
Active Server Pages (ASP)Active Server Pages (ASP)
Active Server Pages (ASP)
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Principes De Base De Asp .Net
Principes De Base De Asp .NetPrincipes De Base De Asp .Net
Principes De Base De Asp .Net
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7Atelier initiation Windows Phone 7
Atelier initiation Windows Phone 7
 
Node.js
Node.jsNode.js
Node.js
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Asp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futurAsp.Net Web.API, SignalR et UX : le futur
Asp.Net Web.API, SignalR et UX : le futur
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
 
.NET Framework
.NET Framework.NET Framework
.NET Framework
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
 
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
 
02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC 02 - [ASP.NET Core] ASP.NET Core MVC
02 - [ASP.NET Core] ASP.NET Core MVC
 

En vedette

NTWRK / #RDVPixel 06/13
NTWRK / #RDVPixel 06/13NTWRK / #RDVPixel 06/13
NTWRK / #RDVPixel 06/13
Renaud Dumont
 
CafeNTournai #01
CafeNTournai #01CafeNTournai #01
CafeNTournai #01
Renaud Dumont
 
Kinect + Nao (Coupe de Belgique de Robotique)
Kinect + Nao (Coupe de Belgique de Robotique)Kinect + Nao (Coupe de Belgique de Robotique)
Kinect + Nao (Coupe de Belgique de Robotique)
Renaud Dumont
 
Be api - Web Mobile
Be api - Web MobileBe api - Web Mobile
Be api - Web Mobile
Nowhere-Entreprise
 
Mobile Inception - Web API Security
Mobile Inception - Web API SecurityMobile Inception - Web API Security
Mobile Inception - Web API Security
MobileInception
 
Web APIs in Action (in French)
Web APIs in Action (in French)Web APIs in Action (in French)
Web APIs in Action (in French)
Restlet
 
ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016
Nov Matake
 
Web API with ASP.NET MVC by Software development company in india
Web API with ASP.NET  MVC  by Software development company in indiaWeb API with ASP.NET  MVC  by Software development company in india
Web API with ASP.NET MVC by Software development company in india
iFour Institute - Sustainable Learning
 
London Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet KapoorLondon Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet Kapoor
Apigee | Google Cloud
 
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIsPetit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Jonathan Meiss
 
Tecknologistic
TecknologisticTecknologistic
Ame gallery, dessin d'antoine mercier -calais douvres 1972-
Ame gallery, dessin d'antoine mercier -calais douvres 1972-Ame gallery, dessin d'antoine mercier -calais douvres 1972-
Ame gallery, dessin d'antoine mercier -calais douvres 1972-
Antoine Mercier-ame
 
Dépistage de l’anévrisme de l’aorte lille
Dépistage de l’anévrisme de l’aorte lilleDépistage de l’anévrisme de l’aorte lille
Dépistage de l’anévrisme de l’aorte lilleARMVOP Médecin Vasculaire
 
Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...
Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...
Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...
Antoine Mercier-ame
 
Infa présentation 28102013 au 02062014
Infa présentation 28102013 au 02062014Infa présentation 28102013 au 02062014
Infa présentation 28102013 au 02062014mdjeha
 
Dossier de production eisenberg - Sustainable performance Groupe n°6
Dossier de production eisenberg - Sustainable performance Groupe n°6Dossier de production eisenberg - Sustainable performance Groupe n°6
Dossier de production eisenberg - Sustainable performance Groupe n°6Kenny Duflos
 
Atelier communiquer c'est exister | Osez Entreprendre
Atelier communiquer c'est exister | Osez EntreprendreAtelier communiquer c'est exister | Osez Entreprendre
Atelier communiquer c'est exister | Osez Entreprendre
cciducher
 

En vedette (20)

NTWRK / #RDVPixel 06/13
NTWRK / #RDVPixel 06/13NTWRK / #RDVPixel 06/13
NTWRK / #RDVPixel 06/13
 
Mobile Dev Day 2013
Mobile Dev Day 2013Mobile Dev Day 2013
Mobile Dev Day 2013
 
CafeNTournai #01
CafeNTournai #01CafeNTournai #01
CafeNTournai #01
 
Kinect + Nao (Coupe de Belgique de Robotique)
Kinect + Nao (Coupe de Belgique de Robotique)Kinect + Nao (Coupe de Belgique de Robotique)
Kinect + Nao (Coupe de Belgique de Robotique)
 
Be api - Web Mobile
Be api - Web MobileBe api - Web Mobile
Be api - Web Mobile
 
Mobile Inception - Web API Security
Mobile Inception - Web API SecurityMobile Inception - Web API Security
Mobile Inception - Web API Security
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Web APIs in Action (in French)
Web APIs in Action (in French)Web APIs in Action (in French)
Web APIs in Action (in French)
 
ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016
 
Web API with ASP.NET MVC by Software development company in india
Web API with ASP.NET  MVC  by Software development company in indiaWeb API with ASP.NET  MVC  by Software development company in india
Web API with ASP.NET MVC by Software development company in india
 
London Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet KapoorLondon Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet Kapoor
 
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIsPetit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
Petit déjeuner OCTO - Nouvelles Architectures Web Front-end et APIs
 
Tecknologistic
TecknologisticTecknologistic
Tecknologistic
 
Pentominium
PentominiumPentominium
Pentominium
 
Ame gallery, dessin d'antoine mercier -calais douvres 1972-
Ame gallery, dessin d'antoine mercier -calais douvres 1972-Ame gallery, dessin d'antoine mercier -calais douvres 1972-
Ame gallery, dessin d'antoine mercier -calais douvres 1972-
 
Dépistage de l’anévrisme de l’aorte lille
Dépistage de l’anévrisme de l’aorte lilleDépistage de l’anévrisme de l’aorte lille
Dépistage de l’anévrisme de l’aorte lille
 
Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...
Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...
Ame gallery dans la série le monde de l'art selon e.t -291013 jean dupuis à l...
 
Infa présentation 28102013 au 02062014
Infa présentation 28102013 au 02062014Infa présentation 28102013 au 02062014
Infa présentation 28102013 au 02062014
 
Dossier de production eisenberg - Sustainable performance Groupe n°6
Dossier de production eisenberg - Sustainable performance Groupe n°6Dossier de production eisenberg - Sustainable performance Groupe n°6
Dossier de production eisenberg - Sustainable performance Groupe n°6
 
Atelier communiquer c'est exister | Osez Entreprendre
Atelier communiquer c'est exister | Osez EntreprendreAtelier communiquer c'est exister | Osez Entreprendre
Atelier communiquer c'est exister | Osez Entreprendre
 

Similaire à ASP.NET MVC, Web API & KnockoutJS

#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 
BreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureBreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec Azure
Nicolas Georgeault
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsVincent Perrin
 
[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker
Microsoft Technet France
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Gregory Renard
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Gregory Renard
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web MicrosoftChristophe Lauer
 
Introduction au développement Android
Introduction au développement AndroidIntroduction au développement Android
Introduction au développement AndroidSteve Tremblay
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
Relax In The Air
 
S51 vos projets web services ibm i a l aide de php
S51   vos projets web services ibm i a l aide de phpS51   vos projets web services ibm i a l aide de php
S51 vos projets web services ibm i a l aide de php
Gautier DUMAS
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005Gregory Renard
 
Linq et Entity framework
Linq et Entity frameworkLinq et Entity framework
Linq et Entity framework
DNG Consulting
 
7_SitesWebMVC.pdf
7_SitesWebMVC.pdf7_SitesWebMVC.pdf
7_SitesWebMVC.pdf
BerrySeven
 

Similaire à ASP.NET MVC, Web API & KnockoutJS (20)

#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Chapter1
Chapter1Chapter1
Chapter1
 
BreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureBreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec Azure
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 
CV_Bilel CHAOUADI
CV_Bilel CHAOUADICV_Bilel CHAOUADI
CV_Bilel CHAOUADI
 
[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker[Tuto] Big datatrack : Web Tracker
[Tuto] Big datatrack : Web Tracker
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
Visual Basic 9.0 – Visual Studio 2008 Quoi De Neuf 2.0
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
Introduction au développement Android
Introduction au développement AndroidIntroduction au développement Android
Introduction au développement Android
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
 
S51 vos projets web services ibm i a l aide de php
S51   vos projets web services ibm i a l aide de phpS51   vos projets web services ibm i a l aide de php
S51 vos projets web services ibm i a l aide de php
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Linq et Entity framework
Linq et Entity frameworkLinq et Entity framework
Linq et Entity framework
 
7_SitesWebMVC.pdf
7_SitesWebMVC.pdf7_SitesWebMVC.pdf
7_SitesWebMVC.pdf
 

ASP.NET MVC, Web API & KnockoutJS

  • 1. ASP.NET Web API: créer et consommer un service REST Si besoin, contactez-moi: @DumontRenaud renaud@mic- belgique.be
  • 2. - ASP.NET MVC - Planning Qu’est-ce qu’un service REST? Le routing - CodeFirst : modèle de base de données - Web API ControllerSerialization JSON / XML - Client Web avec Knockout
  • 3. Qui suis-je ? IT Evangelist au Microsoft Innovation Center - Travaille avec la communauté sur le développement d’apps Windows Phone, Windows 8, Kinect for Windows et Windows Azure - Speaker régulier dans des conférences Passionné de programmation, technologies et musique - Participe à tous les évènements communautaires en Belgique et dans le nord de la France - Blogueur technique http://www.renauddumont.be - Microsoft MVP Client Development depuis juillet 2013
  • 4. Ou plutôt « REST-like ». On REST garde le bon pour se simplifier la vie.
  • 5. REST: qu’est-ce que c’est? Representational State Transfer REST est un style d’architecture dans lequel un client peut communiquer avec un serveur pour obtenir des informations sur des données. REST un indépendant de tout protocole (moyen de communication). Chaque donnée (objet) est identifiable par un URI (Unique Resource Identifier). REST utilise la notion d’hypermedia. La communication entre le client et le serveur est dite Stateless. C’est-à-dire que chaque requête doit contenir toutes les informations nécessaires pour pouvoir être traitée indépendamment des autres. Le format des données reçues par le client est indépendant de celui utilisé pour le stockage des données.
  • 6. Format de données indépendant Je suis Renaud Dumont (abonné n° 45334) Je veux le livre ISBN 282240142X au format Papier Voici le livre « Développez en HTML 5 pour Windows 8 », co-écrit par Loic Bar, Simon Boigelot et Renaud Dumont Je suis l’abonné n° 45334 Je veux le livre ISBN 282240142X au format Ebook Voici le livre numérique « Développez en HTML 5 pour Windows 8 », co-écrit par Loic Bar, Simon Boigelot et Renaud Dumont
  • 7. Des requêtes Stateless Je suis Renaud Dumont (abonné n° 45334) Je veux le livre ISBN 282240142X au format Papier Voici le livre « Développez en HTML 5 pour Windows 8 », co-écrit par Loic Bar, Simon Boigelot et Renaud Dumont Pourrais-je également avoir le livre ISBN 2092508261 au format Papier? Bonjour, qui êtes-vous?
  • 8. Ensemble de données reliées par des liens hypermédia Je suis Renaud Dumont (abonné n° 45334) Je veux le livre ISBN 282240142X au format Papier Voici le livre « Développez en HTML 5 pour Windows 8 », co-écrit par Loic Bar (AF3DS3), Simon Boigelot (A54DF3), … Je suis Renaud Dumont (abonné n° 45334) Pourrais-je avoir la fiche de l’auteur Loic Bar (AF3DS3)? Loïc Bar est un entrepreneur de 25 ans travaillant dans le secteur ICT. Il a créé sa première boîte en 2008, juste après la fin de ses études et a travaillé pour des références telles que McKinsey, Microsoft, Coca-Cola, …
  • 9. Protocole HTTP L’architecture REST se marie plutôt bien avec HTTP.
  • 10. Le protocole HTTP a toutes ces qualités (1/2) Requête du client - Contacte une URL (URI) - Donne une information sur l’action à effectuer (GET) - Donne les paramètres nécessaires à l’identification (par cookies, ou dans le header) - Indique le type de format attendu
  • 11. Le protocole HTTP a toutes ces qualités (2/2) Réponse du serveur - Renvoie l’état de la réponse (200 OK) - Le contenu de la réponse (body): une page HTML - Donne des informations relatives au type de contenu (text/html, utf-8) - Informations relatives aux politiques de caching (no-cache)
  • 12. ASP.NET MVC Un bon début, mais peut mieux faire.
  • 13. Modèle – Vue – Contrôleur User input Requête http Contrôleur Modifier l’état Fournir des données Récupérer l’état Modèle Vue Output HTML, …
  • 14. Le Contrôleur - Chaque contrôleur définit des actions - Une Action répond à une requête de l’utilisateur en composant une réponse - L’action peut éventuellement modifier des données du modèle ou en récupérer l’état
  • 15. La vue - La Vue est un mélange de code HTML et de C#. - Le View Engine Razor est utilisé pour générer de véritables pages HTML à partir des Vues. - La vue est responsable de l’affichage du modèle et de la création d’interfaces avec laquelle l’utilisateur peut interagir.
  • 16. Le Modèle - Le modèle par défaut se compose d’une classe UserProfile extensible pour la gestion des profils utilisateurs. - Une classe héritant de DbContext représente notre connexion avec la base de données. - Le DbContext définit des DbSet<T> correspondant à des tables de la base de données.
  • 17. Le template ASP.NET MVC 4 / Internet Application Site web basique avec système d’identification et d’autorisation. Coup d’œil.
  • 18. Code First Partir du template de base et puis tout casser.
  • 19. Créer sa propre application Application de gestion de tâches, Trello-like
  • 20. Mettre de l’ordre On est pas obligés d’aimer les templates.
  • 21. Gestion des TodoItem - Créer une classe TodoItem ( Text, CreatedAt, Author, AssignedTo, ? ) en utilisant des conventions de nommage - Ajouter un DbSet au DbContext pour représenter une table - Scaffolding du Contrôleur et des Vues - Test de l’application et observation de la table créée
  • 22. Modification du modèle (1) - AuthorId et AssignedToId sont requis par défaut : un entier n’est pas nullable. Changement du type en int? - Text doit être requis : annotation - CreatedAt: utilisation de jQueryUI - Et puis… forçons l’identification, et gérons ce qui ne dépend pas de l’utilisateur côté serveur. Utilisation du helper HiddenFor(…)
  • 23. Contexte modifié? - Lors de la première initialisation du projet, la base de donnée est créé en fonction des classes. - Si on modifie ces classes, le Context n’est plus en phase avec la base de données. Une exception est levée. - Utiliser un DatabaseInitializer (pratique lors du développement) ou effectuer une migration.
  • 24. Premier client Pourquoi ne peut-on pas s’arrêter là?
  • 25. Scénario courant Un développeur que je ne connais pas veut créer une application tierce pour les utilisateurs de mon site web.
  • 26. You can't parse [X]HTML with regex. http://bit.ly/parsehtml
  • 27. Rappelez-vous REST Une même ressource accessible dans différents formats, indépendamment de se représentation.
  • 29. API Controller Si vous avez compris les Controllers, vous êtes prêt pour les API Controller.
  • 30. Quelques différences (1/3) : Routing Les API Controllers utilisent des routes différentes, pour pouvoir les distinguer des contrôleurs classiques. La route par défaut ne définit pas d’Action. config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );
  • 31. Quelques différences (2/3) : le type de retour Les API Controllers ne font appel à aucune Vue. Ils renvoient des données brutes en guise de réponse, ou des objets de type HttpResponseMessage. // GET api/TodoItem public IEnumerable<TodoItem> GetTodoItems() { return db.TodoItems.AsEnumerable(); }
  • 32. Quelques différences (2/3) : utilisation des messages HTTP GET, POST, PUT, DELETE. Convention de nommage ou attributs. // POST api/TodoItem public HttpResponseMessage PostTodoItem(TodoItem todoitem) { if (ModelState.IsValid) { db.TodoItems.Add(todoitem); db.SaveChanges(); // do something } else { // do something else } }
  • 33. Client Web JavaScript, HTML, MVVM et KnockoutJS
  • 34. Une page all-in-one - Mettre à jour les librairies de base: jQuery, jQueryUI, Modernizr, KnockoutJS - Utilisation de Twitter Bootstrap (…, ou Foundation, ou ce que vous voulez. Mais ne perdons pas de temps) - Création d’un TodoList Controller - Ajout d’une page Index - Référencement des scripts nécéssaires: KnockoutJS et notre code perso.
  • 35. Model-View-ViewModel Notifications Model ViewModel Business logic and data Presentation Logic DataBinding Commands View UI & UI Logic On doit pouvoir imaginer le contenu de l’interface en observant le ViewModel
  • 36. Mon premier binding avec Knockout Index.html henallux.main.js @{ ViewBag.Title = "Index"; } var Henallux = { viewModel: function () { var __this = this; __this.appTitle = ko.observable("Ma Super TodoList"); }, <h2 data-bind="text: appTitle"></h2> @section scripts{ @Scripts.Render("~/bundles/knockoutjs") @Scripts.Render("~/bundles/main") } }; initialize: function () { var viewModel = new Henallux.viewModel(); ko.applyBindings(viewModel); } Henallux.initialize();
  • 37. Lecture HTTP GET : /api/TodoItem
  • 38. Consommer l’API (1/4) : récupération des données Pour pouvoir effectuer des requêtes sur notre API directement en JavaScript, nous allons utiliser les requêtes AJAX avec jQuery On entre dans le Web 2.0 Les requêtes AJAX permettent de faire du développement asynchrone ( != parallèle) avec l’utilisation des Promise. JavaScript supporte nativement le JSON (JavaScript Object Notation)
  • 39. Consommer l’API (1/4) : récupération des données Les ObservableArray permettent de définir des tableaux qui seront observés en permanence et notifieront l’interface de tout changement. KnockoutJS permet de binder une collection à l’aide du motclé foreach en utilisant un template définit en HTML. henallux.main.js __this.todoItems = ko.observableArray([]); __this.loadData = function () { $.ajax('http://localhost:1980/api/todoitem') .then(function (items) { for (var i in items) { __this.todoItems.push(items[i]); } }); } Index.html <div data-bind="template: { name: 'todoitem-template', foreach: todoItems }"></div> <script type="text/html" id="todoitem-template"> <div class="todoitem"> <h3><span style="font-style: italic;">Created by </span><span databind="text: Author.Username"></span></h3> <p data-bind="text: Text"></p> <p>Created at: <span data-bind="text: CreatedAt"></span></p> </div> </script>
  • 40. Consommer l’API (1/4) : récupération des données En théorie, une API REST utilise la notion d’hypermédia pour représenter les associations entre objets. Dans ce contexte-ci, on peut estimer qu’obtenir un TodoItem seul, sans UserProfile n’a aucun sens et l’inclure d’office dans votre réponse. Au risque de fâcher Roy T. Fielding…
  • 41. Consommer l’API (1/4) : récupération des données Possibilité de faire des jointures sur les tables en LinqToSql: // GET api/TodoItem public IEnumerable<TodoItem> GetTodoItems() { return db.TodoItems.Include("Author").AsEnumerable(); }
  • 43. Consommer l’API (2/4) : suppression de données. L’API. L’action de suppression d’un TodoItem s’attend à recevoir un message HTTP de type DELETE. Il faut également fournir en paramètre l’id de l’élément à supprimer. // DELETE api/TodoItem/5 public HttpResponseMessage DeleteTodoItem(int id) { TodoItem todoitem = db.TodoItems.Find(id); if (todoitem == null) { return Request.CreateResponse(HttpStatusCode.NotFound); } db.TodoItems.Remove(todoitem); try { db.SaveChanges(); } catch (DbUpdateConcurrencyException ex) { return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex); } return Request.CreateResponse(HttpStatusCode.OK, todoitem); }
  • 44. Consommer l’API (2/4) : suppression de données. L’AJAX. Avec AJAX, il suffit de préciser le type de method comme étant DELETE. __this.deleteTodoItem = function (todoItem) { var url = Henallux.serviceUrl + 'api/todoitem/' + todoItem.TodoItemId; $.ajax(url, { method: 'DELETE' }).then(function (result) { Henallux.viewModel.todoItems.remove(todoItem); Henallux.viewModel.statusMessage("TodoItem supprimé."); Henallux.viewModel.statusType("success"); }, function (error) { Henallux.viewModel.statusMessage("Un erreur est survenue pendant l a suppression de cet item."); Henallux.viewModel.statusType("warning"); }); }
  • 45. Consommer l’API (2/4) : suppression de données. L’HTML. KnockoutJS permet non seulement de binder des données, mais également des fonctions sur des évènements. C’est le principe des Commandes. <script type="text/html" id="todoitem-template"> <div class="todoitem"> <span type="button" class="close" data-bind="click: $parent.deleteTodoItem" aria-hidden="true">&times;</span> <h3><span style="font-style: italic;">Created by </span><span data-bind="text: Author.UserName"></span></h3> <p data-bind="text: Text"></p> <p>Created at: <span data-bind="text: CreatedAt"></span></p> </div> </script>
  • 47. Consommer l’API (3/4) : insertion de données. L’API. Le POST prend en paramètre un objet de // POST api/TodoItem [Authorize] public HttpResponseMessage PostTodoItem(TodoItem todoitem) { if (ModelState.IsValid) { var user = db.UserProfiles.FirstOrDefault(u => u.UserName == User.Identity.Name); if (user == null) return Request.CreateErrorResponse(HttpStatusCode.Unauthorized, “blablabla"); type TodoItem. todoitem.AuthorId = user.UserId; todoitem.CreatedAt = todoitem.ModifiedAt = DateTime.UtcNow; Il faut envoyer ces db.TodoItems.Add(todoitem); db.SaveChanges(); données avec notre HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, todoitem); response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = todoitem.TodoItemId })); return response; requête AJAX. } else { return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState); } }
  • 48. Consommer l’API (3/4) : insertion de données. HTML. Quelques champs input vont permettre de récolter les données de l’utilisateur. Un bouton pour déclencher la commande d’insertion. <div> <label>Texte</label> <input type="text" id="new-todo-input-text" style="display: block;" /> </div> <div> <label>Assigné à... (Id)</label> <input type="text" id="new-todo-input-assignedToId" style="display: block;" /> </div> <button type="button" class="btn btn-primary" data-bind="click: insertTodoItem">Save changes</button>
  • 49. Consommer l’API (3/4) : insertion de données. JavaScript. Récupération des valeurs dans les __this.insertTodoItem = function () { var text = $('#new-todo-input-text').val(); var assignedToId = $('#new-todo-input-assignedToId').val(); champs input. if (!text) { return; } Possibilité de validation client-side. $.ajax(Henallux.serviceUrl + "api/todoitem", { method: "POST", data: JSON.stringify({ Text: text, AssignedToId: assignedToId }), contentType: "application/json" }).then(function (result) { Henallux.viewModel.todoItems.push(result); Utilisation de la méthode POST. Envoi d’un objet au format JSON. }, function (error) { // handle error }); Gestion de la réponse. }

Notes de l'éditeur

  1. N’utiliser que les AuthorId ici. On ajoutera les foreign key après.