Offuscare funzione Javascritp con Obfuscator.io

 Premesso che offuscare un codice difende solo curiosi piu' pigri, tra le opzioni piu' complete per offuscare una funzione javascript ho trovato utile e funzionante Obfuscator.io

Dopo aver copiato il codice JS conviene flaggare Dead Code Injection, String Array Rotate and Shuffle, Encode RC4, Split String, Disable Console Output, Self Defending e Debug Protection

In questo modo il codice viene offuscato ed anche andando nei Developer Tools di Chrome 

Trasmissione dati con ultrasuoni

Leggendo le caratteristiche di Arduino Nano 33 BLE ho scoperto che era compatibile con la trasmissione dati via ultrasuoni tramite le librerie CHIRP. La ditta pero' e' stata acquisita da Sonos e non e' piu' possibile usare le librerie per l'impossibilita' di acquisire la API KEY.

Ho scoperto che si puo' fare qualche test anche con un semplice browser (meglio Chrome) usando le librerie Quiet JS puntando a questa pagina https://quiet.github.io/quiet-js/

La cosa divertente e' che mio figlio di 10 anni sente distintamente la frequenza agli ultrasuoni mentre io no (questa predisposizione dei bambini a sentire gli ultrasuoni l'ho vista usare da un prestigiatore per un trucco magico che prevedeva la collaborazione del figlio..... in pratica il figlio indovinava sempre la carta nascosta ma solo perche' il padre con emettitore indicava il valore della carta con un codice condiviso)

Scrivere Json File in ElectronJS

Un esempio di come salvare i dati in formato JSon in un progetto ElectronJS

Prima viene creato un nuovo oggetto vuoto e successivamente si inseriscono le coppie chiave-valore per popolare l'oggetto, l'oggetto viene poi convertito in una stringa Json con stringify ed infine la stringa viene salvata sul filesystem

===============================================================
      var sinkhole = {};
      sinkhole.localita = sessionStorage.getItem("localita");
      sinkhole.comune = sessionStorage.getItem("comune");
      sinkhole.data = sessionStorage.getItem("data");
      sinkhole.ora = sessionStorage.getItem("ora");
      sinkhole.compilatore = sessionStorage.getItem("compilatore");
      sinkhole.annotazioni = sessionStorage.getItem("annotazioni");
      sinkhole.nord = sessionStorage.getItem("nord");
      sinkhole.est = sessionStorage.getItem("est");
      sinkhole.sistema = sessionStorage.getItem("sistema");

      sinkhole.diametro = diametro;
      sinkhole.deformazione = deformazione;
      sinkhole.pericolo = pericolo;
      sinkhole.elemento = elemento;
      
      var esportazione = JSON.stringify(sinkhole);

      const fs = require('fs');
      var nome_file = sessionStorage.getItem("comune")+"_"+sessionStorage.getItem("ora")+".json";
      fs.writeFile(nome_file, esportazione, (err) => {
        if(err){
            alert("An error ocurred creating the file "+ err.message)
        }
        else {
          alert("File salvato come " + nome_file);
        }
      });

Integrazione di JQuery in ElectronJS

Il porting di una web app in modalita' desktop con ElectronJS e' una operazione piuttosto indolore ma sorgono dei problemi quando si utilizzano librerie esterne come JQuery

Come riporta da questo link la soluzione e' quella di inserire prima e dopo le righe di importazione le linee evidenziate in giallo

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

semplice ed efficace

Laser control e raycaster su Aframe

Per poter interagire con gli oggetti su Aframe si puo' utilizzare il laser-control, un componente che mostra un raggio laser che viene emesso dal controller (sia questo DayDream od Oculus)  e che puo' interagire con gli oggetti della scena

Il laser-control puo' essere aggiunto con la semplice riga

      <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>

e' importante inserire la entity in un rig che contenga anche l'oggetto camera in modo che il raggio laser parta sempre come origine dalla camera. E' inoltre importante indicare quali sono gli oggetti con cui il raggio interagira' mediante il comando raycaster

Nell'esempio viene creata una scena con un cubo ed un piano con una texture trasparente. Dopo che l'utente clicca sul cubo con in controller Daydream la texture del piano perde la trasparenza



-------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laser Controls</title>
    <meta name="description" content="Laser Controls - A-Frame">
    <script src="aframe-master.js"></script>

  </head>
  <body>

<script>
    AFRAME.registerComponent('laser-listener', {
  init: function () {

    var self = this;
    var el = this.el;

    this.el.addEventListener('mousedown', function (evt) {
      document.querySelector('#cube').setAttribute('material', 'color', '#EF2D5E');
      document.querySelector('#piano').setAttribute('material','opacity',1.0);
    });
    this,el.addEventListener('mouseup', function (evt) {
      el.setAttribute('material', 'color', self.isMouseEnter ? '#24CAFF' : initialColor);
            document.querySelector('#piano').setAttribute('material','opacity',1.0);
    });
   

  }
});

</script>

    <a-scene auto-enter-vr background="color: #212" antialias="true">
 <a-entity id="rig" movement-controls="fly: true; speed: 30" position="300 50 140" rotation="0 45 0">
      <a-entity position="50 30 410" camera look-controls wasd-controls></a-entity>
      <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>
</a-entity>


       <a-assets>
<img id="grafico" src="./sposta.jpg">
<img id="trasparente" src="./trasparente.png">
        </a-assets>
    
<a-plane id="piano" src="#grafico" material="opacity:0.0" position="270 40 -10" rotation="0 20 0" width="100" height="60" scale="" visible="" geometry=""></a-plane>
<a-entity laser-listener position="230 7 15" id="cube" geometry="primitive: box; width: 5.5; height: 5.5; depth:5.5" material="color: red"></a-entity>

    </a-scene>
  </body>
</html>

Integrazione Google Maps e Firebase per mappatura collaborativa

Firebase puo' essere utilizzato come base dati per salvare anche dati semplici di tipo cartografico.
Il vantaggio di questo approccio e' che ogni modifica effettuata da un client viene immediatamente visualizzato sugli altri client senza necessita' di aggiornare la pagina (utile quindi nel caso si voglia fare per esempio il tracking di un oggetto che si muove)
Un esempio live puo' essere provato a questo link

La struttura dati e' molto semplice: un alberi in cui ad ogni entrata sono presenti una longitudine ed una latitudine. Cliccando sulla mappa si aggiunge un nuovo nodo alla mappa

Esempio del sistema in uso

Attenzione : Firebase non conosce il tipo float per cui ci sono un po' di magheggi nel convertire i dati float da e per tipi stringhe
------------------------
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
   
    <script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
    <script type="text/javascript">  

    var latitudine = 0.0;
    var longitudine = 0.0;
    var conta = 0;
    // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAchx8oVeLUgYnGujAEfwOxxxxxxxxxxxxxxxx",
    authDomain: "notifica-23xxxxxxfirebaseapp.com",
    databaseURL: "https://notifica-23xxxxxfirebaseio.com",
    storageBucket: "notifica-2xxxxxx.appspot.com",
    messagingSenderId: "392723xxxxxxx"
  };
  firebase.initializeApp(config);
</script>
<script type="text/javascript">

/*
questi sono solo esempi di come si possano inserire dati in Firebase in Javascript
le righe sono commentate e quindi non in uso/
firebase.database().ref('punti/').set({
    lat: 43,
    lng : 11
  });*/

/*
firebase.database().ref('punti/').push({
    lat: 43.0,
    lng : 12.0
  });

firebase.database().ref('punti/').push({
    lat: 42,
    lng: 11
  });
*/

  </script>


  </head>
  <body>
    <div id="map"></div>

   

  <script>

  function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
        lat: 43,
        lng: 11
    },
    zoom: 6,
    styles: [{
        featureType: 'poi',
        stylers: [{
                visibility: 'off'
            }] // Turn off points of interest.
    }, {
        featureType: 'transit.station',
        stylers: [{
                visibility: 'off'
            }] // Turn off bus stations, train stations, etc.
    }],
    disableDoubleClickZoom: false
   });

  //questa e' la funzione che all'evento click sulla mappa aggiunge il corrispondente
  // punto nel database    map.addListener('click', function(e) {
    firebase.database().ref('punti/').push({
    lat: JSON.stringify(e.latLng.lat()),
    lng : JSON.stringify(e.latLng.lng())
   });
  var marker = new google.maps.Marker({
    position: {
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    },
    map: map
    });
  });
 //fine della funzione di inserimento
 // crea un evento sull'aggiornamento dei punti
//sicuramente esiste un sistema piu' furbo di fare la stessa cosa
  const dbRefPunti = firebase.database().ref().child('punti');
  dbRefPunti.on('child_added',function(snap,prevChildKey)
    {
      var la1;
      var lo1;
      snap.forEach(function (snapshot) {

           var obj = snapshot.val();
           var nome = snapshot.key;
           if (snapshot.key == "lat")
              {
                latitudine = JSON.stringify(obj);
                la1 = obj;
                console.log("latitudine : "+latitudine);
              }
           if (snapshot.key == "lng")
                {
                longitudine = JSON.stringify(obj);
                lo1 = obj;
                console.log("longitudine : "+longitudine);
              }
            conta++;
            console.log("Conta : "+conta);

            if (conta%2 == 0) 
              {
              console.log("Stampa : " + latitudine+":"+longitudine);
              console.log(isNaN(la1));


               //var latLng = new google.maps.LatLng(parseFloat(latitudine),parseFloat(longitudine));
               var latLng = new google.maps.LatLng(la1,lo1);

               var marker = new google.maps.Marker({position: latLng,map: map});


              }
           });
       }

    );
  // fine evento

  //fine initMaps

  google.maps.event.addDomListener(window, "load", initMap);

  };


  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkeozFISVmCAB3ta1rEXvMNDDzSxxxxxxxx&callback=initMap">
    </script>
   
  </body>
</html>
------------------------

Firebase Storage

A differenza del serivizio Hosting, con il quale potrebbe essere confuso per alcuni usi comuni, lo Storage di Firebase impiega un sistema nativo di permessi per cui e' possibile rendere i contenuti privati e pubblici con un filtro sulla base dell'utente.
Inoltre se in Hosting l'aggiornamento avviene con una metodologia simile ai commit di GitHub, ovvero a livello di intero progetto, in Storage si gestiscono i singoli file

Nel profilo gratuito sono inclusi 5Gb di spazio disco per lo Storage (1 Gb per Hosting)

Per recuperare i file si ha a disposizione un link del tipo

https://firebasestorage.googleapis.com/v0/b/notifica-23425.appspot.com/o/images%2Fa1.jpg?alt=media&token=4f930e8d-cxxxxxxxxxxxxxxxxxxxxxx

Esempio di accesso non autenticato

oppure e' possibile scaricare il medesimo file utilizzando le URI di Google Cloud (indirizzo del formato gs://)

i permessi di accesso vengono gestiti dalla Console di Firebase sul tab Regole (come in Realtime Databases)

Per interagire con Storage, oltre alla Console, si possono usare client Javascript, Android ed IOS (operazioni di Upload, Download e Delete)

Leggere dati da Firebase Realtime Database

Per me che vengo da una esperienza SQL mettere le mani per la prima volta su un Database NoSql come quello di Firebase e' un po' spiazzante....ma ci si fa l'abitudine

Per prima cosa Firebase non gestisce i dati mentre tabelle bidimensionali a struttura rigida ma i dati vengono rapppresentati come un albero a cui sono attaccate delle derivazioni (child) i quali non e' necessario che abbiamo la stessa struttura (al di sotto di una chiave, per esempio, in un caso le proprieta' possono essere due oppure tre)

Se si editano i dati dalla Console di Firebase si vedra' che posizionando il mouse sulla root appaiono dei simboli (+ e -)..la prima volta che si usa sembra che non si abbia nessuna interazione perche' i simboli scompaiono appena si sposta il mouse

Oltre a creare i dati in modo interattivo si possono ovviamente creare anche via codice. Di seguito un esempio in Javascript commentato con le righe evidenziate in giallo
----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Read</title>

  <!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>



</head>
<body>

<pre id="punti">

</pre>

<script>
  // Initialize Firebase

  var config = {
    apiKey: "AIzaSyAchx8oVeLUgxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "notifica-23425.firebaseapp.com",
    databaseURL: "https://notifica-23425.firebaseio.com",
    storageBucket: "notifica-23425.appspot.com",
    messagingSenderId: "392xxxxxxxxxxxxxx"
  };
  firebase.initializeApp(config);


  var timestamp = new Date().getTime();
  console.log(timestamp);

  //vengono inseriti due nodi nella radice
  // usando il comando set vengono di fatto rimossi tutti i contenuti nel db
  var ins_punti = firebase.database().ref();

  ins_punti.set({
        l2: {
          lat: 1,
          lon: 30,
          nome: "Venezia",
          tempo: timestamp
        },
        l3: {
          lat: 33,
          lon: 40,
          nome: "Bari"
        }
      });

  //vengono aggiunti al nodo Punti due elementi. Si tratta di un append
  // e viene quindi di default inserita una chiave univoca
  ins_punti.child("Punti").push({
              lat: 13,
              lon: 33,
              nome: "Torino"
          });

  ins_punti.child("Punti").push({
                      lat: 14,
                      lon: 35,
                      nome: "Firenze"
                  });


  //vengono mostrate a video tutte le coppie del ramo "l2" del nodo in radice
  const prePunti = document.getElementById('punti');
  const dbRefPunti = firebase.database().ref().child('l2');
  dbRefPunti.on('value', snap => {
              prePunti.innerText = JSON.stringify(snap.val(),null,1);

  //con questa chiamata vengono richieste tutte le coppie chiave/valore del ramo Punti
  //da qui in poi i risultati sono visibili nel log e non a video
  firebase.database().ref().child('Punti').on('value', snap => console.log(snap.val()));

  //con questa chiamata vengono richieste tutte le coppie chiave/valore dell'ultimo nodo aggiunto alla lista del ramo Punti
  firebase.database().ref().child('Punti').limitToLast(1).on('child_added', snap => console.log(snap.val()));

  //con questa chiamata viene richiesto il valore del campo nome dell'ultimo nodo aggiunto alla lista del ramo Punti
  firebase.database().ref().child('Punti').limitToLast(1).on('child_added', snap => console.log(snap.val().nome));

  //con questa chiamata viene richiesto il valore del campo nome del nodo con lat=13 del ramo Punti
  firebase.database().ref().child('Punti').orderByChild("lat").equalTo(13).on('child_added', snap => console.log(snap.val().nome));

  firebase.database().ref().child('l2').update({lat: 133});

  //rimuove il ramo l1 dalla root
  firebase.database().ref().child('l3').remove();
});



</script>

</body>
</html>
----------------------------------------------------------------

La cosa interessante e' che le modifiche effettuate risultano essere in realtime. Se ci sono differenti client con la pagina Web aperta ed una modifica e' stata effettuata al DB questa sara' visualizzata su tutti i client senza la necesssita' di ricarica la pagina

Come per i db sql anche per Firebase e' possibile inserire la definizione delle chiavi per accelerare la ricerca e si possono definire le regole di accesso. Cio' viene effettuato nel Tab regole o rules