H&H Zwem4Daagse App

During App Development at HKU, I created an app for an event in our village. The Zwem4Daagse is an event organized annually by the KNZB. Before the app, we used punch cards for entry. This system was becoming outdated, and people kept losing their cards. With the app, we can easily track how many times each participant has attended and scan all of someone's cards at once, so we don't have to scan six times separately. Once a user has participated for at least four days, the medal section becomes visible. The app will be used for the first time in June 2025 by approximately 250 users.

Project Info:

Solo Project
Project time: HKU Year 1 Period 4
Software: Cordova
Code Languages: JS + (CSS + HTML) & PHP

The app for the user.

Scanning Tickets

Participants of the Z4D must have their ticket scanned at the entrance each day for access. After four days, they can scan their ticket to receive a medal. The ticket scanner can scan an individual ticket or all tickets linked to the participant's account. The scanner has three display statuses: Success, Issues, and Failed, which are visible to the person at the entrance. The entrance staff scans the user's QR code, and the app sends the ticket data to the server. The QR code contains the ticket ID and the user's public token to verify that the ticket belongs to the user. Each ticket can only be scanned once per day.

Copy Code
function SendScanData(type, qrContent) {
    var ticket = JSON.parse(qrContent);

    const requestData = JSON.stringify({
        pubToken: ticket.pubToken,
        ticketID: ticket.ticketID,
        dayNumber: GetDayNumber(currentDay),
        emailScanner: sessionStorage.getItem("email"),
        tokenScanner: sessionStorage.getItem("privToken"),
        scanType: type
    });

    const formData = new URLSearchParams();
    formData.append('request', requestData);

    fetch("https://api.wesleydegraaf.com/Z4D/DayScan.php", {
        method: "POST",
        body: formData,
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    })
        .then(response => {
            if (!response.ok) {
                alert(`HTTP error! Status: ${response.status}`);
                return null;
                //throw new Error(`HTTP error! Status: ${response.status}`);
            }

            return response.json();
        })
        .then(json => {
            if(json == null) return;
            
            console.log(JSON.stringify(json));
            TicketResponse(json)
        })
        .catch((error) => {
            console.log('Error', error)
            ShowError("Dag Scanner", 'Error:' + error);
            DoScan();
        });
}

Code for sending scanned data.

API

The app's API works with PHP & MySQL. All requests are sent to https://api.wesleydegraaf.com to be processed. The user has a private token with which they can authenticate themselves to the server. Requests are only accepted if this data is correct. There are a few functionalities that do not require authorization, such as the messaging service. Here, users can view messages relevant to the event.

Copy Code
<?php
require_once("connection.php");

$filePath = "./Cache/messages.json";
date_default_timezone_set('Europe/Amsterdam');

if (!file_exists($filePath)) {
    //LOAD ALL Messages
    $sqlMessages = "SELECT * FROM Berichten ORDER BY CreationDate DESC;";
    $resultMessages = $conn->query($sqlMessages);

    if (!$resultMessages) {
        die("Query failed: " . $conn->error);
    }

    $messageCache = new Messages();
    if ($resultMessages->num_rows > 0) {
        while ($row = $resultMessages->fetch_assoc()) {
            $messageContent = new stdClass();

            $messageContent->SenderName = $row['SenderName'];
            $messageContent->SenderURL = $row['SenderProfileURL'];
            $messageContent->content = mb_convert_encoding($row['Content'], 'UTF-8', 'auto');

            //Creation date format.
            $creationDate = $row['CreationDate'];
            $formattedDate = date('H:i:s d-m-Y', strtotime($creationDate));
            $messageContent->creationDate = $formattedDate;

            array_push($messageCache->messageList, $messageContent);
        }
    }

    $date = new DateTime('now', new DateTimeZone('Europe/Amsterdam'));

    $messageCache->lastUpdated = $date->format('d-m-Y H:i:s');
    $messageFile = fopen("./Cache/messages.json", "wb") or die("Unable to open file!");
    $messageJson = json_encode($messageCache, JSON_PRETTY_PRINT);

    fwrite($messageFile, $messageJson);
    fclose($messageFile);
}

readfile($filePath, "r");
$conn->close();
?>

Retrieves the messages for the messaging page in the app.

Appstores

(Apple Appstore Soon)