Agence de marketing et communication digitale

Travaux

• Projets de type vitrine
• Sites de fidelisation
• Jeux de tirages au sort

Jeu Canal + Collecte

Objectif pour Canal+ : remplir sa base de données d'emails

L'écran de monitoring

Panel de prévisualisation

POCO

Plain Old CLR Object

Aucune référence à l'ORM (ou presque)

Diagramme de classes

Bundle

BundleFile

Enums

DbContext

Brique de base d'EF

Représente une session d'accès à la base de données

On y définit les objets à persister et certains réglages

CollectContext

On hérite de DbContext

Un DbSet par table

Conventions

Code First détecte les clefs grace à des conventions de nommage par défaut

On peut modifier ces conventions si besoin

Convention de clef primaire

Propriété Int ou Guid de format "<NomClasse>Id"

Convention de relations

Il est conseillé de fournir la clef de l'entité liée en plus de la collection

Format : "<NomClasseLiee>Id"

Source msdn

Deux moyens d'ajuster les propriétés du modele

Les attributs : Key, StringLength, NotMapped, Required

Il en existe d'autres

La fluent API : contraintes définies en redéfinissant OnModelCreating dans le contexte

Permet des modifications plus poussées

Permet également de ne pas trop "salir" les POCO

Implémentations

Create Bundle

Get & List Bundles

Create Bundle Files

Workflow

Pour créer/modifier la baseOn créé des migrations

Une migration décrit le différentiel dans la base de données par rapport à la migration précédente.

Modification du modèle = Migration

En pratique...

3 commandes à connaître

Enable-Migrations

A ne faire qu'une fois

Fichier Configuration.cs

La méthode Seed peut être utilisée en dev pour préremplir des données

Add-migration

Fichier de migration

Update-Database

Paramètres utiles de Update-Database

• verbose - précisions sur actions effectuées
• force - en cas de perte potentielle de données
• script - prévisualisation du script généré

Migration automatique

Connection Strings

La ConnectionString porte le nom du contexte Mais on peut modifier ça :

Si pas de ConnectionString valide trouvée -> LocalDb

Initializers et réglages

L'initializer peut être utile si on veut laisser le moteur créer la base au besoin...

On peut régler le lazyloading et la création de proxies.

Projets de démarrage

Pour éxécuter les commandes

1. Projet de démarrage = avec connection string

2. 'Défault project' dans PMC = celui du DbContext

Routing & Actions

Routing fondé sur le verbe HTTP

• GET pour récupérer des données (liste ou élément)
• POST : pour enregistrer un nouvel element
• PUT : pour modifier un element
• DELETE : pour supprimer un élément

Il dicte quelle action effectuer dans le contrôleur

Mapping HTTP to Action (msdn)

Deux méthodes de définition du routing

1. Dans WebApiConfig (similaire à ASP.NET MVC)

L'action est déduite par le moteur grâce au verbe HTTP

Action GetAllBundles

Appelée avec /api/bundles/

GET + pas de paramètre = action retournant un IEnumerable

GetAllBundles

2. Par attribut

Appelée avec /api/bundlefiles/[path/to/file.ext]

GET + Paramètre "path" = type de retour object

Paramètre path de type "catch-all" mappant le filepath

GetBundleFileContent

Formatters

Web API fournit permet de paramétrer les types Mime

On peut définir ses propres formats : par exemple csv

XML ou Json ?

C'est le client qui choisit, avec le header HTTP 'Accept'

(AngularJS permet de modifier ce header)

Accept: application/xml

Accept: application/json = JSON

On peut supprimer un Formatter

On peut indenter le JSON (pas par défaut)

Filtres d'action

Permettent d'éxécuter du code par nature transverse :

Logs, authentification, check de session, gestion des exceptions...

Filtre d'autentification

On hérite de BasicAuthenticationFilter qui hérite de AuthorizationFilterAttribute (prédéfini)

Ce filtre scanne les headers HTTP à la recherche d'info d'authentification

Test

On peut appliquer des filtres comme dans ASP.NET MVC à plusieurs niveaux

• Action - attribut au dessus de la méthode
• Contrôleur - attribut au dessus de la classe
• Application - à l'aide du singleton GlobalConfiguration

Filtre en global

Vocabulaire et Concepts

Tout est fonction

Controllers, Services, Directives ne sont que des fonctions javascript qu'on ajoute à un module

Tout est donc facilement testable

Le $scope

L'objet $scope est géré par AngularJS : c'est une sorte de view-model, zone d'échange entre vues et controleurs

On ne manipule pas le DOM hors de la vue, uniquement le $scope

Mise en application

Nous allons avoir besoin de définir :

• Un module contenant toute l'application
• Un service se chargeant des appels à l'API et de la gestion asynchrone
• Un controlleur permettant de rapatrier les données du service et de remplir le scope
• Une vue affichant notre arbre de bundles à l'aide de directives

• Le controleur alimente le $scope à l'aide de services
• Le $scope représente le ViewModel
• Il notifie la vue et le controleur : binding bi-directionnel

MVC ? MVVM ? MVW !

Structure de fichiers

Module et Contrôleur

Le module principal dans app.js

Le controleur

Dépendances à $scope et bundleService injectées

Le service renvoie un objet de type "promesse"

• Contrairement au schéma simplifié, la liste des bundles est groupée par semaines
• Cette méthode d'injection résiste à la minification
• Variable showLoaderTree utilisée pour gérer le chargement

Côté HTML

On charge les scripts

On définit la zone d'influence d'Angular

Le $scope ne pourra être bindé que dans cette section du DOM

Utilisation du scope dans la vue

Que de directives !

Directives

Les directives permettent d'étendre HTML

Elles peuvent représenter de simples fonctionnalités css

Ou permettre de boucler et filtrer une liste

Enfin elles peuvent servir de vue partielle

ng-show et ng-hide

Elles permettent de paramétrer l'affichage d'éléments en fonction d'une valeur booléenne du $scope

ng-repeat + filtre

ng-repeat repète les éléments d'un tableau du $scope

On peut imbriquer les boucles

Et filtrer une liste via une valeur du $scope à la volée

Démo

Et beaucoup d'autres !

Directive Custom

Vue partielle pour un Bundle

Le code est rendu très lisible

On peut combiner les directives entre elles

On passe l'objet bundle dans l'attribut "which"

Définition de la directive

L'attribut restrict 'E' définit le type Element

TemplateUrl permet de définir le chemin de la vue partielle

Cette directive encapsule son propre scope

La notation "=which" retrouve l'objet du scope parent

Par défaut une directive utilise le scope du template parent...

sauf si on en définit un comme ici

le '=which' lie la valeur 'bundle' de ce scope à la valeur 'bundle' du scope parent

Fichier bundle.partial.html

{{value}} est une 'expression', évaluée dans le scope courant

On peut charger d'autres directives dans le template

Le service

Il permet d'encapsuler les appels API

C'est une bibliothèque réutilisable

Le bundleService

Le service expose 3 fonctions

On injecte le module $http pour l'Ajax

Le module $q permet une gestion asynchrone élégante

Fonction GetBundles en détails

Fonction GetBundleFileContent