Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Deep learning project end to end | Potato Disease Classification - 8 : Mobile App in React Native | codebasics | YouTubeToText
YouTube Transcript: Deep learning project end to end | Potato Disease Classification - 8 : Mobile App in React Native
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
This content guides users through setting up and running a React Native mobile application that interacts with Google Cloud functions for predictions, completing an end-to-end deep learning project deployment.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
In last video we deployed our functions
to google cloud. In this video we are
going to create a mobile app
in react native
which will make a call to google cloud
and do the prediction.
Now react native is a framework by
facebook wherein, you can write code and
run it on both android and ios. It is a
very hot technology, if you have
knowledge of react native you will get a
job very easily either as a software
engineer or
it can help you in data science field as
well.
First let's do some setup. You can go to
my github page. The link of this page is
in video description below and go to a
section where it says their setup for
react native app. Click on this link open
and
this page
go to this tab okay don't click on Expo
CLI. Come here
then select your OS. Let's say
we are windows correct! So windows and
android. If you are Mac or Linux i mean
select appropriately
and follow these instructions very
carefully. If you miss any step you will
face a lot of issues. Therefore you need
to read this page carefully and install
chocolatey install open jdk by running
this choco install command
install android studio
set up your environment variable as they
are shown here
and
stop when you come to this point.
So you don't need to follow the page
after this.
Okay. So I hope you follow all these
steps, you have installed everything now
let's go to the next step. So the next
step is
you need to go to
mobile app directory
so you get clone this particular
folder and that has a sub folder called
mobile app.
So on my computer
what I'm going to do
is
here you see mobile app.
So in here i will
just clear everything. Let's assume you
are here
and if you do ls you have a mobile app
folder, so
you are going to mobile app folder
and running yarn install
because see that's what it says here
right,
install
or yarn install on your computer
Google.
Google is a friend, okay install yarn.
How to install yarn? Well
npm install global yarn by running this
command you can install yarn. I have
already installed this thing
so my yarn command is going to run.
When you do yarn install, what it will do
is
it will go through
all your dependencies and install
on
those dependencies into this node
modules folder.
Now, I have already installed everything
that's why you, you know it just came up
like in a 0.36 second, but for you it's
gonna take some time.
So what it does internally
is it will create this node modules
folder and install all these
dependencies. By dependencies, you know in
python when you do import SKLearn,
SKLearn is a dependency
and that gets installed when you do pip
install something SKLearn
inside packages it will install um SKLearn.
Similarly, when you do yarn install, it
will look at all the dependencies in
your
package.json
or yarn.log.
Yarn, you can run npm as well npm yarn
are kind of alternatives,
and it will install
all those dependencies from package.json
into node modules okay.
So these are all the modules that we
have, alright. What's the next step? Next
step is copy env example as dot env.
So in my
this folder my env.example
is basically, I have opened that here
this is an example file, okay so I have
this url but you need to copy that as
dot env. So I did ctrl c ctrl v and then
renamed it to dot env and that dot env
file,
I put my own google cloud functions link.
You should have your own google cloud
instance as per our last video and you
should put that link. Don't put my link
it might not work. So you have to put
your own
link into dot env file.
Now the step number 2.1 is only for mac
users, so remember if you're a windows
don't worry about this step.
But if you are a mac user
you need to install cocoapod okay. So
otherwise pod command will not work.
Whenever you see something like okay
command not found, just google and
install that particular thing. But yeah
if you're a windows user do not worry
about this step.
Alright,
now the next step is running the app, so
you come to running the app section
in that
running the app yes,
you can just run npm run android command.
Now before you run that
you need to install
um
see let me see if i mention this here.
You need to have a virtual device
installed, you know virtual device as in
uh
on the same page okay you know we had
some steps on
yeah you on the same page basically
setting up
you know environment setup.
You need to go to
this one, create a new AVD
and follow the steps to
create a virtual device on your computer.
So if I'm in android studio here this is
my android studio if I go to tools
avd manager,
initially this list will be empty so
what i did is I created a new virtual
device.
These are all the android phones out
there, so I chose Pixel 2.
Click next,
make sure you select q29. See api level
29, next next next and it will create
this virtual device right here. Now what
is this virtual device?
Well, the virtual device
let me just close this thing here
when you click on this
it will
run an emulator on your computer. So this
looks just like your android phone, see.
This is like your android phone,
but it's an emulator on the computer. So
when you're doing any mobile app
development these emulators are pretty
useful. You can write a code, deploy to
this virtual device, test it
iteratively do that you don't have to
deploy your code every time to your
mobile phone.
So that's the purpose of this virtual
devices and you need to create at least
one virtual device. I'm going to just
exit this close this
and go back to
my directory here
and run
npm run android if you are running
application npm run ios
and if your setup is fine you will not
get any error and it will
launch the
emulator. See it is launching the virtual
device and then it is deploying your
code onto this device. So see my code is
deployed my code is in this directory
correct, mobile app you see
I have all my code so it ran that code
here and now
uh you can start using the application.
So I'm going to click on this icon and
select few
uh images so when you click on this icon
initially this folder will be empty, so
what you can do is
so i will go to you know i have this
test images from internet directory so
just
drag and drop these files here and it
will kind of copy it you might not see
it initially but you might have to close
this emulator start again but eventually
you will see this
and in here
I'm just going to select
one image. So now what's happening is it
selected that image behind the scene it
is calling google cloud function
for inference and which google cloud
function it is calling
this one
whatever you specify in dot env it is
making a call to that particular
function
and see all right worked!
It says
76.68 percent confidence.
So,
the mobile application is kind of ready
working
on your
computer and if you want to push this to
google play store
I have instructions for that as well so
on the same page
when you go to
running the app
I think it is somewhere here,
so running the app and deploying it let
me find yes here so if you click on this
link creating a public
you know public api or
kind of pushing it to google play store
if you follow these instructions
you will be able to deploy your
application to google store.
Now going back to code,
the code is quite similar to the code we
saw for website. Website was built in
react.js.
Mobile application is built in react
native.
Now the code will be mostly similar
there might be some changes.
Some changes as in
you know the dimensions for
the mobile application is different.
So, then you will do something like this
but other than that code is kind of
similar.
You are using all the libraries from
direct native and
things like exios that we use for
react.js
website we are using the same exios
library here and it makes an http call
to our backend, okay. So go over go
through this code if you don't know
react native
if you want to get some idea on
recognitive you can go to youtube find
some tutorials.
I wish you have enjoyed watching this
series with me and you have learned some
important concepts on how to build deep
learning project end to end.
I did not get a chance to cover tflite
so in the future, I might upload one or
two videos on tflite and show you how
you can deploy tflite model on the
mobile device itself rather than making
a call to http function
in gcp cloud. So, if I get a chance, I will
upload those videos in the same playlist.
So keep an eye on it but
if you like this series, please give it a
thumbs up and share it with your friends
who can also
you know get some benefits out of this
awesome project experience. This is an
end-to-end project series, this is how
the projects are executed in corporate
so it's gonna give you a lot of good
exposure on you know building the whole
application end to end if you like the
this video please give it a thumbs up
and share it with your friends, and if
you have any question please post in a
comment box below.
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
