B4J Tutorial [Web] Beginning Telegram Mini Apps - CloudStorage aka CRUD Key-Value Store

Hi Fam

Demo (Open in Telegram Mobile App)

Source Code

Today we look at Telegram Cloud Storage, a key-value pair storage available on the Mini Apps. We will create a task manager to demonstrate this. This will have a done indicator, the task name and one will be able to edit and delete a task.

Each bot can store up to 1024 items per user in the cloud storage.

The final app works as task manager.












To create our list of tasks, we will use the SDUIMenu and then a custom item. The template for each custom task item is like this.

B4X:
<li id="taskitem">
    <div id="taskrow" class="row px-2 py-0 grid-cols-12 grid">
        <div id="taskcola" class="col col-span-2 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2 flex justify-center items-center">
            <input id="taskdone" name="taskdone" type="checkbox" class="checkbox checkbox-success"></input>
        </div>
        <div id="taskcolb" class="col col-span-6 sm:col-span-6 md:col-span-6 lg:col-span-6 xl:col-span-6">
            <p id="taskname">{task}</p>
        </div>
        <div id="taskcolc" class="col col-span-2 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2 flex justify-center items-center">
            <div id="btntaskedit_indicator" class="indicator">
                <button id="btntaskedit" class="btn btn-circle btn-sm btn-neutral tooltip-left">
                    <span><i id="btntaskedit_icon" class="fa-solid fa-pencil fa-sm"></i></span>
                </button>
            </div>
        </div>
        <div id="taskcold" class="col col-span-2 sm:col-span-2 md:col-span-2 lg:col-span-2 xl:col-span-2 flex justify-center items-center">
            <div id="btntaskdelete_indicator" class="indicator">
                <button id="btntaskdelete" class="btn btn-circle btn-sm btn-neutral bg-[#ff0000] tooltip-left">
                    <span><i id="btntaskdelete_icon" class="fa-solid fa-trash fa-sm"></i></span>
                </button>
            </div>
        </div>
    </div>
</li>

We save this in our assets as taskitem.txt and then add the template to our app as..

B4X:
BANano.Await(app.AddMyLayoutFile("taskitem", "./assets/taskitem.txt"))

Let's continue...
 
Last edited:
Cookies are required to use this site. You must accept them to continue using the site. Learn more…