How to plan & structure your backend system when creating a new feature

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
hi I'm Leo mcmillion and welcome to the video and I'm here to help you become a better software engineer in this video I want to go over something that I really think will help you and since I've made a series in the past on how to actually build out a complete software I I thought it was a great idea to create a video on how to actually and plan and structure and the back end when building out the new feature for a more complex software so let's get started as you can see on my screen I've created a um kind of lucky Jam board in figma just to kind of uh make it easy to illustrate the steps so you can see here steps for planning the structure of your back end when building out a new feature so an example is um if you haven't heard I'm building out um kind of a AI chat that companies can train with their own data and Deploy on their website it's called M awesome. so it's basically just an AI people can or companies can train and they give you some own dat data and I thought just connecting this video to this um software so we so we get a concrete example on how we can actually use the steps on um I'm going to go over so one feature we have in our dashboard I won't show the dashboard here since it's still in production mode um or testing mode I mean but we have a dashboard where you can kind of train your AI but also see um analytics and insight from uh kind of the people's engagement on the website from your own train AI so for example one of the features I built out is and when people rate and the AI response that it's get those ratings get stored in your dashboard and you can actually see both the question and the answer in the rating so that's a cool feature and it's really helpful and in the dashboard so I just wanted to go over kind of how we can use these steps and I'm going to go over now in to build out a feature like that so the first step is to what data is needed so for example with the insights in the dashboard what they is needed we needed a question we need answer from the AI and we also need um what dashboard or kind of what AI this comes from and also we also need the rating so those are the kind of data we need those four so the next step before and after identifying what data is needed we actually need to identify where the data is being stored where comes from so we can start with the question so the question um comes from the use on the website so it comes from kind of the JavaScript or is kind of handled in the JavaScript on the front end so there's where the question come froms where does the answer come from the answer comes from our server so the question gets sent to our server and the answer is being produced here so that comes from our server but that is also being Senter front end to being displayed here so to make it easier we can say that both the M answer and response is being generated in the front end so they come from the same place the fourth thing is the user ID and that is actually being stored in our um dashboard or our flut flow where the dashboard is built but I've actually set up the back end so we actually store our user ID in the front end as well because there's a lot of API calls I need to make to our server where we kind of need to identify what user we need to kind of access the data from so we actually have the user ID the question answer all of them in the front end and where the kind of um module SL chat widget is on the website and the last thing we need is um what did I say now again the rating of course of course the rating the most important thing so then we can have kind of a thumbs up thumbs down or my face so those are three ratings that we have on our awesome AI so for example I could actually show you just how it looks and so you can of get an idea what I'm talking about so if I'm here on the AI and I ask it something like um hey uh what is this it will answer depending on kind of some training data that we gave it about our company so you can see it's just telling you something about the awesome AI company that I'm building out with the helpful hero Kevin and check out his YouTube channel great guy but you can see here we got some um response about what um awesome AI is and here we got some um options to rate so these are the ratings I'm talking about so these ratings as you can see are also being stored in the front end so for example I can give this um a thumbs up great response perfect so that will now being stored in my dashboard so we we both have the question answer and as you can see question answer rating and user ID in front end so all of them come from the front end perfect now we identified where the data is coming from now we go over to step three and that's how can we transfer the data from and the storing or where it's come from to where it's being used and where is being used in the dashboard because we want to display all the insights and ratings in the kind of the owner of the AIS dashboard so can I and since I own this AI when a user not me then but someone else uses this AI I want this um data to be stored in my dashboard and in my awesome AI dashboard so I want the data to come from storing or where it comes from from the kind of frontend JavaScript into my flut flow dashboard and my flat flow dashboard actually kind of uses data from Firebase so it's I'm actually being used from flut flow but from Firebase so I need now since now I've kind of identified where it needs to be used I need somewhere to some way to actually get the data from the front and JavaScript where it's coming from to where it's being used in the back in the Firebase where my flat flow dashboard drags data and now we come to step four where can no no no okay we're still the fre sorry I'm being being too H Hasty and we're don't St free so how how can we now transfer the data from our front end to our Firebase what's the easiest way so we can think like this how can we first we can think backwards how can we get data in Firebase so we can either manually put it in we can use flutter flows relas the interaction but that's kind of hard to get the data to flutter flow since there is kind of where we want the data to finally be at so that's just a work around otherwise we can use the Firebase API that Google has that m eily allows us to insert data in our Firebase so how can we do that so to insert something in Firebase we will need a user ID and a service key for our Firebase so we can actually yeah so so and not everyone can actually you know insert it in database and I don't really want to expose those directly in our JavaScript on the front end as you can imagine I don't want to have my Seer key and also user IDs or user IDs is okay but I don't want to have my secret key and to my Firebase inside of the front end because I don't want to send data directly from my front end into Firebase we can have some middle hand where I can kind of store the secret key and where is that our server of course so let's set up this we can think that we will um have a rating our question answer and user ID we will send them in an API request to our server and and I'm using Jango if you know what it is that is a python library for the back end so that will kind of take in our API request I will set up in our front end and in our server there we can use our secret key because then people can't actually see that on the front end because other otherwise if you have some developer skills you could just simply go into front end and and just simply look up the secret key and just uh abuse my Firebase server or my Firebase database and I don't want that so now we've actually identified um kind of a way to transfer our data from the front end to Firebase in a safe way so we actually go like this from the front end API request to the server the server then um will take that data and store it in Firebase via the API and with the SE um secret or what is called service account um key I think it's called and that's stored in the server so we don't have to expose on the um on the front end and it's also really easy to set up so there we have the structure set but there's still one more thing we need to worry about where should we manage the data so for this um feature we don't really need to manage the data super much but for other things let's for example say when when we have also a feature in the dashboard where people can train the AI as I mentioned before then we can't just send some URL with the data to the AI we actually need to somewhere in the process grab data from the URL so for example if we got the URL for a txt file we can't just send the URL with the txt file to the AI and it will get get the data we actually need to somewhere in the process grab the content of that txt file URL so then we can identify kind of where should we do that we can either do it in the flutter flow and then send the entire text over to the server and then train the AI or we can send the URL to the server and then the server can grab the text and then train the a so when building out a new feature you need to think kind of of those small things either even though it seems kind of unnecessary and the second option I mentioned will save a lot of performance since we don't need to send training data over in every request so that will save a lot of kind of space and kind of yeah just timing on the API calls but also it makes it a lot easier to just send small URLs instead of having to send a URL with that has um kind of a maximum number of H bits because we can't have a 4,000 word text in our URL as a parameter and when sending an API call so you can see that's kind of what this last step is about just optimizing our um what's it called transfer protocol so these are the steps that I usually use when building out the back end just where's the data needed and where's the buing stored or where does it come from so where should it be used or no no where should be come from where should it kind of go then you need to decide the best way to transfer it there from where it's come from and then and on step four after deciding how you should transfer just optimizing it kind of where should it be handle should you handle the data here should you handle data here or should you just handle data when it's being displayed and you need to decide that based on kind of what program language is use in each face face and what kind of um technical technical tools you're using so those are steps I usually use when building up the new feature in the back end and I hope you like this video If you like this kind of content where I give you tips and be sure to like the video and uh comment I guess but uh yeah I hope you learn something and have a great day bye
Info
Channel: Leo McMillion
Views: 519
Rating: undefined out of 5
Keywords:
Id: O_aKOXjcfo4
Channel Id: undefined
Length: 11min 2sec (662 seconds)
Published: Wed Nov 15 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.