[BANanoVuetifyAD3] Early Stages of the Kanban Board Creation Process

Mashiane

Expert
Licensed User
Longtime User
so it's not creating a server that provides the HTML to the client (that must be mostly written outside b4j) and handles all requests/responses from the client
Besides the "normal webapps", with BANanoServer, you are also able to create jetty websocket based webapp, and Alain has "promised" us a lot of exciting things with B7. Cant wait..

As an example, my first attempt was a contact manager, here is the link: https://www.b4x.com/android/forum/t...erver-mysql-jrdc2-source-code.133115/#content

Ta!
 

ilan

Expert
Licensed User
Longtime User
just had a look at Vue.JS and WOW!! i like it a lot!
looks really simple to create templates like this and update the data in my html file. will need to see how i can implement it in a b4j webapp.
 

alwaysbusy

Expert
Licensed User
Longtime User
ok so the b4j project will compile and create for me the html/css/js files and they will run independently.
so it's not creating a server that provides the HTML to the client (that must be mostly written outside b4j) and handles all requests/responses from the client like for example NodeJS? or is that also possible?
Front-end (Browser): BANano -> independent html/css/js. All the logic and UI is written in plain B4J and the Abstract Designer + the special BANano commands

BUT:
This does not mean you can't make e.g. REST Api calls to a B4J jServer from it (with the BANanoFetch object) or even make use of WebSockets if you want bi-directional communcation.

Back-end (Server): BANanoServer (which is just an easy-to-use wrapper library of the normal B4J jServer where some stuff is preset for you, but you can just use a normal jServer project too if you want).

For example, in our company we have written a PWA with B4J + BANano for a client that registers times and material used. It works stand-alone on the users mobile browser (saving the data in a BANanoSQL database on the browser). So if the user goes offline, he can just continue to work.

1635081435491.png


Next to it, we have jServer running on our server that holds a REST Api. Periodically, the PWA uses a BANanoFetch object to sync its data with this jServer making REST Api calls.

Snippet:
B4X:
public Sub SendRegistrationsWait()
    Dim Results As List
    Results = SQL.ExecuteWait($"SELECT dtitscan, dtgrpscan, dtid, dttype, dtdatetime, dtstop, dtstart, dtextra FROM tData WHERE dtstatus=2"$, Null)
  
    If Results.Size = 0 Then
        SKTools.ShowToast("Niets om door te sturen", "info", 3000, True)
        Return      
    End If
  
    Dim now As Long = DateTime.Now
  
    Dim RecList As List
    RecList.Initialize
    For i = 0 To Results.Size - 1
        Dim dataSend As Map
        dataSend.Initialize
      
        Dim m As Map = Results.Get(i)
        Dim resM As Map
        resM.Initialize
      
        resM.Put("ic", m.Get("dtitscan"))
        resM.Put("gc", m.Get("dtgrpscan"))
        resM.Put("va", 0)
        resM.Put("ri", m.Get("dtid"))
        resM.Put("rt", m.Get("dttype"))
              
        RecList.Add(resM)
    Next
    dataSend.Put("da", RecList)
    dataSend.Put("tp", 100)
  
    Dim fetch As BANanoFetch
    Dim fetchOptions As BANanoFetchOptions
    Dim fetchResponse As BANanoFetchResponse
  
    Dim data As Map
    Dim Error As String
      
    Dim JsonG As BANanoJSONGenerator
    JsonG.Initialize(dataSend)
  
    fetchOptions.Initialize
    fetchOptions.Method = "POST"
    fetchOptions.Body = JsonG.ToString
    fetchOptions.Headers = CreateMap("Content-type": "application/json; charset=UTF-8", "api_key": APIKey)
  
    fetch.Initialize("https://api.xxxxxxxxxxxxxxxxxx/v1/registration/uploadxxxxxxxxxxx", fetchOptions)
    fetch.Then(fetchResponse)
        ' we got a response, but as the Json() method returns a Promise, we will need to process it in the next 'then' so we return it to this Fetch
        fetch.Return(fetchResponse.Json)
    fetch.ThenWait(data)
        If data.get("status") = "OK" Then
            SQL.ExecuteWait($"UPDATE tData SET dtstatus=99 WHERE dtstatus=2"$, Null)
            SKTools.ShowToast("Alles doorgestuurd.", "info", 3000, True)         
        Else
            SKTools.ShowToast("Doorsturen niet gelukt.", "info", 3000, True)
        End If      
    fetch.ElseWait(Error)
        SKTools.ShowToast(Error, "info", 3000, True)
    fetch.End
End Sub

This was not a big project and I finished it (both the PWA and jServer part) in less than a day. Something that would've taking me a lot longer if I had to use another tool, or writing it manually. Also the reason I wrote BANano ?

Alwaysbusy
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
The reason there is 3 on BVAD3 is, attempt 1 - mistakes / failure, attemp2 - mistakes / failure, attempt 3 - finally the globe lights... ha ha ha. So 3 is everything I learned and mastered between 1 and 2, and its only touching the surface. Guess what? BVAD4 is on the way, code -named SITHASO, its very hard to be a perfectionist, but then 4 takes a lot of what 3 has, the only major thing is consolidating of the 2 most important classes modules into 1 (that breaks everything sadly, so its for new projects) and off course the candy that BANano 7 is bringing. Thanks you Alain for the tweaks and additions to BANano, especially the ones that support BVAD3.
 

alwaysbusy

Expert
Licensed User
Longtime User
@ilan I happy to help with stuff, but try to make the question rather specific: e.g. it is easier for me to explain something like 'how does one make an API call from the PWA to the jServer App I have written?' than 'how does BANanoFetch work?'. The second question can be very extensive to answer (and as I'm a techie and not a writer, the answer may not even help you very much ;) ).

I currently working on something for v7 that will (hopefully) bridge the gab even more with the example webapps Erel has made. For example, the goal is to make it possible to load a HTML file with the BANanoRouter and, just like one is used to with the jQueryElement on the Server side in B4J, it automatically links the variables in your B4J code (by name) with the html IDs and even creates the events on the Browser side. This will be called in BANano a BANanoAutoElement.

Snippet:
B4X:
Sub Class_Globals
    Private BANano As BANano 'ignore
    
    Dim LogOut As BANanoAutoElement ' has id="logout" in the tag (lowercased!)
    Dim TableLine As BANanoAutoElement ' has data-banevent="tableline" in the tag (lowercased!)
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize()

End Sub

' router path /testPage1
Sub BANano_RouterHandle(url As String, data As Map, params As Map)
    Log(url)

    Main.router.LoadHTML("home.html")
    ' note that we have done nothing to initialize LogOut with the html tag with id="logout"    
    Log(LogOut.GetText)
End Sub

' you have nothing special to do to make these events work
Sub Logout_Click(event As BANanoEvent)
    BANano.Alert("Hi, are you sure?!")
End Sub

Sub TableLine_Click(event As BANanoEvent)
    Dim tmpLine As BANanoElement = Sender
    Log(tmpLine.GetText)
End Sub

Sub BANano_RouterLeaving() As Boolean
    Log("Do some checks Page 1")
    Return True
End Sub

Still in early stages, but I'll get there...

Alwaysbusy
 

alwaysbusy

Expert
Licensed User
Longtime User
I see for anyone who can just find any template they like on the web and "plug and play"
Indeed, this was a feature request I had see passing by a couple of times. They will not be able to use and take advantage of the Abstract Designer like with your library and will have to write their HTML manually, but it would be an extra option available.

Alwaysbusy
 

Mashiane

Expert
Licensed User
Longtime User
They will not be able to use and take advantage of the Abstract Designer
Perhaps its a good thing, besides, i have received request to also add functionality to built UI just by coding. There was also a request here in the forum in support of full app coding without even using the abstract designer, in support of people who cant use such tools.

It got me thinking the other day, with AI tools coming to the fore to do this and that and coding, how could one instruct it to use an abstract designer?

Peoples opinions...

 

Star-Dust

Expert
Licensed User
Longtime User
I tried these visual programming systems years ago. They slow down the coding a lot and in any case you always have to write to parameterize the functions. I make the large sources illegible.

Good for teaching programming, but not good at professional levels
 

Mashiane

Expert
Licensed User
Longtime User
I have tried these visual programming systems, they slow down the coding a lot and in any case you always have to write to parameterize the functions.
Good for teaching programming not good at professional levels
True, Microsoft "copied" Blocky from Google for such purposes and then killed it. Yes I guess for kids and stuff, it could be useful to teach them the basics, but for anyone looking for pure productivity, other tools will do the job.
 

Star-Dust

Expert
Licensed User
Longtime User
Tra AppInventor for Android
 

ilan

Expert
Licensed User
Longtime User
i learned a lot from Erel's WebApps Collection. Simple Apps is a better way to learn then complex one. i prefer to learn from examples that target a single feature and then it is easier for me to create complex apps after learning the features one by one.

having a collection of Erel's WebApps created with B4ANano (or ABMaterial) will make it much much easier for people to get into it.
 
Top