Getting Started: Week 0 Unit 1

WEEK 0 UNIT 1
GETTING STARTED
Please perform the following steps to be prepared for this course.
Table of Contents
1
2
3
4
Create an SAP HANA Cloud Platform (HCP) Developer Account...............................................2

Get Familiar with the Development Environment........................................................................4
Connect to the Demo System ES4............................................................................................. 7
(Optional) Create a New Destination to a Public OData Provider.............................................12
Preview
Figure 1 - The SAP Hana Cloud Platform start page
OpenSAP Developing Web Apps with SAPUI5
1 CREATE AN SAP HANA CLOUD PLATFORM (HCP) DEVELOPER

ACCOUNT
In this step, you will create your developer account that can be used for the exercises in this course.
Register a new account
Explanation
Screenshot
1. Open Google Chrome.

Navigate to the following URL:
https://account.hanatrial.ondem
and.com/
Note: Installing Google Chrome
We recommend you use Google
Chrome for this course. If you dont
have it installed yet, go to the
following URL and follow the steps
described there:
https://www.google.de/chrome/br
owser/desktop/
2. Click Register to create a free
SAP HANA developer account
3. Enter your name and e-mail

address and choose a
password.
4. Accept the terms & conditions
and click Register.
Note: Trial Account
A developer account on SAP HANA
Cloud Platform is provided to you
with a free and perpetual developer
license that you accept when you
create your account. You can use
such an account to test out the
platform or run demo scenarios.
Copyright/Trademark

Explanation
Screenshot
5. A confirmation e-mail has been

sent to your account. Open it
and choose Click here to
activate your account.
6. You should see a confirmation

dialog. Click Continue to go to
the SAP HANA Cloud Platform
Cockpit.
7. Close the News and

Announcements popup and
have a look at the SAP HANA
Cloud Platform Cockpit. This is
your entry point for managing
cloud apps and configurations.
Copyright/Trademark
2 GET FAMILIAR WITH THE DEVELOPMENT ENVIRONMENT

In this step, you will open SAP Web IDE and create a simple test page.
Open SAP Web IDE
Explanation
Screenshot
1. In HCP, you can consume tools

and applications as services.
Click Services to see a list of
applications that have been
added automatically to your
account.
2. You can now see all

applications that are connected
to your account. In the search
field, filter for web and click
the SAP Web IDE tile.
3. Click the link Open SAP Web

IDE to open an instance
connected to your account.
Copyright/Trademark

Explanation
Screenshot
4. Have a look at the start page of

SAP Web IDE. It contains
useful links and shortcuts to the
most important actions.
5. (Optional) Add a bookmark to

SAP Web IDE by pressing
CTRL+D in Google Chrome.
You will need this link to your
development environment
frequently throughout the
course.
webapp/index.html (NEW)
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>OpenSAP - Developing Web Apps with SAPUI5</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Go to the development perspective by clicking the </>icon in the left toolbar. On the left side you will
see a folder list with just one entry: Workspace. Add a new project folder MyApp by right-clicking it
and selecting New > Folder.
Inside the project folder, create a new folder webapp which will contain all sources of the app we will
create throughout the first weeks of this course. Now create a new root HTML file called index.html
in your app folder with the contents of the listing above.
Copyright/Trademark

Your workspace should now look like this:
Figure 2 - Workspace for the test page
Save your changes and click the

button in the header toolbar. A new tab will open with the
preview of your app. Your app (remember this is just a test) is now simulated in the cloud and you will
see the Hello World text on the screen:
Figure 3 - Preview of the test page
Thats it for todays coding. Feel free to play around a little bit with SAP Web IDE to get familiar with
the tool so you are ready for the course exercises that start next week.
Copyright/Trademark
3 CONNECT TO THE DEMO SYSTEM ES4

In this step, we configure the back-end system connection to access real service data in our projects.
Sign up and get started with the SAP Gateway Demo Consumption System
Explanation
Screenshot
1. Navigate to the following URL:

http://scn.sap.com/docs/DOC40986
2. Click Sign up here! to connect
your SAP HCP developer
account to the demo system.
3. Accept the disclaimer for using

the demo system by clicking
Accept.
4. Your user information should

automatically be connected to
your SAP HCP account that
you have created in the
previous step. Click Register
to continue.
Copyright/Trademark

Explanation
Screenshot
5. A confirmation e-mail has been

sent to your account again.
Open it and press the SAP
Gateway WebGUI link.
6. Log on to the gateway system

with the login data from the email.
Copyright/Trademark

Explanation
Screenshot
7. Change the initial password by

entering the old and a new
password.
8. Write down the new
password for the next
configuration step.
9. After changing the password

you will see the main screen of
the web logon. Close the
window and return to the SAP
HCP Cockpit
10. You can optionally have a look

at the service interface by
opening the following URL:
https://sapes4.sapdevcenter.co
m/sap/opu/odata/IWBEP/GWS
AMPLE_BASIC/?sap-dsdebug=true
Copyright/Trademark

Create a destination ES4 in the SAP HCP cockpit
Explanation
Screenshot
1. Go to the Destinations page of

the SAP HCP Cockpit by
opening the following URL and
pressing the menu item
Destinations:
and.com/cockpit
2. Choose New Destination to

open a configuration panel.
3. In the Destination
Configuration section below,
make the following entries.
Field
Entry
Name
ES4
Type
HTTP
Note:
Optionally, you can set your user
name and user password. If you
dont fill out User and Password
from the previous step, you will be
asked for your ES4 Gateway
system credentials every time you
start your app and request backend data.
Description
ES4 Demo Service
URL
https://sapes4.sapdevcenter.com
Proxy Type
Internet
Authentication
BasicAuthentication
User
<your user, e.g. p1234567890>
Password
<your password for the ES4 system>
4. The complete Destination

Configuration form should
look like this.
5. Choose Save.
Copyright/Trademark

Explanation
Screenshot
6. Click the check icon on the

right side of the newly created
destination and make sure that
the connection test is
successful.
Thats it, you are now ready to start with the course. Have fun!
Copyright/Trademark
4 (OPTIONAL) CREATE A NEW DESTINATION TO A PUBLIC ODATA

PROVIDER
The Northwind Traders sample database contains the sales data for a fictitious company called Northwind
Traders, which imports and exports specialty foods from around the world. It is available as a set of public
services at http://www.odata.org. The Northwind public OData service, like many other OData services, can be
used as the data source when creating SAPUI5 applications.
Note:
This service will not be used throughout the exercises in this course. Nevertheless, it might be an
interesting data source for your further app developments.
Explanation
Screenshot
1. Access the SAP HANA Cloud

Platform Cockpit via this link:
and.com/cockpit
2. On the left bar menu, click

Destination and then choose
New Destination.
3. In the Destination
Configuration section below,
make the following entries.
Field
Entry
Name
northwind
Type
HTTP
Description
Northwind OData Service
URL
http://services.odata.org/
Proxy Type
Internet
Authentication
NoAuthentication
Copyright/Trademark

Explanation
Screenshot
4. The complete Destination

Configuration form should
look like this.
5. Choose Save.
Coding Samples
Any software coding or code lines/strings (Code) provided in this documentation are only examples,
and are not intended for use in a productive system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the
correctness or completeness of the Code provided herein and SAP shall not be liable for errors or
damage cause by use of the Code, except where such damage was caused by SAP with intent or
through gross negligence.
Copyright/Trademark

Getting Started: Week 0 Unit 1

Uploaded by

Copyright:

Available Formats

Getting Started: Week 0 Unit 1

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

Getting Started: Week 0 Unit 1

Uploaded by

Copyright:

Available Formats

WEEK 0 UNIT 1

Create an SAP HANA Cloud Platform (HCP) Developer Account...............................................2

Figure 1 - The SAP Hana Cloud Platform start page

OpenSAP Developing Web Apps with SAPUI5

1 CREATE AN SAP HANA CLOUD PLATFORM (HCP) DEVELOPER

1. Open Google Chrome.

3. Enter your name and e-mail

OpenSAP Developing Web Apps with SAPUI5

5. A confirmation e-mail has been

6. You should see a confirmation

7. Close the News and

OpenSAP Developing Web Apps with SAPUI5

2 GET FAMILIAR WITH THE DEVELOPMENT ENVIRONMENT

1. In HCP, you can consume tools

2. You can now see all

3. Click the link Open SAP Web

OpenSAP Developing Web Apps with SAPUI5

4. Have a look at the start page of

5. (Optional) Add a bookmark to

OpenSAP Developing Web Apps with SAPUI5

Figure 2 - Workspace for the test page

Save your changes and click the

Figure 3 - Preview of the test page

OpenSAP Developing Web Apps with SAPUI5

3 CONNECT TO THE DEMO SYSTEM ES4

1. Navigate to the following URL:

3. Accept the disclaimer for using

4. Your user information should

OpenSAP Developing Web Apps with SAPUI5

5. A confirmation e-mail has been

6. Log on to the gateway system

OpenSAP Developing Web Apps with SAPUI5

7. Change the initial password by

9. After changing the password

10. You can optionally have a look

OpenSAP Developing Web Apps with SAPUI5

1. Go to the Destinations page of

2. Choose New Destination to

ES4 Demo Service

<your user, e.g. p1234567890>

<your password for the ES4 system>

4. The complete Destination

OpenSAP Developing Web Apps with SAPUI5

6. Click the check icon on the

OpenSAP Developing Web Apps with SAPUI5

4 (OPTIONAL) CREATE A NEW DESTINATION TO A PUBLIC ODATA

1. Access the SAP HANA Cloud

2. On the left bar menu, click

Northwind OData Service

OpenSAP Developing Web Apps with SAPUI5

4. The complete Destination

You might also like