Didn't want to click on refresh to see updates, this is what I did!

I wrote something quick (ish) in a few hours over 2 days to give me updates on how registration for an event is doing...

What?

More "For What?" 😆... it's related to Season's Geekings Techie Quiz, it's back after 3 years!!! 🎉

Why?

I've been hitting refresh on the ti.to dashboard non-stop... for weeks!

Bit of Why and When?

Well, I was at PyCon Ireland last weekend and I missed the NiceGUI talk. I hear postive things about it and anything shiney and anything frontend-related always catches my attention (although I admit talking to a friend when I missed this talk was just as fun, and it was worth it).

And yesterday I just want to write something, that's the beginning of the "when" for this silly project. 😆

How?

Well, I wanted to try some things:

• httpx in place of requests library
• NiceGUI
• Tito's API - I've been meaning to have a poke at it

Problems I encountered

Before I mention things I came across, NiceGUI is really nice to use, docs are adequate and certainly enough demos and examples to get you going.

Main issue I came across was the "label" or the text that kept getting appended after I added a "timer" to call the function to pull a GET request. I set it to every 1 minute as I am impatient, will increase this at some point.

The output kept getting appended instead of being overwritten or refreshed. 🤔

After a number of trial and errors, I found I could use a decorator called @ui.refreshable on the function I'm called to set the text on the labels. And yes, I created 2 labels as I wanted to see the number of people who registered for the event and the number of tickets registered. 🙌

ℹ️ The former could have registered for a team of 5, so that is why the number is smaller than the latter.

Anyway, as this was a teeny side project, there wasn't many big problems I encountered! Which is good news! 😆

Mick mentioned repl.it which I forgot about and I'm am still paying for its subscription; I was meaning to use it for writing content for coding workshops but I just didn't have the time, and many moons have passed.

This was my opportunity and I logged in and wow, things have improved loads, UIs certainly looked nicer.

So created a new Python replit, and realised they don't use .env and instead use secrets: https://docs.replit.com/programming-ide/workspace-features/secrets#how-replit-keeps-your-secrets-safe

Anyway, installed all the packages I needed, and ran it, it worked! 🤩

Now to deploy, success!

Now I can just have that open or check the status on my phone. 😎

You can check it out, it's not really styled in anything fancy, just the 2 bits of info I needed: https://seasons-geekings-event-update-codinggrace.replit.app/

Here's the code, it's only a few lines, and I'm not going to refactor it anymore, it was a fun experiment.

I can't wait to use niceGUI with the things I learnt, and build/port a website with it.

niceGUI also supports TailwindCSS, I'm still a big fan of it. 🥰

import json
import os

import httpx

from nicegui import ui

headers = { "Authorization" : os.getenv("Authorization"), 
    "Accept":"application/json"}

ENDPOINT = "https://api.tito.io/v3/"
GET = "irishgeeks/seasons-geekings-the-techie-charity-quiz"

REGISTRATION_CNT = ""
TICKETS_CNT = ""

@ui.refreshable
def get_info_from_tito():
    r = httpx.get(ENDPOINT + GET, 
                headers=headers
    )
    data = r.content
    json_data = json.loads(data)
    REGISTRATION_CNT = json_data.get("event").get("registrations_count")
    TICKETS_CNT = json_data.get("event").get("tickets_count")

    ui.label(f'REGISTRATION_CNT: {REGISTRATION_CNT}').style('color: #6E93D6; font-size: 200%; font-weight: 300')
    ui.label(f'TICKETS_CNT: {TICKETS_CNT}').style('color: #6E93D6; font-size: 200%; font-weight: 300')

ui.markdown('# Info from [SEASON\'S GEEKINGS TITO PAGE](https://ti.to/irishgeeks/seasons-geekings-the-techie-charity-quiz)')

get_info_from_tito()
ui.timer(120.0, lambda: get_info_from_tito.refresh())

ui.run()