B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane · Dec 29, 2020

Part 41 continued..

You need to create a service worker file after BANano.Build.

NB: The service worker file should reside on the root folder of your web server

B4X:

BANano.Build(Publish)
   
    'on chrome DISABLE: chrome://flags/#enable-native-notifications
    'add firebase messaging service worker
    'at root of site.
    File.Copy(File.DirAssets, "firebase-logo.png", Publish, "firebase-logo.png")
    'create the service worker file
    Dim fbm As String = File.Combine(Publish, "firebase-messaging-sw.js")
   
File.WriteString("", fbm, $"//self.addEventListener("notificationclose", console.log);
//self.addEventListener("notificationclick", console.log);

importScripts("https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js");
importScripts("https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js");

var firebaseConfig = {
    apiKey: "(redacted)",
    authDomain: "(redacted)",
    projectId: "(redacted)",
    storageBucket: "(redacted)",
    messagingSenderId: "(redacted)",
    appId: "(redacted)",
    measurementId: "(redacted)"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('service worker', payload);
  const notification = payload.notification;
  const notificationTitle = notification.title;
  const notificationOptions = {
    body: notification.body,
    icon: '/firebase-logo.png',
    tag: 'fb'
    requireInteraction: true,
  };
  return self.registration.showNotification(notificationTitle, notificationOptions);
});"$)

Mashiane · Dec 29, 2020

Part 41 Continued.

To send messages, we will attempt to use BANanoFetch, you will need these...

Mashiane · Dec 29, 2020

Part 41 Continued

Our next step is to try and attempt to send messages via the client. We will use a token to do this and send the message using BANanoFetch. This will send a message which can be received when the app has the focus or in background (latter not tested yet)

You can create your user interface to do this anyway you want of course...

1. Get the registered token to send a message to.

We can then use Push.JS to show the notification on the client side when the app runs in the foreground!

B4X:

'use fetch
    Dim response As BANanoFetchResponse
    Dim error As BANanoObject
    Dim data As BANanoJSONParser
  
    Dim options As BANanoFetchOptions
    options.Initialize
    options.Method = "POST"
    '
    'lets define the headers
    Dim hdrs As Map = CreateMap()
    hdrs.Put("Content-Type", "application/json;")
    hdrs.Put("Authorization", "key=" & firebase.serverkey)
    options.Headers = hdrs
    '
    'lets define the notification
    Dim notification As Map = CreateMap()
    notification.put("title", stitle)
    notification.Put("body", smessage)
    notification.Put("icon", "./assets/firebase-logo.png")
    'lets define the body of the fetch
    Dim body As Map = CreateMap()
    body.put("to", stoken)
    body.put("notification", notification)
    options.Body = banano.ToJson(body)
       
    Dim fetch As BANanoFetch
    fetch.Initialize("https://fcm.googleapis.com/fcm/send", options)
    fetch.Then(response)
    fetch.Return(response.json)
    fetch.Then(data)
    Dim res As Map = data.NextObject
    Dim results As List = res.get("results")
    If results.Size > 0 Then
        Dim result As Map = results.Get(0)
        Dim smessage_id As String = result.Get("message_id")
        vuetify.ShowSnackBarSuccess("Message ID: " & smessage_id)
    End If
    fetch.Else(error)
    Log(error)
    fetch.End

To be continued...

Mashiane · Dec 29, 2020

Part 41 Continued

When the app is in the background, e.g, minimized etc, the background message catcher in the service worker will be fired.

Mashiane · Dec 29, 2020

Part 41 continued.

To show the notification at client side, we write some code. Thanks to stack over-flow.

B4X:

messaging.onMessage(function(payload) {
    console.log("onMessage: ", payload);
    navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
        registration.showNotification(
            payload.notification.title,
            payload.notification
        )
    });
});

We write this in BANano as...

B4X:

'when a message is received when app has focus
'Reference: https://stackoverflow.com/questions/40411059/create-firebase-notification-with-page-in-foreground-focus/60247902#60247902
Sub onMessage(payload As Map)
    Log("foreground: onMessage...")
    Log(payload)
    Dim notification As Map = payload.Get("notification")
    Dim sbody As String = notification.Get("body")
    Dim sicon As String = notification.Get("icon")
    Dim stitle As String = notification.Get("title")
    '
    Dim nav As BANanoNavigator = banano.Navigator
   
    Dim registration As BANanoObject
    Dim swe As Map
    Dim swr As BANanoPromise = nav.GetField("serviceWorker").RunMethod("getRegistration", "/firebase-cloud-messaging-push-scope")
    banano.Await(swr)
    swr.Then(registration)
    Dim notificationOptions As Map = CreateMap()
    notificationOptions.Put("body", sbody)
    notificationOptions.Put("icon", "./assets/firebase-logo.png")
    notificationOptions.Put("requireInteraction", True)
    notificationOptions.Put("putvibrate", Array(300, 100, 400))
    '
    registration.RunMethod("showNotification", Array(stitle, notificationOptions))
   
    swr.Else(swe)
    vuetify.ShowSnackBarError("We could not show the notification...")
    Log(swe)
    swr.End
End Sub

Enjoy!

Mashiane · Dec 29, 2020

Part 41

Firebase Messaging using Service Workers

Download

joulongleu · Dec 30, 2020

Hi: @Mashiane :Test the following error

Mashiane · Dec 30, 2020

@joulongleu : Did you set up firebase and got the firebase configution from your console. Did you update all "(redacted)" sections on the code for both the component page and the service worker code after BANano.Build?

Mashiane · Dec 30, 2020

@joulongleu . Can you run in Release mode. When the browser is opened, hold the shift key and click the reload button on the browser as the same time.

joulongleu · Dec 30, 2020

Mashiane said:
@joulongleu . Can you run in Release mode. When the browser is opened, hold the shift key and click the reload button on the browser as the same time.

Same error

Mashiane · Dec 30, 2020

Can you upload to a webserver that you can access from the internet and see what happens. I dont have a clue why and i cant reproduce.

Mashiane · Dec 31, 2020

Implementing the BVAD3 B4X Project Template in B4J

Enjoy!

Mashiane · Dec 31, 2020

joulongleu said:
The program is attached as follows

Is this the same original code as in my tutorial 41 or you have made your own updates?

@joulongleu - can you respond....

Mashiane · Dec 31, 2020

Version 2.90 BETA Releases.

1. Important bug fix with .GetData where propety uses a .
2. Switch fix.

By default, when the switch does not have a color specified, it uses a "primary" color.

The second switch here a "success" specification for the color. So one can really "see" when OFF and ON.

Download

joulongleu · Jan 1, 2021

Mashiane said:
Is this the same original code as in my tutorial 41 or you have made your own updates?

@joulongleu - can you respond....

WOW

Try is ok .Thank You. @Mashiane You're awesome.

joulongleu · Jan 1, 2021

Hi Mashiane: How to use Subscribe to Topic?

Mashiane · Jan 2, 2021

Part 42

Download

Part 42 is out, we deal with...1

1. Get a token
2. Create a topic and then subscribe to it using the obtained token.
3. Send a message to a topic.
4. Un-subscribe from a topic. - click delete button on the topic list after you get it.

NB: This only works on HTTPS:

Mashiane · Jan 2, 2021

Part 43

Download

1. We have removed the background images for both the navbar and navdrawer.
2. We used a tree sctructure on the drawer
3. We changed the color of the navbar to be light blue.

joulongleu · Jan 3, 2021

Mashiane said:
Tutorial 40a: The MySQLCRUD class to build CRUD code e.g. data-table and dialog box.

Download Version 2.75 BETA

This library class helps one generate CRUD source code for MySQL backend and the generated CRUD source code can be easily adopted as per tutorial 34... for MSSQL, SQLite and BANanoSQL databases, after all, those share 99% source code for CRUD.

MySQLCRUD

Diag_AddTextField (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a text field to the dialog

Diag_AddTextArea (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a text area to the dialog

Diag_AddTimePicker (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a time picker dialog

Diag_AddDatePicker (fldName As String, row As Int, col As Int, vmodel As String, title As String)
add a date picker to the dialog

Diag_AddFileInput (fldName As String, row As Int, col As Int, vmodel As String, title As String, bMultiple As Boolean)
add a file input to the dialog

Diag_AddPassword (fldName As String, row As Int, col As Int, vmodel As String, title As String, maxLen As Int)
add a password to the dialog

Diag_AddCombo (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bReturnObject As Boolean, bMultiple As Boolean)
add a combo to the dialog

Diag_AddSelect (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bReturnObject As Boolean, bMultiple As Boolean)
add a select to the dialog

Diag_AddAutoComplete (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bReturnObject As Boolean, bMultiple As Boolean)
add an auto complete to the dialog

Diag_AddCheckBox (fldName As String, row As Int, col As Int, vmodel As String, title As String, YesValue As Object, NoValue As Object)
add a checkbox to the dialog

Diag_AddSwitch (fldName As String, row As Int, col As Int, vmodel As String, title As String, YesValue As Object, NoValue As Object, bInset As Boolean)
add a switch to the dialog

Diag_AddRadioGroup (fldName As String, row As Int, col As Int, vmodel As String, Title As String, DataSource As String, Key As String, Value As String, bRow As Boolean, bMultiple As Boolean)
add a radio group to the dialog

Diag_AddImage (fldName As String, row As Int, col As Int, url As String, lazysrc As String, alt As String, width As String, height As String)
add an image to the dialog

DT_SetTextArea (colName As String, bLarge As Boolean)
set a text area data-table edit dialog

DT_SetTextField (colName As String, bLarge As Boolean)
set a text field data-table edit dialog

DT_AddTitleIcon (elID As String, eIcon As String, btnColor As String)
add an icon to the data-table toolbar

DT_AddAction (colField As String, colTitle As String, colIcon As String)
add an action column to the data-table

DT_AddIconView (colField As String, colTitle As String, colColor As String)
add an icon view column to the data-table

DT_AddChip (colField As String, colTitle As String, colColor As String)
add a chip column to the data-table

DT_AddSwitch (colField As String, colTitle As String)
add a switch column to the data-table

DT_AddCheckBox (colField As String, colTitle As String)
add a checkbox column to the data-table

DT_AddImage (colField As String, colTitle As String)
add an image column to the data-table

DT_AddFileSize (colField As String, colTitle As String)
add a file size column to the data-table

DT_AddTime (colField As String, colTitle As String)
add a time column to the data-table

DT_AddMoney (colField As String, colTitle As String)
add a money column to the data-table

DT_AddLink (colField As String, colTitle As String, target As String)
add a link column to the data-table

DT_AddAvatarImg (colField As String, colTitle As String)
add an avatar column to the data-table

DT_AddRating (colField As String, colTitle As String)
add a rating column to the data-table

DT_AddProgressCircular (colField As String, colTitle As String)
add a progress circular column to the data-table

DT_AddProgressLinear (colField As String, colTitle As String)
add a progress linear column to the data-table

DT_AddColumn (colName As String, colTitle As String)
add a column to the data-table

DT_AddDateColumn (colName As String, colTitle As String, colFormat As String)
add a date column to the data-table

DT_AddDateTimeColumnDate (colName As String, colTitle As String, colFormat As String)
add a date time column to the data-table

DT_AddNumberColumn (colName As String, colTitle As String, colFormat As String)
add a number column to the data-table

DT_AddButtonColumn (colName As String, colTitle As String)
add a button column to the data-table

DT_AddLinkColumn (colName As String, colTitle As String, target As String)
add a link column to the data-table

DT_AddColumn1 (colName As String, colTitle As String, colType As String, colWidth As Int, colSortable As Boolean, colAlign As String)
add a column to the data-table

AddDefaults (fld As String, def As String)
set dault value for a field

AddVisibility (fld As String, bVisibility As Boolean)
set visibility for a field

Prepare As MySQLCRUD
prepare for execution

AddStrings (stringNames As List)
add field data types - strings

AddFilters (fltName As List)
add columns to filter

AddIntegers (integerNames As List)
add field data types - integers

AddDoubles (doubleNames As List)
add field data types - doubles

AddBlobs (blobNames As List)
add field data types - blobs

ToString As String
convert to string

Save
save the generated source code

Above, we have methods here for Diag (Dialog) and DT (Data-Tables). The generated source code will be used to draw up a dialog box for user input and data-table for listing records etc, linked to a MySQL backend database.

Usage

1. In your MySQL, create a database named "test" and a table named "users". The .AddStrings and .AddIntegers method calls below have your field names and types. Use those to create the schema of your Users table.

2. Create a new Code Module, name it ViewMySQLUsers, you can use tutorial 40 for this.

3. On BANano_Ready, define your code builder. This is an example. This will generate a text file.

B4X:

'define and initialize the code builder Dim crud As MySQLCRUD crud.Initialize 'define the database name crud.databasename = "test" 'define the table name crud.tablename = "user" 'what is the primary key of this table crud.PrimaryKey = "userid" 'which field is the auto-increment field, if none comment out crud.AutoIncrement = "userid" 'what is the singular name for each record crud.Singular = "User" 'what is the plural name for many records crud.Plural = "Users" 'which field should be used to sort the records crud.SortBy = "fullname" 'what is the component name to create crud.componentname = "users" 'we have an alert/confirm dialog crud.HasDialog = True 'IMPORTANT before execution crud.Prepare 'add data types for the backend crud.AddStrings(Array("firstname", "lastname", "add1", "add2", "add3", "city", "tel1", "tel2", "email", "active", "profilepic", "password", "regdate", "fullname")) crud.AddIntegers(Array("userid", "provinceid")) 'add these after data type indications to specify the default values per field crud.AddDefaults("userid", -1) crud.AddDefaults("provinceid", -1) crud.AddDefaults("firstname", "") crud.AddDefaults("lastname", "") crud.AddDefaults("add1", "") crud.AddDefaults("add2", "") crud.AddDefaults("add3", "") crud.AddDefaults("city", "") crud.AddDefaults("tel1", "") crud.AddDefaults("tel2", "") crud.AddDefaults("email", "") crud.AddDefaults("active", "Yes") crud.AddDefaults("profilepic", "") crud.AddDefaults("password", "") crud.AddDefaults("regdate", "") crud.AddDefaults("fullname", "") 'when dialog is opened, focus on which field. NB: This currently raises an error, comment it out on final file crud.focuson = "firstname" 'the field value to show to confirm deletion crud.DisplayField = "fullname" ' 'the data-table has search crud.DT_HasSearch = True 'the data-table has an add new button crud.DT_HasAddNew = True 'the data-table has clear sort crud.DT_HasClearSort = True 'the data-table has a column visibility filter crud.DT_HasFilter = True 'the data-table has a refresh button crud.DT_HasRefresh = True 'the data-table has an edit column crud.DT_HasEdit = True 'the data-table has a delete column crud.DT_HasDelete = True ' 'add columns to data table 'crud.DT_AddColumn("transtypeid", "Type ID") crud.DT_AddAvatarImg("profilepic", "Profile Pic") crud.DT_AddColumn("firstname", "First Name") crud.DT_AddColumn("lastname", "Last Name") crud.DT_AddColumn("email", "Email") crud.DT_AddColumn("tel1", "Mobile #") crud.DT_AddDateTimeColumnDate("regdate", "Registration", "") crud.DT_AddSwitch("active", "Active") 'we want inline-editing on the data-table, these columns should use a text field crud.DT_SetTextField("firstname", True) crud.DT_SetTextField("lastname", True) crud.DT_SetTextField("email", True) crud.DT_SetTextField("tel1", True) 'dialog settings 'set visibility for the fields you want hidden in the dialog crud.AddVisibility("userid", False) 'the width of the dialog box crud.DialogWidth = "400" crud.Diag_AddTextField("userid", 1, 1, "userid", "User #") crud.Diag_AddImage("profilepic", 2, 1, "profilepic", "", "User Profile", "80", "80") crud.Diag_AddFileInput("chooseprofile", 2, 2, "chooseprofile", "Choose Profile Picture", False) crud.Diag_AddTextField("firstname", 3, 1, "firstname", "First Name") crud.Diag_AddTextField("lastname", 3, 2, "lastname", "Last Name") crud.Diag_AddTextField("tel1", 4, 1, "tel1", "Mobile #") crud.Diag_AddTextField("tel1", 4, 2, "tel1", "Telephone #") crud.Diag_AddTextField("add1", 5, 1, "add1", "Address Line 1") crud.Diag_AddTextField("add2", 6, 1, "add2", "Address Line 2") crud.Diag_AddTextField("add3", 7, 1, "add3", "Address Line 3") crud.Diag_AddTextField("city", 8, 1, "city", "City") crud.Diag_AddTextField("provinceid", 8, 2, "provinceid", "Province") crud.Diag_AddSwitch("active", 9, 1, "active", "Active", "Yes", "No", True) ' crud.Save

4. Paste the contents of the text file to your ViewMySQLUsers code module. Initialize the ViewMySQLUsers on AddRouters and also add it to your Links. Ensure the msconfig.php file is set propertly.

5. In your app, comment the builder code out and run your app.

Try it out!

PS: You need to update the code before .BuildGrid for the dialog to meet the requirements of your dialog. Reference the BANanoExcel library from the External Libraries folder from the repo.

Known Issues:

CheckBoxes, Switches have a data-binding bug with the v-dialog. Still investigating.

Hi:?@Mashiane :
After trying for a long time, although I can generate the code, I still don’t know how to use it
1. Is there a video to learn?
2. Whether to generate MSSQLCRUD?

Mashiane · Jan 3, 2021

joulongleu said:
After trying for a long time, although I can generate the code, I still don’t know how to use it

There is no video for the MySQLCRUD class, however in that post, I did indicate how one needs to use the code.

Assumptions:

1. You have defined mysqlconfig.php to connect to your database, this database should be named "test"
2. You have a database named "test" and a table named "user"
3. You have used the schema indicated in the MySQLCRUD you have defined to create the users table.
4. You have created the ViewMySQLUsers code module in B4X.
5. You run the above code in BANano_Ready (comment out pgIndex.Initialize)
6. Copy the generated text file contents to ViewMySQLUsers code module as is.
7. Comment the code to create text file on BANano_Ready and uncomment pgIndex.Initialize
8. In AddRouters, add ViewMySQLUsers.Initialize
9. On the links, add an additional link to point to ViewMySQLUsers.
10. Run the application,

I will attempt to have a demo video sometime..

Ta!

B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Active Member

Active Member

Expert

Expert

Active Member

Attachments

Expert

Similar Threads