Oct 24, 2020 Replies: 16 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! Last edited: Oct 24, 2020 Click to expand...
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 Expert Licensed User Longtime User Oct 24, 2020 #2 Part 1 Download NB: Created with BANanoVueMaterial BETA 4.38+ Here we create the navbar, drawer, footer and respective nav buttons. Enjoy! Last edited: Oct 24, 2020
Part 1 Download NB: Created with BANanoVueMaterial BETA 4.38+ Here we create the navbar, drawer, footer and respective nav buttons. Enjoy!
cklester Well-Known Member Licensed User Oct 24, 2020 #3 Why is quality limited to 360? Can you upload a 1080p or better version? I can't read any of the code! Thank you!
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 Expert Licensed User Longtime User Oct 24, 2020 #4 cklester said: Why is quality limited to 360? Click to expand... Wait for the HD to upload. It should be fine after than and then maximize the screen. cklester said: I can't read any of the code! Click to expand... You can access the source code from the download link also. Try maximize the video. Ta!
cklester said: Why is quality limited to 360? Click to expand... Wait for the HD to upload. It should be fine after than and then maximize the screen. cklester said: I can't read any of the code! Click to expand... You can access the source code from the download link also. Try maximize the video. Ta!
Mashiane Expert Licensed User Longtime User Oct 24, 2020 #5 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. Last edited: Oct 24, 2020
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 Expert Licensed User Longtime User Oct 24, 2020 #6 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
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 Expert Licensed User Longtime User Oct 24, 2020 #7 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
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 Expert Licensed User Longtime User Oct 25, 2020 #8 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
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 Expert Licensed User Longtime User Oct 26, 2020 #9 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.
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.
J joulongleu Active Member Licensed User Longtime User Oct 26, 2020 #10 linked to a firebase database.Very good
Mashiane Expert Licensed User Longtime User Oct 26, 2020 #11 joulongleu said: linked to a firebase database.Very good Click to expand... 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!
joulongleu said: linked to a firebase database.Very good Click to expand... 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 Expert Licensed User Longtime User Oct 27, 2020 #12 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
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 Expert Licensed User Longtime User Oct 28, 2020 #13 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! Last edited: Oct 28, 2020
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!
J joulongleu Active Member Licensed User Longtime User Oct 28, 2020 #14 Signed in but error,Thank You.
Mashiane Expert Licensed User Longtime User Oct 28, 2020 #15 joulongleu said: Signed in but error,Thank You. Click to expand... You updated BANanoVuetify 4.44 and BANAnoFireStoreDB 1.4? Im not really sure what could be the cause of your error at all?
joulongleu said: Signed in but error,Thank You. Click to expand... You updated BANanoVuetify 4.44 and BANAnoFireStoreDB 1.4? Im not really sure what could be the cause of your error at all?
Mashiane Expert Licensed User Longtime User Oct 29, 2020 #16 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 Last edited: Oct 29, 2020
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 Expert Licensed User Longtime User Oct 30, 2020 #17 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!
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!
