VT22 - DA395A - Storage, geolocation & media

Transcript

1. Localstorage & cookies
   Geolocation
   Mediahantering
   

   View Slide

2. Dagens föreläsning
   • Att lagra användardata
   • Cookies
   • LocalStorage
   • Platsinformation
   • Geolocation
   • Google Maps
   • Mediahantering
   

   View Slide

3. Del 1 – Att lagra användardata
   Fokus - klientsidan
   

   View Slide

4. När finns det anledning att
   spara data om användaren?
   

   View Slide

5. Exempel på intressant användardata
   • För att komma ihåg lokala inställningar, t.ex.
   • För att spara ”gammal” data, t.ex. från ajax-anrop
   • För att snabba upp webbapplikationen
   • För att analysera en användares beteende
   

   View Slide

6. Vilka sidor har användaren
   besökt tidigare?
   

   View Slide

7. View Slide

8. View Slide

9. Vilka inställningar har
   användaren gjort vid tidigare
   besök?
   

   View Slide

10. View Slide

11. Finns det klientdata, t.ex.
    listor, som vi vill spara?
    

    View Slide

12. View Slide

13. Hur görs detta idag?
    

    View Slide

14. View Slide

15. View Slide

16. Cookies
    Egenskaper
    • Skickas med till servern
    automatiskt vid HTTP-anrop
    • Kan användas för hela domäner
    (inkl. subdomäner), eller
    specifika delar av en webbplats
    • Kan kräva säker anslutning (SSL)
    • Utgångsdatum
    Nackdelar
    • Är väldigt små (4kb)
    • Skickas med vid varje anrop till servern
    • En enda text-sträng
    • Jobbiga att jobba med i JavaScript
    

    View Slide

17. https://www.twilio.com/blog/wp-content/uploads/2014/06/6-19-2014-10-43-17-PM.png
    

    View Slide

18. https://www.twilio.com/blog/wp-content/uploads/2014/06/6-19-2014-10-44-43-PM.png
    

    View Slide

19. Hur skriver man cookie?
    Bra läsning: https://www.w3schools.com/js/js_cookies.asp
    

    View Slide

20. Hur skriver man en cookie? (2)
    Mer bra läsning: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
    

    View Slide

21. View Slide

22. Att tänka på
    • Cookies behöver köras på en server
    • EU-direktivet om att upplysa användaren att man sparar data
    • http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136
    • Säkerhetsaspekter
    • CSRF
    • Session hijacking
    • Läs gärna mer här: https://developer.mozilla.org/en-
    US/docs/Web/HTTP/Cookies#Security
    

    View Slide

23. View Slide

24. Hjälpmedel för att jobba med Cookies
    

    View Slide

25. Demo - Cookies
    

    View Slide

26. LocalStorage
    

    View Slide

27. LocalStorage
    Fördelar
    • Egenskaper i ett objekt
    (nyckel/värde)
    • Inget utgångsdatum
    • Lokal till sin subdomän
    • Cirka 5mb
    Nackdelar
    • Fungerar inte alltid i äldre
    webbläsare
    • Svårare för användare att ta
    bort
    • Bara strängar
    

    View Slide

28. Hur använder vi det?
    

    View Slide

29. Spara ett värde i localStorage
    

    View Slide

30. Hämta ett värde i localStorage
    

    View Slide

31. Radera ett värde i localStorage
    

    View Slide

32. Ta bort alla värde i localStorage
    

    View Slide

33. Om vi vill spara mer än
    en sträng…
    

    View Slide

34. View Slide

35. View Slide

36. Demo -
    LocalStorage
    

    View Slide

37. Del 2 -
    Geolocation
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. Geolocation
    • JavaScript gör det möjligt för oss
    att ta reda på enhetens position.
    • Det krävs att användaren
    godkänner att vi får ta del av
    dennas position
    • Vissa (alla?) webbläsare
    kräver https
    • Får svar i form av koordinatorer
    m.m.
    

    View Slide

42. Funktion - getCurrentPosition
    • Den vanligaste funktionen som används är:
    • getCurrentPosition
    • Den kallas genom JavaScript-objektet ”navigatior”
    • navigator.geolocation.getCurrentPosition();
    • Funktionen tar 3st parametrar
    • Funktion för success
    • Funktion för fail
    • Egenskaper att skicka med
    • navigator.geolocation.getCurrentPosition(
    onSuccess,
    onFail,
    {enableHighAccuracy: true}
    );
    • OBS anropet sker asynkront
    

    View Slide

43. Första exempel
    

    View Slide

44. Svar från getCurrentPosition()
    

    View Slide

45. Demo – Hämta
    vår position
    

    View Slide

46. View Slide

47. View Slide

48. Filuppladdning
    

    View Slide

49. Att ladda upp filer genom HTML
    • Vi behöver ett formulär!
    

    View Slide

50. Men användaren
    kan ju välja vilken
    filtyp som helst?
    

    View Slide

51. Kom ihåg!
    - Olika typer av input!
    

    View Slide

52. https://goo.gl/PGf24I
    

    View Slide

53. https://www.w3schools.com/TAGs/att_input_accept.asp
    

    View Slide

54. Öppna kamera/ljudinspelare
    automatiskt
    

    View Slide

55. https://www.w3.org/TR/html-media-capture/
    

    View Slide

56. https://goo.gl/0ZzS2U
    Demo på detta.
    

    View Slide

57. Att visa upp bilder, video, ljud
    

    View Slide

58. View Slide

59. Att visa upp bilder
    

    View Slide

60. Video
    

    View Slide

61. Att visa upp video
    https://www.w3schools.com/html/html5_video.asp
    

    View Slide

62. Olika video-widgets i olika webbläsare
    

    View Slide

63. Attribut för
    https://www.w3schools.com/tags/tag_video.asp
    

    View Slide

64. Support för video i olika webbläsare
    https://www.w3schools.com/tags/tag_video.asp
    

    View Slide

65. JavaScript API för
    https://www.w3schools.com/tags/ref_av_dom.asp
    

    View Slide

66. Ljud
    

    View Slide

67. Att visa upp ljud
    https://www.w3schools.com/html/html5_audio.asp
    

    View Slide

68. Olika ljud-widgets i olika webbläsare
    

    View Slide

69. Support för ljud i olika webbläsare
    https://www.w3schools.com/html/html5_audio.asp
    

    View Slide

70. JavaScript API för
    https://www.w3schools.com/tags/ref_av_dom.asp
    

    View Slide

71. Demo av ljud, bild,
    video
    https://www.w3schools.com/TAGs/ref_av_dom.asp
    

    View Slide