Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

How to connect 1980 and 2018

324 vues

Publié le

Doctolib offers doctors and hospitals a software solution with a full-range of services to improve the efficiency of their organization, provide their patients with a new high-end experience, grow their activity and develop their cooperation with other doctors.

In those slides, we will present how we connected old web and desktop softwares with our website to make the user feel he's using only one software.


Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

How to connect 1980 and 2018

  1. 1. With a Chrome Extension and Chrome Native Messaging How to connect 1980 and 2018
  2. 2. Matthieu KERN matthieu.kern@doctolib.com @MatthieuKern Quentin MÉNORET quentin.menoret@doctolib.com @QuentinMenoret
  3. 3. Goal Make our users feel like they have only one software
  4. 4. A chrome extension Our solution
  5. 5. Connecting 2000
  6. 6. What we’re building ● A chrome extension that allow to exchange messages between Doctolib and the PMS ● Three topics should be addressed: ○ Have buttons into each software to trigger actions in the other ○ Allow to switch the focus ○ Synchronise data
  7. 7. Zipper Actions Temporality Appointment booking (online, by phone, update/cancellation) 1 Welcoming of the patient (identity validation and waiting room management) 2 Rebook an appointment8 Billing6 Remote transmission7 Consultation: medical prescription5 Consultation: medical data seizure4 Medical and administrative records seizure with or without insurance card 3 Messaging System
  8. 8. Background Script Content Script (Doctolib) Content Script (PMS) Injected Script (Doctolib) Injected Script (PMS) Chrome Extension PMS PageDoctolib Page PostMessage PostMessage Chrome Messaging Chrome Messaging
  9. 9. Background script ● The code that runs in chrome, not in a specific tab ● It is where we put all the “routing” and “logic” stuff ● It can do magic stuff using the chrome API, such as focusing a tab
  10. 10. Content script ● It is injected on a tab based on the URL ● Shares the context of the website ● Have access to the DOM, but not to the window object
  11. 11. Communication between components ● To communicate between Content Scripts and Background Scripts: ● Chrome messaging ● To communicate between the PMS and Content Scripts: ● window.postMessage
  12. 12. The window postMessage API Communication between the page and the content script Content Script Page Script
  13. 13. The Chrome Messaging API Communication between content scripts and background script Background Script Content Script
  14. 14. How it looks like for the partner Communication between the partner and Doctolib The partner code
  15. 15. Plug&Play API vs REST API ● Focus switches ● Frontend synchronization ● No need for a specific backend API
  16. 16. How to test ? ● No possibility for Headless ● But you can use a platform such as Browserstack ● Selenium or puppeteer would work just fine
  17. 17. Connecting 1980
  18. 18. Context: The Case of Desktop Softwares ● Half of our customers are using a desktop software (the Internet did not exist in 1980) ● We need to connect them as well ● Most of desktop softwares are old and bloated, we need a simple API
  19. 19. Communication With The Software
  20. 20. Chrome Native Messaging ● API provided by Google Chrome and implemented by most browsers ● A way to exchange messages with a program installed on the user computer ● API similar to other message passing APIs provided by Chrome ● Chrome starts the native host on a separate process ● It communicates using standard input and standard output, sending and receiving serialized JSON preceded by the length of the message (using a 32-bit native integer)
  21. 21. Chrome Native Messaging: Sending a Message ● Connects to a native host using connectNative method ● Use the postMessage method to send a message to native host
  22. 22. Chrome Native Messaging: Receiving a Message Adding listeners: ● on onMessageto handle messages received from native host ● on onDisconnectto catch native host disconnection
  23. 23. Chrome Native Messaging: The Manifest File ● The file that defines the configuration of the bridge ● Path defined by a registry key on Windows, specific paths on Linux and Mac
  24. 24. Packaging a Binary With Pkg ● Node.JS binary packager developed by Zeit ● Cross-compilation, easy to install and use
  25. 25. Packaging a Binary With Pkg: How it Works ● Uses pre-compiled base node binaries with some patches applied ● Transforms javascript code into bytecode ● Snapshot filesystem: all files are embedded in the binary and prefixed by /snapshot/, the program have access to the snapshot file system during runtime ● Targets: ○ node version ○ platform: windows, mac, linux or bsd ○ architecture: x64, x86, armv6 or armv7 ○ all targets available in the pkg-fetch last release: https://github.com/zeit/pkg-fetch/releases/tag/v2.5
  26. 26. Testing ● Using Jest for unit and integration tests ○ All the code is unit tested ○ Integration tests fakes the PMS and Chrome to assert an output when an input is given ○ Installer tests runs installers on Windows to check that all files are correctly deployed ● A lot of snapshot testing
  27. 27. An Example of Integration Test
  28. 28. Spawning of the Zipper Desktop Process
  29. 29. Connection of the Fake Socket
  30. 30. An Actual Socket Test
  31. 31. Resources ● https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage: window postMessage documentation ● https://developer.chrome.com/apps/messaging: Chrome messaging documentation ● https://developer.chrome.com/extensions/content_scripts: Content scripts documentation ● https://www.browserstack.com/: Platform for running e2e tests on VM ● https://developer.chrome.com/extensions/background_pages: Background scripts ● https://developer.chrome.com/apps/nativeMessaging: Chrome Native Messaging documentation ● https://github.com/zeit/pkg: Pkg documentation ● http://nsis.sourceforge.net/Main_Page: NSIS documentation ● http://www.grivet-tools.com/blog/2014/build-simple-pkg-pkgbuild/: How to use pkgbuild ● https://jestjs.io/: Jest test framework
  32. 32. Matthieu KERN matthieu.kern@doctolib.com @MatthieuKern Quentin MÉNORET quentin.menoret@doctolib.com @QuentinMenoret We are hiring! https://careers.doctolib.fr/engineering/