Week 2 Unit 1 - WordPress.com › 2014 › 08 › hanacloud2_we… · Git Overview: Distributed...
Transcript of Week 2 Unit 1 - WordPress.com › 2014 › 08 › hanacloud2_we… · Git Overview: Distributed...
Week 2 Unit 1:
Introduction to HTML5
Applications and Git
© 2014 SAP AG or an SAP affiliate company. All rights reserved 2 Public
Introduction to HTML5 Applications and Git HTML5 Applications on SAP HANA Cloud Platform
Consist of static resources
Connect to an existing back end using REST services
(on premise or on demand)
Example:
SAPUI5 application connection
to a Yahoo REST service
© 2014 SAP AG or an SAP affiliate company. All rights reserved 3 Public
Introduction to HTML5 Applications and Git HTML5 Applications Overview
Application served by shared service
(dispatcher), no VM required
Integrated version management
Resources stored in cloud Git repository
No build and easy deployment
© 2014 SAP AG or an SAP affiliate company. All rights reserved 4 Public
Introduction to HTML5 Applications and Git HTML5 Applications Overview
Dispatcher
Git
REST Service
Developer
End User
SAP HANA Cloud
Platform Account
HTML5
Apps
Lifecycle management
© 2014 SAP AG or an SAP affiliate company. All rights reserved 5 Public
Introduction to HTML5 Applications and Git Git Overview
Version control
Distributed versioning
Created 2005 for Linux kernel development
Enables collaborative workflows
© 2014 SAP AG or an SAP affiliate company. All rights reserved 6 Public
Introduction to HTML5 Applications and Git Git Overview: Distributed Versioning
There is no central authority.
The developer has the complete
history.
Versions are created locally.
Branches are created locally.
Central Server
Versions
V1
V2
Developer
files
Central Server
Versions
V1
V2
Developer
Versions
V1
V2
files Developer
Versions
V1
V2
files
Central Versioning
Distributed Versioning
© 2014 SAP AG or an SAP affiliate company. All rights reserved 7 Public
Introduction to HTML5 Applications and Git What You’ve Learned in This Unit
HTML5 applications on SAP HANA
Cloud Platform
The development Infrastructure
Git
© 2014 SAP AG or an SAP affiliate company. All rights reserved 9 Public
© 2014 SAP AG or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP AG or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
Week 2 Unit 2:
Creating a Hello World HTML5
Application
© 2014 SAP AG or an SAP affiliate company. All rights reserved 2 Public
Creating a Hello World HTML5 Application How to Create a Hello World HTML5 Application
Scenario:
Develop a simple “Hello World” HTML5 application
How to do it:
Develop the “Hello World” application
Test the application
© 2014 SAP AG or an SAP affiliate company. All rights reserved 3 Public
Creating a Hello World Application The Hello World Application
Use the SAP HANA Cloud Platform cockpit
to create a new HTML5 application.
Clone the Git repository to copy the remote
repository to a local one.
Create a project of type “general project” in
the local repository.
Create an index.html file for the HTML5
application.
Commit and push.
Test the application.
© 2014 SAP AG or an SAP affiliate company. All rights reserved 4 Public
Creating a Hello World Application What You’ve Learned in This Unit
How to create a simple HTML5
application
How to clone a repository
How to commit and push
How to test an HTML5 application
© 2014 SAP AG or an SAP affiliate company. All rights reserved 6 Public
© 2014 SAP AG or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP AG or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
Week 2 Unit 3:
Git Basics
© 2014 SAP AG or an SAP affiliate company. All rights reserved 2 Public
Git Basics Git Storage: History and Current Files in the File System
The local git repository contains the
whole history.
The .git folder contains the versions and
metadata.
The files and folders next to the .git
folder are the working directory.
The working directory contains all
current files in the file system.
There is one working directory
per repository.
Git repository
Working directory
© 2014 SAP AG or an SAP affiliate company. All rights reserved 3 Public
Git Basics Creating a New Version with Git
Check out any version to the working
directory.
Modify the file(s).
Add the changes to the staging area.
Create a new version with “commit”.
Git creates a version of the whole
repository (not for single files or
folders).
Git repository
Working directory
1. checkout
3. add
staging
area
4. commit
2. modify
© 2014 SAP AG or an SAP affiliate company. All rights reserved 4 Public
Git Basics Git Commit: An Object Containing a Version of the Repository
A version of the repository is called
“commit”.
A commit contains metadata and
pointers to complete content of all
files and to parent commits.
From all this, an SHA1 hash value is
created.
The hash value is a unique pointer
to the commit.
The hash value is displayed as a
40-character hexadecimal string.
Parent
Commit
Complete
Content
2dd316…
SHA1 Calculated from all data
Commit
Author
Committer
Message
© 2014 SAP AG or an SAP affiliate company. All rights reserved 5 Public
Git Basics Git Branches: A Lightweight Branching Concept
A branch is just a pointer to a commit.
No content is copied on branch creation.
A branch is local only.
Branches are located in the repository
namespace “refs/heads”.
branch 1
A
B
C
© 2014 SAP AG or an SAP affiliate company. All rights reserved 6 Public
Git Basics Git Branches: A Lightweight Branching Concept
A branch is just a pointer to a commit.
No content is copied on branch creation.
A branch is local only.
Branches are located in the repository
namespace “refs/heads”.
HEAD is a special reference and points to
the currently checked-out branch.
HEAD branch 1 C
B
A
© 2014 SAP AG or an SAP affiliate company. All rights reserved 7 Public
Git Basics Git Branches: A Lightweight Branching Concept
A branch is just a pointer to a commit.
No content is copied on branch creation.
A branch is local only.
Branches are located in the repository
namespace “refs/heads”.
HEAD is a special reference and points to
the currently checked-out branch.
Commit moves the currently checked-out
branch.
branch 1 HEAD
A
B
C
D
© 2014 SAP AG or an SAP affiliate company. All rights reserved 8 Public
Git Basics Git Clone: Getting the Repository from Another Server
Cloning creates a copy of the remote
repository.
Cloning creates a shortcut “origin”
referring to the remote repository.
Remote branches “origin/branchname”
track branches on the remote repository.
master
A
B
C master
A
B
C
clone
HEAD HEAD
origin/master
local remote
© 2014 SAP AG or an SAP affiliate company. All rights reserved 9 Public
Git Basics Git Push: Transporting Changes to a Remote Repository
master
A
B
C
master
HEAD
HEAD
origin/master
You can transfer local commits to a
remote repository with a “push”.
You can specify the source commit and
target branch with a “refspec”.
A “refspec” is a string containing a
reference to the source commit and the
target branch, separated with “:”
The default behavior of “push” is to push
the current branch to a branch with the
same name.
A
B
C
D
local remote
© 2014 SAP AG or an SAP affiliate company. All rights reserved 10 Public
Git Basics Git Push: Transporting Changes to a Remote Repository
You can transfer local commits to a
remote repository with a “push”.
You can specify the source commit and
target branch with a “refspec”.
A “refspec” is a string containing a
reference to the source commit and the
target branch, separated with “:”
The default behavior of “push” is to push
the current branch to a branch with the
same name.
To push from any local branch to the
master branch, you provide the refspec
parameter
“HEAD:refs/heads/master”.
master
push
HEAD
D
local remote
master
HEAD
origin/master
A
B
C
D
A
B
C
© 2014 SAP AG or an SAP affiliate company. All rights reserved 11 Public
Git Basics Configuring Git
3 levels of configuration files
Most important user setting:
user.name = Joe Developer
user.email = [email protected]
Repository-specific settings are used to
store
– branch configurations
– refspecs for pushing commits
– URLs of remote repositories like “origin”
– etc.
System
<gitinst>/etc/gitconfig
User Global
$HOME/.gitconfig
Repository Specific
.git/config
© 2014 SAP AG or an SAP affiliate company. All rights reserved 12 Public
Git Basics What You’ve Learned in This Unit
Where does Git store versions?
What is a working directory?
What is a commit and how can you
create one?
What is a branch?
How to get a copy of a repository
with clone?
How to transfer back your changes
with push?
Where does Git store the
configuration settings?
© 2014 SAP AG or an SAP affiliate company. All rights reserved 14 Public
© 2014 SAP AG or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP AG or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
Week 2 Unit 4:
Using SAPUI5 in Your HTML5
Application
© 2014 SAP AG or an SAP affiliate company. All rights reserved 2 Public
Using SAPUI5 in Your HTML5 Application How to Use SAPUI5 in Your HTML5 Application
Scenario:
Extend the “Hello World” application with an
SAPUI5 shell and table.
How to do it:
Download the source code.
Commit and push your changes to the
repository.
Test the application.
© 2014 SAP AG or an SAP affiliate company. All rights reserved 3 Public
Using SAPUI5 in Your HTML5 Application Introduction to SAPUI5
Client-side HTML5 rendering library
Based on open standards like OpenAjax,
CSS, and HTML5
Lets you build enterprise-ready Web
applications easily
Theming support based on CSS
© 2014 SAP AG or an SAP affiliate company. All rights reserved 4 Public
Using SAPUI5 in Your HTML5 Application Model – View – Controller (MVC)
The view is responsible for defining and
rendering the UI.
The model manages the application
data.
The controller reacts to view events
and user interaction by modifying the
view and model.
View Model
Controller
update update
user action notify
data binding
© 2014 SAP AG or an SAP affiliate company. All rights reserved 5 Public
Using SAPUI5 in Your HTML5 Application Extend Your Application with SAPUI5
Get the source code from the training
materials of this course week
Replace index.html.
Add view and controller.
Commit and push.
Test the application.
© 2014 SAP AG or an SAP affiliate company. All rights reserved 6 Public
Using SAPUI5 in Your HTML5 Application What You’ve Learned in This Unit
How to use SAPUI5?
What is an SAPUI5 model?
What is an SAPUI5 view?
What is an SAPUI5 controller?
© 2014 SAP AG or an SAP affiliate company. All rights reserved 8 Public
© 2014 SAP AG or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP AG or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
Week 2 Unit 5:
Using a REST Service in Your
HTML5 Application
© 2014 SAP AG or an SAP affiliate company. All rights reserved 2 Public
Using a REST Service in Your HTML5 Application How to Extend the HTML5 Application with a REST Service
Scenario:
Extend your application using the Yahoo
stock service.
How to do it:
Use a REST service in your HTML5
application.
Create a destination.
Test the application.
© 2014 SAP AG or an SAP affiliate company. All rights reserved 3 Public
Using a REST Service in Your HTML5 Application Same-Origin Policy for Browsers
Two pages have the same origin if
the protocol, domain, and port are
the same for both pages.
The policy prevents scripts to
access objects loaded from another
origin.
To circumvent the same-origin
policy: Access both pages via a
central dispatcher.
HTML5 App
REST Service
HTML5 App
REST Service Dis
pa
tch
er
© 2014 SAP AG or an SAP affiliate company. All rights reserved 4 Public
Using a REST Service in Your HTML5 Application Back-End Routing
HTML5 applications can connect to
one or multiple REST services.
The URL to the REST service is
configured in a destination.
The mapping between an application
URL and a destination is defined in
the application descriptor called neo-
app.json.
The application descriptor must be
located in the root folder of the
repository.
Destinations are configured using the
Cockpit.
"routes": [
{
"path": "<application path to be mapped>",
"target": {
"type": "destination",
"name": "<name of the destination>”
},
"description": "<description>"
}
]
© 2014 SAP AG or an SAP affiliate company. All rights reserved 5 Public
Using a REST Service in Your HTML5 Application Extending the Application Using a REST Service
Implement the controller.
Add an application descriptor.
Commit and push the changes.
Create a destination.
Test the application.
© 2014 SAP AG or an SAP affiliate company. All rights reserved 6 Public
Using a REST Service in Your HTML5 Application What You’ve Learned in This Unit
How to use a REST Service in an
HTML5 application?
What is the application descriptor?
How to configure back-end routing?
How to create a destination?
© 2014 SAP AG or an SAP affiliate company. All rights reserved 8 Public
© 2014 SAP AG or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP AG or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.