Exercise (Video): Ejecting for Native Development

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

оценки

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

оценки

Course 3 of 4 in the Specialization Full-Stack Web Development with React

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

From the lesson

Accessing Native Capabilities of Devices: The Expo SDK

In this module you will explore the Expo SDK that enables you to access the native capabilities of the mobile devices. You will use a few SDK APIs in order to understand the general concepts and the patterns for using these APIs within your React Native application

Exercise (Video): Building Standalone Apps20:02

Exercise (Video): Ejecting for Native Development25:10

Exercise (Video): Ejecting for iOS Native Development5:05

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

There may be special circumstances under which

the Create React Native App that you have

used to scaffold out our React Native Application,

may not meet your specific requirements.

In that case, we can always eject out of

the CRNA environment and then obtain

our React Native App and continue further development using native development.

Now, once you eject from CRNA,

then you will end up with an Android and an iOS parts of an app,

where you can further do Native development.

Let's look at several steps for doing this in this exercise.

So as I mentioned,

there may be circumstances where you need to eject out of the Create React Native App.

Now, here is a documentation of what it means to eject out of CRNA.

A link to which is provided under Additional Resources.

So again, reading from this,

ejecting is the process of setting up your own custom builds for your CRNA app.

Now, this may be required under certain circumstances.

So as you can see, you have given three different reasons for ejecting out of CRNA.

First, when you want to include a library which uses React Native Link.

This is one reason for doing this.

You want to be able to write your own native code to augment your application.

Then, you may wish to build

your own application publishers to the App Store or the Play Store.

So, under all these circumstances,

you need to eject out of CRNA.

Now, ejecting out of CRNA is a one-way process.

Once you eject out,

you can't go back into CRNA anymore.

Now, once you eject out,

you get an app that is very much what you would

create using the standard React Native CLI.

So, at that point,

you need to use either Xcode or Android Studio to continue your development.

In this exercise, we will look at how we can eject out of CRNA.

But since we have already used some of the Expo APIs,

and if you wish to continue to use the Expo APIs,

then you need to eject with a special proviso.

You need to eject out using an ExpoKit.

I will talk about that and we'll see how we can eject

out to continue to use the ExpoKit next.

To eject out of CRNA,

their simple process is to say "npm run eject" or "yarn

run eject" and then you are out of the CRNA environment.

Now, in this exercise,

since we have already used some of the exposed APIs in our project,

we may wish to keep using the Expo APIs.

If you don't wish to use the Expo APIs,

you have two choices.

You can completely remove all the use of Expo APIs from your React Native Application,

and then eject out at the point.

Then you will have to include the corresponding

"npm modules" that provide similar functionality as what you have used from ExpoKit,

and then develop your application.

So, that is one approach that you then take to further doing the development.

In this exercise, I am going to eject out using something called the ExpoKit.

Now, what is ExpoKit?

We'll talk about that in a minute.

The ExpoKit will allow you to continue using

the Expo APIs along with building your own native code.

But if you eject out using the ExpoKit,

then you will require to continue to use the Expo account

and you need to use the Expo Developer Tools for continuing your process.

Now, when you do this ejection using the ExpoKit,

then what happens is that Expo will set up a rudimentary application which

provides the wrapper around the Expo APIs plus the React Native Code.

So, you can still use the React Native bundling that you do with the Expo app

and some of the JavaScript bundle using the Expo server.

But when you eject up with ExpoKit, as I said,

ExpoKit will provide you with

a shell application that it has functionality that is pretty

similar to what is provided by

the Expo client that you have already installed on your device.

But this particular shell application would be your custom shell application.

Now, after this, you can add additional native code to

this custom shell application on your own and then continue the development.

Now, once you eject out with ExpoKit,

you can no longer use the Expo client that you have been using so far.

You have to build your own native application.

The shell that Expo provides for you using

either Xcode or Android Studio for iOS and Android.

We will look at how we build this for Android in this exercise.

Now, what exactly is ExpoKit?

ExpoKit is an Objective-C and a Java library that allows you as mentioned here,

it allows you to use the Expo platform and

your existing Expo project as part of a larger standard native project.

Now, you would resort to doing this only under

circumstances where you realize that Expo doesn't

support a specific access to

a native environment and so you will have

to build your own native library to include that in that case.

So, this our remote circumstances under which you will do that.

But since we are completing this course,

I thought I will introduce you to that part also in this course,

so that you have a complete picture.

But exactly how you build

your native library and include it and so on is beyond the scope of this course.

That is a bit advanced because you need to know how to do

Xcode based iOS development and

Android Studio based Android app development before you can do that part.

That is way beyond what this course can cover.

But I will show you how to eject out into this environment.

If you are already familiar with iOS development to using

Xcode and Android development using Android Studio,

then you can continue further along that process.

So, you will be detaching

your JavaScript Expo project into a JS and Native based ExpoKit project.

Then you will have to adapt to using custom native code with Expokit.

So, once you do this again,

this documentation is also provided in the Expo docs.

So, the first step would be detaching to

Expokit and then this provides you with the details.

Now, I will illustrate this to you from the clear react native App in a short while.

So, here are the documentation on exactly how you go about doing this,

and then you will double up with Expokit.

Now, for all these you would need to have Android Studio installed on your computer.

So, if you have a Windows machine,

or a Mac, or a Linux machine you can continue to do the development using Android Studio.

But if you need to do iOS development using ExCode then you definitely need a Mac.

In this exercise, I'm going to illustrate to you how we can use

Android Studio for continuing with Android development.

Now, to understand how you need to set up your computer

for continuing to do development using Android Studio.

The documentation and instructions on how to set up

Android Studio on your computer is already given in the React Native documentation here.

So, when you go to the Getting Started page,

you need to go to this tab saying Building Projects With Native Code.

Since you have already ejected out from Create React Native App,

you will need to do the steps in the section.

Now, if you are going to do iOS development,

then the only option is to use a Mac.

If you are doing Android development,

for Android you can use a Mac,

a Windows machine or a Linux machine.

So, if you are using a Mac,

now the steps for setting up your computer for doing native development are given here,

you need to install Watchman and also node.

Node we have already installed so that is not an issue for us.

You need to install Watchman on your computer and

then you may need to install React Native CLI.

But that is not needed because we are coming through

to the part of native development from Create React Native App.

So, the next step would be to install the Java Development Kit,

so as you see here.

You need to install the JDK as specified here.

Then after that you, need to set up your Android development environment.

To do that, you need to install Android Studio.

Here are the steps given for installing Android Studio,

you need to install the Android SDK as shown here.

Then after this, you need to install the APIs.

With the Expokit when you reject then you will need to set up or using

Android Studio with at least platform number 23 and so on.

So, you see exactly the setup

that you need to do and also set up some environment variables.

Now again, as I said,

this is not a straightforward thing unless you know what you're doing.

So, that's why I would advocate this to only people

that really want to do native development.

Then you need to prepare an Android device.

You can either use a physical device,

that is exactly what I'm going to demonstrate to you here.

Or you can set up a Emulator or

an Android virtual device as given by the instructions here.

After having done this,

then you will be able to use Android Studio and

then compile and then deploy your application to the device,

which I will illustrate too in a short while.

So, this is the instructions for Mac.

Now for Windows also for Android,

if you go into the Windows for Android,

you will see the set of steps that you need to do to install,

set up again, same kind of things.

You need to install something called Chocolatey,

which allows you to install some native environments here.

Then after that you need to do the Android development environment using Android Studio.

The configuration of Android Studio is very much similar to what I have shown you

for the Mac iOS and follow the steps and set up everything,

and then I will demonstrate to you how you make use of Android Studio.

Now, for Linux also,

correspondingly follow the instructions given here to set up

your computer for doing Android application development.

Once we have completed all those steps,

now it is time for us to eject out of our Create React Native Apps.

So, go to the project in the terminal or command window and at

the prompt type yarn run eject,

or NPM run eject and then eject out of your application.

When you run this,

you will immediately see that you will be given choices on the screen here.

So, it says, eject out using Expokits.

So, this will be the option that will be given to you

because we are using Expo APIs within our application.

So, that's the reason why we would be asked to eject out using this.

Also remember, that ejecting out of CRNA is a permanent one-way process,

and once you reject out you can't go back to what you have in the previous step.

So, do it only if you are sure you want to do it.

Now in this exercise,

I'm going to illustrate how to do it so that's why I will

have no choice but to eject on the spot.

If you don't want to use Expo APIs,

then you can eject out to a regular React Native projects.

So, I'm using the arrow keys to and make choices here.

Now, if I do this for my current project,

it will not work anymore because I am already using Expo APIs in my project.

Now the alternative would be to avoid using Expo APIs,

roll back my project to what I had at the end of

the third assignment and then instead of using Expo APIs,

I will have to take each Native support

for each one of the features that we use from Expo,

install the corresponding NPM modules and then configure them and so on.

Then I then I will not be depending on Expo.

At all, and then I'll be able to eject out like that and then continue the development.

But since I have already used Expo,

I'm going to stay with ExpoKit and then eject out using ExpoKit.

Now once you eject out using ExpoKit,

it'll take some time for it to set up several things for you in your project.

Once it is done,

then you'll be able to continue with further development.

So let me go ahead and eject out.

At that point, it'll ask whether you want to eject out to use an Expo account.

Since we have already set up the Expo account in the previous step,

we can continue to use the same Expo account.

In this case, since you have already set up,

it'll give you this option saying,

"Continue as that particular Expo account."

I'm going to say yes,

because we have already done that,

and we'll just wait for the ejection process to be done.

This is going to take quite some time,

so you need to sit patiently here waiting for it to be completed.

Once your project is ejected successfully,

then you're all set.

So, again, you can read what is printed out on

the screen to understand how to continue the development.

As you can see,

you will need to use the Expo XDE or Exp to run this project,

so you need to set up exp.

We have already setup exp in the previous exercise,

so, we are all good for going ahead with this.

Also, you need to read the ExpoKit's build documentation.

Once you have ejected out,

you will see that in your project you will have

two new folders called Android and iOS setup.

Going to your project here,

you will now see that within your project,

you will have a new folder named Android setup with some information here.

Now, this Android project here contains the shell application that

Expo provides for you which is

configured to use the ExpoKit that we have ejected out with.

Similarly, in iOS also,

you will have a project ejected out for you.

Now, if you need to continue further the native development,

you simply take this android folder and then open

it in Android Studio and then continue further with the development.

But before we do that, as I mentioned,

this Android project that is ejected out and created here is a shell application,

and that shell application is very similar to

the Expo Client that we have installed on our device.

So, the JavaScript bundle part of it is still going to be

served from the Expo Server or natively from your computer,

and then that JavaScript bundle will be pulled in by

this Android application into your device while it is running,

and then be able to run your application as a pure standalone Android application.

Now what does this facilitate?

Now, this enables us to be able to continue to make any changes to the JavaScript part of

our application and be able to redeploy

in modified version of the JavaScript part of our application.

As long as you're not touching any of the native capabilities,

you can still continue to do that,

and your Android application can still be deployed on the Play Store

and then you can continue doing that,

but let's see how we will build our Android application.

When you are building your Android application using Android Studio,

you will still need to continue to serve

your Javascript part of your application using exp.

Since we have already installed exp,

so at the prompt type exp start,

and then this will start serving your Expo application from your device.

So this would be done in the development mode.

Now since we have already configured our project to be

served publicly through the Expo Server in the production mode,

your Android project that has been ejected out will be automatically

configured to go and fetch the information directly from the Expo Server.

But during development, we may wish to serve our project from our local device,

so we'll just say expo start,

and then this will begin to serve

our Expo application that we have built from the device here.

As you can see, this is building our JavaScript application here,

and then it'll be ready and served up here,

and your Expo application will be served from this particular location here,

we're going to be using this in our application.

Now, the next step is to open our Android part of the application in Android Studio.

So, to do that, I have already installed Android Studio on my computer.

So let me start Android Studio.

So, when I start Android Studio,

it'll start up in a few minutes.

Once it is ready,

then I just need to click on open an existing Android Studio project,

and then I navigate down to the location where I

have the Android application that has been ejected out.

So, I'll go to React Native confusion,

and then you will open this Android folder in Android Studio.

You need to wait for the project to be opened here.

Android will come in,

asking you to update the Gradle plug-in,

don't do this because the explicate that ejected out will be automatically

configured with a particular version of Gradle and will work only with that version,

so we'll just keep it as such.

We don't want to make any modifications.

If you do any update,

your project will not work anymore, and it will break.

So, you will simply say,

don't remind me again for this project,

and you will close this and then wait for

your Android app part of your application to be opened in here.

If you know anything about Android,

then you will be able to go in and browse.

If you don't know anything about Android,

then it is beyond the scope of this course to explain what is contained in here.

So, once you have Android Studio up and running,

make sure that your Android device is connected

to your computer and your Android device already setup.

So, here you can see that my Android device is up and running.

Now, what I'm going to do is to deploy this Android application to the device.

If you have previously installed the Android APK for our project,

you may wish to uninstall that Android application because we're gonna

be configuring our own Android application here and then installing it.

So, once your device is up and running,

you just click on the run button here,

and then it'll give you the choices of where to deploy your application to.

Here, I will select the connected device here and deploy to that.

If you have set up an Android virtual device that'll show up here,

for Android I prefer to directly deploy to a real device and then test it there.

So let me go ahead and deploy the application to my device here.

You can either do an instant run or not, it doesn't matter.

Once a project is built and deployed,

you will see that the application will start running on the device.

Once it has completed building your project,

it will be installing the APK file automatically to your Android device,

and then start running the application on the device.

So, you will see your application starts running here,

and we'll just allow the permission for lists.

When your application runs,

it'll take a while for it to download

the JavaScript bundle from your Expo server that you're running on your computer.

Once that is downloaded,

then your application should configure and start running.

When your application is downloaded from your server,

then it'll start running on the device just

like the other version of the application that you have installed there.

So, you can see that all the functionality that you've

seen before would work exactly like that.

Again, make sure that your JSON-Server is up and running, otherwise,

your app will not be able to obtain any data for displaying in our application.

So, all the functionality that you have done before

should work exactly the same as before.

In order to show you that this application is actually installed on the device,

we can go to the apps and then you will see that

the application that you deployed from

Android Studio is actually installed on your device,

as shown here with the specific icon that we had configured for our application.

With this, we complete this exercise.

In this exercise, we have seen how we can eject out of

the Create React Native App and then continue native development using Android Studio.

You have also seen how we can deploy our application from Android Studio to

an Android device and run it on the Android device as illustrated.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play