Section5Exercise1 BuildNativeAppsUsingAppStudioForArcGIS

Do-It-Yourself Geo Apps MOOC
Exercise
Build Native Apps Using AppStudio
for ArcGIS
Section 5 Exercise 1
08/2018
Build Native Apps Using AppStudio for ArcGIS
Instructions
Use this guide and ArcGIS Online to reproduce the results of the exercise on your own.
Note: ArcGIS Online is a dynamic mapping platform. The version that you will be using for
this course may be slightly different from the screenshots you see in the course materials.
Time to complete
Approximately 50-60 minutes
Technical note
To take advantage of the web-based technologies available in ArcGIS Online, you need to
use a fairly new version of a standard web browser, such as Google Chrome, Firefox, Safari,
or Internet Explorer. Older web browsers may not display your maps correctly.
For information on supported browsers, visit the documentation (https://bit.ly/2pIIN2T).
Introduction
In Chris's lecture for this section, you learned that native apps are created for a specific
platform. They are installed directly onto a device, as opposed to a web app, which is not on
a specific device but accessed with a web browser. With AppStudio for ArcGIS, you can
convert your web maps into beautiful, consumer-friendly mobile apps for Android, iOS,
Windows, and more.
Copyright © 2018 Esri. All rights reserved. 1

You can also publish geo apps to popular app stores using your own brand without touching a
piece of code.
There are two licensing models for AppStudio: Basic and Standard. AppStudio Basic is free
and allows you to build apps from templates that you can then publish to Apple, Google, or
other app stores. AppStudio Standard builds on this functionality by allowing you to develop
more custom apps, but it requires a yearly subscription. In this exercise, you will use
AppStudio Basic to create your native apps.
Part I - Guided
The exercises in Sections 2 through 6 have two parts: the Guided part provides step-by-step
instructions, and the Do-It-Yourself part lets you explore further and build your own geo apps.
In the Guided part of this exercise, you will build a native app using AppStudio for ArcGIS, a
mobile field collection app for finding and mapping bike parking areas.

First, you will create a bike-parking collection app using the Quick Report template. This
template allows users to capture the location of a feature, record information about it, and
even attach a photo or video taken with a mobile device. All observations are submitted to an
online service where you can access them through other web or mobile apps. Then, you will
create a map to learn how to show the results of a mobile app.
You will not actually publish your app to an app store in this exercise, as it would require you
to sign the apps and then receive verification from Apple (https://apple.co/19ele5e) or
Google (https://bit.ly/2MRbKSG). Signing your app is a process that confirms that you, the
app creator, are trusted by the app's distributor (Apple or Google, in most cases). For now, if
you want to publish an app after completing the exercise, you'll need to sign it on your own.
In the future, Esri will handle the signing and publishing process for the apps that you create
with AppStudio.
Step 1: Download AppStudio Player

To access your apps on your phone or mobile device (iOS or Android) without publishing
them to the Apple or Google store, you will download the AppStudio Player for ArcGIS app
on your device.
Note: This step is optional. The mobile apps that you create in this exercise are meant to be
viewed on your iOS or Android devices. If you don't have an iOS or Android device, you can
still create your apps and complete the exercise, but you will not be able to view the mobile
versions of the apps you create.
a On your device, open the app store.

Note: For iOS devices, open the Apple app store. For Android devices, open the Google Play
store.
b Search for AppStudio Player for ArcGIS.
c Download and install the app.

Now that you have AppStudio Player on your device, you will create your apps. You will begin
with the Quick Report template to create a field collection app.
Step 2: Download assets for this exercise

First, you will create the bike parking collection app using the Quick Report native app
template. This would be a useful tool for your community to get information about how much
bicycle parking exists or is needed. You must download the assets for your app before you
begin.

a Open a new private (or incognito) web browser tab or window.

We recommend that you open a private or incognito browser window whenever you need to
work in ArcGIS Online to help prevent conflicts with your accounts.
b Go to this page containing the Exercise5BikeParking zip file (https://bit.ly/2BkXn7Z).
c At the top right of the page, click Download.
d Choose a location to download the file to, and then unzip the contents to an easily
accessible location on your computer.
Step 3: Publish a feature layer from an existing feature service

Each Quick Report app that you create requires a feature service with at least one point layer,
which is used to show submitted observations.
Every hosted feature layer you publish in ArcGIS Online has an underlying feature service in
the cloud. Feature layers store the configuration of a particular data source and determine
how data is drawn in a web map or app. Every feature service has a Service URL, which can be
accessed from its item page.
This URL is a REST endpoint, which is a URL provided as a way for web apps to access data
through a feature service or any other web service. REST is a common way for web
developers to access and share data or services. You could paste that REST URL into a web
browser and see the services directory page with more details.
You will use the REST endpoint of an existing public-facing feature service to publish a new
hosted feature layer for your app to use. When you create a hosted feature layer in your
ArcGIS Online account like in the workflow below, a new, empty feature service is published
behind the scenes, allowing you to collect your own set of data.
a In the private (or incognito) browser tab, browse to arcgis.com, and sign in to ArcGIS
Online using your course credentials.

Note: The Section 1, Exercise 1 PDF explains how to determine your ArcGIS Online
credentials (username and password) for this course. If you have trouble signing in, you can
check the Common Questions on the Help tab, look in the forum, or use the Have A Question
form on the Help tab.
b At the top, click Content.
c On the Content tab, click Create.

d From the drop-down list, choose Feature Layer.
e In the Create A Feature Layer dialog box, click the From URL tab, and then copy and
paste the following text into the URL field:
https://services5.arcgis.com/oFt0RLBVxpTM7Dv0/ArcGIS/rest/services/Bike_Parking/FeatureServer
Note: When copying and pasting the service URL from the exercise PDF, a space is
sometimes introduced in the URL. If you receive a message that the URL is invalid, check to
ensure that there are no spaces in the URL.
f Click Next three times to accept the layer and map extent defaults.

g On the metadata page, type the following information to specify details for the feature
layer:
• For Title, type Bike Parking, and append your first and last names so the feature layer
has a unique name.
Note: Because there are many other students creating a similar feature layer, adding your first
and last name will ensure that yours is unique.
• For Tags, type bike parking and press Tab.

• For Summary, verify that it reads Bike parking app feature layer.
• For Save In Folder, accept the default setting.
The completed dialog box should look similar to the image below.
h Click Done.

Note: Another way you can create an empty hosted feature layer for your app is to build one.
From your Content page, you can create items, including feature layers. See this link (https://
bit.ly/2L1vn8U) for more information. For this exercise, you are copying an existing feature
layer, which already has all of the attribute fields created.
After the hosted feature layer is created, the item page displays.
In the Layers section, there is a function called Disable Attachments. You can allow users to
attach images and other files to individual features in a hosted feature layer. This is useful, as
it allows users of your app to associate photos to specific features. The attachments option is
a toggle link. When attachments are enabled, the link reads Disable Attachments. When
attachments are not enabled, the link reads Enable Attachments.
i In the Layers section, confirm that the link reads Disable Attachments, as shown below.
Users can capture and add attachments of their field observations (such as photos) with this
setting.
j On the right, click Share.
k In the Share dialog box, check the Everyone (Public) box, and then click OK.
In AppStudio Basic, only public feature services can be used to create native apps, so you
must share the service with everyone.
l On the top left, click Edit Thumbnail.

m In the Upload Thumbnail window, click Choose File.
n Browse to the Exercise5_BikeParking folder, and select the bike_thumbnail.png file.
o Click OK to upload the thumbnail.

Providing a nice thumbnail for your ArcGIS Online item is always a good idea because it helps
you and others sort through content quickly. Next, you will verify that all of the editing
settings are ready so that users can edit the feature when they use the app.
p On the item page, click the Settings tab.
q Scroll down and verify that the editing settings are configured as follows:
• For Editing, verify that Enable Editing is checked.

• For What Kind Of Editing Is Allowed, verify that Add, Update, And Delete Features is
selected.
• For What Features Can Editors See, verify that Editors Can See All Features is
selected.
• For What Features Can Editors Edit, verify that Editors Can Edit All Features is
selected.
• For What Access Do Anonymous Editors (Not Signed In) Have, verify that The Same As
Signed In Editors is selected.

r If you made any changes, click Save; otherwise, continue to the next step.
Step 4: Incorporate a feature service into an app

Your service is now ready to be incorporated into a native bike parking app. You will use the
AppStudio site and create the app directly from there, without the usual step of adding the
feature layer to a map first.
a In the web browser, browse to https://appstudio.arcgis.com/.
b Scroll down until you find the Create Your App button.

c Click Create Your App.
d At the top of the page, click Quick Report, or scroll down to the section for the Quick
Report app template.
e Click Start With This Template.

Note: You may need to enable pop-ups in your web browser if you do not see the app
configuration page appear.
The Quick Report template allows users to capture an observation and submit it to an online
service. In this case, the service is your bike parking feature layer.
f If necessary, sign in to ArcGIS Online using your course credentials.

This app configuration page has settings on the left side and a preview of how the app will
appear on the right side.
g On the left, in the App Info section, type the following information in the appropriate
fields:
• Title: Bike Parking Mapper [your name]

• Summary: Collect information about bike parking in your community.
h Click the Thumbnail icon, and from the Exercise5_Bike Parking folder, add the
bike_thumbnail.png file.
The thumbnail icon will now display in ArcGIS Online and on your mobile device in AppStudio
Player for ArcGIS.
i Click the Launch Image icon, and from the same folder, add the bike_background.jpg file.
The launch image is the image that displays when your app is loading on a device.
j Click the App Icon icon, and add the bike_icon.png file.
The app icon is what would display on your mobile device if you were to publish your app to
the Apple or Google app store.

k At the bottom of the pane, click Save.
l At the top, click Quick Report Settings.
m In the Start Screen section, click the Start Background Image icon, and add the
bike_background.jpg file.
The Start Background image displays when your app has loaded. The user initializes the app
by clicking the New Report button, and the background image displays throughout the app.

n Next, click Choose Feature Service.

This is where you add the feature service you created earlier so that users can capture and
submit observations about bike parking facilities in their communities.
o In the Choose Feature Service window, select the Bike_Parking feature service.
p Click Next.
q Click to the left of the Bike_Parking_[your name] feature layer item to expand it.
r Select the Bike_Parking feature layer, and then click OK.
s On the app configuration page, click Save And Finish.

Note: Do not share this app with any groups, the Do-It-Yourself Geo Apps organization, or
Everyone (public).

Step 5: Explore options for creating installation files

Now that your app is saved, you have the option to create installation files for different
platforms. Remember, for this course, you will not sign or build your app. It is useful, though,
to explore the available options, which you would need if you were going to sign and publish
your app to an app store.
a Click Build App to explore the installation-file options.
As indicated by the warning icon, the only way to build your app for iOS is to sign it. You can
build your app for Android and load it onto your device without signing it, but you cannot
publish it to the Google Play store. Similarly, you can build your app for Mac OS X, but
without signing it, users with newer operating systems that include Gatekeeper will not be
able to open it on their devices.

You will not sign or build your app, but you can view the app on your iOS or Android device
using the AppStudio Player.
Step 6: View the app using the AppStudio Player

Previously, you downloaded AppStudio Player onto your phone or mobile device. Now, you
will use it to view the app you just created.
Note: The graphics illustrate these steps for iOS devices. The workflow is the same for
Android devices, but the screenshots may differ slightly.
a On your device, open AppStudio Player.
b Sign in using your ArcGIS Online account credentials.
c If necessary, use the options icon at the top right to refresh the contents and find your
bike parking app.
d Select the Bike Parking Mapper app.

e Tap Download Now.
f After the app has downloaded, tap OK.
g Select the app in the gallery again, and then tap Open App.
Note: You may need to swipe down first to refresh the apps list.

First, you will test your app by recording an observation. If you are not near any bike parking
facilities, it's fine to record an imaginary feature.
h Tap New to create a new report.
i Tap the type of report you are adding, and then tap Next.
j Move the map to set the location of the bike parking you are adding, and then tap Next.
Optionally, you can add a photo to show the bike parking feature associated with your
observation.
k To add an image, tap Camera or Album to take a new photo or use an existing one,
respectively.
l After you have decided on the photo that you would like to use, tap Next.
If you prefer not to add a photo, you can tap Next.
m Tap Next and complete the details form, and then tap Submit.
If your feature was added successfully, you will see a confirmation.
n Tap Done.

o If you want, create more features using the app, which will let you see more results when
you add them to a web map.
Congratulations! You just created and used an app to collect an observation of bike parking
facilities in your community. This is similar to the crowdsourcing app that you create in the
Section 3 exercise, but it is a native app, not a web app.
Step 7: View the results in a web map

Recall the workflow graphic describing the process of using a web layer to make a web map
and then using a web map to make a web app.
For this exercise, you have created a collection app to gather data. The web layer was created
first, and that is what is populated by the app. You will return to ArcGIS Online, find the
populated layer, and use it to create a web map.
a In the web browser, close the tab containing AppStudio for ArcGIS.
b In the browser tab, in ArcGIS Online, click Content.

Note: If you do not have an ArcGIS Online tab open, browse to www.arcgis.com and sign in
using your course credentials.
c In your content, click the Bike Parking_[your name] feature layer.

Feature layers have this icon to differentiate them from web maps, apps, and other items.
d On the item page, at the top right, click Open In Map Viewer.
You can see the default topographical basemap and your operational Bike Parking layer.

If you completed the preceding steps and added at least one bike parking feature using the
mobile app, you will see the feature on the map. You can return to the app and add more
features any time, and the map will reflect the changes.
e In the Contents pane, pause your pointer over the web layer, and click the Show Table
button.
In the attribute table, you can see the fields in the feature layer, which were in the existing
feature layer that you copied yours from.

Note: Your table will appear different from the graphic depending on the record or records
that you added using the mobile app.
f At the top, save your map by clicking the Save button, and then clicking Save As.
g Fill out the Save Map dialog box as follows:
• Title: Bike Parking Mapper Map_[your name]

• Tags: bike parking
• Summary: Map showing collected information about bike parking
h Leave the default folder to save the map in, and click Save Map.
Now the map is ready to be shared. You can share web maps, but a better practice (especially
for sharing outside your organization) is to create and share a web app instead.
This exercise focused on native apps, so you will not create a second web app to share your
results. For great geo apps for sharing, you can learn about these apps in other sections:
• Configurable/templated apps, Sections 1 and 2

• Web AppBuilder apps, Section 4
• Survey123 and Operations Dashboard apps, Section 3
• Configurable native apps, Section 5
This concludes the Guided part of the exercise. In the next part, keep going, apply what you
have learned, and do it yourself!

Part II - Do It Yourself
The Do-It-Yourself part has another optional goal to apply what you've learned already but
with less guidance. Build your own geo apps and use your creativity! Resources and samples
to help you are listed in the Learning Resources section at the end.
We do ask you that you read through this section even if you choose not to complete a DIY
project so that you will find and learn from your fellow students' work.
Explore the templates further and create your own app

In this section's Guided part of the exercise, you used the Quick Reports template to create a
native app. In this part, you can create a new mobile or other native geo app.
1. Create a new native app
Go back to the AppStudio page, click Create Your App, and try something new.
The Map Viewer (https://bit.ly/2Mw96Fc) template is a great way to showcase a collection of

web maps through a native app. You can use the Map Tour, Map Viewer, or Quick Report
template and create an app on a topic that interests you.
Share your work with the class

After completing some do-it-yourself work in this part of the exercise, please share with the
class. If you created a cool app, the class can review your app and give feedback. If you
created a crowdsourcing app, we can install your app and give you some results to analyze!
After completing this DIY part, remember to do these things to share your geo app with the
class:
1. Share your app with Everyone (public).

2. Tell everyone about your work in a forum post.
3. Give the post a good descriptive title, and be sure to use the hashtag #DIYSection5. The
tag will help everyone find your work, and to add some results, if it's a crowdsourcing
app.
4. Add the link to your app in the body of the post. This can be a shortened link from the
Share dialog box or the full URL copied from the web browser when viewing the app.
Be sure to share your app or other work with us. For high-quality or especially unique or
creative work, or just something that shows you've learned a lot in this class, Esri instructors

are watching the forums and will award special recognition at the end of the course. Only
properly tagged posts will be eligible for recognition.
Remember, have fun, explore, and experiment, but don't share maps or apps from the
Guided parts; only share the Do-It-Yourself parts!
Finding the work of other students

Now that you have shared your work from this DIY part of the exercise in the forum, please go
find and review the work of others.
1. In the forums, search by the hashtag #DIYSection5.

2. Read other student posts and review their geo app, if there is one. If it is a crowdsourcing
app, complete it so that the student gets some results to display.
3. Give any helpful feedback or ask questions by replying to the forum post.
The recognition for the best student work by Esri staff at the end of the course will be based
on the quality of the app or other work, as well as the quality reflected in the comments in the
forum post.
Learning Resources
Good work! In this exercise, you built a cross-platform native app using an AppStudio for
ArcGIS configurable app template, without any coding. We look forward to seeing your work
from the DIY part of the exercise, where there are great options for creating mobile or other
native apps.
Here are some more resources to continue learning:
Who says building native apps has to be challenging? (https://bit.ly/2vYNGqP)
E360 video: Configuring a Map Viewer (https://bit.ly/2PjDeCf)
Webinar: Building Cross-Platform Native Apps with AppStudio for ArcGIS (https://bit.ly/
2OHvZCQ)

Section5Exercise1 BuildNativeAppsUsingAppStudioForArcGIS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Section5Exercise1 BuildNativeAppsUsingAppStudioForArcGIS

Uploaded by

Copyright:

Available Formats

Do-It-Yourself Geo Apps MOOC

Build Native Apps Using AppStudio for ArcGIS

Copyright © 2018 Esri. All rights reserved. 1

Copyright © 2018 Esri. All rights reserved. 2

Step 1: Download AppStudio Player

a On your device, open the app store.

b Search for AppStudio Player for ArcGIS.

c Download and install the app.

Step 2: Download assets for this exercise

Copyright © 2018 Esri. All rights reserved. 3

a Open a new private (or incognito) web browser tab or window.

b Go to this page containing the Exercise5BikeParking zip file (https://bit.ly/2BkXn7Z).

c At the top right of the page, click Download.

Step 3: Publish a feature layer from an existing feature service

Copyright © 2018 Esri. All rights reserved. 4

b At the top, click Content.

c On the Content tab, click Create.

Copyright © 2018 Esri. All rights reserved. 5

d From the drop-down list, choose Feature Layer.

Copyright © 2018 Esri. All rights reserved. 6

• For Tags, type bike parking and press Tab.

Copyright © 2018 Esri. All rights reserved. 7

j On the right, click Share.

l On the top left, click Edit Thumbnail.

Copyright © 2018 Esri. All rights reserved. 8

m In the Upload Thumbnail window, click Choose File.

n Browse to the Exercise5_BikeParking folder, and select the bike_thumbnail.png file.

o Click OK to upload the thumbnail.

p On the item page, click the Settings tab.

• For Editing, verify that Enable Editing is checked.

Copyright © 2018 Esri. All rights reserved. 9

Step 4: Incorporate a feature service into an app

a In the web browser, browse to https://appstudio.arcgis.com/.

Copyright © 2018 Esri. All rights reserved. 10

c Click Create Your App.

e Click Start With This Template.

f If necessary, sign in to ArcGIS Online using your course credentials.

• Title: Bike Parking Mapper [your name]

Copyright © 2018 Esri. All rights reserved. 11

k At the bottom of the pane, click Save.

l At the top, click Quick Report Settings.

Copyright © 2018 Esri. All rights reserved. 12

n Next, click Choose Feature Service.

r Select the Bike_Parking feature layer, and then click OK.

s On the app configuration page, click Save And Finish.

Copyright © 2018 Esri. All rights reserved. 13

Step 5: Explore options for creating installation files

a Click Build App to explore the installation-file options.

Copyright © 2018 Esri. All rights reserved. 14

Step 6: View the app using the AppStudio Player

a On your device, open AppStudio Player.

b Sign in using your ArcGIS Online account credentials.

d Select the Bike Parking Mapper app.

Copyright © 2018 Esri. All rights reserved. 15

e Tap Download Now.

f After the app has downloaded, tap OK.

Copyright © 2018 Esri. All rights reserved. 16

h Tap New to create a new report.

Copyright © 2018 Esri. All rights reserved. 17

Step 7: View the results in a web map

b In the browser tab, in ArcGIS Online, click Content.

c In your content, click the Bike Parking_[your name] feature layer.

Copyright © 2018 Esri. All rights reserved. 18