Dashboard (Algolia)

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