Exercise (Video): Building Standalone Apps

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

11 calificaciones

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

11 calificaciones

Curso 3 de 4 en SpecializationFull-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

De la lección

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

Conoce a los instructores

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

Now that we have completed building the React Native Application,

you will be curious about how you can build your Application and then

deploy it to the iTunes Store or the Google Play Store.

Now, for this, you need to build the Android APK file or the iOS IPA file.

Now, Expo provides many resources for us online and online services that enable you to

automatically build these for you without having

to install Xcode or using Android Studio.

So, in this exercise,

we're going to pursue that approach for building

an application using the Expo's online services.

To make use of the online services from Expo,

we need to sign up for an Expo account.

Now, before we do that,

we first download and install the XDE desktop tool that is available from Expo.

The XDE provides a Expo development environment.

That is also another way of getting started with

a React Native Application instead of using

the Create React Native App that we have used in this course.

Now, both will lead you to the same point as I will explain in short while later.

Now, the first step for you to do is to download the XDE and install

it on your computer for the specific OS from the links given here.

Now, I have downloaded and installed the Expo XDE and started it up as you can see here.

In this XDE, you can see that you can register for an Expo account by clicking on

the register link there and then fill in your details and then sign up for a account.

Now, once you complete that process,

then you can sign into your account using this Sign In Window here.

So, let me go ahead and then sign into my account here.

Then you will get to this screen here and

then for your React Native project that you've already created,

you can simply open that using Expo XDE.

The Create React Native App project that you've created

also is set up such that it can be easily opened in XDE.

Now, ignore these two here.

These are variations of the project that I have tried out

just to test some of the concepts in the course.

Now, the Expo project that I have for this course is in my Documents,

Coursera, React Native, confusion folder.

Then let me go ahead and open the project.

When I do that, the Expo XDE automatically starts up and

then serves the project by packaging the project for us.

Now, we were doing this using yarn start at the command line.

So, there are two ways of being able to serve up the Expo project.

Now, once your project is up and running,

you can click on the "Share" button and you'll see

the QR code and you can scan this QR code using your Expo App

and you'll be able to access

your React Native Application on your device directly from here.

But, that's not what we're looking for.

We are looking to build this application and then build the corresponding APK files.

But, the Expo XDE itself I am using right now just

to sign up for an account and you can see that I've signed up into my account,

I can even sign out from the account as required.

So, once you have completed this,

then to build the APK files or the IPA files,

you need to use the Expo Command-Line Interface called as exp.

So, you need to install that command line interface.

So, let me go ahead and close the Expo XDE.

Let me close the project first and then close

the Expo XDE and then let's go to the Command-Line.

At the Command-Line, let's go ahead and install the Expo CLI.

To install the Expo CLI,

at the Command-Line type,

yarn global add exp.

Or, you can also type npm install

minus g exp on Mac and the Linux,

don't forget to use pseudo in front of it and then go ahead and

install the

corresponding Expo project.

So, once you have installed,

you can see that we are using exp version 54.0.1 in this course.

So, make sure that you are installing only exp

54.0.1 so that you won't have issues with using this in this course.

So, once you have completed that,

then the next step is to download icon that we will use for our application.

The icon that you will see in

the launcher screen for your Android device or in your iOS device.

So, download the icon.png file that is provided in the exercises resources for

this particular exercise and then move that icon.png file into the projects folder.

Then going to our application in Visual Studio here,

you can see that I have downloaded the icon.png file

and this is what you will find in the icon.png file there.

This is what we're going to be using as the icon for our application.

Now, once you have completed that,

then open the package for JSON file and then make sure that

the name here is typed as "confusion".

We must have set this up when we created our project and

also open this file called app.json and then in the app.json file,

this is what you will find already configured in the app.json file.

To this file, add in these few configurations here.

So, I will type the name as "confusion",

because that's exactly what we are using the package for JSON file.

So, the same name should be used in this app.json file.

So, we'll configure the name and then we'll configure the icon as "./icon.png".

So, we just downloaded the icon.png file there.

So, we're going to be using that and then we'll set up the version.

Currently, we are doing the 1.0.0 version.

So, that's the version that we're setting up here and

then we'll set up something called slug.

The slug gives the name that is going to

be used in your Expo account to identify this particular project.

So, in your Expo account,

when you give this name as "confusion",

the project will be identified as Expo.io and then

at the username and then slash and "confusion" that we have used here.

So, that's the same thing that I'm going to use here.

Then in addition, we need to configure two more properties called as iOS.

For iOS, we will configure a property called as bundleIdentifier.

This is something that the iOS uses when it builds the application and

the normal bundle identifier that we would use

is the reverse of the domain name for our company,

and the specific application.

Again, that is up to us to decide what to use.

So, let me add a net.food.confusion.confusion.

Again, depending on your company's domain name,

you would configure this appropriately.

Similarly, for Android, they would supply what

is called as the package name and so this would be supplied here as package.

Now, if you have done any iOS and Android development,

you would understand the package names

and all these things

that are used by Android studio or Xcode for iOS.

So, that is what you will configure in the app.json file.

Once, you have configured this, then,

it is time for us to build our a React Native Application and then,

build the corresponding APK file.

Now, in this exercise,

I'm going to demonstrate how to build the Android APK file.

For iOS also, there will be a similar process.

The instructions are given in the link that is provided in

the exercise resources for how to build for iOS.

I'm just going to demonstrate how to do this for Android.

So, let me go ahead and save the app.json file.

Before we go ahead and understand how this whole thing works,

again in the export documentation,

you will find a link to a tool of the XDE.

So, you can go through this link to understand how

the XDE is used in in export development.

Let me quickly draw your attention to the project lifecycle.

This sort of explains to you how this whole development is actually taking place.

So, in Expo, what we are doing is that if you use Expo XDE,

you will set up a new project using Expo XDE.

That is one way of arriving at the stage where you will be developing your project local.

The other alternative way of arriving at

this point is to use the Create React Native App that we have installed.

So, both of these parts will land you at the same point where you will

begin with the scaffolded out application

that is already set up with all the toolings necessary for you,

and so that you can develop your project locally.

Once you have developed your project,

then you will publish your project to the server.

Now, a part of doing this is already done when we configure the app.json file there,

and then we'll do the exp build which is the way we will build our APK

or our IPA files here and then when you build the APK or IPA files,

then you're ready to deploy it to the item iTunes Store or the Google Play Store.

Now, the other part detaching to Expokit.

I will talk about it a little bit later.

Now so, in this exercise we're going to go through this step of using exp build

to make use of the Expo's online services to build the APK file for our application.

So, how do we do that?

Going back to the terminal.

At the terminal prompt,

since we have already installed exp,

let me just verify that I have installed exp here,

yes indeed exp is installed and it is available at my command prompt.

You may need to restart your terminal window or command prompt.

Now look for the exp,

the command line tool to be available at the prompt.

So, I have already restarted by terminal window,

so I have exp available at the prompt.

So, to build our Android APK file at the prompt,

you simply type exp build:android,

and then, you will let the Expo builder go through the process of building up.

It's going to ask you a few questions after which it will set up and build the APK file

on the Expo's servers and then make the APK file available for you to download.

So, let's go ahead and start the build and this is going to take

quite some time for it to complete its work and again,

you have to make sure that you have set up the project correctly.

You can ignore these warnings,

that's not going to cause much issue for us and then,

it will go through a certain set of steps,

and then build up our application.

So, as you can see it is building up the JavaScript bundle first,

and then once that is done,

then it will go to the next step.

It is building the Android bundle at this moment,

so we'll let it go through its steps

and then it'll start up its building,

and you would see a couple of links provided here.

Now, this is the link where your application is available.

So, you can go to this link and then you will see

this your application on the Expo's server and

this link that is provided here is where it will show

you the building process as it is going through,

and this will take quite some time for it to complete.

So, you have to wait patiently for quite a few minutes

or perhaps sometimes an hour in order for this to complete the build.

So, be very patient,

and make sure that you don't lose your internet connection while this is going on.

So, while the build is going on,

I have brought you over to the link that is provided there's and you can

already see that the icon has been taken up by my application and so,

this is where you will contain the details of your application and then, as you can see,

you can scan this QR code to be able to access

the application from the Expo server so this will be a public distribution

of your application that you can provide for other people to access your application.

So and then, if you go to this link there,

you would find that your projects,

your snacks, favorites, all these are available here.

Again, you need to sign up for an Expo account for you to be able to access these.

Similarly, I'm going to take you to the other link that is provided.

The build's link that is provided for us,

and you can see that right there,

it is printing out all this information on the screen

here to show what is going on behind the scenes and as you can see,

it's going to take a lot of time before the build is completed,

so you have to wait for this to complete and when this is completed,

then you will be able to download from

the link here or your link will be printed out on the screen.

So, you'll be able to view the information there.

So, you can see what all has been done by Expo for building your application.

Again, this may not make much sense to you but if you are curious,

you can watch and see what is going on

behind the scenes as as your application is being built,

and once it finally completes,

you will see the completed checkbox here and then you will see the download link here.

Similarly, when you go to the terminal,

you will see the message here saying

successfully built a standard on app and then you will get

this URL here which is exactly the same as the download link that you have seen here.

So, using either one of these,

you can download the APK file that has been built for us by Expo's online service.

So, let's go ahead and download this APK file.

Once I downloaded file,

then copy the file into my Android device and then

went ahead and installed the file on my Android device,

and you can see that my new application is now installed on my Android device.

So let me go ahead and start the application.

Now, when you start the application,

then you will see that the application starts up and then starts showing the information.

Now again, make sure that

your json server is up

and running on your computer because your application is going to be

making use of the json server to obtain the data from

the json server in order to show the information within your application.

So, this is the version of the application that has been

compiled by the Expo server and then installed on my computer.

So, you can see that the application works exactly like our regular application,

no difference between this and the app that we have been serving

up from our Create React Native App.

The process for doing this for iOS is pretty similar with some minor changes

and the details of how to do it for an iOS device

are in the link that is provided in the exercise instructions,

that will take you to the Expo's documentation where the details are given.

Similar steps are followed in order to generate the IPA file for iOS.

We have demonstrated how we can make use of the Expo servers to build our APK file,

install it on our device,

and then use it in our application.

So this APK file is ready for distribution in Google Play Store.

With this, we complete this exercise.

In this exercise, we have seen how we can use the Expo's online services

to build and deploy our application to a device.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play