Watchman

NFC senzor, Fetch API

About

Súčasťou dnešných chytrých zariadení sú aj rôzne senzory. Jedným z nich je NFC senzor, pomocou ktorého je možné čítať rozličné karty alebo NFC tagy.

Dnes teda vytvoríme jednoduchú aplikáciu, ktorá tento senzor bude využívať. Aplikácia bude fungovať ako jednoduchý dochádzkový systém, kde mobilné zariadenie bude zastávať rolu čítačky a osoba sa bude identifikovať svojou ISIC/ITIC kartou. Informácia o prečítaní sa zapíše do vzdialenej databázy. Nutnou požiadavkou však je mať telefón, ktorý obsahuje NFC senzor.

Objectives

  • zoznámiť sa s NFC
  • zoznámiť sa s Fetch API

Content

Introduction

Predtým, ako sa vrhneme do samotného vývoja aplikácie, sa zoznámime s NFC senzorom v zariadení a pozrieme sa bližšie na svoju ISIC/ITIC kartu.

Úloha

Do svojho zariadenia si nainštalujte aplikáciu NFC Tools.

Úloha

Pomocou nástroja NFC Tools zistite sériové čislo, resp. ID vašej ISIC/ITIC karty.

Aby všetko prebehlo úspešne, vaše zariadenie musí byť vybavené NFC senzorom a tento senzor musí byť povolený, resp. zapnutý. Pre zapnutie NFC vo vašom telefóne hľadajte v rýchlych nastaveniach túto ikonu:

NFC Logo

Sériové číslo karty bude reprezentované ako reťazec obsahujúci čísla zapísané v šestnástkovom tvare oddelené navzájom dvojbodkami. Ich počet sa môže v závislosti od karty, resp. NFC tag-u líšiť.

Úloha

Pridajte svoj záznam do vzdialenej Parse.com databázy na serveri back4app.

Do záznamu zapíšte svoje meno, priezvisko a ID karty. Pre pridanie záznamu využite informácie z nasledujúceho príkazu curl:

curl -X POST \
-H "X-Parse-Application-Id: 0RI2hEXtZ9Blc8hXPlzSwyc6jINfX6fimVMBG1VK" \
-H "X-Parse-REST-API-Key: huwT4egWVKbdDzbPmQvY9ErOckGSNfx5ygRAvbfz" \
-H "Content-Type: application/json" \
-d "{ \"firstName\":\"A string\",\"lastName\":\"A string\",\"cardId\":\"A string\" }" \
https://parseapi.back4app.com/classes/users

Informácie môžete pridať akýmkoľvek spôsobom. Pre rýchlosť môžete využiť uvedený príkaz curl. Rovnako tak môžete využiť Fetch API v jazyku JavaScript.

Project Watchman

Projekt Watchman bude fungovať ako nástroj na tvorbu jednoduchej prezenčky. Aplikácia zosníma NFC tag a v prípade, že sa taký nachádza v databáze, zapíše čas jeho zosnímania. Ak sa v databáze nenachádza, vypíše len správu o neznámom používateľovi.

V tomto kroku pripravíme všetko potrebné pre vytvorenie projektu.

Úloha

Vytvorte nový projekt s názvom Watchman, ktorý sa bude nachádzať v balíku sk.tuke.smart.watchman a umiestnite ho do priečinka watchman/.

Úloha

V súbore config.xml doplňte opis aplikácie spolu s informáciami o vás ako o autorovi aplikácie.

Úloha

Pridajte do projektu platformu android a nainštalujte plugin phonegap-nfc.

Pridaním rozširujúceho modulu pre prácu s NFC senzorom sa pre platformu Android pridá aj príslušné povolenie do súboru s manifestom (Manifest.xml).

Úloha

Nahraďte .html súbor aplikácie a .css súbor jej vzhľadu nasledovnými súbormi.

Ako kostru vašej aplikácie použite tento súbor index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Watchman</title>
    </head>

    <body>
        <div id="nfctag">No Card :-(</div>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Súbor index.css nahraďte týmto obsahom:

#nfctag {
    font-size: 2em;
    font-weight: bold;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Úloha

Overte svoju aplikáciu.

Reading NFC Tags

V tomto kroku prečítame NFC tag.

Úloha

Po načítaní stránky (udalosť load alebo stav document ready) pridajte do aplikácie NFC listener.

Funkcia, ktorá zabezpečí pridanie listener-a, sa volá nfc.addTagDiscoveredListener(). Callback nastavte na funkciu onNfc().

Callback-y v prípade úspechu alebo neúspechu nie sú povinné. Môžete si však pomocnú správu vypísať napr. do konzoly.

onDeviceReady: function() {
    nfc.addTagDiscoveredListener(
        this.onNfc,
        function(status) {
            console.log(`success: ${status}`);
        },
        function(error) {
            console.log(`error: ${error}`);
        }
    );
}

Úloha

Vytvorte funkciu onNfc(), v ktorej vypíšete sériové číslo karty, resp. ID NFC tag-u.

Parametrom funkcie je objekt udalosti. Z neho je možné získať načítaný tag z vlastnosti .tag:

const tag = event.tag;

Ak sa chceme pozrieť na to, čo sa v ňom nachádza, môžeme ho vypísať do konzoly zabalením do funkcie JSON.stringify():

console.log(JSON.stringify(tag));

ID NFC tag-u sa nachádza v atribúte .id objektu tag. Jeho obsah je reprezentovaný poľom bytov. Jednotlivé položky poľa reprezentujú ID tag. Ak chceme získať reťazcovú reprezentáciu tag-u, môžeme použiť napr. pomocnú funkciu nfc.bytesToHexString():

console.log(nfc.bytesToHexString(tag.id));

Spojením všetkého uvedeného môže telo funkcie onNfc() vyzerať napríklad takto:

onNfc: function(event) {
    const tag = event.tag;

    const element = document.getElementById("nfctag");
    element.innerHTML = nfc.bytesToHexString(tag.id);
}

Úloha

Overte správnosť svojej implementácie.

Updating Records

Po získaní NFC tag-u zostáva už len overiť, či sa uvedený záznam nachádza v databáze. Ak áno, pozdravte používateľa menom a zapíšte záznam o jeho prítomnosti do vzdialenej databázy. V prípade, že sa záznam v databáze nenachádza, vypíšte správu o neznámom zamestnancovi.

Na komunikáciu so vzdialenou databázou použite Fetch API. Všetky úpravy sa budú vykonávať vo funkcii onNfc().

Úloha

Overte, či sa zosnímané sériové číslo karty (TAG ID) nachádza v databáze.

V prípade, že sa nenachádza, vypíšte správu o neexistujúcom používateľovi a nutnosti “registrácie”.

Vytvoríme Vytvoríme teda objekt požiadavky, ktorou vieme získať záznam o používateľovi na základe jeho sériového čísla karty, resp. TAG ID zo serveru back4app:

const tag = event.tag;
const cardId = nfc.bytesToHexString(tag.id);

// get user by it's cardId
const response = await fetch(`${baseUrl}/users`, {
    method: "GET",
    headers: headers,
    params: {
        where: JSON.stringify({ cardId: cardId })
    }
});

const data = await response.json();
const users = data.results;

Pre realizovanie vášho dopytu vám môže pomôcť tento príkaz curl:

curl -X GET \
-H "X-Parse-Application-Id: 0RI2hEXtZ9Blc8hXPlzSwyc6jINfX6fimVMBG1VK" \
-H "X-Parse-REST-API-Key: huwT4egWVKbdDzbPmQvY9ErOckGSNfx5ygRAvbfz" \
-G \
--data-urlencode "where={ \"cardId\":\"A string\" }" \
https://parseapi.back4app.com/classes/users

Úloha

V prípade, že sa používateľ v databáze nachádza, tak ho pozdravte menom a zapíšte info o jeho aktivite do databázy.

Záznam v databáze back4app automaticky zapisuje informáciu o vytvorení položky. Stačí teda, ak pridáme informáciu o id karty.

Pre realizáciu tohto dopytu vám môže pomôcť tento príkaz curl:

curl -X POST \
-H "X-Parse-Application-Id: 0RI2hEXtZ9Blc8hXPlzSwyc6jINfX6fimVMBG1VK" \
-H "X-Parse-REST-API-Key: huwT4egWVKbdDzbPmQvY9ErOckGSNfx5ygRAvbfz" \
-H "Content-Type: application/json" \
-d "{ \"cardId\":\"A string\" }" \
https://parseapi.back4app.com/classes/logs

Úloha

Overte správnosť svojej implementácie.

Additional Tasks

  1. Pri spustení aplikácie overte, či je zariadenie vybavené NFC senzorom, poprípade, či je tento zapnutý. V oboch prípadoch zareagujte vhodnou správou a aplikáciu vypnite. Pre zobrazenie správy použite napr. plugin cordova-plugin-local-notifications.

  • phonegap-nfc - The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.

  • Fetch API - The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

  • NFC Tools - NFC Tools is an app which allows you to read, write and program tasks on your NFC tags and other RFID compatible chips.

  • Bezpečnost přístupových karet, aneb klonování prakticky - Před časem vyšel na Lupě článek „Když vám blondýna naklonuje kartu aneb Jak fungují útoky na české banky a firmy“ a vyvolal oprávněný rozruch. Dnes bych rád volně navázal návodem, jak si vytvořit funkční kopii přístupové karty.