Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dashboard (Algolia)

Dashboard (Algolia)

Freek Van der Herten

September 07, 2017
Tweet

More Decks by Freek Van der Herten

Other Decks in Programming

Transcript

  1. Creating a dashboard
    using Laravel ,
    Vue and Pusher

    View Slide

  2. About me
    Freek Van der Herten
    Partner & developer at SPATIE
    @freekmurze
    https://murze.be

    View Slide

  3. Since 2003
    Websites, applications and webshops
    Team
    4 developers, 1 manager
    Specialization
    Laravel development

    View Slide

  4. OPEN SOURCE SOFTWARE

    View Slide

  5. https://spatie.be/en/opensource/laravel

    View Slide

  6. Open source software
    ± 160 public repositories on GitHub
    August 2016: ± 800 000 downloads
    August 2017: ± 5 000 000 downloads
    ± 500 000 downloads a month
    A lot of benefits: learning, writing quality documentation and
    tests, showing the quality of our work, eating our own dogfood

    View Slide

  7. http://github-awards.com/users?type=world&language=php
    Open source software

    View Slide

  8. WE ❤ POSTCARDS

    View Slide

  9. Spatie

    Samberstraat 69D
    2060 Antwerp

    Belgium

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. https://github.com/spatie/dashboard.spatie.be

    View Slide

  28. HIGH LEVEL OVERVIEW

    View Slide

  29. The dashboard is a single HTML page
    Displayed by a full screen browser
    Without full page reload
    Each tile wil be updated by JavaScript
    Each tile has it’s own update frequency
    In short

    View Slide

  30. View Slide

  31. DEMO

    View Slide

  32. Grid system
    The Packagist tile
    The Twitter tile
    Topics

    View Slide

  33. There will be 

    some live coding
    We’ll use 

    an internet connection

    View Slide

  34. DISPLAYING ON A TV

    View Slide

  35. Raspberry Pi 2

    View Slide

  36. Raspberry Pi 2
    Powered by the USB port from the TV
    Uses Raspbian Jessie
    Boots into Chromium 56 in fullscreen mode
    Setup

    View Slide

  37. TRY IT OUT YOURSELF

    View Slide

  38. Source code
    https://github.com/spatie/dashboard.spatie.be
    Blog post
    https://murze.be/2017/06/building-realtime-dashboard-powered-
    laravel-vue-2017-edition/
    Documentation

    View Slide

  39. Thank you!
    https://speakerdeck.com/freekmurze/dashboard-algolia
    https://spatie.be/opensource/laravel
    https://murze.be
    https://murze.be/newsletter

    View Slide

  40. QUESTIONS?

    View Slide