Le Post de MCNEXT

Les articles des consultants de MCNEXT

Using Vorlon.js in production

Vorlon.js is a great debugging and auditing tool. It is designed to help you with any web technology. It works great for a website, an application with Apache Cordova or with Windows UWP applications, or even now with Node.js and Office addin (as the time of this writing, Office addin support is in dev branch).

It is great during development because you have one common tool to address many different devices, but that’s not the only way to use it.

Have you ever had a mobile website that shows problems on some device that you don’t have at hand ? or users reporting strange behavior and you cannot access it ? Vorlon can really help you diagnose problems in production, having access to console, objects, and so. But in production, you might have to integrate it in a slightly different way. In production, you probably don’t want to have it active by default to save performances, battery, network and other resources.

Fortunately, Vorlon.js comes with a small helper that will help you to turn it on, on demand. The idea is to embed a very tiny client in your application, and provide a way to your user to activate Vorlon. It could be a button in your about page, an easter egg of some sort (why not using the Konami code ?), or whatever way you would like.

Adding production client library

Let’s see how to do it. If you run Vorlon locally with default options, you have it running on « http://localhost:1337 ». The client script is available at « http://localhost:1337/vorlon.production.js ». Add a script tag pointing to it in your application like this :

<script src="http://localhost:1337/vorlon.production.js"></script>

Add it first in the head of your page, and immediately after, create an instance of Vorlon.Production :

<script type="text/javascript">
if (VORLON && VORLON.Production){
    var vorlonProd = new VORLON.Production("http://localhost:1337", "mysessionid");
}
</script>

By default, this code will not do anything, and it will have no impact on your app. It just allows you to turn Vorlon on when you will need it. As you probably noticed, you specify the URI for your Vorlon server, and the session id you want to use.

Turning Vorlon.js on

Now you could use your instance of Vorlon.Production to activate it with a simple function call.

vorlonProd.activate();

The call to activate will add the vorlon client script to your page. It also adds a flag in sessionStorage. It means that Vorlon will still be active for the lifetime of your browser if your user navigate from page to page (or the lifetime of your app if you use Cordova or Windows UWP).

Sometimes you may want to force your page to reload when activating Vorlon, especially when you are auditing a single page application. To do that, just add true to your call to activate.

vorlonProd.activate(true);

Persisting Vorlon activation

Some bugs die hard. You may want to persist Vorlon activation and deactivate it explicitely. To do so, you must create your Vorlon.Production with an additional argument :

<script type="text/javascript">
if (VORLON && VORLON.Production){
    var vorlonProd = new VORLON.Production("http://localhost:1337", "mysessionid",true);
}
</script>

With that argument, activation token will persist using localStorage instead of sessionStorage. It means Vorlon will be active until you explicitely turn it off. You could do it by calling « vorlonProd.deactivate() ».

We really hope you are enjoying Vorlon.js. Feel free to get in touch through the GitHub page.

If you run Vorlon, you could try the production helper in the sample page.

Using Vorlon.js with your Windows 10 JavaScript UWP

Vorlon.js is a great tool for diagnosing and auditing any application built with web technologies, and Windows JavaScript applications, or UWP are no exception. It means you could use Vorlon to diagnose your app running on PC, tablet, phone, Xbox, Hololens, Raspberry Pi and any device supporting Windows IoT.

However, for being able to use Vorlon.js in a UWP, you will have to configure your application sandbox to enable communication between your app and Vorlon.js server (or desktop app).

In this post, we will illustrate the different aspects for a packaged application (a JavaScript application that embeds pages, scripts, styles, …) because it is the most complicated, but what we will see here will work equally well for a hosted app (an app where pages, scripts and styles are hosted on a web server). In fact, what we will see here could also help you using Vorlon.js in a webview for a C# application.

Put your application in web context

This step is very specific to packaged applications. Packaged applications runs in a very specific security context where resources can only be loaded from inside your package. It means that you cannot use a script tag which « src » attribute points to a resource outside of your package.

For using Vorlon, you will have to force your app into a web context, allowing you to use alien resources. Be aware that doing this is a weakpoint in your app’s sandbox. It’s not a major one but do it only if you have the need to.

Putting your app in web context is very easy. You just need to update a couple entries in the manifest of your application.

First, you must change your start page. If your start page is named « default.html », replace it with « ms-appx-web:///default.html ». You could do it by editing the appxmanifest.xml, or by opening your manifest within Visual Studio.

startpage

In application context, you have access to WinRT API, but not in web context. To bring it back; you must add your start page to Content URIs. Again, you could do it manually in your manifest or with Visual Studio. Go to the content URIs tab and add a URI to « ms-appx-web:///default.html ». Don’t forget to enable WinRT by choosing « All » in « WinRT Access ».

contenturi

Allow your Vorlon.js client script

Now we must allow our app to access Vorlon.js client script. This step is required for packaged and hosted JavaScript UWP, or if you want to use Vorlon in a webview in a C# app.

First you must take note of your Vorlon.js server URI, and add it to the content URIs for your app. I will use a local Vorlon instance running on localhost on port 1337.

Open your manifest with Visual Studio and go to the Content URIs tab. Add Vorlon server URI to the list. In my case, I must add « http://localhost:1337 &raquo;.

contenturi2

Enjoy !

You are ready to go, just start your Vorlon server and your app. If you have followed the steps above, you are now able to inspect your app. The screen capture bellow shows the WinRT API with object explorer !

vorlon

If it’s not working properly, look for messages in the console in Visual Studio. You probably have misspelled some URI and errors should show up there.

Happy Vorlon.js🙂

 

Déploiement d’un projet VSTO multi-users avec Wix Toolset

Problématique :

Imaginons un client X qui souhaite ajouter de nouvelles fonctionnalités à son instance de Microsoft Office (Outlook, Word, Excel ou même PowerPoint).

Pour ce faire nous lui proposerons de lui développer un composant VSTO qu’il installera sur son environnement.

Cependant monsieur X souhaites que sur une machine où est installé l’add-in, tous les autres utilisateurs qui peuvent se connecter dessus puissent y avoir accès sans avoir à réinstaller à chaque fois le composant. Lire la suite

Nouveautés de SQL Server 2016 et POWER BI

Nouveautés de SQL Server 2016

Stretch Database.

Stretch Database permet d’archiver les tables contenant des données historiques. Par exemple une table des commandes (Order) contient des données récentes et des données plus anciennes. L’idée est de conserver les commandes récentes dans la base locale et d’archiver les commandes plus anciennes dans Azure et ce de manière totalement transparente. SQL Server se débrouille pour déplacer les données automatiquement et charger les données de la base locale et distante de manière transparente. Stretch Database migre l’intégralité de la table vers Azure. Lire la suite

Tutoriel Mobile Report Publisher

Présentation
SQL Server Mobile Report Publisher est une application Desktop qui a pour but de créer et publier des rapports adaptables à la plupart des supports mobiles. SQL Server Mobile Report Publisher est disponible en téléchargement. Lire la suite

Power BI Desktop – dealing with time intelligence

As you know or not, in Power BI Desktop, you can’t mark a table as a ‘date table’ like in Excel Power Pivot. So how could you properly deal with time intelligence functions ? Lire la suite

SQL Server – les columnstore index à la rescousse de la BI

Petit retour d’expérience sur l’usage des CCSI (Clustered Column Store Index) avec SQL Server 2014.

Avec un de nos clients, nous avons fait quelques bench sur le sujet. Sur une architecture équivalente, nous avons mis en place un index columnstore sur une table de fait contenant plus de 300 millions d’enregistrements. Malgré me dires et ceux de Microsoft, mes interlocuteurs étaient très sceptiques tout en fondant de grands espoirs. Lire la suite

SQL Server 2016 SSRS et les rapport Hybrid

Bonjour,

Suite à notre session au JSS en date  01/12/2015 avec Mohamed Ismail BEN LAMINE @Sam_Tun ou nous avons présentés les nouveautés SSIS et SSRS SQL 2016, je vais vous exposer une partie intéressante : SSRS et les rapports hybrid.

Pour info vous pouvez consulter la vidéo de notre session ici :

Depuis l’arrivée de la CTP 3.0 de SQL Server 2016 il y a possibilité de publié des parties de Rapport SSRS dans Power BI « On Premise ».

Aujourd’hui nous allons voir comment réaliser cette opération :

Se connecter au SQL Server Reporting Services Configuration manager :

1

Se connecter à l’instance Reporting services :

2

Se rendre dans le nouvel onglet : Power BI Integration

3

S’enregistrer :

4

Vérifier l’enregistrement :

5

Redémarrer le service SSRS une fois l’enregistrement effectué sinon le « pin » du rapport sera impossible :

6

7

8

Se rendre au niveau du serveur de rapport :

9

Cliquer sur le bouton My setting et s’enregistrer sur le serveur de rapport :

10

Ouvrir un rapport pour effectuer le « pin » : sélectionner l’élément à mettre a disposition sur Power BI ( Attention tous les éléments ne peuvent pas être mis a disposition sur Power BI )

11

Une fois l’élément sélectionné choisissez la fréquence de rafraîchissement et le rapport dans lequel vous souhaitez l’intégrer :

17

12

Une fois la mise a disposition de l’élément sur Power BI réalisé.

L’écran suivant s’affiche :

13

Attention : Au moment ou j’écris cet article, le multi langue n’est pas correctement supporté et des bug d’affichage peuvent subsister pour éviter cela il est préférable de mettre tout vos paramètres régionaux dans la langue de Shakespeare.

Un peu d’aide à ce propos : http://windows.microsoft.com/fr-fr/windows/change-system-locale#1TC=windows-7

Une fois cette étape réalisé vous pouvez vous rendre sur le site Power BI pour vérifier le bon « pin » de votre partie de rapport sur le site « On Premise »  :

https://powerbi.microsoft.com/en-us/?WT.srch=1&WT.mc_ID=SEM_TUTXQCC8

14

Il faut savoir que pour pouvoir réaliser cette opération l’agent SQL Server doit être activé pour la raison suivante :

A chaque élément ajouté, une tache est créé permettant d’aller rafraichir les données dans power BI voici un exemple de jobs créé lors de cette opération et que l’on retrouve dans l’agent :

15

 

Le défaut c’est que le nom ne correspond pas clairement à une tache. De plus, après suppression d’un élément dans Power BI la tache n’est pas supprimé automatiquement.

Vous en conviendrez qu’il est difficile de faire du ménage dans ces conditions !  Il y a de quoi faire perdre ses cheveux à un administrateur de bases de données !

Pour votre parfaite information voici à quoi ressemble le script de mise a jour d’un élément :

16

Celui ci va lancer le rafraichissement de la partie de rapport définie lors d’un créneau horaire spécifique.

Conclusion :

Nous sommes dans un système en cours d’élaboration avec quelques limites  mais qui semble intéressant d’utiliser, il ne vous reste plus qu’a essayer🙂

Je tiens à remercier mes confrères: Mohamed Ismail BEN LAMINE et Frédéric Brossard pour l’aide qu’ils m’ont apportés lors de la réalisation de cette session et de cet article.

Pour aller un peu plus loin :

Julien PIERRE

Consultant MSBI

#SQL Server 2016 | nouveautés POWER BI | CTP 3.0 | nouveautés SSRS

 

 

Introduction aux commposants SSIS inclus dans le Azure Feature Pack SQL Server 2016

Bonjour,

Suite à notre session au JSS en date  01/12/2015 avec Mohamed Ismail BEN LAMINE @Sam_Tun ou nous avons présentés les nouveautés SSIS et SSRS SQL 2016, je vais vous exposer une partie intéressante : Introduction aux commposants SSIS inclus dans le Azure Feature Pack SQL Server 2016

Pour information la vidéo de notre session est disponible ici :

Dans ce tutoriel nous allons voir 2 parties intéressantes :

Partie 1 : Introduction a Azure avec la création du Blob nécessaire pour l’utilisation des composants SSIS

Partie 2 : Utilisation des composants inclus dans le Azure Feature Pack

Point 1 : Créer un blob de stockage sur Azure :

On va ajouter un blob : pour cela : suivre les étapes suivantes :

  • Se rendre dans New:
    • Data + Storage
    • Storage Account
    • Affecter un nom de stockage et un lieu de stockage

1

2

Une fois le blob de stockage créer on doit arriver sur cet écran :

3

Vérification des blobs existants

4

Génération d’une clé de cryptage pour la connexion à Azure :

5

Notre premier point est réalisé. Maintenant nous allons nous connecter à ce blob Azure via SSIS et importer / exporter des données vers et depuis ce blob.

Pré requis nécessaires pour la suite :

Si vous souhaitez réaliser les mêmes opérations vous avez besoins d’installer le azure Feature pack et une base de donnée type contoso ou AdventureWorks :

https://www.microsoft.com/en-us/download/details.aspx?id=49492

https://www.microsoft.com/en-us/download/details.aspx?id=49502

Voici le scénario préparé  :

  1. Récupération des données a partir d’une source de données local que l’on va stocker dans un fichier plat localement (fichier local d’un magasin)
  2. Envoi des fichiers dans le Blob Azure
  3. Suppression des fichiers locaux
  4. Téléchargement des fichiers situés dans le blob Azure pour les mettre en local
  5. Réalisation d’un lookup pour mettre à jour la base de données centrale avec les données du magasin depuis Azure

Voici l’issue du package :

6

Création d’un container:

7

Création du dataflow Task pour récupérer les données du magasin pour les mettre dans un fichier plat :

8

 

9

Création d’une connexion vers Azure pour nous connecter à notre Blob

21

10

Upload des fichiers créés :

22

11

Suppression des fichiers crées :

23

12

Téléchargement des fichiers depuis Azure :

24

13

Création du lookup permettant de mettre à jour les données du site centrale a partir des données du magasin.

14

Connexion à notre source Azure :

25

15

Transformation des données :

26

16

Requête permettant de connaitre les clés des clients :

17

Mapping :

18

Redirection des lignes correspondantes et création d’un fichier d’interface issu du siège pour intégration et mis à disposition de tout le monde sur Azure :

27

19

Redirection des lignes en erreurs et création d’un fichier d’erreurs

20

Conclusion :

Voici un bon scénario pour vous initier au Azure Feature pack et à l’utilisation d’Azure …

A vous de jouer🙂

Pour aller un peu plus loin :

Je tiens à remercier mes confrères: Mohamed Ismail BEN LAMINE et Frédéric Brossard pour l’aide qu’ils m’ont apportés lors de la réalisation de cette session et de cet article.

Julien PIERRE

Consultant MSBI

 

How to use Vorlon.js desktop

Vorlon.js is now available as a desktop version for Windows and Mac OSX. You could dowload them on Vorlon.js website and get started using Vorlon in a few seconds.

If you want to know more about Vorlon, check out this getting started video. There are also some great articles about using Vorlon.js. In this post, we will focus on the desktop version and its UI.

Vorlon desktop helps you use Vorlon to debug your website without setup  pre-requisites, and help you start and configure your environment very easily.

screen.PNG

On the left side, you have a menu bar.

menu

It gives you access to Vorlon’s logs, settings, and the about page with usefull info and links.

The default settings will probably fit your needs, but you could change it with the dedicated screen. It might be usefull, especially if you need to change ports (if you want to run it side by side with the server version of Vorlon for example).

config

To start debugging your website using Vorlon.js, just add this script to your website or application (it’s so usefull for cordova applications !):

<script src="http://MCNTAB011:1337/vorlon.js"></script>

Vorlon has a session mecanism to differenciate client web sites and applications. If you want to define a session, you just have to specify it in the url like this :

<script src="http://MCNTAB011:1337/vorlon.js/mysession"></script>

When using the desktop application, it’s likely that you will stick to the home screen. From there, you could see if Vorlon server is running, and start or stop it easily (Vorlon server will start automatically when you launch the application).

vorlon status

The desktop version also helps you manage your sessions, and configure Vorlon plugins for each session. The home page displays the list of connected and configured sessions. You could add and configure a session even if no client is connected.

sessions.PNG

The green dot indicate that the session is in use. The empty dot means that there is no client connected.

session options.PNG

For each session, you could see the number of connected clients, and open the Dashboard for that session.

dashboard.PNG

The last button helps you configure your session. You could choose if the client must receive socket.io (if your website already use socket.io, turning this off may helps), and turn each plugin on or off.

session config.PNG

We really hope you will enjoy the desktop version. It’s a great way to get started using Vorlon.js. We welcome any feedback so feel free to join us on github to log your feedback or any issue you may have.

 

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 52 autres abonnés