My new PWA (BANANO Vuetify)

Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
I am trying to transform the company App into a PWA with Banano and Vuetify.

You can consult the registry of employees, customers and contact persons. Warehouse and warehouse movements.
In addition, the reports of the interventions with relative photos are preserved. This is used to create the invoices at the end of the month which includes the list of interventions carried out. This helps in the case of a customer who has requested multiple interventions or an open construction site.
Record the attendance of the staff and the calendar of daily interventions for each one.
Warehouse management and related inbound and outbound movements.

Each employee can see his working hours and his working calendar. Each customer can see his economic status, invoices, interventions received and interventions report.

For the moment only this. In a few years when I finish it I will add more images

ezgif.com-gif-maker (5).gif
 
Last edited:
JohnC

JohnC

Expert
Licensed User
Longtime User
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
I must say that I underestimated Banano, I did not understand what he did. Reading a kendo tutorial I misinterpreted the meaning and started to find out late.

I'm sorry I didn't use it before. I started at the insistence of a friend of mine who was following the development of the Vuetify library for Banano
 

Mashiane

Expert
Licensed User
Longtime User
Star-Dust said:
I must say that I underestimated Banano,
Click to expand...
Did the same mistake too initially. I dont think people know what BANano is and its power. After using B4J going back to B4a and B4i has been some kind of a challenge. I had to relearn b4a and b4i all over again due to how everything had evolved.

And we always shy away from things we dont understand and first. Until of course one takes the first step. There is a learning curve and being prepared to go all the way. A total renewing of the mind.

Thanks for Alain and congrats SD, keep changing the world!
 

aeric

Expert
Licensed User
Longtime User
I wanted to learn and use BaNano with Vuetify but I have lack of creativity in terms of design. I will borrow the ideas by downloading the free HTML template and then apply to my website. It is same when I develop a website using WordPress. There are some cool design templates which are free, packed with nice color gradient, JavaScript animation image slider and menus. I can’t create a nice design from a blank canvas. Therefore I always reuse existing HTML/CSS/JS templates created by others. What would you suggest?
 

Star-Dust

Expert
Licensed User
Longtime User
I have the same problem. While I create a lot of nice views, putting all the views together to have a coherent and friendly interface is another matter entirely.

With Vuetify you don't necessarily have to use CSS or templates, I haven't used any except where some views required specific customization, such as grids.

Vuetify already gives you its own graphic imprint, you just have to choose the colors and possibly the style of each view. The result is always pleasant.

Using templates is not wrong but I don't think it adds anything to Vuetify. While if you use Banano without Vuetify, having templates would give a unique style to the pages.

I recommend using Banano together with Vuetify at least initially, so you produce code faster by not having to spend too much time on the style and you will need it to become familiar with the tool. Over time being familiar you can also use templates if you deem it necessary.
Consider that you not only have Vuetify and AD3 but also Kendo which allow you to stylize the page. You have a fairly wide choice.

If you have to start, do not complicate your life because you have to learn many things at your expense because the documentation is not very much. Development went very fast and you don't have time to learn that you find news and there wasn't even time to document everything. So I would simplify at first
 

Star-Dust

Expert
Licensed User
Longtime User
ilan said:
i also want to learn banano the problem is that i need more simple examples to learn from them. it will make it much simpler to get into banano.
Click to expand...
It was also my problem. As soon as I can I will produce some examples
 

Star-Dust

Expert
Licensed User
Longtime User
I started with this simple example. that you can already use.

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

Ola ************************************************** Feb 2024: BVAD3 RoadMap https://www.b4x.com/android/forum/threads/bananovuetifyad3-2024-roadmap.159326/ ************************************************* Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download...
www.b4x.com

There are other examples scattered throughout the forum which I will post here along with some of my simple sources as soon as possible
 

Mashiane

Expert
Licensed User
Longtime User
This second video for example takes one through the process of converting a base layout from the Vuetify website and recreating it with bvad3.


With that said, the Vuetify documentation has visual examples and html structure for each component. We recreate the same with the abstract designer, generate events etc. This is how the whole kitchen sink was created with the abstract designer.

One of my secret formulars to learn Vuetify outside of the Vuetify documentation has been YouTube.

The Net Ninja does an awesome course here and gives one clarity about the ecosystem.


Also there is a Mashy Teaches Series added here in the forum. If one gets shy to post a question they can always pm, whatsapp, telegram etc. I am here.

In time I will release an ebook.
 
Last edited:

Peter Simpson

Expert
Licensed User
Longtime User
ilan said:
i also want to learn banano the problem is that i need more simple examples to learn from them. it will make it much simpler to get into banano.
Click to expand...
I 100% agree.

I've tried watching videos but I can't stand to text to speech voices in ANY videos, even those on YouTube. So sadly I don't watch them (my choice).
 

Star-Dust

Expert
Licensed User
Longtime User
Peter Simpson said:
I 100% agree.

I've tried watching videos but I can't stand to text to speech voices in ANY videos, even those on YouTube. So sadly I don't watch them (my choice).
Click to expand...
I have already reported this probleme. The problem is aggravated for those who are not native English speakers. Better A source and good comments.
 

Mashiane

Expert
Licensed User
Longtime User
Peter Simpson said:
I 100% agree.

I've tried watching videos but I can't stand to text to speech voices in ANY videos, even those on YouTube. So sadly I don't watch them (my choice).
Click to expand...
In the Mashy Teaches Series here I had started to transcribe the videos and you get text also as part of a thread post.

Thanks to SD advise for that.
 

Peter Simpson

Expert
Licensed User
Longtime User
Star-Dust said:
I have already reported this probleme. The problem is aggravated for those who are not native English speakers. Better A source and good comments.
Click to expand...

I totally agree, If you look at the examples that I have placed on the forum, you will see that my examples are ALWAYS full of explanatory comments exampling everything.

@Mashiane I'm PM you shortly...
 

Mashiane

Expert
Licensed User
Longtime User
I am noting your comments and happy for your interest. Let me also just perhaps clarify something to give a background. This will speak about Designing your App.

1. Almost everything of what you see in the kitchen sink is done via the abstract designer without coding.



BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System
mashiane.github.io

2. Each custom view in the BVAD3 system is done based on the Vuetify API. For example, the API for an VAlert is here, https://vuetifyjs.com/en/api/v-alert/#links.
This describes each attribute and what it does. This documentation already exists is available from the Vuetify Website.



For example, producing this



is possible through this code.



3. This Vuetify API has been re-created as custom views which by changing properties you are able to produce the same result.



As an example, check the Dark property comments (bottom) and also compare from the VuetifyAPI.




4. The Vuetify Website has all the components with example source code. One clicks the <> button to view the source of any component.



5. All of the Vuetify components (including additional ones) as available for the abstract designer. You design your UI based on the schema provided by Vuetify, e.g. put components inside another and set properties and after that generate events.



6. To get an understanding of how BANano works, you can start here.

BANano for Dummies by Example

Ola BANAno4Dummies TERMS OF ENGAGEMENT: Please DO NOT POST QUESTIONS ON THIS THREAD. I AM ONLY DOING THIS DUE TO THE NUMEROUS REQUESTS I HAVE RECEIVED TO DO IT. I AM NOT A BANANO EXPERT AND STILL A DUMMY MYSELF, EXPECT SPELLING ERRORS (I SPEAK XHOSA), EXPECT CODE ERRORS, BE CONSIDERATE, BE...
www.b4x.com
 
Last edited:

Magma

Expert
Licensed User
Longtime User
...well i ve tried to use ABMaterial, BaNano... and i have to say that are very exciting but my problem "especially" in BaNano was the documentation and the -not existing- simple code/comments small examples.. or to make it clean -> the problem was "i can't understanding them..."

well i hope in future to understand it better... and make beautiful PWAs like yours !
 

alwaysbusy

Expert
Licensed User
Longtime User
Just follow this:

1. Download the zip and unzip it:

DOWNLOAD https://gorgeousapps.com/BANano6.59.zip

Online help: https://gorgeousapps.com/banhelp.html
Click to expand...

2. Copy all files from the /Library folder to your B4J libraries folder.

3. Copy the b4xlib libraries you can find in the /BANanoLibraries folder to your B4J Additional Libraries folder (especially the Skeleton library found in /BANanoLibraries/Skeleton/Library)

4. Copy the BANano Skeleton.b4xtemplate file from the /Templates folder to your B4J libraries folder.

Now you can create a new project, which is basically a 'Hello world' example:



This is about as small an example as I can make it I'm afraid.

Alwaysbusy
 
You must log in or register to reply here.