tag:blogger.com,1999:blog-23792340236887472562024-02-07T15:48:30.762+01:00YABON (Yet Another Blog On Net-tech)Actualités technologiques autour des technologies du Web, de SAP, et autresGuillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.comBlogger50125tag:blogger.com,1999:blog-2379234023688747256.post-41355948628254261402021-12-29T16:34:00.004+01:002021-12-30T11:58:43.258+01:00Hacker le Copier / Coller<p>Récemment, j'ai commencé à m'intéresser au
<b>sujet "Sales"</b> 😮 (c'est à peu près la réaction de mon entourage)
</p>
<p>Un des intervenants à la
<a href="https://businessclass.growthmakers.fr/formation-prospection-b2b" target="_blank">formation "Harpon"</a> de <a href="https://growthmakers.fr/" target="_blank"><img border="0" data-original-height="56" data-original-width="200" height="21" src="https://blogger.googleusercontent.com/img/a/AVvXsEj1upzCKQkCsJU8zraD8yDxR7oXm5nXBLtCmUXSDtoLg-9cWBcyzVh5p4MvuzvV_fQLhLE_fvPkSBM10AvSBqFOUigilYwxXZ6D8p9xud2XVNxCm4yrVnZUCmAhmoLJNOEDl1WJNCdXBW5wHqzV-XRz0XFXrgfvRC23DKet-s9htftqx93MJTO9ofJofw" style="margin-bottom: -4px;" width="75" /></a> pointait un gourou de la vente,
<a href="https://www.linkedin.com/in/titobohrt/" target="_blank">Tito Bohrt</a>, et je suis arrivé sur le site spécialisé
<a href="https://www.saleshacker.com/" rel="nofollow" target="_blank">Sales Hacker</a>.</p><p></p>
<p>Assez rapidement, je tombe sur un paragraphe intéressant sur un
<a href="https://www.saleshacker.com/lead-qualification-guide/" rel="nofollow" target="_blank">framework de vente P-MAP</a> dont j'ignorais jusqu'à l'existence (en "bon" Dev que je suis...).
</p>
<p>Je commence donc à copier / coller ledit paragraphe mais en le collant... je m'aperçois qu'il est enrichi d'une mention supplémentaire qui renvoie vers l'article d'origine !</p>
<p>
<br />
</p>
<p></p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHlay5TWjUR0oIAODoK-YY6APEWZjCdUQK3IqBh1Qi9lgxK7t6D_t5FFC1PejsmJZ52qEK3vhTkVG38MWHE8uq1Btfmh4xPHVlUYV_8KCrMkx9gYAubMNhaNsNg0wtTl1JFtEiVWzVUiN/" style="margin-left: 1em; margin-right: 1em;">
<img alt="" data-original-height="161" data-original-width="1449" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHlay5TWjUR0oIAODoK-YY6APEWZjCdUQK3IqBh1Qi9lgxK7t6D_t5FFC1PejsmJZ52qEK3vhTkVG38MWHE8uq1Btfmh4xPHVlUYV_8KCrMkx9gYAubMNhaNsNg0wtTl1JFtEiVWzVUiN/w640-h71/image.png" width="640" />
</a>
</div>
<div style="text-align: center;">
<span style="color: #cccccc;">résultat du collage</span>
</div>
<h2 style="text-align: left;"><br />Comment ?</h2>
<p>Bien joué les dévs de Sales Hacker : ils détectent que tu copies du texte vers ton presse-papier (CTRL+C) depuis un article et ils :</p>
<p></p>
<ul style="text-align: left;">
<li>envoient un événement dans <a href="https://amplitude.com/" target="_blank">Amplitude</a>
<br />
<a href="https://amplitude.com" style="clear: left; float: left;">
<img alt="Amplitude" data-original-height="1000" data-original-width="5000" height="20" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Amplitude_logo.svg/320px-Amplitude_logo.svg.png" title="Outil d'analyse produit" width="100" />
</a>
<div class="separator" style="clear: both; text-align: center;"></div>
</li>
<li>enrichissent le texte copié avec une mention sur le site source !</li>
</ul>
<p></p>
<p>Certains trouveront ceci assez intrusif (on pourra rétorquer qu'on s'est servi dans leur contenu) mais personnellement, je trouve ça assez génial !</p>
<p>C'est devenu assez simple avec la prise en charge de l'
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event" target="_blank">événement 'copy'</a> par les navigateurs mais c'est l'usage qui fait tout l'intérêt de cette technique.
</p>
<pre lang="javascript">document.body.addEventListener('copy', (event) => {
<span> </span>const selectedText = document.getSelection().toString();
<pre lang="javascript"> // exploiter l'information
</pre> event.clipboardData.setData('text/plain', selectedText);
<span> </span>event.preventDefault();
});</pre>
<h2>
<br />
</h2>
<h2>Pourquoi ?!</h2>
<p>En effet, c'est un moyen simple et abordable de :</p>
<p></p>
<ol style="text-align: left;">
<li>récolter l'information sur ce qui intéressent vraiment les lecteurs (les outils comme Hotjar sont puissants mais leur exploitation est fastidieuse) </li>
<li>favoriser les visites vers cette même page et donc augmenter le trafic</li>
</ol>
<p></p>
<p>
<br />
</p>
<p>Et vous, quelles sont vos astuces ?</p>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0Paris, France48.856614 2.35222195.9132318362850782 -67.9602781 90 72.6647219tag:blogger.com,1999:blog-2379234023688747256.post-87732131053899137112020-12-24T15:53:00.018+01:002021-02-12T16:09:21.005+01:00Webhooks (3ème et dernière partie) - AutomationRésumé des épisodes précédents : <p></p><p></p><ol style="text-align: left;"><li>le <a href="https://guillaumegarcia13.blogspot.com/2020/12/webhooks-1ere-partie.html">webhook</a> est une des alternatives au <i>polling</i> et n'est pas sans rappeler le <i>Hollywood principle</i> "Ne nous appelez pas, nous vous appellerons !"</li><li>notre <a href="https://guillaumegarcia13.blogspot.com/2020/12/webhooks-2eme-partie-etude-de-cas.html">société fictive Icicky</a> nous sert à illustrer l'utilisation du webhook dans le cadre d'un processus de fidélisation en alimentant un CRM client</li></ol><h4><p style="font-weight: 400;"> Le décor ayant été dressé, nous allons pouvoir passer aux choses sérieuses 🤖 avec le volet Automation de notre article en 3 parties dévolu aux Webhooks.</p><div><br /></div></h4><h4>La plateforme d'automation : <a href="https://pipedream.com/" target="_blank">Pipedream</a>*</h4><p>Amoureux du <i>no-code</i>, passez votre chemin.</p><p>Contrairement à Zapier, Pipedream s'adresse plutôt à la population des développeurs (Node.js) qui aiment voir ce qu'il y a sous le capot et clairement... ils sont comblés ! 🧔🏻</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbluFElRdsnQNs3nYpY9SvGpTSefiwkIrgF1NwN0sDhQrherHg91TRXxyfbVWoSY4iq2NsCIXGjuXLaPR7sAlbxual9jZeNQukdWjZs-p8IF9clnAwVNuG0XZl4A4RzaeymcCIR8J-pR3/s1064/pipedream_workflow_diagram.png" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1064" data-original-width="882" height="395" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbluFElRdsnQNs3nYpY9SvGpTSefiwkIrgF1NwN0sDhQrherHg91TRXxyfbVWoSY4iq2NsCIXGjuXLaPR7sAlbxual9jZeNQukdWjZs-p8IF9clnAwVNuG0XZl4A4RzaeymcCIR8J-pR3/w327-h395/pipedream_workflow_diagram.png" width="327" /></a></div><p></p><p>Cet outil permet de réaliser et d'héberger des <b>workflows</b> d'intégration, par exemple : </p><div style="text-align: center;"><span style="font-family: verdana;">Trigger > Action 1 > Action 2 > Action 3</span></div><p>Dans notre cas, le déclencheur (ou <i>trigger</i>) est la réception de la requête émise par Typeform et qui contient un JSON très semblable à <a href="https://developer.typeform.com/webhooks/example-payload/" rel="nofollow" target="_blank">ceci</a>.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6YI4LChq6cuwFFr6QLgpTqYavFhSZ2lck01XFU3066H9ypwfEzifcO5nUX8gXSS-svI3nf3CY3U3cXIzkJBK6-pWuj1BlFlhr9L9IFPOIxqHnFst-ZLY9EcNJDQACGSo-MtCz7Dzr1hJr/s1846/Pipedream+-+Icicky+workflow.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="712" data-original-width="1846" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6YI4LChq6cuwFFr6QLgpTqYavFhSZ2lck01XFU3066H9ypwfEzifcO5nUX8gXSS-svI3nf3CY3U3cXIzkJBK6-pWuj1BlFlhr9L9IFPOIxqHnFst-ZLY9EcNJDQACGSo-MtCz7Dzr1hJr/w640-h246/Pipedream+-+Icicky+workflow.png" width="640" /></a></div><br /><p>Il existe d'autres <b>déclencheurs</b> proposés par Pipedream (réception d'un email, à intervalles réguliers, etc...)</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yzxPAKg57X9hdi0wXLE16BEejGeRa_XIc1sz9R3yhpC8T1aVyYuFnGgPJK-P6-TaJJ0MhnYI5TW9-wXXEkogySsET6zNz8IDAVwRd4hUH6Tzs9Vht1HtZB73kzHCdOc_LJVz7JntY2o0/s574/Pipedream+-+Triggers.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="574" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yzxPAKg57X9hdi0wXLE16BEejGeRa_XIc1sz9R3yhpC8T1aVyYuFnGgPJK-P6-TaJJ0MhnYI5TW9-wXXEkogySsET6zNz8IDAVwRd4hUH6Tzs9Vht1HtZB73kzHCdOc_LJVz7JntY2o0/w320-h168/Pipedream+-+Triggers.png" width="320" /></a></div><br /><p>Les informations sont stockées dans un objet appelé <a href="https://docs.pipedream.com/workflows/steps/" target="_blank">steps</a> qui est accessible depuis n'importe quelle action. </p><p>Les <b>actions</b> peuvent être du code custom ou bien une brique déjà proposée par la communauté, elles présentent 3 composantes :</p><p></p><ol><li>Authentification : pour laquelle Pipedream offre, là encore, plusieurs intégrations pré-définies<br />👉🏻<i> nous utiliserons l'authentification OAuth Hubspot</i><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-q7qMlVQ2cE_DlMgxrbJsMrracM7d0mNMqqzpNgQutUabpVb86I8jmeT41TLIjzE7tGAfqFq4AvVvx8tWDSrqiQV3P-DK5FkE-s-RyqiddnPbCXEJ2jT1Rgjc8DFo8WiXS-zBrmarCbrN/s687/icicky_hubspot_oauth.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="272" data-original-width="687" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-q7qMlVQ2cE_DlMgxrbJsMrracM7d0mNMqqzpNgQutUabpVb86I8jmeT41TLIjzE7tGAfqFq4AvVvx8tWDSrqiQV3P-DK5FkE-s-RyqiddnPbCXEJ2jT1Rgjc8DFo8WiXS-zBrmarCbrN/w320-h126/icicky_hubspot_oauth.png" width="320" /></a></div><br /></li><li>Paramètres d'entrée : assurant la modularité des briques et pouvant recevoir - par exemple - des variables d'environnement <br /><i>👉🏻 bien utile pour stocker l'identifiant de notre portail Hubspot et celui du propriétaire des objets créés (la note de la fiche contact)<br /></i><br /></li><li>Code : aujourd'hui, du code Node.js (et tous les packages npm)<br /></li></ol><p></p><p><br /><b>Coding de l'action </b></p><p>Nous avons 1 seule action à implémenter : injecter les réponses de notre client dans sa fiche contact.</p><p>Pour ce faire, nous allons utiliser l'API de Hubspot pour simplement <a href="https://legacydocs.hubspot.com/docs/methods/engagements/engagements-overview" target="_blank">ajouter</a> une "note" au sein de la fiche du client concerné.</p><p>Je vous partage le cœur de l'appel :</p>
<pre><code class="javascript">// Create note
const postNote = async function(contact, emailContact) {
let message = `Le formulaire < strong>${ titleForm }< /strong> a été complété avec les réponses suivantes` +
`< ul>` +
`< li>Marrons : ${ chestnut }< /li>` +
`< li>Caramel au beurre salé : ${ caramel }< /li>` +
`< li>Spéculos : ${ speculos }< /li>` +
`< /ul>`;
let postJSON = {
"engagement" : {
"portalId" : _HUBSPOT.PORTAL_ID,
"active" : true,
"type" : "NOTE",
"timestamp": Date.now() ,
"source" : "AUTOMATION_PLATFORM",
"sourceId" : "Typeform",
"ownerId" : _HUBSPOT.OWNER_ID // this determines the owner of the NOTE
},
"associations": {
"contactIds" : [contact.id],
},
"metadata" : {
"body": `< p>${ message }< /p>`
}
};
let postConfig = {
method : 'POST',
url : `https://api.hubapi.com/engagements/v1/engagements`,
headers: {
'Authorization': `Bearer ${auths.hubspot.oauth_access_token}`,
'Content-Type' : 'application/json',
},
data : postJSON
};
return axios(postConfig)
.then(response => {
let data = response.data;
log.info(data);
return data;
})
.catch(err => {
log.error(err);
if (err.response) {
// client received an error response (5xx, 4xx)
} else if (err.request) {
// client never received a response, or request never left
} else {
// anything else
}
});
};
</code>
</pre>
<p><br /></p><p>Voici le résultat :</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofXmKER6iq74qn_P6X-MsQho0Isf-wYxTq_FipoXjRdL2ZKQWoZD89BiHCjDHqrPjqRjA-zRgLxhS9PF19xMoVWDlAIi6EAriNK0nMjpyUoePPLIMgtvoHUMvt69irD7vqAGu-0q_d-lD/s1397/Hubspot+contact.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="665" data-original-width="1397" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofXmKER6iq74qn_P6X-MsQho0Isf-wYxTq_FipoXjRdL2ZKQWoZD89BiHCjDHqrPjqRjA-zRgLxhS9PF19xMoVWDlAIi6EAriNK0nMjpyUoePPLIMgtvoHUMvt69irD7vqAGu-0q_d-lD/w640-h304/Hubspot+contact.png" width="640" /></a></div><div><br /></div><p><i>Et à l'échelle ?</i></p><p>Pas de problème de volumétrie, <a href="https://www.hubspot.fr/products/crm" target="_blank">Hubspot CRM</a> nous autorise jusqu'à <b>1 million de contacts</b>. 😳</p><p><a href="https://pipedream.com/" target="_blank">Pipedream</a> octroie généreusement <b>3000+ appels</b> et <b>30 minutes</b> de temps machine quotidiennement et gère, en plus de tout ça, le <a href="https://docs.pipedream.com/workflows/events/concurrency-and-throttling/#why-is-it-important">throttling</a> et la <a href="https://docs.pipedream.com/workflows/events/concurrency-and-throttling/#why-is-it-important" target="_blank">concurrence</a> ! 🤗 </p><p><br /></p><p>Tout se passait trop bien, vous ne trouvez pas ? 😅</p><p>Il va falloir faire face, à l'échelle, à <u>2 contraintes</u> :</p><p></p><ul style="text-align: left;"><li>Pipedream limite le temps maximum de traitement d'un webhook à <b>5 minutes</b> (n'utilisez donc pas ceci pour mettre à jour à la volée votre modèle de Machine Learning 🤷🏻♂️) [voir les <a href="https://docs.pipedream.com/workflows/settings/#execution-timeout-limit" target="_blank">settings</a> du Workflow]<br /></li><li>Hubspot n'autorise l'accès à son API qu'à raison de <b>10 appels/seconde</b> (ça paraît beaucoup mais pas tant que ça finalement si vous avez besoin de chercher un contact, modifier la fiche, ajouter une note, ...) </li></ul><p></p><p>Rien d'insurmontable au final ! Ouf...</p><p><br /></p><p><b>Synthèse de notre trilogie Webhooks</b></p><p>J'espère que vous avez apprécié cette trilogie sur les Webhooks.<br /><br />Naturellement, nous n'avons traité qu'un seul type d'entrant alors que la vision 360° du client nécessite bien plus d'efforts mais vous avez le bagage nécessaire désormais.</p><p>N'hésitez pas à laisser un commentaire si c'est le cas (ou pas, les critiques constructives sont aussi appréciées !) et à suggérer d'autres sujets.</p><p>A bientôt et <span style="font-size: medium;"><b>joyeuses fêtes</b></span> ! 🎄</p><p><br /></p><p>*NdR : je n'ai aucun lien d'affiliation, ... avec l'entreprise mentionnée<br /><i>Ceci est à la fois un disclaimer et un appel pour une éventuelle affiliation #2-en-1 #update-a-venir ! </i>😁</p>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-30969664901214454292020-12-22T21:12:00.011+01:002020-12-24T09:44:47.788+01:00Webhooks (2ème partie) - Etude de cas<p>Dans notre <a href="https://guillaumegarcia13.blogspot.com/2020/12/webhooks-1ere-partie.html">première partie</a>, nous avons vu ce qu'étaient les <b>Webhooks </b>et l'usage qu'on pouvait en faire en intégrant des données issues d'autres applications.</p><p><br /></p><h4 style="text-align: left;">Etude de cas : CRM</h4><p><i style="font-size: small;">Disclaimer : je parle beaucoup d'offres d'entreprises existantes non pas pour faire du placement de produit (je ne suis aucunement rémunéré par lesdites sociétés) mais, d'une part pour donner un ancrage un peu plus réel et, d'autre part, parce que j'ai apprécié leurs produits respectifs par le passé </i><span style="font-size: small;">👍🏻</span></p><p>Au sein de cet article, nous allons étudier le cas suivant, très actuel en ces temps où la digitalisation est le maître mot : un CRM dans lequel on essaie de suivre toutes les interactions faites avec les clients.</p><p>Qu'essayons-nous de réaliser à travers cette étude ?</p><p>A l'instar d'un service Marketing d'une entreprise, simplement être en mesure de pouvoir suivre :</p><p></p><ul style="text-align: left;"><li>les actes d'achat</li><ul><li>en ligne</li><li>en boutique ou dans un <a href="https://www.thestorefront.fr/mag/what-exactly-is-a-pop-up-shop/" target="_blank">pop-up store</a></li><li>...<br /><br /></li></ul><li>les conversations</li><ul><li>email 📧</li><li>SMS</li><li>chat 💬</li><li>...</li></ul><li>les formulaires de satisfaction</li><li>les consultations de votre site web 🌐</li><li>... </li></ul><p></p><p>afin de se constituer le Graal de tout marketeux... la <b>vision 360°</b> du <b>client</b> ! </p><p>Pour notre exemple, nous avons choisi <a href="https://www.hubspot.fr/products/crm" target="_blank">Hubspot CRM</a>*, d'ailleurs n'importe quel CRM avec une <a href="https://developers.hubspot.com/docs/api/overview" target="_blank">API</a> ferait l'affaire.</p><p><br /></p><p>Schématiquement, cela ressemble à ceci :</p><div class="separator" style="clear: both; text-align: center;"><a href="https://i.imgur.com/iS7YTru.png" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="487" data-original-width="741" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHc-HFQfwTNbOQmdE6OPxnbzB0ijEXeueBbMuQdYqisGwTlB5R4BgOM4TvzRLplMMcshrvsFGbWkl5IhpcIwt6K7eO2ZeEyNvCSLOcJJVRVbuPmniPfgrgJ04JiFlcBJ3gH-1GdYd8ZO5D/w640-h420/icicky-3x.gif" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><h4 style="text-align: left;">Plantons le décor !</h4><p>Nous sommes une société de vente de glace en ligne <b>Icicky</b> - dont le logo a été réalisé grâce au <a href="https://hatchful.shopify.com/fr/" target="_blank">générateur de logo</a> de <b>Shopify*</b> - et venons de lancer une campagne pour notre nouvelle <b>glace de Noël</b> 🎄. <br />Nous sollicitons nos clients par email pour choisir de nouveaux parfums (je sais, c'est pas léger mais ce sont les fêtes, hein ?) : </p><p></p><p></p><ul style="text-align: left;"><li>une glace aux marrons</li><li>une glace au caramel au beurre salé</li><li>une glace au spéculos</li></ul><p></p><p><br /></p><h4 style="text-align: left;">L'application émettrice : <a href="https://www.typeform.com/" rel="nofollow" target="_blank">Typeform</a></h4><p>Pour mieux appréhender le marché, Icicky décide de donc mener une campagne email, grâce au <a href="https://www.hubspot.fr/products/marketing/email" target="_blank">service</a> de Hubspot par exemple, auprès de ses clients actuels en leur envoyant un <a href="https://guillaumegarcia13.typeform.com/to/hRVPcbEm?hidden_email=icicky.lover@yopmail.com" target="_blank">formulaire </a><b><a href="https://guillaumegarcia13.typeform.com/to/hRVPcbEm?hidden_email=icicky.lover@yopmail.com" target="_blank">Typeform</a>*</b>.</p>
<div class="typeform-widget" data-url="https://form.typeform.com/to/hRVPcbEm?typeform-medium=embed-snippet" style="height: 500px; width: 100%;"></div>
<script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
<p>Typeform permet de renseigner un <a href="https://guillaumegarcia13.blogspot.com/2020/12/webhooks-1ere-partie.html">Webhook </a>de sorte qu'un message (dont la structure est propre à Typeform) est envoyé à cette adresse à chaque fois qu'une formulaire est complété.</p><p>Nous verrons dans la <a href="https://guillaumegarcia13.blogspot.com/2020/12/webhooks-3eme-et-derniere-partie.html">prochaine partie</a> comment <b>Pipedream</b>* va nous permettre d'exploiter ledit message...</p><p><br /></p><p><br /></p><p>*NdR : je n'ai aucun lien d'affiliation, ... avec l'entreprise mentionnée<br /><i>Ceci est à la fois un disclaimer et un appel pour une éventuelle affiliation #2-en-1 #update-a-venir ! </i>😁</p>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-76866927456462977052020-12-06T13:33:00.010+01:002020-12-24T16:24:35.252+01:00Webhooks (1ère partie)<p>Les <b>Webhooks </b>sont certainement une des solutions d'intégration les moins utilisées par SAP (n'hésitez pas à me donner tort dans les commentaires, je n'ai pas recensé toutes les solutions SAP les exploitant !).</p><div class="separator" style="clear: both; text-align: center;"><a href="https://i.imgur.com/HBnWchu.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="700" height="181" src="https://i.imgur.com/HBnWchu.png" width="320" /></a></div><p>Or ce concept est extrêmement utile : je parle bien de concept car il ne s'agit pas d'une technologie à proprement parler. </p><h2 style="text-align: left;"><br /></h2><h4 style="text-align: left;">Définition</h4><p></p><blockquote><span style="font-size: medium;">"Un <i>Webhook</i>, aussi appelé <i>reverse API </i>ou encore <i>web callback</i>, est un concept selon lequel une application A permet à une application consommatrice B de consommer (en quasi temps-réel) les événements qu'elle génère."</span></blockquote><h2 style="text-align: left;"><br /></h2><h4 style="text-align: left;">Considérations techniques</h4><p></p><p>Elle remplace ainsi (très) avantageusement la technique de <i>polling</i> que l'on rencontre encore trop souvent.<br />C'est "écologiquement" très respectueux de ressources informatiques !</p><div class="separator" style="clear: both; text-align: center;"><a href="https://www.sendinblue.com/wp-content/uploads/2019/10/Webhook-vs-polling-1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="312" data-original-width="800" height="250" src="https://www.sendinblue.com/wp-content/uploads/2019/10/Webhook-vs-polling-1.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><span style="color: #999999; font-family: helvetica; font-size: x-small;">Source: <a href="https://www.sendinblue.com/blog/what-is-a-webhook/" rel="nofollow" target="_blank">SendInBlue</a></span></div><div><br /></div>Techniquement parlant, il s'agit simplement pour l'application A d'appeler via une <b>requête HTTP</b> (avec une charge utile en <b>JSON</b>) l'adresse donnée par l'application B. <div><br /><div>Encore faut-il que :</div><div><ul style="text-align: left;"><li>l'application A propose cette option pour l'événement qui nous intéresse</li><li>la charge utile contienne l'information qui nous intéresse (on pourra utiliser l'API de l'application A mais cela complique nos affaires...)</li><li>...</li></ul></div><h2 style="text-align: left;"><br /></h2><h4 style="text-align: left;">Usages</h4><div><br />Naturellement, ils sont nombreux :</div><div><ul style="text-align: left;"><li><b>notification</b> : le plus basique, avoir un message dans votre messagerie instantanée (ex: Slack, Rocket Chat, ...) qui vous prévient :</li><ul><li>d'une vente sur votre site e-commerce</li><li>du fait que votre serveur est down <br /><i><span style="font-size: x-small;">noter comme ce genre de scénario combine généralement un polling de la part d'un service de monitoring de serveur + un webhook pour prévenir votre Slack</span></i></li><li>...</li></ul><li><b>synchronisation</b> de données : </li><ul><li>entre un système principal et des systèmes tiers</li><li>alimentation au fil de l'eau un <a href="https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1165409-data-lake-ou-lac-de-donnees-la-solution-reine-du-big-data/" target="_blank">Data lake</a></li><li>...</li></ul><li><b>automation </b>: c'est sans doute LA grande force du Webhook, c'est de pouvoir faire fonctionner ensemble des applications - qui ne se connaissaient ni d'Eve ni de Wall<span face="arial, sans-serif" style="background-color: white; color: #4d5156; font-size: 14px;">·</span>E - pour aboutir à de véritables workflows cross-applicatifs !</li></ul><h2 style="text-align: left;"><br /></h2><h4 style="text-align: left;">Focus sur l'Automation</h4></div><div><br />Plusieurs services en ligne (<a href="https://zapier.com/" target="_blank">Zapier</a>, <a href="https://www.integromat.com/" target="_blank">Integromat</a>, <a href="http://automate.io" target="_blank">Automate.io</a> pour n'en citer que quelques-uns) se sont développés autour des possibilités offertes par les Webhooks. Ces derniers constituent ainsi une famille de <i>triggers</i> (reverse API) permettant de déclencher vos PROPRES workflows combinant des actions pré-paramétrées (API). </div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://i.imgur.com/6xY5f1O.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="563" data-original-width="800" height="450" src="https://i.imgur.com/6xY5f1O.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both;"><span style="color: #999999; font-family: helvetica; font-size: x-small;">Source: <a href="http://automate.io">Automate.io</a></span></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both; text-align: left;">Dans la seconde et troisième partie, nous illustrerons l'utilisation d'un webhook avec un trio d'outils : Typeform + Pipedream + Hubspot CRM.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">C'est par <a href="https://guillaumegarcia13.blogspot.com/2020/12/webhooks-2eme-partie-etude-de-cas.html">ici</a></div></div><br /></div>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-41232200912617829292017-06-24T18:28:00.001+02:002017-06-25T22:42:40.549+02:00Business vs IT : l'impossible réconciliation ?<span style="font-family: "trebuchet ms" , sans-serif; font-size: x-small;"><b>Modification : Samedi 24 Juin 2017 - 19h48 </b>(ajout webcast Pinterest Growth Team)</span><br />
<span style="font-family: "trebuchet ms" , sans-serif; font-size: x-small;"><b>Modification : Dimanche 25 Juin 2017 - 22h35 </b>(ajout Dual-Track Scrum)</span><br />
<br />
Je suis actuellement en train de vivre une aventure passionnante au sein de l'entreprise que j'ai rejointe, il y a tout juste 1 an.<br />
<br />
<h2>
En route pour l'aventure !</h2>
<div>
<br /></div>
Cette aventure est synonyme de nouveaux défis à relever avec de <b>nouvelles offres et produits</b> (digitaux) à imaginer qui :<br />
<ol>
<li>enthousiasmeront les différents clients que nous servons (ça c'est la dimension Business)</li>
<li>s'intégreront avec le reste des offres existantes dans <b>un tout cohérent</b> (ça c'est la dimension IT / Digital <span style="font-size: x-small;">[je ne rentrerai pas dans le débat sur cette différenciation dans ce billet...]</span>).</li>
</ol>
<br />
<ol>
</ol>
<h2>
</h2>
<h2>
Un chemin semé d'embûches</h2>
<div>
<br /></div>
Les ambitions sont grandes... et les obstacles aussi :<br />
<br />
<style>
table tbody td:nth-child(1) {
font-family: 'helvetica', sans-serif;
}
table tbody td:nth-child(2) {
font-family: 'verdana', sans-serif;
font-size: x-small;
}
</style>
<br />
<table>
<thead>
<tr>
<th><span style="font-family: inherit;">Problème</span></th>
<th><span style="font-family: inherit;">Description</span></th>
<th><span style="font-family: inherit;">Moyen de surmonter</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Concurrence externe</td>
<td>nombreux concurrents (startups très actives) qui savent réagir vite en étant disruptives</td>
<td>agilité,<br />
position dominante</td>
</tr>
<tr style="background: #eee;">
<td>Concurrence interne</td>
<td>offres très complémentaires mais avec des zones de friction</td>
<td>management,<br />
redéfinition des offres,<br />
offres transverses, …</td>
</tr>
<tr>
<td>Organisationnel<span style="color: #990000;">*</span></td>
<td>être agile mais pas au sacrifice de la maintenabilité</td>
<td>fédérer les acteurs internes autour d’un projet,<br />
architecture performante,<br />
maîtrise de la dette technique</td>
</tr>
</tbody>
</table>
<br />
<span style="font-size: xx-small;">(<span style="color: #990000;">*</span>) je vous recommande la lecture de l'article <a href="http://www.solutions-numeriques.com/vers-une-entreprise-agile-la-sauvegarde-des-mammouths-ou-la-necessaire-transformation-des-dsi/">"Vers une entreprise agile : la sauvegarde des mammouths ou la nécessaire transformation des DSI"</a></span><br />
<br />
Attardons-nous sur ce dernier problème : l'Organisation et commençons par la fameuse Agilité<br />
<br />
<h2>
Agilité : une main de velours dans... une chape de plomb ? </h2>
<div>
<br /></div>
En tant qu'ancien <u>consultant</u>, j'ai croisé beaucoup (plusieurs dizaines) d'entreprises et pu voir plusieurs modèles d'organisation. Au cours de ces dernières années, j'ai vu déferler la <b>méthodologie Agile</b> au sein de ces organisations et ça ressemble plutôt à ça :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://www.commitstrip.com/wp-content/uploads/2017/01/Strip-Budegt-fixe-pour-projet-flexible-650-final.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="614" data-original-width="650" height="376" src="https://www.commitstrip.com/wp-content/uploads/2017/01/Strip-Budegt-fixe-pour-projet-flexible-650-final.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666;">Source : <a href="http://www.commitstrip.com/fr/2017/01/09/that-little-problem-with-agile/">http://www.commitstrip.com/fr/2017/01/09/that-little-problem-with-agile/</a></span></td></tr>
</tbody></table>
<div style="text-align: center;">
<br /></div>
<br />
Bref, l'agilité n'est pas facilement embrassée... C'est que les anciens modèles d'organisation ont la vie dure<br />
<br />
<h2>
Pour 1€ symbolique : mon ancienne DSI 1 fois, mon ancienne DSI 2 fois, ... </h2>
<div>
<br /></div>
Afin de rationaliser l'outil de production IT, on a rassemblé les compétences au sein de DSI (les équipes de "Prod")<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.solutions-numeriques.com/wp-content/uploads/2017/02/la-cration-dorganisations-informatiques-de-moyens-mutualiss-a-gnr-des-fortes-rductions-de-cots-mais-induit-de-la-rigidit-sur-la-fonction-si.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://www.solutions-numeriques.com/wp-content/uploads/2017/02/la-cration-dorganisations-informatiques-de-moyens-mutualiss-a-gnr-des-fortes-rductions-de-cots-mais-induit-de-la-rigidit-sur-la-fonction-si.png" data-original-height="665" data-original-width="794" height="335" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666;">Source : <a href="http://www.solutions-numeriques.com/vers-une-entreprise-agile-la-sauvegarde-des-mammouths-ou-la-necessaire-transformation-des-dsi/" style="font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: x-small;" target="_blank">"Vers une entreprise agile..."</a></span></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Toute la difficulté (voire la schizophrénie) des métiers est qu'elles doivent :<br />
<ol>
<li>innover rapidement au risque d'être dépasser de perdre leur avantage concurrentiel</li>
<li>respecter des contraintes budgétaires fortes (au risque de perdre un budget parfois serré)</li>
</ol>
<br />
<ol>
</ol>
<h4>
</h4>
<h4>
Externalisation : égarement ou vraie solution ?</h4>
<div>
<br /></div>
<div>
Une pratique qui se développe : <a href="http://www.technologies-methodes-it.com/6-bonnes-raisons-dexternaliser-sa-dsi/">http://www.technologies-methodes-it.com/6-bonnes-raisons-dexternaliser-sa-dsi/</a></div>
<div>
<br /></div>
<div>
C'est ainsi qu'on a pu voir des sociétés <b>externaliser leur DSI</b> (cession vers des sociétés de services telles que SSII - appelées désormais ESN pour ceux qui ont suivi l'actualité de ces dernières années). Et bien oui, dans certains groupes aux conventions collectives très favorables, un informaticien coûte fort cher comparé à ceux qu'on peut avoir via le Syntec !</div>
<div>
J'ai également pu observé un recours très fort aux prestataires de services (toujours les mêmes ESN) avec une montée en gamme par le biais du <b>BPO </b>(Business Process Outsourcing), c'est-à-dire le fait de déléguer une partie de ses processus non critiques à un tiers.</div>
<div>
<br /></div>
<div>
Je suis convaincu que disposer de compétences en interne pour accompagner le Business est un atout majeur. Néanmoins, pour les entreprises qui font le (bon) choix de garder leur DSI, m'est avis qu'il ne faut pas tomber dans le <b>schéma MOA vs MOE</b>, ces 2 entités ne se parlant qu'à coups de spécifications et de SLA.<br />
<br />
Et c'est souvent là que ça tiraille un peu : le Business veut pouvoir développer et tester (A/B testing...) de nouvelles fonctionnalités en mode "Quick & Dirty" (ex: Pinterest et sa <i>Growth Team</i>)<br />
<br />
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://info.usertesting.com/01_2017_OnDemand_Webinar_CaseyWinters_Confirmation?wvideo=a4uex1yt2e" style="margin-left: auto; margin-right: auto;"><img src="http://embed.wistia.com/deliveries/c7a297c06e6a43737277dd20b76116828b7f68aa.jpg?image_play_button_size=2x&image_crop_resized=960x720&image_play_button=1&image_play_button_color=54bbffe0" height="300" style="height: 300px; width: 400px;" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666;">Source : <a href="http://info.usertesting.com/01_2017_OnDemand_Webinar_CaseyWinters_Confirmation?wvideo=a4uex1yt2e" style="font-size: x-small;">UserTesting - Casey Winters Webinar</a></span></td></tr>
</tbody></table>
</div>
<div style="text-align: center;">
<br /></div>
et la DSI a besoin de pouvoir assurer les correctifs et réintégrer ces nouvelles fonctionnalités quand elles auront été validées.<br />
<br />
<h4>
S'organiser autrement</h4>
<div>
<br /></div>
Les organisations modernes l'ont bien compris en montant leurs projets autour d'équipe "pluri-disciplinaires" rassemblant : métier, UX/UI designer, développeurs, chef de projet, ... et en faisant sauter les barrières entre les équipes que ce soit :<br />
<br />
<ul>
<li><b>Scrum</b> : agilité entre métier (MOA) et études (Dev)</li>
<li><b>DevOps</b> : agilité entre études (Dev) et équipe de de production (Ops)</li>
</ul>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.solutions-numeriques.com/wp-content/uploads/2017/02/agilit1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://www.solutions-numeriques.com/wp-content/uploads/2017/02/agilit1.png" data-original-height="236" data-original-width="800" height="160" width="540" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #999999; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: xx-small;">Source : </span><a href="http://www.solutions-numeriques.com/vers-une-entreprise-agile-la-sauvegarde-des-mammouths-ou-la-necessaire-transformation-des-dsi/" style="font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: x-small;" target="_blank">"Vers une entreprise agile..."</a></td></tr>
</tbody></table>
<br />
Mais il est possible d'aller bien plus loin !<br />
<br />
Un modèle qui commence à faire du bruit est le <b>Dual-Track Scrum </b>(lire <a href="https://www.devbridge.com/articles/how-to-set-up-dual-track-scrum-in-jira">https://www.devbridge.com/articles/how-to-set-up-dual-track-scrum-in-jira</a>) (voir aussi <b>Dual-Track Product Development</b>) où - à l'instar de ce que fait Pinterest dans le webcast ci-dessus) - on distingue 2 phases dans la mise en oeuvre du produit :<br />
<ol>
<li>Discovery</li>
<li>Delivery</li>
</ol>
la première alimentant la seconde via des <i>stories </i>déjà testées auprès des utilisateurs finaux.<br />
<br />
Schématiquement :<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://dbcms.s3.amazonaws.com/devbridgecom/bcms/image/ec462fd632de402baf183104b875c6e7/Dual_Track_Backlog.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="435" data-original-width="800" height="347" src="https://dbcms.s3.amazonaws.com/devbridgecom/bcms/image/ec462fd632de402baf183104b875c6e7/Dual_Track_Backlog.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666;">Source : <a href="https://www.devbridge.com/articles/how-to-set-up-dual-track-scrum-in-jira/">https://www.devbridge.com/articles/how-to-set-up-dual-track-scrum-in-jira/</a></span></td></tr>
</tbody></table>
<br />
Je serais enclin à croire que c'est vers ce modèle qu'il faut s'orienter, et vous ?</div>
<div>
<br /></div>
<div>
</div>
<br />
<br />
<br />Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-63754874043484186462016-10-08T13:55:00.000+02:002016-10-08T13:55:01.108+02:00Un premier galop d'essai avec Neo4j<a href="https://neo4j.com/" target="_blank"><img border="0" height="88" src="https://neo4j.com/wp-content/themes/neo4jweb/assets/images/neo4j-logo-2015.png" width="200" /></a><br />
<b><a href="https://neo4j.com/" target="_blank">Neo4j</a></b> est une base orientée graphe, qui excelle dans le parcours des relations entre objets là où les bases de données relationnelles peinent avec leurs multiples jointures.<br />
<br />
Les cas d'usage des bases orientées graphe sont nombreuses :<br />
<br />
<ul>
<li><b>réseaux sociaux</b> (nous pensons que vous pourriez connaître untel, ...)</li>
<li>moteurs de <b>recommandations</b> (les personnes qui ont acheté cet artcile ont aussi acheté...)</li>
<li><b>logistique</b> (le meilleur chemin de livraison est celui-ci, ...)</li>
<li>...</li>
</ul>
<div>
Après <a href="https://neo4j.com/download/" target="_blank">téléchargement</a>, la base de données s'installe en quelques clics. Vous disposez ensuite d'une interface Web très intuitive et accompagnée d'un tutoriel non moins clair.</div>
<div>
<br /></div>
<div>
Cette même interface permet de charger les données, requêter - à l'aide du langage Cypher - et de visualiser le résultat sous forme de :</div>
<div>
- table</div>
<div>
- graphe</div>
<div>
<br /></div>
<div>
Voici un <a href="http://hobby-nghacijmojekgbkemhklnfnl.dbs.graphenedb.com:24789/browser/" target="_blank">petit exemple</a> d'une base déposée sur <b>GrapheneDB</b>, une plategorme d'hébergement, et disponible publiquement et gratuitement (jusqu'à 1k noeuds, 10K relations max). (User / Mdp : cigref / Ain2qRe75aTewcZ1vq9h)</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKu0CDp0jtpDu74qaZl83UCXovu6iRGetkhBAsFjYZ6t4nPqqXrileSj6KdfLvoXUjtbszF0JLJifEOdEAtqwaOLv3uCeEw3JPSz7-plZlH4LcEqu8bKTA2QfjLOE32U_FJlzsz041A5dM/s1600/cigref.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKu0CDp0jtpDu74qaZl83UCXovu6iRGetkhBAsFjYZ6t4nPqqXrileSj6KdfLvoXUjtbszF0JLJifEOdEAtqwaOLv3uCeEw3JPSz7-plZlH4LcEqu8bKTA2QfjLOE32U_FJlzsz041A5dM/s400/cigref.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<i><u>Pour aller plus loin</u></i></div>
<div>
<i>Je vous recommande la vidéo de <a href="https://neo4j.com/blog/contributor/nicole-white/" target="_blank">Nicole White</a> qui exploite les données des vols commerciaux américains pour illustrer les capacités de Neo4j</i></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/VdivJqlPzCI/0.jpg" src="https://www.youtube.com/embed/VdivJqlPzCI?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://neo4j.com/wp-content/themes/neo4jweb/assets/images/neo4j-logo-2015.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-40296197282358005282016-02-08T10:03:00.000+01:002017-07-29T14:16:47.194+02:00Compensaticity : les augmentations en 2 clics de souris ? J'ai récemment développé un petit proof of concept dans le domaine de la gestion de la rémunération.<br />
Pas un brin de SAP pour changer mais plutôt du Web : AngularJS + Rickshaw.js + Intro.js.<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/VgKmPD2zDBo/0.jpg" frameborder="0" height="315" src="https://www.youtube.com/embed/VgKmPD2zDBo?feature=player_embedded" width="560"></iframe></div>
<br /></div>
<br />
De quoi essayer de concurrencer SuccessFactors... avec une future intégration SAP HCM ;)<br />
<br />
<a href="https://angularjs.org/"><b>AngularJS</b></a>: le framework MV* de Google<br />
<div>
<img height="55" src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAcIAAAAJDQwNjVkOTgzLTkxYWItNDkyMy04ZjU5LTRkNjFkMzU4MTg4Yw.png" width="200" /><br />
<br />
<b><a href="http://code.shutterstock.com/rickshaw/">Rickshaw.js</a> </b>: un des nombreux frameworks permettant de réaliser des graphiques en utilisant D3.js. Les 2 graphiques sont manipulables à l'aide des 2 sliders "Salaire fixe" et "Bonus". Le manager ou le RH peut ainsi visualiser en temps réel l'influence des augmentations qu'il/elle octroie au niveau de l'historique du collaborateur ou dans le graphe d'ensemble des collaborateurs occupant des fonctions similaires.</div>
<div>
<br />
<b><a href="http://usablica.github.io/intro.js/">Intro.js</a> </b>: un outil de "onboarding" (simplissime de mise en oeuvre !) qui permet une prise en main assistée de l'outil. Vous pouvez le rappeler à l'aide du lien Help dans le coin supérieur droit.<br />
<br />
<img src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAQIAAAAJGEwOTExNTE4LTE0ZDEtNGVhMS1hYWJkLTczYzE2MDk0MGFiMA.png" width="560" /><br />
<br />
Je pense avoir déjà parlé de <a href="https://www.mockaroo.com/">Mockaroo</a> et c'est grâce à ce service en ligne (gratuit pour le faible volume de données de la démo) que j'ai généré les <a href="https://www.mockaroo.com/1920d500">mockup data</a> pour ce PoC<br />
<img alt="" class="center" data-mce-src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAZ9AAAAJDlkM2IxYWE0LWNmM2YtNDQ4My1hMDZhLTVhMWY5Njg5MjA2Zg.png" src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAZ9AAAAJDlkM2IxYWE0LWNmM2YtNDQ4My1hMDZhLTVhMWY5Njg5MjA2Zg.png" style="color: rgba(0, 0, 0, 0.701961); display: block; font-family: Georgia, serif; font-size: 18px; height: auto; line-height: 32px; margin: 30px auto; max-width: 100%; text-align: center;" width="560" /><br />
<br />
Vous trouverez la démo en ligne <b><a href="https://equal-balloon.codio.io/compdemo.html" target="_blank">ici</a></b>. (merci à Codio)</div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-69866839472465435832015-09-07T10:22:00.003+02:002015-09-07T10:22:52.782+02:00Catalogue Fiori dans une feuille de calculSAP met à disposition un <a href="https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/" target="_blank">catalogue Fiori</a> que vous pouvez consulter en ligne.<br />
C'est un outil très précieux pour parcourir les près de 600 applications Fiori (à l'heure où j'écris ce billet) !<br />
Néanmoins, il manque certaines capacités de filtrage avancées...<br />
<br />
<a href="http://www.bluefinsolutions.com/blogs/dj-adams" target="_blank">DJ Adams</a> a posté une vidéo YouTube<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/B9FGqJFZbzQ/0.jpg" src="https://www.youtube.com/embed/B9FGqJFZbzQ?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
montrant comment générer une feuille de calcul (Google Spreadsheet) à partir de ce catalogue en utilisant son service OData.<br />
<br />
J'ai repris cette vidéo et généré une <b>version mise à jour</b> de cette feuille de calcul (attention le service OData a changé d'adresse !) que vous pouvez voir et exploiter ici: <a href="https://goo.gl/HTQJ7G"><b>https://goo.gl/HTQJ7G</b></a>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-37420497610018092692015-05-20T22:35:00.000+02:002015-05-26T11:45:07.113+02:00Extension Fiori et Tissage d'aspectNe présentons plus les <b><a href="https://demo-fioritrial.dispatcher.hana.ondemand.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?helpset=trial&sap-client=001" target="_blank">applications Fiori</a></b> qui sont devenues le nouveau fer de lance de SAP (avec HANA) et dont Internet regorge d'articles et intéressons nous directement à la façon dont on peut les étendre.<br />
<br />
<h3>
Les extensions Fiori</h3>
SAP a publié des applications Fiori au sein desquels se trouvent un nombre croissant de points d'extension (consultez "<a href="https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F1311')/W7" target="_blank">Demande de congé v2</a>" par exemple).<br />
Effectivement, nos clients sont toujours friands de personnaliser, ajuster, étendre leurs applications toujours plus loin... tant en restant dans une zone de maintenabilité et de performances !<br />
<br />
Étudions un cas très courant : l'affichage des vacances scolaires dans l'application "Demande de congé v2"<br />
<br />
<h3>
Web IDE vs Eclipse</h3>
Pour cela, nous nous sommes appuyés sur l'éditeur en ligne <b>SAP Web IDE</b> sur SAP HANA Cloud Platform. Il existe également un plugin pour <b>Eclipse</b> (SAP Fiori Toolkit) mais SAP a décidé de ne plus le maintenir et de proposer le SAP Web IDE (qui sera payant à terme d'après les informations que j'ai pu glanées)<br />
<br />
<h3>
Notre extension "Vacances scolaires"</h3>
La fonctionnalité ajoutée est tout simplement d'être en mesure de visualiser les vacances scolaires (pour les parents qui doivent s'occuper des enfants, comme pour les "non-parents" qui peuvent partir en congés à moindre frais) lors de la sélection de la période de pose.<br />
<div>
<br /></div>
<div>
Voici le résultat :</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEkB-IdNq2d_CO3lgHi2dsS7IltQe0l06nOP6MYB_s-5xVt3JiAz4rf-sESE0LCVuQYocBYJPwu0VmIfwGBsMBjIQLi1TR6xMabqWDCqoHZblS2cbpvy_a-os5vT2Nhv_ovDiX7q3FxU1/s1600/vacances+scolaires.png"><span id="goog_687568453"></span><span id="goog_687568467"></span><span id="goog_687568474"></span><span id="goog_687568477"></span><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEkB-IdNq2d_CO3lgHi2dsS7IltQe0l06nOP6MYB_s-5xVt3JiAz4rf-sESE0LCVuQYocBYJPwu0VmIfwGBsMBjIQLi1TR6xMabqWDCqoHZblS2cbpvy_a-os5vT2Nhv_ovDiX7q3FxU1/s400/vacances+scolaires.png" width="400" /></a><span id="goog_687568478"></span><span id="goog_687568475"></span><span id="goog_687568468"></span><span id="goog_687568454"></span></div>
<div>
<br /></div>
<div>
<div>
Comme vous pouvez le voir, les vacances scolaires sont représentés au pied de chaque jour de calendrier. (1 couleur pour chaque zone : A, B ou C)</div>
<div>
<br /></div>
<div>
Même si l'application dispose de nombreux <i>hooks</i> (points d'extension au niveau du contrôleur qui pilote la logique métier de l'écran), il n'en existe pas qui soit déclenché à chaque navigation entre les mois. Le seul <i>hook</i> approchant (<span style="background-color: rgba(255, 255, 255, 0.8); color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; white-space: pre-line;">extHookInitCalendar) </span>est celui qui permet de configurer le paramétrage du calendrier (affichage de 1 à n mois, etc...)</div>
<div>
<br /></div>
</div>
<h3>
Tissage d'aspect à la rescousse</h3>
<div>
<div>
Par conséquent, nous avons eu recours à des mesures drastiques ... la <b>Programmation Orientée Aspect</b> qui permet (pour faire court) l'injection de code dans les méthodes standards.</div>
<div>
Nous utilisons la librairie jquery-aop sur GitHub: <a href="https://github.com/gonzalocasas/jquery-aop">https://github.com/gonzalocasas/jquery-aop</a></div>
<div>
<br /></div>
<div>
Le cœur de la solution est le suivant :</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzd-j6Rm_qOWI62Js-677GSjIapf2cWbWRbBGRHlA87TDZjubJK2bcfQvQPJnyzxy2dZnJ7riTIxjD5k9DKeccsDPRZUEzbhKjK-sVBf9iu2-_3pj9bmowDcutTRQ5Jd1TkGgCG3BFTwNs/s1600/web+ide.png"><span id="goog_687568429"></span><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzd-j6Rm_qOWI62Js-677GSjIapf2cWbWRbBGRHlA87TDZjubJK2bcfQvQPJnyzxy2dZnJ7riTIxjD5k9DKeccsDPRZUEzbhKjK-sVBf9iu2-_3pj9bmowDcutTRQ5Jd1TkGgCG3BFTwNs/s400/web+ide.png" width="400" /></a><span id="goog_687568430"></span></div>
<div>
<br /></div>
<div>
Nous avons enrichi la méthode de l'instance <span style="font-family: Courier New, Courier, monospace;">_renderDay this.cale</span> du calendrier (et juste cette instance) en ajoutant une <i>after method</i> qui modifie le DOM en insérant un <i>span</i> dans la <i>div</i> existante pour chaque date du calendrier concernée.<br />
<div>
Ensuite, cette balises est transformé en décoration par simple CSS.</div>
<div>
<br /></div>
<div>
Cette approche est très puissante car elle nous a permis d'aller modifier le comportement interne d'un composant, sans avoir à intervenir sur le code de celui-ci (SAP peut être amené à le faire évoluer par la suite)</div>
<div>
<br /></div>
<div>
<span style="font-family: inherit; font-size: x-small;"><i>PS : Merci à Pierre B. pour m'avoir initié au Tissage d'Aspect... il y a 7 ou 8 ans</i></span></div>
</div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com3tag:blogger.com,1999:blog-2379234023688747256.post-4751626718801658462015-01-21T19:48:00.001+01:002021-01-18T11:50:44.170+01:00Ouverture "Chrome-like" du SAP Gui Comme vous, j'aime bien automatiser les tâches répétitives.<br />
Les éditeurs de navigateur l'ont bien compris en proposant, par exemple, d'<b>ouvrir une collection d'onglet</b> au démarrage ou de réouvrir les onglets de la session précédente.<br />
<br />
Et pourquoi pas avec votre SAP Gui...<br />
<br />
La clé de la solution que je vous indique réside dans l'option "Définir transaction initiale" du menu de démarrage SAP Easy Access.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLcMLCYytmOHpJ2agL0YoBhEqOqWCZweQJuwH8dv64i1f5l6QFMjIgywrQwytCfVf_Go5w4FyYKasCHzAgIcIEppQKzRNIAhpmaesDfv68CSHrUdbhVY0CLaQ-GFJ-aUuaDc-AEhcPqZN/s1600/D%C3%A9finir+transaction+initiale.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLcMLCYytmOHpJ2agL0YoBhEqOqWCZweQJuwH8dv64i1f5l6QFMjIgywrQwytCfVf_Go5w4FyYKasCHzAgIcIEppQKzRNIAhpmaesDfv68CSHrUdbhVY0CLaQ-GFJ-aUuaDc-AEhcPqZN/s400/D%C3%A9finir+transaction+initiale.png" width="400" /></a></div>
<br />
A l'aide de cette option, nous allons lancer un programme d'initialisation avec une variante. Sans aller dans la complexité, contentons-nous d'avoir un SELECT-OPTIONS de transactions pour ce programme.<br />
<br />
En exploitant la<b> méthode CL_RECA_GUI_SERVICES=>CALL_TRANSACTION</b>, il est très simple d'ouvrir un nouveau mode (une nouvelle fenêtre SAP Gui) pour une transaction donnée.<br />
L'écran de lancement est traité avec un (encore plus) simple CALL TRANSACTION.<br />
<br />
Et voilà : n transactions automatiquement ouvertes par une simple connexion.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-KLP78aTxGm-_MlNlWYEacBoJKQx0jKePT-KUwid3uHK6vNYaT2AUxg63mFNCzIJ5U4gLGJpCCl5aAFc_-c28FebKxJa9GU9M2VUl_TBr2IgLzEq_mCZjDFGCqTD8KGkcO_cVl1pNjcW/s1600/Taskbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-KLP78aTxGm-_MlNlWYEacBoJKQx0jKePT-KUwid3uHK6vNYaT2AUxg63mFNCzIJ5U4gLGJpCCl5aAFc_-c28FebKxJa9GU9M2VUl_TBr2IgLzEq_mCZjDFGCqTD8KGkcO_cVl1pNjcW/s400/Taskbar.png" width="400" /></a></div>
<br />
Le programme avec les instructions d'installation à <a href="http://goo.gl/xALSrR" target="_blank">télécharger</a>.Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-86740194902619505432014-08-22T16:03:00.001+02:002014-09-13T21:16:13.971+02:00Analyseur de rémunérationLaissons de côté (un temps, rassurez-vous) les sujets techniques et parlons "<b>rémunération</b>" ! :)<br />
<br />
Au sein d'Alti-TCS, j'ai développé un outil de comparaison des résultats de Paie - Payroll Compare - sur SAP. Cela m'a permis de côtoyer des fonctionnels Paie et d'appréhender un peu plus leur métier.<br />
<br />
Cela a également titillé mon intérêt pour la "<b>répartition des richesses</b>" au sein d'une entreprise, c'est pourquoi je vous propose un <a href="http://www.guillaumegarcia13.host-ed.me/Documents/Analyseur%20de%20r%e9mun%e9ration.xlsm" target="_blank"><b>petit outil Excel</b></a> afin de mieux visualiser cette dernière à partir de données de salaires triées (non nominatives !!). N'étant pas de formation Economique, j'ai découvert avec intérêt les <b>courbes de Lorenz</b> et l'<b>indice de Gini</b> : c'est ce que propose de calculer cet outil.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGjmNUrkalaAVyZhw8jitHmMWaNB0ASBXfBveWTR8fm4o_QCbe0nFH4jAW6JP879bmt1NsHsqECv_3jYapc00trOHv0kRNpJ8SWVmahK3mIfIJ6fbPBG32xRkvezcq3Rt0uOYY_tMnDevx/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGjmNUrkalaAVyZhw8jitHmMWaNB0ASBXfBveWTR8fm4o_QCbe0nFH4jAW6JP879bmt1NsHsqECv_3jYapc00trOHv0kRNpJ8SWVmahK3mIfIJ6fbPBG32xRkvezcq3Rt0uOYY_tMnDevx/s1600/Capture.PNG" height="253" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Je vous laisse découvrir le <a href="http://www.guillaumegarcia13.host-ed.me/Documents/Analyseur%20de%20r%e9mun%e9ration.xlsm" target="_blank"><b>fichier Excel</b></a> et me laisser un petit commentaire au besoin.Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0Narbonne, France43.184277 3.003077999999959542.9989225 2.6803544999999596 43.369631500000004 3.3258014999999594tag:blogger.com,1999:blog-2379234023688747256.post-12515567383164288802014-06-02T19:30:00.000+02:002014-06-07T23:09:44.978+02:00JavaScript pour développeurs ABAP... et AngularJS<i><b>Mise à jour</b> : 7-Juin-2014</i><br />
<br />
AngularJS est le framework MVW (Model-View-Whatever) de Google.<br />
Mais pour le maîtrisr, mieux vaut-il connaître un peu ses bases JavaScript.<br />
<br />
Voici, une simple compilation de la série "JavaScript for ABAP Programmers" par Chirs Whealy pour ceux (celles) qui seraient passé(e)s à côté.<br />
<br />
Merci Chris !!<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350179" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-1-introduction" target="_blank" title="JavaScript for ABAP Programmers - 1/7 Introduction">JavaScript for ABAP Programmers - 1/7 Introduction</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> </div>
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350367?startSlide=2" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-27-data-types" target="_blank" title="JavaScript for ABAP Programmers - 2/7 Data Types">JavaScript for ABAP Programmers - 2/7 Data Types</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> </div>
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350441?startSlide=2" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-37-syntax" target="_blank" title="JavaScript for ABAP Programmers - 3/7 Syntax">JavaScript for ABAP Programmers - 3/7 Syntax</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> </div>
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350481?startSlide=2" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-47-scope" target="_blank" title="JavaScript for ABAP Programmers - 4/7 Scope">JavaScript for ABAP Programmers - 4/7 Scope</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> </div>
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350530?startSlide=2" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-57-functions" target="_blank" title="JavaScript for ABAP Programmers - 5/7 Functions">JavaScript for ABAP Programmers - 5/7 Functions</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> </div>
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350567?startSlide=2" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-67-inheritance" target="_blank" title="JavaScript for ABAP Programmers - 6/7 Inheritance">JavaScript for ABAP Programmers - 6/7 Inheritance</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> </div>
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/31350594?startSlide=2" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px; max-width: 100%;" width="512"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://fr.slideshare.net/cwhealy/javascript-for-abap-programmers-77-functional-programming" target="_blank" title="JavaScript for ABAP Programmers - 7/7 Functional Programming">JavaScript for ABAP Programmers - 7/7 Functional Programming</a> </strong> from <strong><a href="http://www.slideshare.net/cwhealy" target="_blank">Chris Whealy</a></strong> <br />
<br />
Et pour aller plus loin, je conseille ces 2 excellents FlipBoards par <b><a href="http://weblogs.asp.net/dwahlin" target="_blank">Dan Wahlin</a></b><br />
<br />
<b>The JavaScript, HTML5 and CSS Magazine
</b><iframe height="512" src="https://flipboard.com/section/the-javascript%2C-html5-and-css-magazine-bmOTsK" width="512">
</iframe>
<br />
<br />
<b>AngularJS</b><br />
<iframe height="512" src="https://flipboard.com/section/the-angularjs-magazine-bbIMWS" width="512">
</iframe>
</div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-44142578125939782142014-04-24T22:59:00.000+02:002014-05-10T00:21:30.566+02:00Partage d'écran Androïd vers PCVous avez développé une magnifique application mobile sur votre smartphone ou tablette Androïd et voulez en faire la démonstration à vos collègues ou en clientèle ?<br />
<div>
Sans aller jusqu'à fournir le .apk à tout le monde, vous vous dîtes qu'un partage d'écran de votre terminal mobile serait du plus bel effet !</div>
<div>
Regardons quelques solutions (le panel n'est pas exhaustif !) pour ce faire :</div>
<div>
<br /></div>
<h4>
TeamViewer</h4>
<div>
Il s'agit d'un logiciel bien de prise de contrôle à distance bien connu désormais. </div>
<div>
Et bien, il est possible de prendre la main de votre terminal Androïd depuis votre PC (je n'ai pas poussé ma curiosité jusqu'à voir si je pouvais en prendre le contrôle depuis un iPad !! :))</div>
<div>
<br /></div>
<div>
Personnellement (j'ai un Samsung Galaxy S3 sous Androïd 4.3 non rooté), j'ai dû :</div>
<div>
<ul>
<li>installer ces 2 applications depuis le Google Play Store</li>
<ul>
<li><a href="https://play.google.com/store/apps/details?id=com.teamviewer.quicksupport.market" target="_blank">TeamViewer QuickSupport</a></li>
<li><a href="https://play.google.com/store/apps/details?id=com.teamviewer.quicksupport.addon.samsung" target="_blank">QS Addon: Samsung</a></li>
</ul>
<li>mettre à jour ma version de TeamViewer sur mon PC (en fait, j'utilise une version portable de TeamViewer qu'il est possible d'installer sur une simple clé USB)</li>
<ul>
<li><a href="http://portableapps.com/apps/utilities/teamviewer_portable" target="_blank">TeamViewer Portable</a></li>
</ul>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSR19eemmUt-gGrZV6_Y6RPL_ZhvKsj3vU_wY8e6jotKdND5jxWYJGFt-MZBotFdQKfvdLJ6SJ7EzwJSa9mRP2eIj9OGhL_1y_4-JEyA_iojbGa-qllYjEFJw9O4pHViuDaODQGXZzWQ4/s1600/image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSR19eemmUt-gGrZV6_Y6RPL_ZhvKsj3vU_wY8e6jotKdND5jxWYJGFt-MZBotFdQKfvdLJ6SJ7EzwJSa9mRP2eIj9OGhL_1y_4-JEyA_iojbGa-qllYjEFJw9O4pHViuDaODQGXZzWQ4/s1600/image.png" height="217" width="400" /></a></div>
<div>
<br /></div>
<div>
Le résultat n'est pas saisissant de fluidité mais reste acceptable pour du rendu peu dynamique (dommage pour vos dernières animations CSS3 ulta-travaillées...)</div>
</div>
<div>
<br /></div>
<div>
RM : à noter que vous avez également accès à des fonctionnalités telles que l'affichage du CPU, RAM et espace disque utilisés, désinstallation d'applications sur votre terminal, etc...</div>
<div>
<br /></div>
<h4>
AirDroid </h4>
<div>
Pour que <a href="https://play.google.com/store/apps/details?id=com.sand.airdroid" target="_blank">AirDroid</a> soit en mesure d'afficher l'écran de votre terminal mobile, il faut (malheureusement) que votre terminal soit rooté... et je n'ai donc pu le tester :-(</div>
<div>
Pour cela il faut, lancer AirDroid sur votre terminal et vous rendre avec votre PC à l'adresse http://web.airdroid.com (il y a de nombreuses autres façons de pouvoir connecter les 2 systèmes mais celui-ci est le plus simple)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzRGowswFEazOLxGCYfPhurB3AmH53tYVbT_JrHS3L6ZpH25d-bJbr6e8Mc5uNB2suSFNikB27RbSH-uM9qF7moF2MJHO5i7WpVvGLpBmWHUZ0H5aMiR9LFupWXE8GSmF6fLFCSEKsGG0/s1600/Capture+AirDroid.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEzRGowswFEazOLxGCYfPhurB3AmH53tYVbT_JrHS3L6ZpH25d-bJbr6e8Mc5uNB2suSFNikB27RbSH-uM9qF7moF2MJHO5i7WpVvGLpBmWHUZ0H5aMiR9LFupWXE8GSmF6fLFCSEKsGG0/s1600/Capture+AirDroid.PNG" height="285" width="400" /></a></div>
<div>
<br /></div>
<div>
Comme TeamViewer (je dirais même "mieux que TeamViewer"), AirDroid est capable d'accéder à de nombreuses fonctionnalités de votre terminal (contacts, sonneries, ...), d'installer des .apk, etc...</div>
<div>
<br /></div>
<div>
<h4>
Droid@Screen</h4>
</div>
<div>
Cette méthode est un peu longue à mettre en oeuvre (j'adore l'étape ou il faut <a href="http://www.syncios.com/blog/enable-developer-optionsusb-debugging-mode-on-devices-with-android-4-2-jelly-bean/" target="_blank">cliquer 7 fois sur un champ inactif</a> pour activer le mode développeur !!)</div>
<div>
<br /></div>
<div>
<i>Plus de news prochainement...</i></div>
<div>
<br /></div>
<h4>
Samsung Screen Mirroring</h4>
<div>
Je pensais pouvoir mettre ceci facilement en application mais la réalité a été tout autre... Mon Windows 7 n'est pas Miracast-compatible contrairement à Windows 8.1. De toute façon, la technologie a semble-t-il quelques soucis de jeunesse à résoudre.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Si vous voulez partager votre expérience, les commentaires vous sont grand ouverts.</div>
<div>
<br /></div>
<div>
<br /></div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com1tag:blogger.com,1999:blog-2379234023688747256.post-66928105207052478952014-04-12T16:15:00.000+02:002014-07-27T14:50:29.552+02:00Sérialisation ABAP vers JSON<h2>
Choisir son sérialiseur ABAP vers JSON</h2>
Vous voilà lancés dans un nouveau projet dans lequel le format d'échange sera <b><a href="http://www.json.org/" target="_blank">JSON</a></b> (JavaScript Object Notation) ? Félicitations !<br />
<br />
Nous en avions déjà parlé lors d'un <a href="http://guillaumegarcia13.blogspot.com/2013/08/json-et-abap.html" target="_blank">précédent billet</a>.
Une des solutions est d'utiliser la brique <b>SAP Gateway</b> qui est <a href="http://www.slideshare.net/SyambabuAllu/sap-netwaever-gateway-sp04-updated-document" target="_blank">capable de produire du JSON</a> mais cette brique supplémentaire est soumise à des coûts de licence, éventuellement des coûts d'infrastructure si vous souhaitez la positionner sur un serveur dédié, etc...<br />
<br />
Néanmoins, avoir un tel middleware dans votre paysage constitue un apport essentiel pour peu que vous commenciez à développer des interfaces pour mobiles par exemple !<br />
<br />
Restons dans un cadre plus restreint où vous cherchez surtout à fournir un premier flux JSON.<br />
Comment passer de vos données ABAP à ce format JSON ?<br />
<br />
<h3>
Offre de sérialisation ABAP vers JSON</h3>
Faisons un petit tour d'horizon de ce qui existe chez SAP et ce qui est proposé par la communauté des développeurs ABAP<br />
<br />
<b>SAP</b><br />
<ol>
<li>classe
CL_TREX_JSON_SERIALIZER</li>
<li>classe /SDF/CL_E2E_XI_ALERT_JSON_DOC (Note OSS <span class="L0S32">1743560</span>)</li>
<li>classe <a href="http://wiki.scn.sap.com/wiki/display/Snippets/One+more+ABAP+to+JSON+Serializer+and+Deserializer" target="_blank">/UI2/CL_JSON</a> (nécessite l'UI2 Add-on) [non testé]</li>
<li><a href="http://scn.sap.com/community/abap/blog/2013/01/07/abap-and-json" target="_blank">conversion native par le noyau</a> via CALL TRANSFORMATION (7.02 and 7.03/7.31 (Kernelpatch 116))</li>
</ol>
<b>Opensource</b><br />
<ol>
<li>ZJSON (<a href="https://sap.assembla.com/spaces/zjson/documents" target="_blank">Assembla</a> ou <a href="https://github.com/se38/zJSON" target="_blank">GitHub</a> qui a l'air plus récent) [version testée 0.2.0]</li>
<li><a href="https://code.google.com/p/json4abap/" target="_blank">json4abap</a></li>
<li><a href="https://code.google.com/p/smartjson/" target="_blank">smartJSON</a> (oublions celui-là en fait... il s'appuie sur le moteur Javascript du serveur ABAP)</li>
<li><a href="https://gist.github.com/mydoghasworms/2291540" target="_blank">json_util</a></li>
</ol>
Noter que les solutions ZJSON et classe /SDF/CL_E2E_XI_ALERT_JSON_DOC sont très proches car <a href="http://scn.sap.com/community/code-exchange/blog/2012/07/02/first-sap-code-exchange-project-reaches-sap-standard" target="_blank">l'un a servi à construire l'autre</a>. ;)<br />
<br />
<h3>
Validité du JSON produit</h3>
Tout d'abord, je vous recommande de valider le JSON produit à l'aide d'outils en ligne tel que <a href="http://jsonformatter.curiousconcept.com/">http://jsonformatter.curiousconcept.com</a>/ (qui liste en plus les erreurs rencontrées) avant d'arrêter votre décision !<br />
<br />
On pourrait croire que tous ces sérialiseurs produisent un JSON valide et bien c'est loin d'être le cas.<br />
Les solutions SAP 1) et 2) sont utilisées en interne par SAP et n'ont pas franchement vocation à être utilisés par nous autres développeurs. (autrement dit, pas sûr que le support SAP réponde favorablement à vos récriminations)<br />
Il y a également quelques particularités en ABAP telles que l'absence d'un type primitif booléen ou le format des dates à prendre en compte.<br />
<br />
<b>Protocole de test</b><br />
Toutes les solutions semblent relativement à l'aide avec la récursivité (structure/structure, table/table) donc on s'attardera sur le traitement des différents types ABAP.<br />
<br />
Voici la structure de test que nous allons sérialiser :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7W-dCOLPvhYMeVZX5etp_CjDio3nHWR4VQQ6MpnlUTw6uNAX7dRT17GTOd2XI3HqL0jtMqv6im1cQBnSW2qxyg-TLhPN7RTj0eWlcycNB_hRZiBweaaVLCnhF4nz9CRGM3aBrwAWXc7A/s1600/type+de+test.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7W-dCOLPvhYMeVZX5etp_CjDio3nHWR4VQQ6MpnlUTw6uNAX7dRT17GTOd2XI3HqL0jtMqv6im1cQBnSW2qxyg-TLhPN7RTj0eWlcycNB_hRZiBweaaVLCnhF4nz9CRGM3aBrwAWXc7A/s1600/type+de+test.PNG" height="192" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgblVdSyM7KM2uyHsbIJ9o0Bq2grOKF2NqWsAnPz7WK8qgR6Xj1rv2SNRTRNCTt9w7rJ6PH0DN6Aw-aGfnswFb05TFV__sKSSmxY3pcSdZ5EzE1MXAK77O1cmfPy_SNhlKyDEmyK5o7wsLj/s1600/Test+strcuture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgblVdSyM7KM2uyHsbIJ9o0Bq2grOKF2NqWsAnPz7WK8qgR6Xj1rv2SNRTRNCTt9w7rJ6PH0DN6Aw-aGfnswFb05TFV__sKSSmxY3pcSdZ5EzE1MXAK77O1cmfPy_SNhlKyDEmyK5o7wsLj/s1600/Test+strcuture.PNG" height="156" width="320" /></a></div>
<br />
<br />
<b>Résultat du test</b><br />
<b><br /></b>
<b>SAP</b><br />
1) la classe CL_TREX_JSON_SERIALIZER ne met pas de quotes autour du nom des attributs et ajoute des espaces autour de valeurs numériques (cf. <a href="http://scn.sap.com/community/mobile/blog/2012/09/24/serialize-abap-data-into-json-format">http://scn.sap.com/community/mobile/blog/2012/09/24/serialize-abap-data-into-json-format</a>)<br />
2) la classe /SDF/CL_E2E_XI_ALERT_JSON_DOC peut laisser des attributs sans valeur (les floats, chaines hexadécimales, ... ne semblent pas traités)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tGMu4GFApek8EFnH5hS0n8eub4p_LSBzxUXhyphenhyphenVRjPhuMLaYRK4I0U7rPrrrj2VD5Pf313pYFe7bQziayeHoYO9nY8qMcW8k0w86oSzQ0xj-fzk5ufvE5ctCNp9yKlYj_MRQevM3k2EXC/s1600/JSON+non+valide.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tGMu4GFApek8EFnH5hS0n8eub4p_LSBzxUXhyphenhyphenVRjPhuMLaYRK4I0U7rPrrrj2VD5Pf313pYFe7bQziayeHoYO9nY8qMcW8k0w86oSzQ0xj-fzk5ufvE5ctCNp9yKlYj_MRQevM3k2EXC/s1600/JSON+non+valide.PNG" height="207" width="400" /></a></div>
<br />
3) non testé<br />
4) sans surprise, cette solution produit un JSON valide dans tous les cas<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYb3ptPlGRKyIkFmiKKE1YyOY-2nOQQRRDAA9w9w5u4LIJIu3h6yMiutC7slr2CIDDU9G7Q6yvTbT4kFIp7lXVEu_taoaeOn-fr_QKOwTpLCeFaE9Fui4ZHmmiwcL1ysuC58Usym4TOT9/s1600/kernel.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYb3ptPlGRKyIkFmiKKE1YyOY-2nOQQRRDAA9w9w5u4LIJIu3h6yMiutC7slr2CIDDU9G7Q6yvTbT4kFIp7lXVEu_taoaeOn-fr_QKOwTpLCeFaE9Fui4ZHmmiwcL1ysuC58Usym4TOT9/s1600/kernel.PNG" height="163" width="400" /></a></div>
<br />
<br />
<b>Opensource</b><br />
1) idem SAP 2)<br />
2) json4abap ne produit vraiment pas du bon JSON...!<br />
il oublie d'entourer les attributs de quotes (noter qu'il laisse les attributs en majuscules comme il est d'usage en ABAP - et comme le fait la solution SAP 3) - mais ne pas oublier que JavaScript est sensible à la casse et que l'usage veut que les attributs y soient en minuscules, les majuscules étant plutôt réservées aux constantes), qu'il ne traite pas tous les types (on était prévenu sur la page d'accueil du projet !) et qu'il a implicitement converti le type NUMC en entier (en raison de l'absence de quotes)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzgd_sEETNXEnBkDgV7hIl2xjm9vyv9lXcfXJeprDYGgXvzdtQRrV0kom870zQDsHrju6f9cU0Cx3RrwsdOK0gjy50FaPqBH589h7IxTRBv0nwkieZsONF_0ft7bLZus6roO-Y9RbGVuPU/s1600/json4abap+invalide.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzgd_sEETNXEnBkDgV7hIl2xjm9vyv9lXcfXJeprDYGgXvzdtQRrV0kom870zQDsHrju6f9cU0Cx3RrwsdOK0gjy50FaPqBH589h7IxTRBv0nwkieZsONF_0ft7bLZus6roO-Y9RbGVuPU/s1600/json4abap+invalide.PNG" height="265" width="400" /></a></div>
3) trop <i>smart</i> à <a href="http://scn.sap.com/people/wiktor.nyckowski/blog/2010/01/26/smartjson--lightweight-json-library-for-abap" target="_blank">installer</a>... oublions-le !<br />
4) json_util ne se débrouille pas si mal. Certes, il a converti en entier le NUMC mais au moins il produit un JSON valide<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2wqF5QdPPmkLrNDga-M2VADJi1OVZke3fYY4l1z0oyKkSFkmoTGFaMta8C6iC1jzt0TBqrILW6rCbiUkoEK-qel6GYH8qtmOqBjpxWmEujBFg_rVBBk2kHMUCFYw9tcIaPq0IZWMA-AJ/s1600/json_util.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2wqF5QdPPmkLrNDga-M2VADJi1OVZke3fYY4l1z0oyKkSFkmoTGFaMta8C6iC1jzt0TBqrILW6rCbiUkoEK-qel6GYH8qtmOqBjpxWmEujBFg_rVBBk2kHMUCFYw9tcIaPq0IZWMA-AJ/s1600/json_util.PNG" height="162" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h3>
Conclusion</h3>
<div>
Malgré une offre prolifique, compte-tenu des résultats de validité, le choix est assez restreint. Mon top 3 serait le suivant :</div>
<div>
<ol>
<li>conversion native par le noyau via CALL TRANSFORMATION</li>
<li>ZJSON / classe /SDF/CL_E2E_XI_ALERT_JSON_DOC (en faisant attention au format float, etc...)</li>
<li>json_util</li>
</ol>
</div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-27777502414301932692013-10-24T23:07:00.004+02:002013-10-24T23:55:15.067+02:00AngularJS : le framework architectural Web de GoogleSi vous n'avez pas vécu coupé du monde (donc sans Internet...) ces derniers mois, vous avez certainement entendu parler d'<b>AngularJS</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://angularjs.org/img/AngularJS-large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="http://angularjs.org/img/AngularJS-large.png" width="320" /></a></div>
<br />
J'avais déjà évoqué ce <b>framework architectural</b> lors de mon <a href="http://guillaumegarcia13.blogspot.fr/2013/10/brf-le-moteur-de-regles-metier-de-sap.html" target="_blank">dernier billet sur BRF+</a>.<br />
<br />
Pas grand-chose à voir avec SAP me direz-vous ? Oui et non : oui car AngularJS est une solution Open source largement développée par Google; non car votre serveur d'application NetWeaver est capable de servir aussi bien des données à une application SAP qu'à une application non-SAP ! :)<br />
Ainsi, avec les<a href="http://guillaumegarcia13.blogspot.fr/2013/08/json-et-abap.html" target="_blank"> nouvelles fonctionnalités de NW 7.02</a> (version qui commence même à dater maintenant), vous pouvez<b> facilement passer d'un format ABAP à un format JSON et réciproquement</b> ce qui rend les échanges avec notre application AngularJS particulièrement aisés.<br />
<br />
Pour cette entrée en matière, je vous propose simplement de voir un petit "sélecteur localisateur" (largement inspiré de http://tympanus.net/Tutorials/Cust"omDropDownListStyling/index3.html) conçu par votre serviteur.<br />
<br />
Cet exemple vous est servi par le <b>service en ligne Plunker</b> (concurrent de JSFiddle) mais qui a le bon goût d'être largement écrit... en AngularJS ! ;)<br />
<br />
<i>Merci de répondre positivement à la demande de votre navigateur concernant votre géolocalisation pour profiter pleinement de l'exemple.</i><br />
<br />
<div style="text-align: center;">
<br /></div>
<iframe src="http://embed.plnkr.co/A0dtWz/" style="border: 0px; height: 300px; text-align: center; width: 400px;"></iframe>
<br />
<br />
A bientôt !Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-5911634549448035922013-10-01T23:28:00.000+02:002013-10-02T09:28:19.955+02:00BRF+ : le moteur de règles métier de SAPDans le cadre de ma mission actuelle, la <b>solution BRF+</b> (Business Rules Framework) a fait son chemin lors de la mise en place d'un <b>menu pour des services ESS</b> (Employee Self-Service) développés en spécifique (AngularJS au-dessus d'un SAP HCM) pour un grand groupe cosmétique. <span style="font-size: x-small;">(NDLR : principe similaire aux <a href="http://scn.sap.com/people/amir.madani/blog/2007/01/05/create-dynamic-xss-homepages-with-static-services-using-a-simple-proxy-class" target="_blank">classes proxy</a> qui existaient pour la solution standard mais en BRF+ cette fois)</span><br>
<br>
Plusieurs avantages pour ce moteur de règles métiers apparu avec l'Enhancement Package 1 pour SAP NetWeaver (SAP NW 7.01) :<br>
<ul>
<li>une lisibilité des règles par tous</li>
<li>une maintenance possible par une population pas forcément rompu au langage de développement ABAP (il faut quand même être très à l'aise avec l'outil informatique !)</li>
<li>une performance correcte (surtout en NW 7.02+ a priori) du fait que le code est généré en ABAP Objects</li>
</ul>
<div>
<span style="color: #cc0000; font-family: Georgia, Times New Roman, serif;"><i>Petite mise en garde : la modélisation sous BRF+ est néanmoins plus longue que pour du code ABAP, il ne faut la réserver aux seules règles d'évoluer fréquemment. Vous savez celles pour lesquelles on vient vous voir au moins 1 fois par mois en vous demandant "Quelle est la règle ?"</i></span></div>
<div>
<br></div>
<div>
Si la table de décision répondra à 80% des besoins,</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.carstenziegler.com/BRFplus/Decision_Table.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="http://www.carstenziegler.com/BRFplus/Decision_Table.png" width="400"></a></div>
<div style="text-align: center;">
<span style="color: #666666; font-family: Verdana, sans-serif; font-size: x-small;">Source : SCN (par le grand guru de BRF+ : Carsten Ziegler)</span></div>
<br>
<div class="separator" style="clear: both; text-align: left;">
il y a pléthore d'expressions pour arriver à modéliser les règles les plus complexes auxquelles votre MOA aura pu penser... :)</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>arbre de décision</li>
<li>détermination dynamique de l'expression à appeler</li>
<li>lecture d'une table ABAP</li>
<li>module fonction ABAP / méthode de classe ABAP</li>
<li>...</li>
</ul>
<br>
<div class="separator" style="clear: both; text-align: left;">
Un aspect déroutant au début : les Data Objects sont plus que des simples types (comme pourraient l'être des objets du DDIC) mais de véritables variables d'où un mapping nécessaire lors de l'appel d'une fonction BRF+ par exemple.</div>
<div class="separator" style="clear: both; text-align: left;">
Enfin, <a href="http://scn.sap.com/docs/DOC-8824" target="_blank">BRF+</a> dispose d'une API très complète de manipulation de ses propres objets ce qui peut être bien utile quand tout a été correctement référencé dans de beaux fichiers Excel. :D</div>
<div class="separator" style="clear: both; text-align: left;">
<br></div>
<div class="separator" style="clear: both; text-align: left;">
<br></div>
<div>
<br></div>
<br>
<br>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-72741629617048763292013-08-16T19:03:00.000+02:002014-04-12T16:55:20.824+02:00JSON et ABAP<div style="background-color: white; font-family: tahoma, arial, sans-serif; font-size: 13px; margin-bottom: 1em; margin-top: 1em; padding: 0px;">
SAP a fait évoluer le noyau ABAP pour prendre en compte des fonctionnalités JSON.</div>
<div style="background-color: white; font-family: tahoma, arial, sans-serif; font-size: 13px; margin-bottom: 1em; margin-top: 1em; padding: 0px;">
Ce qui suit est disponible à partir de la version 7.02 (il s’agit d’un backport de la 7.40 vers la 7.31 et la 7.02)<br />
Voir le blog d’un des gourous, Horst Keller, sur le sujet (ainsi que les commentaires qui sont tout aussi instructifs sinon plus !) :<br />
<a href="http://scn.sap.com/community/abap/blog/2013/01/07/abap-and-json">http://scn.sap.com/community/abap/blog/2013/01/07/abap-and-json</a></div>
<div style="background-color: white; font-family: tahoma, arial, sans-serif; font-size: 13px; margin-bottom: 1em; margin-top: 1em; padding: 0px;">
J’ai relevé 2 apports intéressants :</div>
<ul>
<li>une conversion ABAP <-> JSON prise en charge par le Kernel (on peut en espérer une performance bien meilleure, à vérifier…)<!-----><!-----><!-----><!-----><!-----><!-----></-></li>
<li>une visualisation dédiée des variables JSON dans le débugger</li>
</ul>
<br />
<div style="background-color: white; font-family: tahoma, arial, sans-serif; font-size: 13px; margin-bottom: 1em; margin-top: 1em; padding: 0px;">
Un petit aperçu du dernier point</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrExim2ockCX6g5RbqGyRCdFD2WMCPWoE9fUELNthH2WbgPVOCow2u0j1lAFMYSG7v0cSZZRDc4-3b8WVryWxAfFNPBtBQS5FrkDWwGuMaQyE7HJEhZZzrM7-E5ATqbSIjc8tTPh4aS0II/s1600/JSON+debug.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrExim2ockCX6g5RbqGyRCdFD2WMCPWoE9fUELNthH2WbgPVOCow2u0j1lAFMYSG7v0cSZZRDc4-3b8WVryWxAfFNPBtBQS5FrkDWwGuMaQyE7HJEhZZzrM7-E5ATqbSIjc8tTPh4aS0II/s400/JSON+debug.png" height="381" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Trebuchet MS, sans-serif;">Source : SDN</span></td></tr>
</tbody></table>
<div style="background-color: white; font-family: tahoma, arial, sans-serif; font-size: 13px; margin-bottom: 1em; margin-top: 1em; padding: 0px;">
Il existe des bibliothèques JSON si vous n'êtes pas encore dans cette version. <br />
Attention au sérialiseur estampillé TREX (classe CL_TREX_JSON_SERIALIZER) qui ne produit pas un JSON valide.<br />
<br />
Je vous recommande :<br />
<a href="http://wiki.sdn.sap.com/wiki/display/Snippets/JSON+and+ABAP">http://wiki.sdn.sap.com/wiki/display/Snippets/JSON+and+ABAP</a><br />
<a href="https://code.google.com/p/zjson/">https://code.google.com/p/zjson/</a></div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com2tag:blogger.com,1999:blog-2379234023688747256.post-42098311422120257692013-01-27T16:02:00.000+01:002013-11-04T11:03:21.288+01:00URL d'une image du MIME et NWBC for HTML<h4>
NWBC for HTML</h4>
Rappelez-vous, le <a href="http://guillaumegarcia13.blogspot.fr/2010/04/sap-netweaver-business-client-30.html">NetWeaver Business Client</a> est un nouveau client pour les écrans SAP Gui, Web Dynpro, etc...
Naturellement, SAP a laissé une (toute petite) latitude pour personnaliser l'interface utilisateur à l'aide d'une image. (cf. capture ci-dessous dans la partie inférieur du bandeau latéral gauche)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCUFlFmdho8IND47YAtXUY7MRu_gs4kKCQhXc5wEzC2p-mkRQCNPynSP9O8rw5iGG_casrVYZfAyntnTZXakTITkYWxIWJMXISQWChXtc4lCvkJo-PqkeAtm61v6qHPUh5n3krE7KGLeB/s1600/nwbc.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCUFlFmdho8IND47YAtXUY7MRu_gs4kKCQhXc5wEzC2p-mkRQCNPynSP9O8rw5iGG_casrVYZfAyntnTZXakTITkYWxIWJMXISQWChXtc4lCvkJo-PqkeAtm61v6qHPUh5n3krE7KGLeB/s320/nwbc.PNG" width="320" /></a></div>
<br />
<h4>
MIME Repository</h4>
C'est <a href="http://help.sap.com/saphelp_nw70ehp2/helpdata/en/46/bb182fab4811d4968100a0c94260a5/frameset.htm" target="_blank">là</a> où sont stockés les fichiers tels que les images, feuilles de style, Javascript... qui ont vocation a être utilisés sur le Web (dans les BSP, Web Dynpro, Web Templates BI, etc...). Il arrive même qu'on y stocke des fichiers (aide en ligne par exemple) au format PDF ou encore des .doc et .xls, bref ne nous limitons pas ! :)<br />
Pour accéder à ces documents <u>directement</u>, ce n'est pas évident (non pas que ce soit impossible en standard comme on le verra). Et surtout, <b>que de circonvolutions nécessaires alors que le chemin "naturel" est tout trouvé : celui du MIME !</b><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5uWOmsTI7Lyqt07L6X0xEfyxewuv3sDOW_Bha0QNx308y_ubLG4M2I6VxTCtdpV9x-OUklWTwfhzSszSO3Lmg1CT3brts5YdDMWEP9JCiM728jCdprSP_j0PIbEYvunme2I8X9PsQ0va/s1600/Chemin+MIME.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5uWOmsTI7Lyqt07L6X0xEfyxewuv3sDOW_Bha0QNx308y_ubLG4M2I6VxTCtdpV9x-OUklWTwfhzSszSO3Lmg1CT3brts5YdDMWEP9JCiM728jCdprSP_j0PIbEYvunme2I8X9PsQ0va/s400/Chemin+MIME.gif" width="367" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666; font-family: Verdana, sans-serif;">Source : Help SAP</span></td></tr>
</tbody></table>
<br />
<h4>
Configuration de NWBC</h4>
Une table de configuration est mise à disposition : <b>NWBC_CFG</b> (anciennement, on utilisait plutôt NWBC_CONFIG). Cette table contient des paramètres d'affichage dont vous trouverez la liste à cette adresse :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3Is3AE2-Yfxy3LBWwxg_V7CNA1NtS-a77B8mKn3527xrFNvsyCnT6DjDXC4OCBD7IxQOHfm6jeuq72GPzQbB36z1h8krPOQMs6mOVZqnvWNKVJjZ90GUsDbcaZLhq8biEXgTuVj5swHf/s1600/nwbc_cfg.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3Is3AE2-Yfxy3LBWwxg_V7CNA1NtS-a77B8mKn3527xrFNvsyCnT6DjDXC4OCBD7IxQOHfm6jeuq72GPzQbB36z1h8krPOQMs6mOVZqnvWNKVJjZ90GUsDbcaZLhq8biEXgTuVj5swHf/s400/nwbc_cfg.PNG" width="400" /></a></div>
<br />
Le paramètre qui nous intéresse est BRANDING_IMAGE que l'on va associer à une URL de notre crû pointant vers un service ICF maison. Notez comment l'URL paramétrée (http://<serveur>:<port>/sap/zmime/SAP/PUBLIC/<votre fichier>) contient le nom du service suivi du chemin vers le fichier du logo stocké dans le MIME Repository.</votre></port></port></serveur></server><br />
<br />
<h4>
Service ICF</h4>
Basiquement, c'est derrière ce service que se passe tous les traitements des requêtes HTTP(S).<br />
Nous en créons donc un nouveau avec un gestionnaire de service sous la forme d'une classe ABAP OO et y implémentons l'interface IF_HTTP_EXTENSION.<br />
Le coeur de la solution repose sur l'appel au module fonction standard 'SDOK_GET_PHIO_ACCESS' qui retourne le contenu du fichier du MIME Repository. Il ne nous restera plus qu'à renvoyer ce contenu dans la réponse HTTP.<br />
<br />
Voici le <a href="http://goo.gl/VwY0X" target="_blank">code complet</a> de classe (bien entendu, si un membre de votre équipe ou vous-même étiez amenés à l'utiliser en Production, nous nierons avoir eu connaissance de vos agissements...). Il faut créer une classe ZCL_HTTP_MIME en implémentant l'interface IF_HTTP_HANDLER.<br />
<br />
<br />
<span style="font-size: x-small;">Pour ceux qui ont tout suivi et qui se demande comment faire pour appeler cette même image de façon standard, sans une lilgne de spécifique, le fameux module fonction renvoie également une URL d'appel mais de la forme :</span><br />
<span style="font-size: x-small;">
http://<serveur>:<port>/sap/bc/contentserver/<mandt>?get&pVersion=0045&contRep=MIME&docId=F2E0E661BCA5F1ED291A78156D38AD2022E0E661BCA5F1ED291A78156D3BF5202&compId=<fichier></fichier></mandt></port></serveur></span><br />
<br />
<br />
<br />Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com1tag:blogger.com,1999:blog-2379234023688747256.post-22663382562706236592012-10-07T15:10:00.000+02:002012-10-07T23:21:48.853+02:00Les travers de la traduction (ou les traductions de travers... ?)Certes, les utilisateurs de langue française ne sont sans doute pas les plus représentés parmi l'ensemble des utilisateurs de SAP. Les traductions françaises sont régulièrement absentes de notre ERP préféré (au moins chez mes clients, et vous ?). L'anglais et l'allemand sont bien mieux lotis !!<br />
<br />
Par contre, pire qu'une traduction absente (on peut toujours se connecter en anglais), il y a la <b>traduction trompeuse</b> dont voici un éloquent exemple dans le domaine "Gestion des talents" (ou Talent Management pour les anglophones)<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://goo.gl/u7sWu" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="http://goo.gl/u7sWu" width="400" /></a></div><div style="text-align: center;"><span style="color: #666666; font-family: Trebuchet MS, sans-serif;">Français à gauche, anglais à droite</span></div><br />
Que dire de la traduction proposée qui invente des types d'objets (FE, GT) ou renvoie vers des types d'objets différents (PC = Centre de Profit et pas Personne Centrale !!)Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-72442138982530002312012-06-23T01:11:00.001+02:002012-06-26T23:03:58.855+02:00Bientôt SAP HANA pour l'ERPVous imaginez-vous pouvoir traiter la paie de vos salariés en 6,31 secondes... ? C'est peut-être pour demain avec <b>SAP HANA</b> ("anciennement connu sous" l'acronyme <u>H</u>igh <u>AN</u>alytics <u>A</u>ppliance, un peu <a href="http://www.francetv.fr/culturebox/prince-et-le-cauchemar-de-son-changement-de-nom-3075" target="_blank">comme Prince</a> puisqu'<a href="http://www.erpexecutive.com/2011/08/sap-hana-updating-the-naming-conventions/" target="_blank">il ne s'agit plus d'un acronyme</a>) ! :)<br />
<br />
En effet, SAP a fait l'annonce, par l'intermédiaire de son CTO (Chief Technical Officer) Vishal Sikka (<a href="https://twitter.com/vsikka" target="_blank">@vsikka</a>),<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.sap.com/corporate-en/investors/governance/images/photos/Vishal_Sikka.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.sap.com/corporate-en/investors/governance/images/photos/Vishal_Sikka.jpg" /></a></div>
<div style="color: #666666; font-size: xx-small; text-align: center;">
Photo : source SAP</div>
<br />
que SAP HANA sera <a href="http://goo.gl/XaP4x" target="_blank">bientôt disponible pour</a> SAP Business Suite et donc <a href="http://goo.gl/XaP4x" target="_blank">notre ERP préféré</a>. Une petite révolution est donc en marche... est-ce que cela signe (un peu) le déclin de l'ABAP au profit du <a href="http://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/20514d3c-f4e1-2e10-55a5-dc9a3efc0639?QuickLink=index&overridelayout=true" target="_blank"><b>SQLScript</b></a> ? En effet, pour exploiter pleinement HANA et son calcul en mémoire, il faudra certainement que SAP réécrive une partie de l'existant ABAP pour le porter sur HANA, le but étant non plus d'optimiser le traitement sur le serveur d'application (comme on le fait souvent en ABAP aujourd'hui) mais sur le SGBD.<br />
<br />
Pour la petite histoire, SAP s'est même payé le luxe (pour faire un peu de <i>buzz</i> certainement...) de monter une <a href="http://goo.gl/ZUawS" target="_blank">machine sur le cloud avec pas moins de... 100 To de mémoire</a> (vous avez bien lu !). Tous les clients ne pourront sans doute pas s'offrir une telle machine estimée à 4 millions de dollars, surtout en cette période de crise.<br />
<br />
Vous avez déjà une expérience d'HANA ? N'hésitez pas à la partager dans les commentaires.Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com1tag:blogger.com,1999:blog-2379234023688747256.post-14684129895622089042012-05-20T01:05:00.000+02:002012-06-11T14:57:47.855+02:00Mobile : l'illusion de la solution ubiquitaire<h3>
<b>La jungle mobile</b></h3>
Face à la multitude de solutions mobiles, difficile de faire un choix pour le développeur : solutions purement natives (laissant forcement de côté une bonne partie des utilisateurs , ne serait-ce qu'iOS ou Android), HTML5 ou solutions hybrides.<br />
<br />
Laissons, un temps, les solutions natives de côté qui - côté ubiquité - sont hors course !<br />
<h4>
<b>AIR mobile</b></h4>
Il y a quelque chose d'intéressant dans <a href="http://guillaumegarcia13.blogspot.fr/2012/01/air-mobile-et-google-spreadsheet.html" target="_blank">AIR mobile</a> avec ses Native Extensions, c'est qu'on peut forcément atteindre une fonctionnalité native du périphérique mobile quitte à en payer un effort de développement supplémentaire. Et puis, le framework apporte déjà des éléments quasi inaccessibles des solutions orientées Web. Une réutilisation non négligeable de/vers une version Desktop est également possible.<br />
<br />
Hélas, 2 fois hélas, Adobe est beaucoup moins actif ces derniers mois sur le créneau AIR mobile :<br />
<ul>
<li>l'accent est mis sur PhoneGap et on ne voit plus grand-chose sortir de chez Adobe</li>
<li>pas beaucoup de visibilité du côté de la fondation Apache qui a repris le flambeau de Flex</li>
</ul>
Il faut dire que l'<a href="http://www.developpez.com/actu/38757/Fin-au-developpement-d-Adobe-Flash-Player-pour-mobiles/" target="_blank">arrêt du Flash Player pour mobile</a> (trop de hardware, OS et software différents) n'a pas enthousiasmé les développeurs.<br />
Notons néanmoins l'apparition de la 3D (voici une <a href="http://iflash3d.com/flash-samples/florence/" target="_blank">vue virtuelle du Duomo de Florence</a> en 3D) mais pour nos applications d'entreprise, cela a peu de conséquence !<br />
<h4>
<b>HTML5, PhoneGap</b></h4>
Mais que reste-t-il ?<br />
Et bien, la victoire annoncée d'HTML5 est en train de faire (trop ?) pencher la balance : PhoneGap, Sencha et consorts tiennent le haut du pavé et même SAP <a href="http://www.news-sap.com/sap-drives-openness-and-choice-for-millions-of-mobile-app-developers/" target="_blank">noue des accords</a> avec ces acteur. <br />
<br />
Une <a href="http://www.appliness.com/infographic-decision-path-to-phonegap/" target="_blank">infographie</a> intéressante pour savoir quand utiliser PhoneGap.<br />
<br />
SAP propose d'ailleurs son propre framework HTML5 : SAP UI5.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://scn.sap.com/servlet/JiveServlet/downloadImage/38-65752-98686/620-218/Screen+Shot+2012-05-04+at+12.52.51.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="205" src="http://scn.sap.com/servlet/JiveServlet/downloadImage/38-65752-98686/620-218/Screen+Shot+2012-05-04+at+12.52.51.png" width="580" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="color: #666666;">Source : SAP (</span><a href="http://scn.sap.com/community/technology-innovation/blog/2012/05/04/using-neo-and-sapui5--part-2--hi-sap-ui5-may-i-introduce-you-to-neo" style="color: #666666;" target="_blank">blog</a><span style="color: #666666;"> de Rui Nogueira)</span></td></tr>
</tbody></table>
Encore une fois, on se heurte à quelques dures réalités :<br />
<ul>
<li>une forte présence de navigateurs anciens en entreprise (IE6 en tête) qui ne supporte pas HTML5 et CSS3 (est-ce que <a href="http://modernizr.com/" target="_blank">Modernizr</a>, dont l'objectif est de pallier certaines lacunes des navigateurs, change vraiment la donne ?)</li>
<li>la disparité de la prise en charge par les nouveaux navigateurs(cf. <a href="http://cainuse.com/">cainuse.com</a>)</li>
</ul>
Les développeurs doivent donc adopter une stratégie d'<a href="http://www.alsacreations.com/astuce/lire/996-amelioration-progressive-modernizr-et-selecteurs-css.html" target="_blank">amélioration progressive</a> (Progressive Enhancement dans la langue de Shakespeare) afin d'offrir la meilleure expérience à chacun.<br />
<h4>
Portal on Device</h4>
Une <a href="http://scn.sap.com/community/netweaver-portal/blog/2012/05/31/sap-netweaver-portal-on-device-sapphire-recap" target="_blank">nouvelle solution</a> à destination des utilisateurs du Portail SAP.<br />
Attention ! Ce n'est pas parce que vous pouvez accéder au Portail que les applications qui y sont hébergées fonctionneront sur votre terminal.<br />
<br />
<div style="color: #666666;">
Extrait de la <a href="https://service.sap.com/sap/support/notes/1705067" target="_blank">note OSS 1705067</a></div>
<blockquote class="tr_bq" style="color: #666666; font-family: Georgia,"Times New Roman",serif;">
<span style="font-size: x-small;">SAP recommends using <b>mobile-adapted applications</b> in the portal on device
environment. <b>Non-mobile supported UI technologies</b> (for example, Web
Dynpro, Business Server Page (BSP)) <b>may not be rendered correctly</b> or may
not be rendered at all on the mobile devices, depending on each UI
technology and/or specific implementation. <b>SAP UI technologies currently
do not support the mobile Product Availability Matrix </b>(PAM), and
therefore are not supported for portal on device.<br />Solution: <b>Customers
should adapt their applications</b> to match the correct form factor,
application complexity, and UI technology in order t<b>o run correctly on a
mobile device</b>. This adaptation usually <u><b>involves manually recreating
the user interaction layer</b></u> to suit the touch-mobile device
characteristics.</span></blockquote>
<br />
<br />
Et télechargez <a href="http://www.appliness.com/" target="_blank">Appliness</a>, c'est excellent !<br />
<div class="textwidget">
<img src="http://appliness.com/wp-content/uploads/2012/04/ipad-cover150may.png" /><br />
<a href="http://itunes.apple.com/au/app/appliness/id510636049"><img border="0" src="http://appliness.com/wp-content/uploads/2012/03/appStore.png" /></a> <a href="https://play.google.com/store/apps/details?id=com.appliness.applinessAndroid"><img border="0" src="http://appliness.com/wp-content/uploads/2012/03/googlePlay.png" /></a></div>Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-72441936253652260622012-01-08T00:29:00.001+01:002012-01-08T19:40:53.122+01:00AIR mobile et Google Spreadsheet<blockquote>
<span class="Apple-style-span" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b>Scénario classique</b> : vous souhaitez afficher une liste de valeurs ou un tableau sur une application mobile. Cette liste provient d'une base de données qui est mise à jour régulièrement par des administrateurs / gestionnaires.</span>
</blockquote>
<br />
De prime abord, on est tenté de penser : serveur Web, base de données, interface d'administration, ...<br />
Or, pour des besoins modestes, je vous propose une <b>approche full web</b> qui ne vous coûtera pas un centime !<br />
<br />
Ma proposition consiste à simplement gérer votre liste au sein d'une <b>Google Spreadsheet</b> (vous aurez besoin d'un compte Google pour ce faire) et à permettre à votre application AIR mobile d'y accéder.<br />
<i><span class="Apple-style-span" style="color: #990000;">Attention : à partir du moment où vous publiez votre Google Spreadsheet sur le Web, quiconque dispose de l'URL est capable de la visualiser même si elle est privée !</span></i><br />
<i><span class="Apple-style-span" style="color: #990000;"><br /></span></i><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYip4i6x95xqkLXChXO-rl_3oGmbzUg69Lq5zFMK6pbIfhyphenhyphenWaB78q_Kg18WMrWsDK6BlvVolC8RREJ3s4TujEsVlqR0MNmijEdpoZhtEs2UJ7YQ8_mvfGz0RXZVlS0PQe7uBaBBIOY9PLN/s1600/spreadsheet.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYip4i6x95xqkLXChXO-rl_3oGmbzUg69Lq5zFMK6pbIfhyphenhyphenWaB78q_Kg18WMrWsDK6BlvVolC8RREJ3s4TujEsVlqR0MNmijEdpoZhtEs2UJ7YQ8_mvfGz0RXZVlS0PQe7uBaBBIOY9PLN/s640/spreadsheet.PNG" width="576" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Malheureusement :<br />
<br />
<ol>
<li> Google <b>n</b>'autorise <b>pas</b> - via son <span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><a href="http://docs.google.com/crossdomain.xml" target="_blank">crossdomain.xml</a></span> - aux applications Flash d'accéder à ses fichiers</li>
<li>Google interdit à YQL - via son <a href="http://docs.google.com/robots.txt" target="_blank"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">robots.txt</span></a> - d'attaquer les URLs en http://docs.google.com/spreadsheet/... (ou tout autre url qui nous permettrait d'accéder à nos données)</li>
</ol>
Aussi, la plupart des solutions qu'on trouve sur le Web consiste donc à monter un petit serveur proxy pour s'affranchir de cette contrainte (qui en crée une nouvelle : la maintenance dudit serveur : qu'il soit physiquement chez vous, chez un hébergeur ou encore dans le cloud Google App Engine, Amazon, ...)<br />
Nous nous contenterons de simplement publier le fichier sur le Web (cf. Etape 1) ce qui lève cette restriction (<u>si quelqu'un a l'explication,</u> je suis preneur !!)<br />
<br />
En utilisant <a href="http://developer.yahoo.com/yql/">YQL</a> (Yahoo! Query Language), on va pouvoir attaquer notre Google Spreadsheet de façon puissante.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1-z_h8R3-lUzxiVzh0__lWtcqJ5WaSHNxsv5eXW6jiKOF6ji07X0tPBOu4HySiIIR59PkDQGOnVUdyHkCjxotH7BboomJSCQkmxVZ57yCy38COUUAIhOoH0Hxfo43ptWXcFmyMvXyRBj-/s1600/schema_AIR_YQL_GS.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1-z_h8R3-lUzxiVzh0__lWtcqJ5WaSHNxsv5eXW6jiKOF6ji07X0tPBOu4HySiIIR59PkDQGOnVUdyHkCjxotH7BboomJSCQkmxVZ57yCy38COUUAIhOoH0Hxfo43ptWXcFmyMvXyRBj-/s320/schema_AIR_YQL_GS.PNG" width="309" /></a></div>
<br />
<br />
<i>J'avoue adorer le fait que Yahoo! vienne un peu à la "rescousse" de Google :-)</i><br />
<br />
<b>Étape 1</b> : créer la Google Spreadsheet et la publier (Fichier -> Publier sur le Web) en cochant la publication automatique après modification<br />
<br />
<br />
<b>Étape 2</b> : construire la requête YQL. Pour cette partie, je vous conseille fortement la console YQL !<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKdAAsiKvwF_Gf6Vclu1koT2adIBaqEnwcgNH0e5912CdTdc64eOrbZbfDUVvBC6ILVd0EleijS6RzpADwr-ypFkjTBkEvDIHh2KlipEsYajG1qG1qEmjx4x2o9hpadXSgPonmXj11CjE/s1600/YQL_console.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKdAAsiKvwF_Gf6Vclu1koT2adIBaqEnwcgNH0e5912CdTdc64eOrbZbfDUVvBC6ILVd0EleijS6RzpADwr-ypFkjTBkEvDIHh2KlipEsYajG1qG1qEmjx4x2o9hpadXSgPonmXj11CjE/s640/YQL_console.PNG" width="576" /></a></div>
<br />
Exemple de requête avec clause WHERE :<br />
<a href="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D%22https%3A%2F%2Fdocs.google.com%2Fspreadsheet%2Fpub%3Fhl%3Dfr%26hl%3Dfr%26key%3D0ArrC4225dYxmdEJpWmI5Y1BPVlZWMTJIT0xqU2I3RFE%26output%3Dcsv%22%20and%20columns%3D%22personnalite%2Cfonction%2Cphoto%22%20and%20personnalite%20LIKE%20%22%25u%25%22&format=json">select * from csv where url="https://docs.google.com/spreadsheet/pub?key=0ArrC4225dYxmdG9LNFNvVjBPb2ZURGJpWVV6TG9Za0E&output=csv" and columns="personnalite,fonction,photo" and personnalite LIKE "%u%"</a><br />
<br />
<br />
<b>Étape 3</b> : consommer cette requête depuis AIR et exploiter le résultat<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNrymTujvGDiOaMn_y2Z0R4WdNnPoydJrDbCi6BTabOBuGHWZABcwTxraS1mqUmxTghG3QYt_C0noAed1ohOtcs_Dfdaz7pTuHO4B-VfEV-Bdvnz156HxkBp5rRWLlKGhR3g9U8ZpkXDOI/s1600/mobile_YQL_GS.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNrymTujvGDiOaMn_y2Z0R4WdNnPoydJrDbCi6BTabOBuGHWZABcwTxraS1mqUmxTghG3QYt_C0noAed1ohOtcs_Dfdaz7pTuHO4B-VfEV-Bdvnz156HxkBp5rRWLlKGhR3g9U8ZpkXDOI/s640/mobile_YQL_GS.PNG" width="576" /></a></div>
<br />
<br />
Les références vers le projet Flash Builder et le fichier AIR (pour bureau)<br />
Projet Flash Builder 4.6 : <a href="http://goo.gl/pgVaQ" target="_blank">BlogYQL.fxp</a><br />
Package AIR pour le bureau : <a href="http://goo.gl/kDDNL" target="_blank">BlogYQL.air</a><br />
<br />
<br />
Quelques références qui m'ont aider à construire ce billet :<br />
<ol>
<li><a href="http://www.ravelrumba.com/blog/json-google-spreadsheets/" target="_blank">http://www.ravelrumba.com/blog/json-google-spreadsheets/</a></li>
<li><a href="http://net.tutsplus.com/tutorials/other/how-to-create-a-web-service-in-a-matter-of-minutes/" target="_blank">http://net.tutsplus.com/tutorials/other/how-to-create-a-web-service-in-a-matter-of-minutes/</a></li>
<li><a href="http://active.tutsplus.com/tutorials/tools-tips/quick-tip-using-google-app-engine-as-a-proxy-server/" target="_blank">http://active.tutsplus.com/tutorials/tools-tips/quick-tip-using-google-app-engine-as-a-proxy-server/</a></li>
</ol>
PS : Merci à Pierre B. pour son aide sur YQL dans la rédaction de ce billet<br />
<br />Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com4tag:blogger.com,1999:blog-2379234023688747256.post-64055996285993208942011-10-23T01:31:00.000+02:002011-10-23T01:45:07.751+02:00Génération de données de testsLes<b> tests </b>sont un passage impératif du processus de développement.
Ils garantissent la qualité du produit livré au client.<br />
<br />
Dans nos environnements de développements, il arrive parfois que nous manquions de données de test.<br />
Or, il existe de petits outils comme <a href="http://www.generatedata.com/">generatedata.com</a> (et <a href="http://beta.generatedata.com/">beta.generatedata.com</a>) qui permettent facilement de générer des jeux de données volumineux en quelques secondes. <span style="font-size: x-small;">(une limitation de 200 enregistrements est imposée si on se s'enregistre pas)</span><br />
Que ce soit pour votre application SAP (pour contrôler une saisie de donnée par exemple) ou pour alimenter une base de données SQL quelconque, cet outil est d'une aide précieuse.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0WNTrFGUGMbBvgHb6xrp2sZGfNp5XVGzsunFoQLqQDXVK7sUVPERnsNcX3rKWiMkp9j4aocasO1lAthm8_PLocdm1cOEdnLCry9mH0FDhYLBjxtThvBQNNiw1WdcxnZJ35bs43nCvwHm/s1600/generatedata.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0WNTrFGUGMbBvgHb6xrp2sZGfNp5XVGzsunFoQLqQDXVK7sUVPERnsNcX3rKWiMkp9j4aocasO1lAthm8_PLocdm1cOEdnLCry9mH0FDhYLBjxtThvBQNNiw1WdcxnZJ35bs43nCvwHm/s400/generatedata.PNG" width="400" /></a></div>
<br />
Les formats d'export proposés sont : HTML, Excel, XML, CSV, SQL<br />
<br />
Certes, la configuration du résultat reste assez sommaire mais en tant que première étape de construction de votre jeu de test, il fait merveille.<br />
<br />
Bons tests !Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com1tag:blogger.com,1999:blog-2379234023688747256.post-71431859413297095972011-08-26T16:06:00.000+02:002012-09-12T10:47:50.534+02:00New Normal dans le monde SAP ?Cela fait quelque temps que l'on m'avait recommandé cette vidéo "<b>New Normal</b>" par <a href="http://www.peterhinssen.com/">Peter Hinssen</a> qui traite de l'évolution des métiers de l'IT et des rapports avec nos clients du métier et je la revois aujourd'hui avec autant de plaisir et d'intérêt. :)<br />
<br />
<!--
<img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 400px; width: 530px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="YABON_videoPlayer" data-original-id="YABON_videoPlayer" />
-->
<br />
<div style="text-align: center;">
<!--
<iframe height="400" src="http://sites.google.com/site/guillaumegarcia13/repository/YABON_videoPlayer.swf" width="500">
</iframe>
-->
<video controls="controls" height="409" id="viddlerVideo-bb1a3da7" poster="http://www.viddler.com/thumbnail/bb1a3da7/" src="http://www.viddler.com/file/bb1a3da7/html5mobile/" type="video/mp4" width="545" x-webkit-airplay="allow">
</video>
</div>
<div style="text-align: center;">
<span style="font-size: x-small;"><span style="font-family: "Trebuchet MS",sans-serif;"><span style="color: #666666;">Source : <a href="http://www.viddler.com/player/bb1a3da7/0/">http://www.viddler.com/player/bb1a3da7/0/</a></span></span></span><br />
<br />
<div style="text-align: left;">
Que serait le "New Normal" dans le monde SAP : expérience utilisateur (RIA), Mobilité, Hana, Cloud-Computing ?</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Nous n'y sommes pas encore car l'inertie des systèmes d'information (en particulier des ERP tels que celui de SAP) est énorme. Aussi, comme le fait remarquer Peter Hinssen dans sa présentation : "<i style="font-family: Georgia,"Times New Roman",serif;">Work = period during the day where we have to use old technology</i>".</div>
<div style="text-align: left;">
Mais petit à petit, nous allons voir arriver ces nouvelles applications mobiles d'entreprise que tout le monde prédit !</div>
<div style="text-align: left;">
<br />
<i>RM : le lecteur vidéo est en Flex de ma conception ! :) (ceux qui connaissant le spark VideoPlayer savent que cela ne demandent pas un effort surhumain)</i></div>
<div style="text-align: left;">
<br /></div>
</div>
Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0tag:blogger.com,1999:blog-2379234023688747256.post-91505161422874382742011-03-26T19:15:00.001+01:002011-03-26T19:21:11.576+01:00Anecdote germaniquePetite histoire de clavier.<br />
<br />
Tous les consultants, développeurs et (souvent) utilisateurs de SAP ERP et R/3 connaissent la combinaison <b>CTRL+Y</b> qui permet de sélectionner une zone de texte sur un écran SAP Gui (dans un spool, un ALV, un dynpro, ...)<br />
<br />
Sans doute aurez-vous noté que le <b><span class="il">CTRL</span>+Y</b> n'est pas vraiment une combinaison "évidente" sur nos claviers ?<br />
Quelle idée ont encore eu nos voisins allemands de Walldorf, car on connaît les incontournables combinaisons suivantes :<br />
<ul><li><span class="il">CTRL</span>+X : Couper</li>
<li><span class="il">CTRL</span>+C : Copier </li>
<li><span class="il">CTRL</span>+V : Coller</li>
</ul><br />
<span class="il">CTRL</span>+Y : c'est quasiment le claquage assuré de l'index gauche !! <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/KB_Germany.svg/400px-KB_Germany.svg.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/KB_Germany.svg/400px-KB_Germany.svg.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-size: xx-small;"><i style="color: #666666;">Source : <a href="http://en.wikipedia.org/wiki/Keyboard_layout#Germany_and_Austria_.28but_not_Switzerland.29" target="_blank">http://en.wikipedia.org/wiki/<wbr></wbr>Keyboard_layout#Germany_and_<wbr></wbr>Austria_.28but_not_<wbr></wbr>Switzerland.29</a></i></span></td></tr>
</tbody></table><br />
Et là, ne comprend-on pas un poil mieux ?! ;-)Guillaume Garciahttp://www.blogger.com/profile/11750980151859672293noreply@blogger.com0