Up & Running with Vuetify in 5 Minutes using BANanoVuetifyAD3
Hi there
My previous article which then I titled Part 1 of the BANanoVuetifyAD3 ecosystem bears reference. If you have not done so, head up to GitHub and get yourself a free copy of BANanoVuetifyAD3, follow the GitHub instructions to get your B4x IDE up and running also. This was well explained in the previous write up anyway.
So what happened after my first article here about Vuetify? Well, I have been adding more functionality to the library and streamlining some things. During this week I did a couple of things, like creating a horizontal scroller using the VSlideGroup.
This ended up being part of my vlog for today titled, Vue Axios HTTP Requests with BANanoVuetifyAD3 — Powered by BANano + Vuetify + B4x
I had also explored the fetch API with BANanoVuetifyAD3 with excellent results.
As you might have noticed in the previous article, I mostly dealt about setting up your IDE and then exploring some parts of the B4x IDE and the source code behind. You might have also noted that the language being used is similar to Visual Basic. Yeah, it is.
This language is called B4x, and it comes from Anywhere Software. I have been able to create and develop a few things with it too. Using the same code base, the same layout designer etc, during my time of absence here and released an app on both the Android and Apple Play Store, to mention a few things. The app is called XPanda and available on Xpanda (Android), and Xpanda Smart Box (iOS). I was really happy with myself, client happy too.
I must say I love the simplicity of how one can just create Native Apps with b4x and now WebApps/SPA/PWA with BANano.
Anyway, back to the topic in question. Up & Running with Vuetify in 5 Minutes? Yep. Yesterday I read an article of how one can create an app in 30 seconds from Webix. I will see if I can beat that hey. Just joking.
Some silly assumptions.
You have successfully set up your b4x b4j IDE and all is good.
There is also B4A (Android), B4I (iOS), B4J (Java) and B4R (Arduio). All these use almost the same code base to produce Native Applications. For BANanoVuetifyAD3 we are using B4J.
Reproduction
- Open the B4X-B4J IDE
- Click File > New > BVAD3 Blank, you should see Figure 1
Figure 1
3. Type in your project name in the prompt as per Figure 2 below.
Figure 2
4. Click the Run menu button / press F5, as per Figure 3 below.
Figure 3
5. This should “transpile” your project to javascript and open your default browser. You should see this Figure 4.
Figure 4
This should take you just about 5 minutes to complete. #Drops mic!!
Where is my compiled project?
In the Main Module, you will see this code.
#IgnoreWarnings:12, 15
Sub Process_Globals
Public BANano As BANano ‘ignore
‘this is the folder on your development server.
Public AppName As String = “bvad3hello”
Public AppTitle As String = “Hello BANanoVuetifyAD3”
Private Publish As String = “C:\laragon\www”
Public Version As String = “1.00”
Public ServerIP As String
End Sub
In the Main module, there is a AppName with bvad3hello and Publish string with c:\laragon\www. This means that the complete path for our project is c:\laragon\www\bvad3hello. This is indicated in Figure 5 below.
Figure 5
The generated content is what you can FTP up to your webserver for the InterWeb. You can watch this on YT too.
Take care, happy coding!
PS: We have just released Version 7.29 RC of BANanoVuetifyAD3 with some new awesome updates. Check it out on this blog here.
