Week 2 Unit 1 - WordPress.com › 2014 › 08 › hanacloud2_we… · Git Overview: Distributed Versioning There is no central authority. ... Use the SAP HANA Cloud Platform cockpit

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


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


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


Introduction to HTML5 Applications and Git Git Overview

Version control

Distributed versioning

Created 2005 for Linux kernel development

Enables collaborative workflows


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


Introduction to HTML5 Applications and Git What You’ve Learned in This Unit

HTML5 applications on SAP HANA

Cloud Platform

The development Infrastructure

Git

Thank you

Contact information:

[email protected]


© 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.

http://global12.sap.com/corporate-en/legal/copyright/index.epx



Week 2 Unit 2:

Creating a Hello World HTML5

Application


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


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.


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

Thank you


[email protected]

























Week 2 Unit 3:

Git Basics


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


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


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


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








HEAD is a special reference and points to

the currently checked-out branch.

HEAD branch 1 C

B

A








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


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


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


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


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


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?

Thank you


[email protected]

























Week 2 Unit 4:

Using SAPUI5 in Your HTML5

Application


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.



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


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


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.



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?

Thank you


[email protected]

























Week 2 Unit 5:

Using a REST Service in Your

HTML5 Application


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.



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


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>"

}

]


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.



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?

Thank you


[email protected]

























Week 2 Unit 1 - WordPress.com › 2014 › 08 › hanacloud2_we… · Git Overview: Distributed Versioning There is no central authority. ... Use the SAP HANA Cloud Platform cockpit

Documents