Build your own AI Shopping App with React Native and Supabase Vector

in this video you will learn to build your own AI shopping application with Vector embeddings using react native for the app and super base for the back end hey everyone what's up this is Simon from galaxy. deev and in today's video we will build an epic AI shopping list I was really excited about this project and this video is sponsored by superbase if you haven't checked it out superbase is the database I use for pretty much all my projects it is the back end I love to use with authentication and now also with AI support So in this video you will see how I use uh superbase Edge functions to work with Transformer JS to create Vector embedding so yes we're really getting into a lot of AI stuff today uh we're going to generate uh embeddings we're going to use a vector extension on the postris database we're going to store our embeddings and then we will also be able to use a remote procedure call on the database from the react native app to say hey I have a banana in which category does that belong fruit vegetable household and we're going to compare the embeddings of like the banana to that of a category and in the end we're going to have a react native application that automatically sorts new shopping items into the right uh sections of a section list there's going to be quite a lot of code we're going to start very slowly because we're going to focus on the super base and the AI setup in the beginning then we're going to kick up the pace a bit and bring in some authentication boiler plate code that I already used in the previous video and then we're going to go smooth again to build the actual app with the bottom sheet and how we import all the data so if you're ready for this check out link below to superbas and also to the link uh to the code on GitHub make sure to subscribe to the channel before you dive into anything else but once you're ready let's kick off our application all right so let's get started with our shopping application we're going to create a a new Expo application using the TS template so we're going to have file based routing and then we're going to install the super based JavaScript SDK we're going to need the react native URL poly fill to make authentication work and we will also use my good old friend the gorom bottom sheet additionally we're going to need the Expo secure store for storing the token once we use authentication we're going to need reanimated and the react native gesture Handler for the bottom sheet so go ahead and run this and while this is taking place uh we can also do a few things so we want to start a new project in super base can we zoom in like will this help you I don't know maybe maybe it will maybe it won't let's call this one AI video I'm going to generate a strong password and copy this and save this somewhere in my code um I'm going to leave everything to uh actually I'm going to use Central Frankfurt for this one okay so this will create our project that might take like a minute and and then we're going to set up our SQL tables while this takes place we can quickly move back to the Expo application so boom it's already finished actually IIT this up front um and what we need to do is we need to open our B config and add the react native reanimated plugin in here because uh otherwise it won't work additionally we can do a few things already uh we can create a new EnV file and in that EnV file we're going to import the uh public URL to our super base project and also the anonymous key so we're going to have to figure out that out from here oh we got it nice it's already there so let's copy over the key that's it yes you can expose that Anonymous key because usually you should enable Ro level security and that will protect your database and we also need the URL there it is under project settings and API so put this in here cool this is our environment setup so we will be able to use that stuff from our Expo application and to do so let's quickly do this and create a new file at config init superbas dots so that will create the folder and the file and I'm going to put in the default initialization code for reactnative superbase so we're going to add the secure store from Expo secure store and that will be used as an adapter for our authentication for the JWT we of course also add the create client from superbase which is required to actually create our uh initial client and we also add the import for the poly fill because otherwise you will see a nesty error in your application good um so this is just a wrap around Secure Storage to use that as an adapter where your um JWT is stored then we grab from our process environment the keys we just added and then we initialize super base with that information with a bit of settings for authentication good that's so much pretty much everything for the setup of our um super base connection now let's get back into the project and we going to have to Define some SQL in here actually I got this prepared so um probably probably it's best we create a file and I go through it here so you can find uh all here SQL do SQL uh let's call this setup. SQL uh you can find of course all of this in the GitHub repository so we're going to try and um move a bit faster especially in the paths that follow so we can later focus on the actual AI app so all of this is just getting started getting set up and then we can build on top of that and take a closer look at what we do but we're going to also stop a bit here and focus on what we do because what we need to do is of course we need to create our tables with SQL so we will create a category atories table and we create a products table that means in the categories we might have something like fruits vegetables household whatever so that's going to be the category but there is also an embedding and that is interesting because it's using the type vector and to use the type Vector we have to enable the PG Vector extension on our database before so this whole statement up here is geared to enabling that in fact you could also just do this from the UI so I think you could go to database um extensions then you could search for PG uh yeah you could just search for vctor and then you could enable this um so this will enable it now we will also have a products table this is just the table for our shopping list so we're going to have like a name a banana category fruits which references our categories it will have a user ID of the signed in user and either historic false or true I just want to like not remove elements from the list but mark them as historic once the user has used the banana so we can then later show the banana again as recommendations for that user cool that is the initial setup then we have some role level security for both of our tables so only users um can update delete and insert their own products and categories should be viewable everyone but no other policies besides that so I hope that will actually work in what I want to do um I kind of feel like I don't want to add this policy right now but well let's do this we can still figure this out later and then finally we have a cool function here so we're going to have a database function that will compare that will compare and embedding so we haven't talked a lot about this yet we're going to get to that in a second it's basically like comparing how similar two products are like how similar are fruits and banana or how similar is banana and household and then we're got to like a similarity rating between zero and one and that's pretty much what this function is calculating using our uh Vector uh extension that we added and then it will return some data so before I forget it let me run this so yep I'm going to copy this going to put this in here and run it and hopefully uh yes success no row return that's always good so we should see a categories table and a product table okay okay now to get started with AI and our embeddings we're going to use super base Edge function this is super interesting and really fun to use and what we're going to do is I will actually use the superbase CLI for that so in my project here I will run super base in it so I installed the superbase CLI already uh generate vs code workspace settings I don't know I feel risky but I going to say yes um as far as I know I've seen a video from Tor from super base who explained this before basically in the superbase functions they're using Doo and if you want to use doo in Visual Studio code you can install an extension and there's a lot to it to make like typescript and typings or file paths working so with this custom setup you can actually have like different workspaces in Visual Studio code but this is not a tutorial on workspaces and stuff uh we're going to talk about something else now uh let me close this so you can focus really on what's going on after creating or running that command we got the new superbase folder here which has functions get ignore config and some is this my seed SQL no okay yeah that's some something we can fill in in extensions there's also no extension yet but what I want to do is I want to Now link my project as well so I will call superbase link um and I think to link I need to call yes the project ref the project ref is most likely what we added to our environment like this little part before super base so let me try out this enter your database password okay I stored this somewhere and then my local project is linked to my actual superbase project why is this important well we will create uh functions now we'll actually create two Edge functions and by having our project link we can both test them locally if we want to and we can also directly deploy them so we can create our first Edge function running super base functions new and then the name so I will call the category embeddings and that should create a new folder here uh under functions created a new yes there it is with an index file and I will also follow this up with another one get embedding so we're going to have two Edge functions let's check this out actually I could run super base start now uh oh yeah I need to install Docker and stuff so I I will just simply deploy this in a second um so if you want to run this locally yes that's definitely possible uh you just need to bring it up with Docker correctly okay so this is an edge function that will run on super base we got some setup here we got the surf command and then it just serves some stuff and I could invoke this um do we want to give this a little test run actually yes let's do this so super base functions deploy and this will deploy both of our function you can inspect your uh whatever in the dashboard so let's see um here is our first Edge function uh we're in the AI video this is it uh and there should be somewhere like command line access um and here is a curl so let's try this out okay and there we got it message hello functions so we can confirm that our Edge function is actually deployed and working that is good use um because then we can build on top of this and I will bring in my code for the edge functions now and then we're going to step through everything that we do in that function so the purpose of this first category embeddings function is simply to seat my categories table so we got the categories table here and I want to create some seat categories for the application like fruits vegetables household uh basically all of these and to get started I want to create an embedding Vector for these categories so I'm going through go uh use all of these and create embeddings and how are we doing this well we're using Transformer JS uh that should be part of my other thing here so we have the vector columns enabled in our application to store Vector embedding and now we're going to generate embedding so you can see all of this also in the super based Ducks just in a tiny bit different setup now as I said they're using hugging faces and Transformer JS and there are a bunch of things that you can do just check it out um there are specific superbase models that we can use so basically what we want to do now uh this feature extraction this first value here that we passed to this pipeline function uh which we got up here from Cova Transformer is pretty much transforming let's see transforming raw data into numerical features that can be processed while preserving information uh this is available on the web it is supported so a few other things are supported as well you can check them out here and the second parameter is our superbase model the I think GTE small right super base GTE small so this is our pipeline that we construct before actually running that function that will help us in the future when this Edge function uh comes up again to bring it up faster because I want to write to my superbase table I also have to call the actual superbase JavaScript SDK in here and I got access to the URL and the service roll key right from the doo environment so although all of this is red as I said you might have to open this in a different setting with Visual Studio code all of this should work in theory so when the function finally runs I'm going to create promises for all the categories I'm going to create uh or call this generate embedding I'm going to pass in fruits petare household into our Pipeline with some parameters and then I will get back the embed and that embedding so this is like the call to hugging faces then I extract the data and then I pass it back into super base so there is once again a call to the regular super base tables I'm going to insert this in my categories Table and there will be the category and the embedding and that's everything for the category embedding so I'm going to deploy this I could also just deploy one of those and then it gets interesting people it really gets interesting um I'm kind of kind of getting excited uh subtitle would be now heavy breathing uh okay it should be deployed um let's see I can find these under my Edge functions under category embeddings and this is just like to seat stuff we could also do this with uh with typescript and JavaScript locally but I felt fancy so I kind of thought let's do it like this now what this should do is it should prefill my categories table and let's hope for the best uh uh please no Arrow oh done true yes oh yes it worked okay here we go um what you can see now is we got the categories that I've set up in my Edge function in the array and we have an embedding for them that is a vector all the likelihood like uh different categories rated um there's a lot of AI stuff you can read about embeddings and vectors I'm definitely not the best person to tell you about it uh there are other great essays but this now gives us the ability to build bu our application and to compare items against those vectors and that is exactly what our second Edge function uh is made for so I will get into get embedding I'm to replace this it's using somewhat similar setup you see we got the generate embedding here once again basically doing the same but this time I'm trying to get the input so I can pass some element to it I will generate that output that embedding and then I will simply return it to the client so that's all I want to do um I will just call the whole uh function because I'm too lazy to select which one I want to call and now the interesting question is how can we use this so how can we call that actually I have no idea um let's figure this out here is my Edge function in theory I should be able to use a regular client like insomnia um and make a new request I want to make a get request it doesn't actually matter I think if it's get or post um and there should be in the body an input so I'm going to set my body to Jason um input banana okay I'm going just going to hit send okay missing authorization header that was to be expected so I'll probably just do it from the command line in that case because this is actually I could uh I could I kind of I don't want I don't you please don't do this in in real world I just want to do this for testing yeah so now it seems to work oh no we got an internal server error that's that's even worse let's let's enable this again um well let's try to use the command line in that case uh all functions are deployed but if you got an error actually that's a good case because that gives me the possibility to show you the locks so let's see what the locks tell us about the problem and if there actually is a problem uh if this takes okay syntax unexpected end of Jason um well well well that is interesting uh I I don't really see an unexpected end of my uh so there should just be like an input element and then it has a name uh I don't know what's wrong with that uh let's try to call it from the command line so that gives us this little curl command and I will pass in for the data input uh let's say um again apple apple could actually not be fruit could actually be something else okay that is good news this is a vector for that data this is an embedding for apple and I could now take this vector and compare it to the different categories in my database and that would tell me to which category most likely Apple belongs so this is now really um and I can actually copy this if I want to like this is now the right header um this is like the proof that our stuff is working uh let's add Bea token um yeah I made it of course completely the wrong way so it should be token and Bea and then it's a get over post actually yeah probably it's just a post otherwise it's hard yeah to send that data okay yep now it works here as well so this is the data we would get back from our second Edge function in super base now I can grab this embedding as I said and compare it to the different categories in my database which means I probably should load the category data once into my application so I don't have to like constantly query this categories table I could also like make this fixed and static in my uh application but we're going to just load this once in the beginning in our application and whenever we then add an item to our shopping list banana fruit lemon whatever it could be we're going to go through the procedure of getting the embedding comparing it to the category and sorting it into the right category and then storing it under products but this is the Baseline this is the Baseline of um Vector databases in super base and how we can use Edge functions and how we can use Transformer JS and hugging pH in the super base mode and now we're going to move into our react native Expo app okay to bring up our app simply run npx Expo in our um like top level not in the super base folder of course that is related to Super Bas then I press I to bring up the iOS Simulator for us as I said in the beginning this is using Expo router version two so we got file based routing in the app folder what I want one from this setup is actually actually it's quite little to be honest I will get rid of everything uh I we just start with a fresh index.ts x uh oh no where's my snippet react native functional export so that's going to be my index page and then we also want to have a top layout. TSX why did I remove everything well because we don't really need that stuff we can do it ourselves so this will be my initial layout out uh and within the layout I will probably just return like a slot because we're going to have to add some authentication to our application if I now reload this would this already work yeah there up there is something so now we got the uh file based routing in place again I want to use uh superbase authentication so I will go into my app and check under authentication providers we have email enabled that's good um actually I will disable confirm email so then we will be signed in immediately in a previous video uh I already presented how to do authentication in the react native file upload with superbase storage uh we built this quick lockin screen which you saw so that is using super based authentication and file based router so we don't have to like reinvent the V and we'll actually do the same thing that we did in here so let me bring in the code again you can check it out uh in the related repository or in that video to do that um I will create a new file or a new folder called providers um and within Pro oh no I didn't want to do that I didn't I definitely didn't want to do that can we just go back um yeah that was not my smartest idea uh remove folder from workspace yeah let's just not do this uh I actually wanted to copy this so I wanted to copy the provider I just want to copy the folder and here we got an authentication provider um let's close all of this with the same setup uh like in the previous tutorial so this will just be used as an as a hook as use o so we can quickly access a user a session or if we are actually initialized and we have a sign out function and then we will simply use the super base on Earth State change it's pretty much like Firebase they also have this event and when we get catch that event we can just update our values here and based on those values uh we have down here our authentication provider context that we're going to wrap around our app so if we're initialized and we have a user we can then show our app otherwise not and to implement this behavior in our app we can go back to my uh top layout file and what we want to do in here is we're going to check this um so we have this bottom rot layout where we've rep everything with the off provider that we just created and then we have the initial layout this is just like our context around this and in here we are now using this if we're not initialized mm no excess nothing will work and then we're going to do something cool so we're going to use the segments here actually I think we should add the segment I think this was a comment on one of the YouTube videos I got as well uh that we should also add segments to the dependencies array so the segments are the parts um of our URL because we're using file based routing under the hood and we're going to have a new folder here if you want to learn more about Expo file based routing and what all of this means go check out the other videos I did on those topics uh there are quite a few already uh oh why is this so slow today so in my app folder I might have another uh what is wrong here oh yeah it's TX that's nice that's a nice error you can confuse yourself with so we're going to have another file in this app folder and then app folder will simply be protected so if we have we session and we're not yet in that folder pretty much means we are on the lockin screen then we will redirect to the list page um because the user is already authenticated if we don't have a session we will simply replace this and go back to our top index file which is becoming our signup screen so I will use the exact same code from the previous tutorial for this signup screen uh and then I'm going to try and hit reload yep and then we're going to see my super list up here so this is really just using the super base off function for sign in with password or sign up with email and password nothing else no other redirect is happening in here simply because we catch that stuff in the provider so we don't need to do it in here only our top layout file will take care of the protection of our application with that in place there's just one more thing that I want to do before we get get into my list page um actually we could do this already so let me quickly sign up so Simon add galaxies dodev and a super secure password I'm going to create an account okay and then it tries to go inside and actually uh we can't because uh SL app yeah it's missing it's not picking up that index file because we have no layout yet so I'm going to add another layout in here which is now going to be our like internal stack layout in this stack layout I will uh grab the sign out and session from my hook that I created myself and the provider and I will use this for the redirect so if we don't have a session I'm going to redirect uh the user to the lockin screen and also on the header right I want to show this little sign out button and now with a Reload boom I should be here I can sign out and I should be able to now also get back let's try something wrong okay this is invalid and sign in and we're good okay so this is now pretty much uh we had the AI setup in the beginning we had the basic basic super base authentication integration Expo filebase routing setup and now we come to actually building our AI list so this is probably the most fun part and we're going to take uh most time now for what we want to do so let's start with the index file in my index file I'm going to preate uh create I'm going to present some information uh we're going to have some list items so these will be the items that I fetch from super base so set State list items today I will just use State uh I'm going going to use any you can extract the types from your tables uh but I don't want to do it today uh I don't want to make this too much about typescript uh I want to extract the user the structure this from the use or hook and finally I will have a list of grocery options so I want to like have a have a list of recommendations and these are just like some initial recommendations later there will be the things the user used before but for now these are my options now it's time to work with super base so in a use effect hook uh I'm going to call the database and I'm going to try and grab some initial data from there uh so let's do a function fetch data Asing it feels it feels strange to do all this by myself um because usually I got copil uh so I kind of don't know the Sy TX anymore uh because I always just press continue uh K fetch data and what I want to fetch is I want to fetch first of all all the categories from my super base table I want to only select ID and categories but I wanted tables and I won't they will be data so we just structure it to grb data and then we use the name categories that's what this syntax mean it's not like data is of the type categories so to show you some better logging I'll will also bring up the JavaScript exp def tools um putting this somewhere here I don't know and then we're going to hit save and sure enough we get our first look so these are the categories category fruits fish uh baking vegetables all the nice little categories I want these categories because in my view I want to display a section list where we can uh put in that stuff can we already do like the section list I don't have data I don't have any kind of data yet probably we can't we're going to it takes us a little more minute to set that up but that part already worked now I also want to load two other things from superbase so I want to load the product of user and I want to use the historic and the unhistoric like true and false we could also probably just capture all and then filter it yeah that would actually be faster but I'm so I just want to make a bunch of super base calls to bring up my invo uh yeah you should probably not do this so recommendation of course make less call and and be aware of that and improve the um performance of your application don't don't do it like Simon just make one call and then locally filter that data but if we have that data we can now um remove or we can combine that data we can combine the historic data with our grocery options so we can use everything from historic um just just using the name because I don't really need the ID in that in that case uh historic map oh yeah this is the product this is not the categories and then the grow re options and then we're going to have a unique history by calling a set on this this will actually eradicate all the duplicate items so we're just going to have one unique historic set of recommendations uh if I check this out this is only this but once we have some recommendations in there this list will certainly look different different and then once we got that we can set this as our grocery options for our app good uh we're going to do pretty much the same thing or actually not the same but we need to do some data processing on our product as well so this is now interesting um sorry oh yeah said list items sorry about that typo um because for products we need to bring this in a certain way for our section list so if we have a section list we have an array of elements basically uh and then we have like uh whatever it could be title uh and then you have the array of data for that section and you're going to have multiple of these sections okay so this is a section and this is a section and they all have like the data in here so we're going to create this format for our application by mapping through the data a bit and uh filtering out all the products from super base with the right category and then we have the category information and as data the items and then later we can set this up here the problem is right now grouped will be um is this grouped uh grouped I don't think we have why are there like 16 items in our uh list items that makes me curious that definitely makes me curious oh yeah these are just the sections come on I got confused myself so the data array for all of these sections is still empty see array zero array Z array zero and we're going to later fill that for now uh I think we have enough information to actually display a section list because our view looks looks so sad it really looks like super sad uh let's add some styling down here and the obligatory container Style in so let's add stylesheet from react native and then we have the container styling going to attach this here styles. container so we have a dark background and then we're going to see if we do have some list items uh so if list items. length is greater than zero I want to render this section list so section list is a pretty cool component I kind of came to like it uh I'm going going to give this a bit of content container style like uh pading bottom uh 150 because there will actually be something in the way otherwise uh and close it most important part is sections where we pass in our data which is the list item and then that's already enough that's interesting don't we need like a render function huh interesting um yeah I I definitely think we should have something uh especially we need a render section header function so in here we can destructure this we got the section and then we got the category inside uh let me look this up did I make a mistake I don't think so actually um all those brackets it feels so horrible okay and then we can render our section header this is just going to be a text element using category and I think this is the moment we can finally show anything on the screen that comes from Super Bas it took us quite a while probably like 40 minutes or so but I hope it was worth it because we had a lot of AI stuff to do and AI is not just front end II is a lot about back end about your database about vectors embeddings and understanding that stuff so I really hope that this video inspires you to take some action and build some cool stuff um then I think I've done a good job okay um there will be some Style for the section header I want to make that section header have a bit bigger white font so I will now use this here as the style styles. section header and then we got this nice list already good that's a good start now we just need to insert our items and we need to render the items um we probably don't have to implement the render item function yet because we don't even have items so we will come back to that in a second for now we need a way to add data to add products to our AI shopping list and we're going to use the gor home bottom sheet for this and because I wanted to move this away from this View and structure our app in a good way we're going to put this under components so I'm going to remove everything that is under components and create a new file I will call this bottom grocery sheet. TSX and this sheet is important this sheet will uh render uh bottom grocery sheet yeah let's see that's right uh this sheet will get some props it will get the grocery options so what we constructed before here uh we got like unique historic data so we can feed this to the bottom sheet so the bottom sheet does not have to request it itself and when an item is selected we of course want to tell our list here about that view that a certain item which belongs to a certain category was selected uh we're going to get that category information because we make the call to get the embedding in this uh view here let's start by adding the bottom sheet in here um why are these Imports so horrible like these were certainly not the type of imports like yeah yeah bottom sheet from gorom bottom sheet perfect that's just perfect um this requires I think as or to get started at least some snap points uh so we're going to use memo for our snap points and then we can pass the uh snap points here snap points and what's something you need oh you need a like uh something inside Right There Are No Children inside of this uh so let's just put a view in it and then it's it would be actually happy could I use this bottom grocery sheet that's the question could I use this already on my index page that would be pretty cool because that would make working with it a whole lot easier let's give it a try bottom grocery sheet bottom grocery sheet uh and we probably we probably don't oh it directly comes up nice so we can work on it awesome yeah that was that was that was even better than I expected I really like that sheet I have to admit it again I really like the bottom sheet um so that bottom sheet I will also add a ref just because uh then we are able to control this from code and we'll pass this in here so we got the ref uh oh yeah bottom sheet ref is this of course uh Additionally the main use case here is to have an import field in which we can capture an item so let's add a state uh with an item and then we can go on I actually also want to style this in a bit different way so instead of having it white we're going to know have this dark bottom sheet if we pass in the indicator style and the background style cool um now the first part here is going to be a search row so in the search row uh I want to just or we could actually display another button or uh thing actually I think we will not do this um let's not do this I will just do it like this and just please can you Visual Studio where AI in 20 23 and like everything can do crazy things and you can't import stle sheet because I've used it 10,000 times already and really I'm sometimes like getting really mad about development it doesn't have to be that way maybe I should do a new editor no no I will not do this Simon don't do this okay search row uh this is the row where I want to use a bottom sheet text input yes I'm going to use uh file from the gorom bottom sheet that's actually pretty cool because because that takes care of this whole keyboard is in the way and keyboard is above that field stuff so if I now press into this and use like the real keyboard it will actually move the view up uh the only thing that I don't like is probably I should yeah let's do it like this so I can now type in something I could do banana or whatever but I would also like to see all my recommendations below that now that is a different story because for that we need another flat list and because we're cool kids we will actually use the bottom sheet flat list which is part of the bottom sheet of gor home bottom sheet as well so um to display a flat list we of course need some data we need a uh key extractor probably and the data for this is going to look a bit interesting so what I want is I basically want all the grocery options from the props but if I have like start started typing I also want to display my item in the first place so if item is not an empty string it will be rendered first and then everything else um follows additionally what do we need as well uh we need the key extractor function so this will use that and then I want to have the render item function which is probably the most important uh and therefore I'm going to add a new con render recommendation row list render item yeah actually I have to I don't have that right now okay so this is going to be uh no otherwise item and then let's just for now return and by the way this should really be render um this should return let's just return like a a text element and then I'm going to render the item and uh unexpected token yeah there I have many unexpected tokens here in uh case I think I need to close this here and here then we have our render recommendation row which goes in here I why are the props still red oh we oh yeah we should use the props like this and now the index turns red because we're not passing in the props that's actually a good point valid point so what this requires is the grocery options so these are the grocery options we Define and then we have a function so on item selected we should call something and we will get back an item and a category so we probably need a new function um that we're going to call on item at uh so let's lck something else item edit uh that's going to be the name and voila hey what is this did you okay and then we can pass this here so on item added item category okay that looks good to me yep so let's see we can bring up this list and I see in very dark there should be a list of our recommendations so uh if I would turn my text uh my styling here to like color white then and yes these are the recommendations also if I now click on anything here uh okay yeah we don't call that yet so that would be the next part to pass this back to our page but that is a good part we have the bottom sheet um and we have the bottom sheet especially connected to our view so now we can actually render the rows and then do our AI fun all right so now we can like come full Circle back to what we did in the beginning where we created the uh Edge functions to get an embedding for something and that is what we want to call right now right from our render recommendation row so I will add a function const uh let's call this on add item and this one will be an async function will get some kind of grocery uh any and then we going to make some call additionally I don't just want to render a text element anymore so let's exchange this I will actually render a touchable opacity instead touchable opacity from react native and within that I will render a text element so completely different setup of course uh for the styling here I will use white again um and for our touchable opacity I will actually use a row layout so I will use for the grocery row a flex Direction row and a different back backround color and I will attach this now to my touchable opacity here so styles. grocery row uh and within we still have the item so now everything looks like this not too bad not too bad um but I actually want to have the banana expand and then have an icon at the end so I want to have the ionians here name will be add uh Circle outline uh size let's use 24 and color should be white as well uh okay so now we got it like this if I now say Flex one to my text element the text will take up most of the space here and I should also use uh font size something bigger font size of 20 yeah that looks good so now when I click on one of these I want to call my uned it item so on press uh I want to call on add item with the current item actually that's that's totally unnecessary just I just noticed uh we can just have on add item and use the item no no need to call like the grocery or something so now uh I should be able to lock like the item in here uh let me bring up my debugger actually I just click on this yeah we see the lock banana oats milk yeah definitely works okay so what we want to do now is I want to make a call to my um get embedding so remember that's where we actually came from uh and that's what we wanted to do uh The Edge functions here in so I want to get an embedding is that like a call no this is the invocations this is this command line access I don't really need command line access yeah okay let's let's do it manually no problem so what we want want to do is we can extract or get the data by using a weight and then doing this directly through superbase so we can use superbase functions and call invoke to call one of our Edge functions name was get embedding and what we want to pass in was the data that we have to pass in as body oh don't mess this up Simon body should be input and then uh we pass the item so that is the banana we pass let's see if I now put a lock below this so I click banana and later yes I get this embedding back and now things are getting even more interesting because now we need to call the stor procedure that we created on super base in the beginning remember on the data base we have the uh where is it uh tabl triggers functions should be functions yeah match category that's the function that we want to call and we can do this almost the same way like we did here so uh we get back data I will call this documents actually and we do this now not with superbase functions but we call Super base. RPC remote procedure call and the name was match category I think let's quickly look this up in my setup SQL uh replace or create function yeah that was it uh okay so going back here what we need to pass in here are a few parameters so let me bring them in they could look like this uh first of all I'm using the embedding from the data so we see here on that item I get back this data uh and then I have the embedding why is my screen brush tool not working anymore oh it's working again okay so I'm I'm extracting this embeddings vector and I'm passing that now right as the query embedding to the remote procedure uh we have a match threshold so only items above 0.8 similarity will be returned and I also add a match count of one I could have more but I just want to get back one category that matches best for this document so best match and this is now like the critical piece here um should be documents at index0 let's see actually I will put we don't have that lock anymore that's good so let's see if I click on Apple we see apple it's getting the embedding it's sending that embedding to the remote procedure and the best match is the category fruits that is good news uh let's see if I select milk the best match the best category is Diary with a great match oh I love it it works it just works now what is not working is this oh actually it does so uh let's say I want to add a stake um I click stake and the best match is ky or me oh it just works I love AI sometimes I really love AI so we got that best match here under documents zero um and now we just need to pass that back to our parent page which will then put it into the actual list we could also do this in here but I kind of felt like this component should just do this one thing so props on item selected will'll get back the item that we selected and the category ID should be documents at index 0. ID because check it out category fruits ID 1 n 7 whatever similarity we're not really interested I mean we could use it but not really like why should we okay then I will also call set item and set this back to an empty string and what I want to do at this point is I want to close my bottom sheet so I want to call bottom sheet ref current. collapse so that will collapse our bottom sheet to the bottom what this does as well is it means we arrive in our list here again under add item and we should get back to item edit so let's see stake gets a best match and item edit stake okay good uh that also means I should have the category ID here uh-huh let's put pman logging in place and let's see uh I want to get like a lemon if I want a lemon this would uh item added lemon item category one okay so at this point we only need to insert that item in my super base table and then it should automatically appear at the right position in my uh flat actually not we should really like match it to the right category but let's do the first thing let's first addit to super base because that's important right now there should be no data in my product table uh yep that's completely blank so let's do a call here U I'm going to await superbase do uh that's like the default stuff from categories I want to insert some data uh and what I want to insert looks like this uh I want to insert name I want to insert the category ID and I want to insert my user id because then it shows up I also want to select this result immediately because when I select this uh I can also get this uh straight into my local array so I can now try and figure out under which category this new item faults by going through all the list items and comparing those categories so that will give me that category if I get a category and I definitely should get a category back at that point um I'm going to push the data here so category. data push result uh. data at the index zero because we should only get back actually one item and we also put a look in here just for our reference result. data and then I just need to add all the items again to my list items okay let's give this a try I'm opening up this one again I'm adding a banana um this should most likely close it add it to my super base list and if not we made a mistake along the way uh okay yeah that's good good news uh item added banana item category oh it looks like we have no data here after that call um what is is this that's why ah I have an idea well it's just a random idea okay let's try an apple uh column name of relation categories do not ex yeah this should be products The Good Old Logging never fails so let's try again to add an apple now uh and we have no render item that's good oh oh yeah we oh that's good because that means we have reached the point where we actually need to implement the function for the section list uh good very good so let's do this let's add a function to render our uh grocery row here I'm going to update this and then I can pass this render grocery Row in here for the render item of the section list okay now it finally makes sense um type item yeah we need to return something in here of course uh I will just return the view for now which will actually become a touchable opacity as well since we need to remove items uh again touchable opacity from this um and then I will just add a text element in here saying item. name that should be the name of the product um that should actually be enough for the moment okay okay okay progress see here there's a small a very small apple can you can you see that Apple uh let's let's add a more styling um I'm adding some styling down here for the grocery row which is pretty much the same uh like we had before and for the grocery name um so let's apply this to the grocery row here so style dot nope styles. grocery row and then we have for the text styles. uh grocery name and and now this makes a whole lot more sense so it's not immediately but it works it works I can add stuff to my list I should probably show like a loading uh is X baking yeah well it should be uh just like floor should be baking as well yes uh what is else baking like baking powder yeah of course what about a lemon um what if I add a lemon lemon shows up under fruits uh what if I have Tomatoes Tomatoes should it just works it just works I'm so amazed so here is my data in super base um we have all these items uh they belong to a certain category there's our reference here uh they have user ID so I only get back my own stuff and historic for all of them is set to fault which means they don't appear here in here we only have the list of like initial rendered uh categories now the the final missing piece is to click on them so when we go shopping we want to select them and like on uh remove them so on select I want to do something um asyn function and we can directly add this to our touchable opacity on press we're going to call my on select um probably I want to use a bit different background color I just noticed that they have the same color so I'm going to make this an array here and then overwrite the background so now we have like a little bit of difference between those two lists uh that looks better also I'm going to add a little icon here just looks nice and ionicon oops okay so now I should be fine so when I click on them what I want to do is I want to update that Row in super base so I will call await super base from products uh and I want to update the historic field historic and set this to true and I need to match a specific uh row so I'm going to use equal uh I want ID to be equal to grocery uh or actually that should be item. ID so it's just this item okay the once we did this we also need to locally remove this because in this case we are not using super base real time you could probably use that would be a nice case actually um but we can just locally filter out our data So based on the item category that's pretty much the same like we already did before so now when I filter this out let's try it with what's the first thing Apple here so watch this historic field uh if I click on Apple it disappears here here and if I refresh if I refresh that settings that settings should be updated as well but it's not so we once again made a little mistake but that's not a problem we can figure that out so uh update the item uh at least it was removed locally but I think we made an little mistake oh we have item twice in here that is not good that is not good um so I'm going to change this to grocery because I previously named this grocery uh so let's call oops update this update that and then we just use grocery so oh no then you're okay Advanced typescript Simon version let's see so if I now remove something I want to remove my apple I want to update this item yes I want to update the item with the ID one uh and set historic to true so now I feel like historic should be updated for the Apple if it's not then o it's not ooh super base what are you doing to me all right so I finally figured this out the problem was that I had not defined an update policy so now added the policy for users to actually update their product data now with that in Place uh everything should make sense again so let's bring up this preview everything is false and I want to cross out the lemon and sure enough the lemon turns to True let's do something else milk is in the top spot so let's cross out milk it's removed from the list and milk should come true as well actually lemon yeah lemon and milk are now both true now the interesting thing is uh let's do let's do a little refresh of the app so the next time the user is using that application still getting the list of all the stuff on that list um but if I cross out these other things uh they will be added to my historic items so they are now marked as historic true which means they don't appear on the list but if I go into this sheet we see we have lemon here we have milk we have Flor tomatoes so everything that was once added to my list will now be available again to quickly add this because we all know we kind of purchase the same things our shopping list usually looks the same and the items you use before usually appear in there again so it doesn't really make sense to completely remove them and with that in place um there are a few things that could be improved as you see if I select them now they are added again so we probably have to filter them out uh so they don't appear twice or they're not added again if an item with the same name for that user already exists but but we already had quite long code that was quite uh challenging to some degree just like I said before you can find the whole code Below in the GitHub repository and I hope you use this as a starting point to build your own AI shopping app all right and that's it for today's app I highly enjoyed working on this video and I hope you get some ideas for your own AI project because yeah there are some things that could be improved you've seen the loading times but definitely we can build on that and I hope this gave you just the the spark to work with AI as you've seen how easy it is to come up with Edge functions how we can serve them uh how we can deploy them how we can connect the super base locally with the super base instance and integrate everything in our react native application because yes superbase works great with react native there's not a whole lot of content out there on it yet but in one 2 3 years there will be a lot more tutorials and videos on this whole topic but I hope this is enough for you let me know if you've been able to build something cool with super base AI let me know below here in the comments and definitely subscribe for more videos and of course check out the sponsor of today's video which was super base I hope you all have a great week with AI stuff and code and super base and I will catch you in the next video like always so until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 3,741

Keywords: cross platform, hybrid app, javascript, mobile apps, mobile app development, reactjs, react js, app development, typescript, ionic framework tutorial, learn react, react course, flutter, app developer, react native, ios development, ionic app review, react, reactjs projects, react tutorial, react native tutorial, react native app, supabase, supabase tutorial, supabase vs firebase, supabase database, Ai, ai, ai tools, openai, what is ai, chatgpt, ai technology, ai tutorial

Id: tFnNBhr0WTw

Length: 63min 22sec (3802 seconds)

Published: Tue Oct 10 2023