Embed Size (px)
Citation preview
ERYEM CAMPS
Dashboard Yammer sous SharePoint
1
Présenté par : Barbar MITRI [email protected] SFEIR [email protected]
Levallois 15/01/2015
Plan
1. Présentation du sujet1. Concept de Single Page Application2. Architecture applicative
2. Démo et architecture projet
3. Conclusion
4. Références
2
Single Page Application
3
Une nouvelle façon d’envisager la navigation web
Serveur WebCloud
navigateur client
Chargement de la page d’accueil: charge une fois pour toutes l’ensemble des fichiers html, js, css
Action utilisateur: insertion dynamique de données dans la page, jamais de rechargement complet de la page
4
Architecture applicative
4
Un niveau de portabilité inédit !!
1°)
2°)
3°)
6°)
Serveur SharePoint
Poste client
NodeJS : Module développé par Barbar MITRI
Démo
5
6
Architecture du projet Durandal
7
Index.html<!DOCTYPE html><html><head>
<title>Durandal</title><!– références vers fichiers css --><script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script></head><body>
<div id="applicationHost"><div class="splash">
<div class="message">Je charge le contenu statique: pages html, scripts js, fichier css, <b> UNE FOIS POUR TOUTES
!!</b></div><i class="fa fa-spinner fa-spin"></i>
</div></div>
<script src="lib/require/require.js" data-main="app/main"></script>
</body></html>
8
main.js requirejs.config({paths: {
'text': '../lib/require/text','durandal':'../lib/durandal/js','plugins' : '../lib/durandal/js/plugins','transitions' : '../lib/durandal/js/transitions','knockout': '../lib/knockout/knockout-3.1.0','bootstrap': '../lib/bootstrap/js/bootstrap','jquery': '../lib/jquery/jquery-1.9.1','services': '../app/services','async': '../lib/durandal/js/plugins/async','propertyParser': '../lib/durandal/js/plugins/propertyParser','goog': '../lib/durandal/js/plugins/goog'
}});
define('gmaps', ['async!http://maps.google.com/maps/api/js?sensor=false'],function () {
console.log('Google maps loaded');return window.google.maps;
});
define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function(system, app, viewLocator) {
//>>excludeStart("build", true);system.debug(true);//>>excludeEnd("build");
app.title = 'Durandal Starter Kit';
app.configurePlugins({router:true,dialog: true
});
app.start().then(function() { viewLocator.useConvention();app.setRoot('viewmodels/shell', 'entrance');
});});
9
shell.jsdefine(['plugins/router', 'durandal/app'], function (router, app) {
return {router: router,search: function() {
//It's really easy to show a message box.//You can add custom options too. Also, it returns a promise for the user's response.app.showMessage('Search not yet implemented...');
},activate: function () {
router.map([{ route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },{ route: 'flickr', moduleId: 'viewmodels/flickr', nav: true },{ route: 'yamhisto', moduleId: 'viewmodels/yamhisto', nav: true },{ route: 'map', moduleId: 'viewmodels/mapgoogle', nav: false },{ route: 'chart', moduleId: 'viewmodels/chart', nav: true },{ route: 'userStats/:UserId', moduleId: 'viewmodels/userStats', nav: false }
]).buildNavigationModel();
return router.activate();}
};});
10
chart.jsvar activate = function () {
jQuery.when(services.getStatMsgByUser(), services.getStatFileByUser()).then(function(msgByUser, fileByUser) {
msgArray[0] = ['Nom', 'Nombre de messages'];fileArray[0] = ['Nom', 'Nombre de fichiers partagés'];jQuery.each(msgByUser[0], function (index, item) {
msgArray[index + 1] = [item.name, item.number_msg];});jQuery.each(fileByUser[0], function (index, item) {
fileArray[index + 1] = [item.name, item.number_file];});
});};
var compositionComplete = function (view, parent) {
var msgData = google.visualization.arrayToDataTable(msgArray);var fileData = google.visualization.arrayToDataTable(fileArray);
var msgOptions = {title: 'Nombre de messages par utilisateur'
};var fileOptions = {
title: 'Nombre de fichiers partagés par utilisateur'};
var msgChart = newgoogle.visualization.PieChart(document.getElementById('msgChart'));
msgChart.draw(msgData, msgOptions);
var fileChart = newgoogle.visualization.PieChart(document.getElementById('fileChart'));
fileChart.draw(fileData, fileOptions);};
11
Chart.html
<section><h2 data-bind="html: displayName"></h2><table>
<tr><td>
<div id="msgChart" style="width: 900px; height: 500px;"></div></td><td>
<div id="fileChart" style="width: 900px; height: 500px;"></div></td>
</tr></table>
</section>
Conclusion
12
Avec DurandalJS on peut construire des applications JavaScript dynamiques et simples.
Inclus : JQuery , Knockout et RequireJS
Riche en fonctionnalités et multiplateforme
Références
13
Tutoriels et exemples javascript – jQuery: http://www.w3schools.com/
Tutoriels et exemples knockoutJS (MVVM): http://learn.knockoutjs.com/
Exemples DurandalJS: http://durandaljs.com/
Proxy : http://nodejs.org/
