vendredi 28 avril 2017

ASP.NET MVC C# nopCommerce - Allons plus loin #2

C'est une grande et bonne surprise une fois la solution .sln de la release 3.90 ouverte avec Visual Studio 2015, je lance une regénération de la solution -> 0 Erreur. Je lance l'exécution de la solution et la page installation apparaît rien d'autre à faire ! Votre boutique de commerce en ligne fonctionne.

Exécution de l'application ASP.NET NopCommerce - Page installation

On remplit les bons champs et l'installation de l'application se poursuis.
Je suis heureux, je vais pouvoir travailler avec NopCommerce

Je pars à la plage, rejoignez-moi !

jeudi 27 avril 2017

C'est quoi nopCommerce ? Un site e-commerce en ASP.NET mais encore ...

Vous cherchez à découvrir rapidement ce qu'est nopCommerce, vous savez que c'est de l'ASP.NET open source mais allons plus loin.

Plateforme de e-commerce ASP.NET C#

C'est une plateforme de commerce en ligne basée sur ASP.NET. Cette solution possède des caractéristiques compréhensives ...

La communauté travail depuis 2008 pour créer et maintenir cette solution e-business de classe mondiale. La solution a été téléchargée 1.8 million de fois et il y a 27000 boutiques vivantes actuellement à partir de cette plateforme.

Voici la page de référence sur Wikipédia qui fait une liste des fonctionnalités. Mais allons encore plus loin.

Caractéristiques compréhensives

SEO - Search Engine Optimisation

Pour que votre boutique en ligne soit plus rapidement trouvée sur internet il faut "être arrangeant avec les moteurs de recherche" pour que votre site soit indexé en bonne place et correctement.

XML Sitemap

Meta Tags, Microdata

URLs localizables pour le matching dans d'autres cultures

Intégration avec Google Analytics

Mobile commerce

Il y a une version mobile-responsive qui permet au détenteurs de smartphone de faire leurs achats en ligne.

Multi-store

Permet d'exéctuer plusieurs frontend sur différents domaines à partir d'un seule installation de nopCommerce et gérer à partir d'un seul panneaux d'administration. Vous pouvez également lancer rapidement des micro-magasins pour les campagnes promotionnelles.

Multi-vendeurs

Des caractéristiques sur les produits pouvoir les comparer etc etc etc ...

Download nopCommerce

Allons chercher les codes sources puisque l'on nous dit que c'est de l'open-source. Sur le site de la communauté nopCommerce, il faudrait s'enregistrer dans un formulaire pour avoir accès aux codes sources c'est de bonne guerre.

Download and install nopCommerce

Welcome, please sign in !

S'enregistrer au prêt de nopCommerce

Mais en fait, les sources sont gérés en configuration sous GitHub :

https://github.com/nopSolutions
Accès aux solutions nopSolutions autour de nopCommerce, accès aux codes sources de Pug-in for nopCommerce, il doit y avoir une bonne quinzaine de plug-in.

https://github.com/nopSolutions/nopCommerce
Accès aux sources codes de la solution nopCommerce hébergés par GitHub.

Sources Codes de la Solution nopCommerce sous GitHub

Cela va nous permettre de browser un peu dans les sources sans avoir à tout télécharger sur mon poste de travail.

Sources Codes de nopCommerce

Que trouve t-on dans les codes sources de nopCommerce hébergé par GitHub ?

Allons tout de suite ouvrir le fichier de la solution :

https://github.com/nopSolutions/nopCommerce/blob/develop/src/NopCommerce.sln

Microsoft Visual Studio Solution File, Format Version 12.00

# Visual Studio 14

VisualStudioVersion = 14.0.23107.0

MinimumVisualStudioVersion = 10.0.40219.1

Il s'agit donc de la version : Visual Studio 2015 et l'on peut travailler avec la version minimum 2010 ...

Les NuGet Packages de nopCommerce

Pour se donner une idée de l'évolution du développement de cette plateforme, allons voir tout de suite dans les NuGets packages :

Solution nopCommerce la liste des packages NuGets - 1/3

Solution nopCommerce la liste des packages NuGets - 2/3

Solution nopCommerce la liste des packages NuGets - 3/3

On peut dire que ça pique un peu les yeux tellement il y en a ! Mais malheureusement c'est un peu le cas maintenant dans toutes les applications web, il faut une tétra-chiée de NuGets pour faire le moindre truc.

DotNetOpenAuth : Nuget d'authentification pour ASP.NET MVC

EntityFramework : Modélisation des SGBDR

OData

NUnit : Pour les test unitaires

MVC 5.2.3

Razor 3.2.3

Linq : Langage de requêtage dans les List

Pas de doute, on est bien avec une application ASP.NET MVC C# ...

Découverte de la solution

Téléchargement et installation des sources. On se place dans le répertoire :

https://github.com/nopSolutions/nopCommerce

Et on clique sur "Clone or download" :

Architecture de la solution - Téléchargement et installation des sources C#

Ne pas croire que cela va fonctionner du premier coup. Il faut prendre en main un certain nombre de choses pour pouvoir installer correctement les codes sources.

Je dézippe, je tente d'ouvrir la solution avec Visual Studio 2015 Community :

3 projets ne se chargent pas les erreurs sont les suivantes :

E:\Visual Studio\nopCommerce-develop\src\Libraries\Nop.Core\Nop.Core.csproj : error : L'espace de noms XML par défaut du projet doit être l'espace de noms XML MSBuild. Si le projet a été créé au format MSBuild 2003, ajoutez xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project>. S'il a été créé dans des formats anciens comme 1.0 ou 1.2, convertissez-le au format MSBuild 2003. E:\Visual Studio\nopCommerce-develop\src\Libraries\Nop.Core\Nop.Core.csproj

E:\Visual Studio\nopCommerce-develop\src\Libraries\Nop.Services\Nop.Services.csproj : error : L'espace de noms XML par défaut du projet doit être l'espace de noms XML MSBuild. Si le projet a été créé au format MSBuild 2003, ajoutez xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project>. S'il a été créé dans des formats anciens comme 1.0 ou 1.2, convertissez-le au format MSBuild 2003. E:\Visual Studio\nopCommerce-develop\src\Libraries\Nop.Services\Nop.Services.csproj

E:\Visual Studio\nopCommerce-develop\src\Presentation\Nop.Web.Framework\Nop.Web.Framework.csproj : error : L'espace de noms XML par défaut du projet doit être l'espace de noms XML MSBuild. Si le projet a été créé au format MSBuild 2003, ajoutez xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project>. S'il a été créé dans des formats anciens comme 1.0 ou 1.2, convertissez-le au format MSBuild 2003. E:\Visual Studio\nopCommerce-develop\src\Presentation\Nop.Web.Framework\Nop.Web.Framework.csproj

E:\Visual Studio\nopCommerce-develop\src\Libraries\Nop.Data\Nop.Data.csproj : error : L'espace de noms XML par défaut du projet doit être l'espace de noms XML MSBuild. Si le projet a été créé au format MSBuild 2003, ajoutez xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project>. S'il a été créé dans des formats anciens comme 1.0 ou 1.2, convertissez-le au format MSBuild 2003. E:\Visual Studio\nopCommerce-develop\src\Libraries\Nop.Data\Nop.Data.csproj

E:\Visual Studio\nopCommerce-develop\src\Presentation\Nop.Web\Nop.Web.csproj : error : L'espace de noms XML par défaut du projet doit être l'espace de noms XML MSBuild. Si le projet a été créé au format MSBuild 2003, ajoutez xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project>. S'il a été créé dans des formats anciens comme 1.0 ou 1.2, convertissez-le au format MSBuild 2003. E:\Visual Studio\nopCommerce-develop\src\Presentation\Nop.Web\Nop.Web.csproj

E:\Visual Studio\nopCommerce-develop\src\Plugins\Nop.Plugin.Shipping.FixedOrByWeight\Nop.Plugin.Shipping.FixedOrByWeight.csproj : error : L'espace de noms XML par défaut du projet doit être l'espace de noms XML MSBuild. Si le projet a été créé au format MSBuild 2003, ajoutez xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project>. S'il a été créé dans des formats anciens comme 1.0 ou 1.2, convertissez-le au format MSBuild 2003. E:\Visual Studio\nopCommerce-develop\src\Plugins\Nop.Plugin.Shipping.FixedOrByWeight\Nop.Plugin.Shipping.FixedOrByWeight.csproj

On dirait bien qu'il y a un problème avec MSBuild ;-))

Recharger les projets en échec

Ce'est le conseil qui nous ait donné dans l'Explorateur de solutions :

Au chargement de la solution le projet Nop.Core est en échec

Rechargement du projet Nop.Core :

Recharger le projet Nop.Core

On obtient alors le message suivant :

L'espace de noms XML

C'est un peu pénible ;) Bien sûr ce message est idiot même si vous ajoutez
xmlns="http://schemas.microsoft.com/developer/msbuild/2003" à l'élément <Project> Cela ne fonctionne pas !

Allez je vais encore un petit peu plus loin puis je vous laisserai continuer si vous le souhaitez.

L'idée c'est d'aller chercher une version antérieure de NopCommerce sur le site de GitHub pour voir ce que l'on avait avant. Je prends la Release-3.90 et je compare les fichiers Nop.Core.csproj voici le résultat :

Comparaisons des fichiers Nop.Core.csproj

CQFD : Entre Visual Studio 2015 et Visual Studio 2017, il y a de gros changements dans l'utilisation de MSBuild et des Tools associés...

Pour ce qui est de nopCommerce la solution "à la mode" Visual Studio 2017 vient de sortir si vous êtes avec Visual Studio 2015 il vous faut prendre la release 3.90.

Taille de la solution

Je lance le calcul des métriques, voici le résultats :

NopCommerce la métrique du code source

Il y aurait bien d'autres choses à dire ...

To Be Continued !

ASP.NET MVC C# nopCommerce - Allons plus loin #2

lundi 10 avril 2017

MVC5 Angular2 - Structure de l'application Todolist Template

Détaillons un peu plus la structure de l'application Sample Angular 2 RC1 and Mvc 5 application. Dont nous avons vu comment installer et faire fonctionner l'application avec Visual Studio Community 2015 Ici.

En partant de la documentation du projet, c'est un peu plus simple, on voit par exemple que Visual Studio 2015 Update3 est préconisé. Mais c'est toujours l'enfer toutes c'est versions par exemple il existe une sample : Angular2 Mvc6 sample application

MVC 6 !?

Compilateur open source Roslyn

J'en découvre encore, pour l'instant je note :

en ouvrant le répertoire Bin, je tombe sur Roslyn : "Open source compiler for C# and VB"

Microsoft Visual Studio - compilateur Roslyn

Est-ce à dire que ce template embarque un compilateur spécifique ? On dirait bien qui oui.

Angular2 Qu'est ce que cela signifie par rapport à AngularJS ?

Oui après tout, on croit savoir mais est ce que l'on sait vraiment ? Je lis un truc sur Angular2 déjà on me dit que ce n'est pas un upgrade d'AngularJS mais que Google à totalement réécrit AngularJS en créant Angular2. Nous voilà bien.

Un peu de lecture : Introduction à Angular 2 comparatif entre AngularJS et Angular2

On dirait bien que vous aviez appris plein de chose avec Angular JS et bien il faut tout recommencer Apple et Google même combat rien n'est compatible.

AngularJS c'est :

Architecture MVC (Modèle-Vue-Contrôleur
Data Binding
Injection de dépendances
La manipulation du DOM

Et allons y, pendant qu'on y est, si on apprenait un nouveau langage de programmation, il y avait bien longtemps que cela ne m'était pas arrivé, je vous propose maintenant TypeScript

Vous l'aurez compris tout, absolument tout change avec Angular2.

Débuter avec Angular2

Pour bien débuter avec Angular2, il y a 3 points importants :

TypeScript
Is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

Node.JS
Interpréteur JavaScript côté serveur

Connaître les objets JavaScript

TypeScript dans l'application Todolist

Dans le répertoire \bin on remarque une DLL TypeLite.dll, elle est installée par le package TypeLite

Ce package permet de générer du TypeScript à partir des classes .NET.

Au sein d'ASP.NET MVC TypeLite génère du TypeScipt à partir de classes C#

Un outil qui génère du TypeScript à partir de modèle .tt et de fichier .ts très différent de ce que l'on a l'habitude de voir et très lié à Angular2.

Modèle .tt du projet : TypeLite.Net4.tt

Quoi d'autre avec TypeScript ?

Dans les propriétés du projet Angular2Mvc5Application1.csproj Onglet -> Build TypeScript un petit message : "Un ou plusieurs fichiers tsconfig.json détectés. Les propriétés du projet sont désactivée."

Ok, je cherche donc "tsconfig.json" dans l'arborescence des répertoires du projet :

tsconfig.json dans un projet ASP.NET Angular2 MVC5

C'est impressionnant non ?

On trouve un fichier tsconfig.json dans le répertoires :

\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\node_modules\reflect-metadata\test

Mais également à la racine du projet :

\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\

Dans le fichier projet : Angular2Mvc5Application1.csproj

se trouve un directive :

Le fichier tsconfig.json fait donc bien partie de la solution.

Compilation des fichiers .ts

Au sein du fichier projet on trouve une directive : TypeScriptCompile

<DependentUpon>TypeLite.Net4.tt</DependentUpon>

</TypeScriptCompile>

<DependentUpon>TypeLite.Net4.tt</DependentUpon>

</TypeScriptCompile>

</ItemGroup>

Il y a toute une arborescence de répertoires sous la racine app

NodeJS dans l'application Angular2 MVC 5 ToDoList

En ce qui concerne Node.JS, on a vu dans l'Installation de l'application comment installer Node.JS au sein d'une application ASP.NET MVC.

On se retouve avec un répertoire à la racine du projet :

\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\node_modules

Tous ces fichiers sont installés par >npm ...

En faisant bouton-droit-> Propriétés du répertoire on obtient :

node_modules - 6739 Fichiers pour 38,5 Mo

Impressionnants, j'entendais une remarque à propos de Node.JS que je note ici : "Toutes les questions que l'on se posait avec JQuery sont résolues dans Node.JS".

Bas alors ! C'est parfait si tout est résolut avec Node.JS ...

Angular2 MVC JavaScripts

Encore une petite chose comparons les répertoires Scripts d'une application ASP.NET MVC 4.6.1 et notre nouvelle application Angular2 :

Scripts MVC 4.6.1 vs Scripts MVC5 Angular2

On a vu l'utilisation du Modèle TT dans TypeScript. On voit qu'une partie de JQuery est encore là.

Conclusion sur Angular2 MVC5

On vient de voir à peu prêt tout ce qui caractérise une application ASP.NET MVC Angular2, c'est une somme considérable que l'on maintenant appréhender point par point.

Have fun!

Pages