Ionic, VueJs, and Firebase - Photo Sharing Mobile App | Part 2 - Native Camera and GPS

hey what is going on everybody it is rob aka the diligent dev and welcome back to part two of our photo sharing app now in this section we're gonna tap into some native device features such as camera and gps to take photos and get the user's location so let's go ahead and jump over to the computer and get right into it okay so here we are over at the computer and i have our app all loaded up in visual studio code and i opened a terminal by going to terminal new terminal now the first thing we're going to do is make sure that we have capacitor enabled now it should already be enabled but we're just going to run this command just to make sure that it is so in the terminal type ionic integrations enable capacitor and we see that integration capacitor is already enabled and if it's not it will go ahead and do that for you now the next thing we need to do is initialize capacitor inside of our application so we're going to run the following command npx cap init and then you need to specify your app name so i'm just going to say photo sharing app and then we're going to need an app id and typically the convention for this is the reverse of your domain name and then your app id so if i was going to do this for diligentdev.com i would say com dot diligent dev dot photo sharing app and we'll run that the next thing we're going to want to do is build our ionic app so in the terminal we're going to run ionic build and this is going to take a second to build so once it's done i will be right back and now that our app is built successfully what we need to do is add our different platforms so if you want to run this for ios you'll run the following command npx cap add ios and i'll just go ahead and run this and we see now that we have this ios folder and this is our ios app the next thing we're going to do is install our android app npx cap add android and you don't have to do this you if you wanted to build strictly for ios you could run the ios command and if you wanted to strictly build for android you could run the android command and we see now we have our android folder and this gradle folder and this is where our android app lives the next thing we need to do is install the native run plugin from ionic and the reason that we're going to install this is because we want live reloads so that way when we're running our app inside of a simulator when we make code changes we'll be able to see those code changes live so to do that we'll come back down to the terminal and we'll run the following command i have to put sudo in front of this because i'm on a mac but we're on npm install dash g for global native dash run it's going to prompt me to put in my password and we see now this has been installed successfully now to run ionic inside of our emulator with live reload for ios we're going to run the following command ionic cap run dash l dash dash external and it's going to ask you which platform you'd like to run and first i'm going to choose ios so what it's doing right now is starting a development server for us and you'll see that it's going to automatically open up xcode and now that the app has been indexed what we can do is go ahead and pick our simulator if you were on a mac now this is only going to be available if you were on a mac and then you can hit this play button so that it will launch our simulator and our app and if i pull this phone or simulator over you see it's firing up our app it says it's using app server with our server name and you'll see down here if we look we just have a blank screen and we're getting a bunch of errors so unfortunately it doesn't tell you inside of xcode exactly what's going wrong so what we need to do is launch this in the browser go to our console see what type of errors we're getting and fix those before we can go ahead and run them on the ios simulator so i'm just going to go ahead and stop this i'm also going to stop this by hitting control c and then what i'm going to do is run ionic serve and i'll pull over the browser window that just got launched we'll go to inspect we will go to the console and see what warnings we're getting and it's saying we're missing an ion card header so what we need to do is come back to our application and we're going to go to source views authentication and we have this ion card header in here and we must not have imported it so i'm just going to import it right underneath the ion card and register it as a component and then we're going to go ahead and save we'll pull our window back let's reload and make sure we're not getting any other warnings or errors and we are not so we're going to come back here i'm going to stop this and then we're going to run that ionic cap run and we're going to choose ios again then i'm going to open up xcode and we see that our development server is ready so i'll come back we will hit play again cross our fingers and hope that the app shows up in our emulator okay so our app has shown up in the emulator now so if we go ahead and click here and i sign in and we see now we're inside of our app in the emulator now what i'm going to do is i'm going to close out xcode and close out our emulator stop tasks let's go down here and let's run the same thing for android so we'll choose android and you can't see it because it launched on my other window but it launched android studio and we see that we have our capacitor slash ionic app running and we can see we can just click the play button and if i drag the android emulator over we see we have our app and if we go ahead and sign in we see that we have all of our tabs in here and the app is working correctly and as you saw earlier we don't get great error messages when we're running our app natively so what i like to do is just develop my app inside of the browser and then port it over to the phone in order to do that we're just going to close out our emulator here i'm also going to close out android studio and we're going to stop this process with control c and we're going to launch our app in the browser so i'm going to run ionic serve and our app is launched so what i'm going to do is i'm going to pull it over here we're going to inspect so we get our nice phone and i'm just going to take this and detach it so that i can make this smaller and now that we have the app running in the browser the first thing i want to do is go ahead and sign in and we want to change the name of this tab we're going to use this tab to launch our camera and take photos so in order to change this we're going to go to src views and then tabs and then we see we have our first tab up here so what i'm going to do is come down and find my icons and triangle is the first tabs icon so we're just going to change that to camera outline i'm just going to copy this we're going to come down and we're going to return it to the template and then i'm going to come back up here and we're going to use it there and i'm going to turn off autosave and you'll see that when i reloaded the page since it was showing me a blank screen it took us back to the sign in page and we don't typically want that to happen to our users so what we're going to do is we're going to head to our main.ts and right here where it creates our app we're going to wrap this in a firebase call so what we're going to do is check to see that check to see if the user has their off state change so i'm going to say let's and i'm going to set that to any we're going to get rid of this const here and then we're going to wrap this whole thing in auth dot on off state changed it's going to be an async method and it's going to give us a user then we're going to say if exclamation point app so if there is no app we're going to take this right here and cut it and paste it in right there then i'm going to come back we'll actually need to save i'm going to come back and sign in and then i'm going to reload the page to make sure that that worked and when we reload the page we see that our user wasn't logged out and we see we have our camera icon down on tab one so let's go ahead and change the name of that so we'll go back to tabs and we're just going to change the name of tab one to camera save that and we see now we have our tab with the icon and name that we wanted the next thing we're going to do is add firebase storage because we're going to need to store our images inside of firebase storage so let's head back to main.ts and up here at the top underneath this firestore import we're going to say imports firebase slash storage then we're going to come back down and underneath this export const for our firebase firestore we're going to say export const storage equals firebase dot storage and we'll go ahead and save that then we'll head back to tab one and the way i envision this tab looking is we're just going to have a button in the middle of the screen that says camera and when you click it it will launch our camera so that we can take a picture to do that we're going to import a couple of ionic components we're going to import the ion button and we're also going to import the ion icon because i'd like to give my button an icon we'll come down and we will add these to our components then up at the top of the script tag we're going to import our firebase storage so we're just going to say import storage from maine.ts and we're going to import our capacitor plugins to launch the camera so i'm going to say import plugins and camera result type from at capacitor slash core and then out of our plugins we're going to pull out our camera and geo location so we're going to say const camera geo location equals plugins now when we're storing our images we want to make each image's file name completely unique so that way there's no naming conflicts inside of our storage buckets and what i'm going to do is i'm going to copy and paste some code it just creates a guide or a unique identifier for each of our images and i will leave the code for this in the description and there's also going to be a bitbucket rebo attached to this so i'm just going to come over here i'm going to copy this and right below our explorer container i'm just going to paste that in and essentially what is what it does is it takes this string and it replaces it with some random letters and numbers then we're going to head down to export default and we're going to create our setup method we're going to create a method inside of here to take our picture so i'm going to say const take picture equals async we're going to say const image equals awaits camera dot get photo and then we're going to pass in some properties here we're going to say quality we'll set that to 90. we'll set allow editing to false and the result type that we want out of this will be camera result type dot base 64. next below this we're going to say if and i'll scroll down a little bit so we can see this better we're going to say if image we'll throw a question mark behind it to check that it's not null dot base64 string we're going to need to get our user and one thing i forgot to do up here was imports our authentication from main and we're also going to need our db as well so make sure you do that here at the top we're going to come back down here and inside of this if block will get the current user so we'll say const user equals off dot current user we'll create our guide so we're going to say const guide equals uu id v4 and that will return a good string to us we're going to say const file path we'll do a backtick because we're going to do some text interpolation on here we'll do dollar sign and two brackets we're going to say user make sure that it's not blank uid then we'll do a forward slash we'll say images and then we're going to do another dollar sign and brackets and inside of there we will do our good and then we'll put a period right behind that and then we're going to want to save it in the format that the camera took the image in so we'll do the dollar sign in brackets again and we'll say image dot formats and that will give us the extension next we're going to grab a storage ref so we'll say cons storage ref equals storage dot ref and then we're going to save our image inside of firebase storage so we're going to say awaits storage ref dots child and we're going to pass it the file path dot put string and we're going to give it our image and the base 64 string off of that image and we're going to say that the format is base64. next we're going to get the download image from this file that we just saved so we're going to say const url equals awaits storage ref dot child and pass it the file path and then we're going to say dot get download url the next thing we're going to do is grab the user's location so we're going to say const lock equals weights geolocation dot get current position and then the last thing we're going to do is save all of this in the database so we're going to say awaits db dot collection we're going to reference the users collection we're going to grab the dock that contains the user's id so we'll say user.uid we'll make a sub collection off of this called images and we're going to add our image to it so we will pass in an object and we're going to say image we'll pass it the url and then we're going to say location we get a latitude and longitude off this so i'm going to say lat let me scroll up a little bit so we can see this better and set that to lock dot chords dot latitude and lon for lawn and set that to lock dot chords dot longitude hit alt shift f to format everything and then outside of this method but still inside of our setup we're going to return all of this so we're just going to return camera which we have not imported yet so let's go import the camera icon so we'll head up here and right below our components that we import we're going to import camera from ion icons slash icons we'll come back down we'll return that icon to the templates and we're also going to return our method of take picture and now that we have everything we need for the template let's head up there we're going to change the title of the template to camera i'm going to get rid of everything inside of this ion content we're going to create an ion button we're going to make the size large fill equal to solid and when we click on this button we want to take picture inside of here we'll have an ion icon we'll set the name equal to camera and go ahead and close that i will put some white space so we're going to say ampersand nbsp and make the title of the button camera hit alt shift f2 format everything and then we're going to save it and we see we're getting an error uh the explorer container that we removed so let's come down and remove this explorer container and also remove it from the components and we'll save again and we see we now have our camera button but our ion icon is not coming through and that is because it's not name it's actually icon here so now we have our ion icon now i'd like to center this button in the screen so let's head down here and we'll create a style tag inside of here we will create a style called center we'll give display of flex align items equal center justify content we'll also set that to center and we will give it a heights of 80 vh i'll head back up and we will wrap everything inside of our ion content in a div with a class of center and we see we now have our camera button centered and now that we have all of our functionality done we can go ahead and test it now before we test it inside of a native emulator i'm going to go ahead and test it in the browser because that will show us better error messages if we get any so to do that we're going to click on camera and it's just going to launch i'm going to choose this sample jpeg and click open and as it stands right now it's not going to do anything but if we go over to firebase and we go ahead and look we now have our user the user that i logged in with and we have our sub collection of images and if i click on that we have one image in here and we see our data we have our image and the location so i'm just going to go ahead and grab this and paste it into the browser and what this will do is it's going to go ahead and just download it so if i open it up and show you it is the exact photo that we selected so go ahead and get rid of all this stuff we'll close out the image and close out of this to test this in the emulator we'll go ahead and stop our server so i'll click ctrl c i'm just going to go ahead and close this out and if you go to your terminal and hit the up arrow it'll give your last run commands and we're going to run that ionic cap run l dash dash external go ahead and run that we will choose android and i am going to run this in an android emulator because it has better capabilities than what the ios emulator has and i know that's kind of ironic on here since i'm doing this from a mac but just bear with me here so go ahead and click that and what this is going to do is it's going to open up android studio so we have that and i'll drag it over here and then all we need to do is click our play icon this will go ahead and launch our android emulator then i'll go ahead and just sign in here and we see we have our camera tab so i'll click on the camera button this will ask me if we want to take an image from our photos or take a picture i'm going to choose take picture and then we're going to click on this and we'll click the check box and we see that nothing's happened we haven't indicated to the user yet that we have a photo that has been saved but if we head back over to firebase we see we have a new image in here so go ahead and click it it'll give us the image url and the location latitude and longitude i'm just going to go ahead and copy this and we will paste it into the browser so that we can download our image and we see that it is the exact image that we took out of the camera just go ahead and close that now for your location down here if you go back to the android emulator and you click these three dots the first option here is your location and as they have it set right out of the box it is google's headquarter location and you but you can go ahead and just search and add a new location in there if you desire to do that and that's going to go ahead and wrap it up for this video now to recap we've managed to tap into the native camera and gps of the phone to take images and get the user's location in the next video in this series we will look at how we can display those images inside of our app and also see if we can do something with a location so if you haven't already make sure you subscribe and enable notifications so you'll be notified when that new video comes out now if you got any value out of this video i'd also appreciate it if you hit that like button it really helps out my channel and until next time happy coding [Music] foreign

Channel: Diligent Dev

Views: 1,826

Keywords: ionic vue tutorial, ionic vue app, ionic vue 3, ionic vue js, ionic vue firebase, ionic vue project, ionic vue js tutorial, ionic vue capacitor, ionic vue 2020, ionic vue login, ionic vue router

Id: uYfINoxFl6U

Length: 25min 21sec (1521 seconds)

Published: Wed Jan 06 2021