B4J Tutorial [BANanoVueMaterial] MealPrep App

Ola

This is a wrap of this github project. For the BANano version, we will demonstrate the following:

1. BANanoPromises
2. BANanoFirestoreDB
3. Routers & Transitions
4. Firestore Auth
5. REST API (Edamam Recipe Database)
6. JSON manipulation
7. Sign In / Sign Up
8. Using V-IF Directive
9. Global Storage using javascript prototype
10. Setting Visibility depending on device break-points
11. Notifications via Snackbars
12. Callback functions
13. Rules

We will break the development of this app per parts. This will be the landing page.

Enjoy!

PS: To use the recipe search api, one needs to register.

1. Go to the site, https://www.edamam.com/ and select recipe search
2. Click on sign up and select recipe search api.

OR

3. Finalize the sign up..

• Once logged in, click Dashboard (top right)
• Then click Applications and create an application, you will get your API key and password.

TA!

 

[Mashiane]

Part 1

Download

NB: Created with BANanoVueMaterial BETA 4.38+

Here we create the navbar, drawer, footer and respective nav buttons.


Enjoy!

 

[cklester]

Why is quality limited to 360? Can you upload a 1080p or better version? I can't read any of the code!

Thank you!

 

[Mashiane]

Why is quality limited to 360?

Wait for the HD to upload. It should be fine after than and then maximize the screen.

I can't read any of the code!

You can access the source code from the download link also. Try maximize the video.

Ta!

 

[Mashiane]

Part 2

Download

NB: Created with BANanoVueMaterial BETA 4.38+ (just updated again)

Here we create the landing / home page with 3 sections, the hero section, the information section and the meal plans section.


Enjoy

PS: Watch in HD.

 

[Mashiane]

Part 3

In this part we look at the REST API to get recipes per diet plan. Recipes should show each time the "Select Plan" buttons are clicked. As that functionality sits on a component, we create a local method to the component which calls a globally defined sub routine to get the recipes per plan selected.

You need to use your credentials are obtained by following the 1st post.

Download

NB: Created with BANanoVueMaterial BETA 4.39+


NB: Watch in HD

 

[Mashiane]

Part 4: MealPrep - Electron Windows Desktop App.

In this part of the tutorial, we explore if we can create an Electron MealPrep Desktop App. We use what we learned in BANanoElectron and then just create a new project and copy all our source code (WITHOUT CHANGES) there. We update the Main > AppStart code to compile the app to Electron. At the end we have a running Windows Desktop App.

Download

Dependency: BANanoElectron


NB: Watch in HD.

This means our app can be released as both an internet based app and a desktop app.

Time to finalize the web version... this is just marking off some todo tests.

Enjoy

 

[Mashiane]

Part 5

In this part we extend the menu page and add the meal recipes for each of the available diet plans. We will later see how we can link the recipe ordering functionality to a firebase backend. For each diet plan, we call the rest api to give us the hits found per plan, we then draw these on a grid listing.

Download

NB: Developed with BANanoVuetify 4.40 BETA


Watch in HD

 

[Mashiane]

Part 6: Sign Up Form

For this part we create the Sign Up Form. This will be linked to a firebase database.



NB: Watch in HD.

 

[joulongleu]

linked to a firebase database.Very good

 

[Mashiane]

linked to a firebase database.Very good

Yep, we will use some of the code from this tutorial, https://www.b4x.com/android/forum/t...rud-cloud-firestoredb-wrap-for-banano.120739/

Ta!

 

[Mashiane]

Part 7: Sign In Form - Created with the abstract designer using custom views

In part 7, we follow another approach in creating our ux. We use the abstract designer.


NB: Watch in HD

 

[Mashiane]

Part 8: Firebase backend to store recipes.

Download

For this part of the tutorial, we will use what we learned here: BANanoFirebaseDB

Mostly, issues that were discussed on the Chat App

Here is a simplified methodology of creating firestore / firebase database.

• Go to firebase console
• click add project
• specify project name > Continue
• enable / disable google analytics > Continue / create project
• Your project Is ready > Continue
• Side Menu > Develop > Authentication
• Set up sign-in method
• Sign in method > Email/Password (click edit icon) > Enable > Save
• 
  
• Side Menu > Develop > Cloud Firestore
• Create database
• Start in test mode > Next
• Select location > enable
• Side Menu > Project Overview > Project Settings
• Your apps > web
• Enter App NickName > Register App
• Add Firebase SDK = Connection settings (copy)
• Continue To console

NB: Watch in HD!

Enjoy!

 

[joulongleu]

Signed in but error,Thank You.

 

[Mashiane]

Signed in but error,Thank You.

You updated BANanoVuetify 4.44 and BANAnoFireStoreDB 1.4? Im not really sure what could be the cause of your error at all?

 

[Mashiane]

Part 9: Complete front-end, complete back-end, publish to inter-web

Download

NB: (a) BANanoVuetify has been updated to 4.46 and (b) BANanoFirestoreDB has been updated to 1.5

BANanoFirestoreDB is available on the Extensions folder.



NB: Watch in HD

 

[Mashiane]

Part 10: Building Complete Electron Desktop App

Here we build the complete electron desktop app.


NB: Watch in HD.

PS: This tutorial is concluded at this stage. Enjoy!