0:00 In last video we deployed our functions
0:03 to google cloud. In this video we are
0:05 going to create a mobile app
0:08 in react native
0:10 which will make a call to google cloud
0:12 and do the prediction.
0:14 Now react native is a framework by
0:17 facebook wherein, you can write code and
0:20 run it on both android and ios. It is a
0:23 very hot technology, if you have
0:25 knowledge of react native you will get a
0:28 job very easily either as a software
0:29 engineer or
0:31 it can help you in data science field as
0:33 well.
0:34 First let's do some setup. You can go to
0:37 my github page. The link of this page is
0:39 in video description below and go to a
0:42 section where it says their setup for
0:44 react native app. Click on this link open
0:49 and
0:50 this page
0:51 go to this tab okay don't click on Expo
0:54 CLI. Come here
0:56 then select your OS. Let's say
0:59 we are windows correct! So windows and
1:01 android. If you are Mac or Linux i mean
1:03 select appropriately
1:06 and follow these instructions very
1:08 carefully. If you miss any step you will
1:10 face a lot of issues. Therefore you need
1:13 to read this page carefully and install
1:16 chocolatey install open jdk by running
1:19 this choco install command
1:22 install android studio
1:24 set up your environment variable as they
1:27 are shown here
1:29 and
1:30 stop when you come to this point.
1:33 So you don't need to follow the page
1:35 after this.
1:36 Okay. So I hope you follow all these
1:38 steps, you have installed everything now
1:41 let's go to the next step. So the next
1:43 step is
1:45 you need to go to
1:47 mobile app directory
1:49 so you get clone this particular
1:53 folder and that has a sub folder called
1:57 mobile app.
1:58 So on my computer
2:01 what I'm going to do
2:03 is
2:06 here you see mobile app.
2:10 So in here i will
2:12 just clear everything. Let's assume you
2:15 are here
2:16 and if you do ls you have a mobile app
2:18 folder, so
2:20 you are going to mobile app folder
2:23 and running yarn install
2:26 because see that's what it says here
2:28 right,
2:31 install
2:32 or yarn install on your computer
2:35 Google.
2:36 Google is a friend, okay install yarn.
2:39 How to install yarn? Well
2:40 npm install global yarn by running this
2:44 command you can install yarn. I have
2:46 already installed this thing
2:48 so my yarn command is going to run.
2:51 When you do yarn install, what it will do
2:54 is
2:55 it will go through
2:56 all your dependencies and install
2:59 on
3:00 those dependencies into this node
3:03 modules folder.
3:04 Now, I have already installed everything
3:05 that's why you, you know it just came up
3:08 like in a 0.36 second, but for you it's
3:11 gonna take some time.
3:13 So what it does internally
3:15 is it will create this node modules
3:17 folder and install all these
3:19 dependencies. By dependencies, you know in
3:21 python when you do import SKLearn,
3:23 SKLearn is a dependency
3:25 and that gets installed when you do pip
3:27 install something SKLearn
3:30 inside packages it will install um SKLearn.
3:34 Similarly, when you do yarn install, it
3:37 will look at all the dependencies in
3:39 your
3:39 package.json
3:41 or yarn.log.
3:43 Yarn, you can run npm as well npm yarn
3:46 are kind of alternatives,
3:48 and it will install
3:50 all those dependencies from package.json
3:53 into node modules okay.
3:56 So these are all the modules that we
3:57 have, alright. What's the next step? Next
4:00 step is copy env example as dot env.
4:04 So in my
4:08 this folder my env.example
4:12 is basically, I have opened that here
4:16 this is an example file, okay so I have
4:18 this url but you need to copy that as
4:21 dot env. So I did ctrl c ctrl v and then
4:24 renamed it to dot env and that dot env
4:28 file,
4:29 I put my own google cloud functions link.
4:33 You should have your own google cloud
4:35 instance as per our last video and you
4:37 should put that link. Don't put my link
4:39 it might not work. So you have to put
4:41 your own
4:43 link into dot env file.
4:48 Now the step number 2.1 is only for mac
4:52 users, so remember if you're a windows
4:55 don't worry about this step.
4:57 But if you are a mac user
5:00 you need to install cocoapod okay. So
5:03 otherwise pod command will not work.
5:05 Whenever you see something like okay
5:07 command not found, just google and
5:10 install that particular thing. But yeah
5:12 if you're a windows user do not worry
5:14 about this step.
5:16 Alright,
5:17 now the next step is running the app, so
5:20 you come to running the app section
5:23 in that
5:26 running the app yes,
5:28 you can just run npm run android command.
5:31 Now before you run that
5:33 you need to install
5:35 um
5:36 see let me see if i mention this here.
5:40 You need to have a virtual device
5:43 installed, you know virtual device as in
5:46 uh
5:49 on the same page okay you know we had
5:53 some steps on
5:55 yeah you on the same page basically
5:59 setting up
6:00 you know environment setup.
6:02 You need to go to
6:06 this one, create a new AVD
6:09 and follow the steps to
6:11 create a virtual device on your computer.
6:14 So if I'm in android studio here this is
6:16 my android studio if I go to tools
6:20 avd manager,
6:21 initially this list will be empty so
6:24 what i did is I created a new virtual
6:26 device.
6:26 These are all the android phones out
6:28 there, so I chose Pixel 2.
6:31 Click next,
6:33 make sure you select q29. See api level
6:37 29, next next next and it will create
6:39 this virtual device right here. Now what
6:41 is this virtual device?
6:43 Well, the virtual device
6:45 let me just close this thing here
6:49 when you click on this
6:51 it will
6:52 run an emulator on your computer. So this
6:55 looks just like your android phone, see.
6:58 This is like your android phone,
7:00 but it's an emulator on the computer. So
7:03 when you're doing any mobile app
7:04 development these emulators are pretty
7:06 useful. You can write a code, deploy to
7:09 this virtual device, test it
7:11 iteratively do that you don't have to
7:13 deploy your code every time to your
7:15 mobile phone.
7:17 So that's the purpose of this virtual
7:18 devices and you need to create at least
7:20 one virtual device. I'm going to just
7:23 exit this close this
7:25 and go back to
7:27 my directory here
7:29 and run
7:30 npm run android if you are running
7:35 application npm run ios
7:38 and if your setup is fine you will not
7:40 get any error and it will
7:42 launch the
7:45 emulator. See it is launching the virtual
7:47 device and then it is deploying your
7:50 code onto this device. So see my code is
7:53 deployed my code is in this directory
7:55 correct, mobile app you see
7:58 I have all my code so it ran that code
8:01 here and now
8:03 uh you can start using the application.
8:06 So I'm going to click on this icon and
8:08 select few
8:09 uh images so when you click on this icon
8:13 initially this folder will be empty, so
8:16 what you can do is
8:18 so i will go to you know i have this
8:20 test images from internet directory so
8:22 just
8:23 drag and drop these files here and it
8:26 will kind of copy it you might not see
8:28 it initially but you might have to close
8:30 this emulator start again but eventually
8:32 you will see this
8:34 and in here
8:35 I'm just going to select
8:37 one image. So now what's happening is it
8:40 selected that image behind the scene it
8:43 is calling google cloud function
8:46 for inference and which google cloud
8:49 function it is calling
8:50 this one
8:51 whatever you specify in dot env it is
8:55 making a call to that particular
8:58 function
9:00 and see all right worked!
9:03 It says
9:04 76.68 percent confidence.
9:08 So,
9:09 the mobile application is kind of ready
9:11 working
9:12 on your
9:14 computer and if you want to push this to
9:17 google play store
9:19 I have instructions for that as well so
9:21 on the same page
9:23 when you go to
9:25 running the app
9:29 I think it is somewhere here,
9:38 so running the app and deploying it let
9:41 me find yes here so if you click on this
9:44 link creating a public
9:46 you know public api or
9:48 kind of pushing it to google play store
9:51 if you follow these instructions
9:53 you will be able to deploy your
9:55 application to google store.
9:57 Now going back to code,
10:00 the code is quite similar to the code we
10:03 saw for website. Website was built in
10:05 react.js.
10:07 Mobile application is built in react
10:09 native.
10:10 Now the code will be mostly similar
10:12 there might be some changes.
10:14 Some changes as in
10:16 you know the dimensions for
10:19 the mobile application is different.
10:22 So, then you will do something like this
10:25 but other than that code is kind of
10:27 similar.
10:29 You are using all the libraries from
10:30 direct native and
10:34 things like exios that we use for
10:37 react.js
10:39 website we are using the same exios
10:42 library here and it makes an http call
10:44 to our backend, okay. So go over go
10:47 through this code if you don't know
10:49 react native
10:50 if you want to get some idea on
10:52 recognitive you can go to youtube find
10:53 some tutorials.
10:55 I wish you have enjoyed watching this
10:57 series with me and you have learned some
10:59 important concepts on how to build deep
11:01 learning project end to end.
11:04 I did not get a chance to cover tflite
11:06 so in the future, I might upload one or
11:08 two videos on tflite and show you how
11:11 you can deploy tflite model on the
11:13 mobile device itself rather than making
11:15 a call to http function
11:17 in gcp cloud. So, if I get a chance, I will
11:21 upload those videos in the same playlist.
11:23 So keep an eye on it but
11:25 if you like this series, please give it a
11:27 thumbs up and share it with your friends
11:29 who can also
11:30 you know get some benefits out of this
11:32 awesome project experience. This is an
11:35 end-to-end project series, this is how
11:36 the projects are executed in corporate
11:39 so it's gonna give you a lot of good
11:40 exposure on you know building the whole
11:43 application end to end if you like the
11:46 this video please give it a thumbs up
11:47 and share it with your friends, and if
11:49 you have any question please post in a
11:51 comment box below.
