B4J Tutorial [Web] SithasoIONIC7 - Let's create a Sticky Notes Mobile App using LocalStorage

Hi there fam.

Demo

Let's wireframe and create a Sticky Notes Mobile App.

1. One should be able to create and save sticky notes.
2. The sticky notes should be color coded. We use a FAB with colors to add color coded notes.
3. One should be able to add, update and delete a sticky note.
4. We will store our Sticky Notes in Local Storage - (rather volatile but will do)
5. One can list available sticky notes.

To Add a note - we use a Bottom Sheet Modal

To Delete - we use an alert.

Here we go...

This is wireframed with SithasoIONIC7 Wireframes. Get your FREE version here.

 

[Mashiane]

Part 1: Creating The WireFrame

Watch how we create the wire-frame. I have attached the Wireframe - JSON file and the Abstract Designer Guide here also.

 

[Mashiane]

Part 2: Updating the Wireframe with Interactivity, Runtime Updates and Trapping Events

In this video we look at how to add interactivity to our wireframe using events. We try and make this to be close to how a real-life app will work like.


Attached is the

1. Wireframe JSON file
2. Abstract Designer Guide

 

[Mashiane]

Part 3 - Sticky Notes App in Action

 

[Abdull Cadre]

Thank you broo

 

[Mashiane]

The first post has been updated with a working demo as deployed on Vercel.

Please get the source code from your SithasoIONIC7 Download Location.

Enjoy!

PS: To develop SithasoIONIC7 Mobile Apps you need SithasoIONIC7. Get it at a discounted certificate of appreciation here.

[Web] Extended BLACK FRIDAY SALE @ 50% Off (SithasoDaisy & SithasoIONIC7)

Hi For Black Friday, we are offering both SithasoDaisy & SithasoIONIC7 @ 50% off discount. SithasoIONIC7 - emphasis on Mobile Hybrid WebApps with Native Feel https://www.b4x.com/android/forum/threads/web-sithasoionic7-ionic7-framework-powered-by-b4x-and-banano.149902/#content SithasoDaisy -...

www.b4x.com