broadband-coverage-address-search

For changelog, see CHANGELOG.md file

Usage no npm install needed!

<script type="module">
  import broadbandCoverageAddressSearch from 'https://cdn.skypack.dev/broadband-coverage-address-search';
</script>

README

Broadband coverage - Web component

How to integrate (non-react app)

  1. Add the component

    Add the script tags with the address autocomplete component:

    <script src="https://bc-web-component.s3.eu-south-1.amazonaws.com/prod/version/js/ws-addr-search-bundle.min.js"></script>
<script>
WSAddressSearch.config = {
    "api_key": "api_key",
    'env': 'prod',
    'user': 'user',
    'endpoint': '/v1/coverage_extended'
};
</script>
    • api_key - API for Broadband coverage REST API used by web component (provided on demand)
    • user - name of the custommer (e.g.: Google if your company is Google)
    • version - version of the product (current latest - 2.3.1)

    The component will be automatically rendered inside this div with data-role="ws-address-search".

    <div data-role="ws-address-search"></div>

  2. Receive events

    Listen for events of the component:

    WSAddressSearch.addEventListener('event', function(value) {
  // use value as a result
});

    Where 'event' can be one of the following event types:

    • address-changed

      Every time the user types something, this event will be triggered with one parameter:

      {
    "street": "Corso Italia 1, Crosia"
}

      The content is exactly what user typed.

    • address-selected

      This event is triggered once the user finishes typing and select the address, right before the component calls the API to fetch coverage.

      It's useful to show a loading animation or something similar to the user, in order to let him know that the coverage is being fetched.

      The callback function will be called with the following parameter:

      {
    "street": {"id": "38001031933", "description": "Corso Italia, Crosia"},
    "number": {"id": 380100189806848, "description": "1"}
}

    • landline-availability-ready

      This event is triggered once the coverage of landlines of carriers is ready.

      The JSON is the complete coverage:

      • carriers - The list of carriers, max speed per technology and list of available technologies
      • coverage - Technologies with details about max speed, estimated speed
      • meta-data - Cabinet, central and tower (approximated) distance when available

      An example of event received by the callback:

      Expand 
      {
  "carriers": [
    {
      "name": "tim",
      "url": "https://www.tim.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/TIM_300x300.png",
      "adsl": 20,
      "fttc": 100,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "fastweb",
      "url": "https://www.fastweb.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Fastweb_300x300.png",
      "adsl": 20,
      "fttc": 100,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "vodafone",
      "url": "https://www.vodafone.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Vodafone_300x300.png",
      "adsl": 20,
      "fttc": 100,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "windtre",
      "url": "https://www.windtre.it/",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/WindTre_300x300.png",
      "adsl": 7,
      "fttc": 100,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "tiscali mobile",
      "url": "https://casa.tiscali.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Tiscali_NEW_300x300.png",
      "adsl": 0,
      "fttc": 0,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "eolo",
      "url": "https://www.eolo.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Eolo_300x300.png",
      "adsl": 0,
      "fttc": 0,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "linkem",
      "url": "http://web.linkem.com",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Linkem_300x300.png",
      "adsl": 0,
      "fttc": 0,
      "ftth": 0,
      "fwa": 30,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "melita",
      "url": "https://www.melita.it/",
      "img": "https://walletsaver-filesupload.s3-eu-west-1.amazonaws.com/media/carrier_imgs/Melita_NEW_300x300.png",
      "adsl": 0,
      "fttc": 0,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "sky",
      "url": "https://www.sky.it/sky-wifi-fibra",
      "img": "https://walletsaver-filesupload.s3-eu-west-1.amazonaws.com/media/carrier_imgs/Sky_300x300.png",
      "adsl": 0,
      "fttc": 0,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    },
    {
      "name": "sorgenia",
      "url": "https://www.sorgenia.it/offerta-fibra",
      "img": "https://walletsaver-filesupload.s3-eu-west-1.amazonaws.com/media/carrier_imgs/Sorgenia_300x300.png",
      "adsl": 0,
      "fttc": 0,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": false,
      "is_openfiber_aree_bianche": false
    }
  ],
  "coverage": [
    {
      "technology": "ADSL",
      "speed": [
        {
          "nominal_max": 20,
          "expected_download_min": 13.5,
          "expected_download_max": 16.6,
          "expected_upload_min": 0.1,
          "expected_upload_max": 1.5,
          "active": "true"
        }
      ]
    },
    {
      "technology": "FTTC",
      "speed": [
        {
          "nominal_max": 100,
          "expected_download_min": 40,
          "expected_download_max": 67,
          "expected_upload_min": 0,
          "expected_upload_max": 20,
          "active": "true"
        }
      ]
    },
    {
      "technology": "FTTH",
      "speed": []
    },
    {
      "technology": "FWA",
      "speed": [
        {
          "nominal_max": 30,
          "active": "true"
        }
      ]
    }
  ],
  "meta-data": {
    "distance": {
      "cabinet": 566,
      "central": 707,
      "tower": 2000
    }
  }
}

How to integrate with a React JS app

  1. In your app project, run yarn add broadband-coverage-address-search

  2. Import the address search component:

    import { AddressSearch } from 'broadband-coverage-address-search';

  3. Place the component where you wish to use it:

    <AddressSearch
    apiKey="api_key"
    onAddressChange={this.onAddressChange.bind(this)}
    onAddressSelected={this.onAddressSelected.bind(this)}
    onLandlineAvailabilityReady={this.onLandlineAvailabilityReady.bind(this)}
/>

    Properties:

    • apiKey - The api_key used to connect to backend services (mandatory)
    • onAddressChange - Callback to be called when user types something in the input boxes (optional)
    • onAddressSelected - Callback to be called when the user finishes selecting an address (optional)
    • onLandlineAvailabilityReady - Callback that will receive the API data for coverage (optional)

  4. Implement the methods to listen for the events:

    onAddressChange({ typed }) {
  console.log('address changed: ', typed.street, typed.number);
}

onAddressSelected({ street, number }) {
  console.log('address selected', street, number);
}

onLandlineAvailabilityReady(coverage) {
  console.log('coverage info', coverage);
}