【SAPUI5】Hello World
소개
SAPUI5는 SAP 웹 화면 개발을 위한 도구로 HTML5, Javascript, CSS를 기반으로 합니다.
이 기사에서는 SAPUI5에 대한 입문으로서 개발자 계정 취득부터 "Hello world"의 실행 방법까지를 설명합니다.
덧붙여 이 기사는 openSAP의 아래 코스의 내용을 참고로 하고 있습니다.
Developing Web Apps with SAPUI5
<스텝>
1. SAP Cloud Platform Cockpit 개발자 계정 얻기
2. Web IDE에 로그인
3. "Hello World"라고 표시하는 앱 만들기
4. 앱 실행
단계
1. SAP Cloud Platform Cockpit 개발자 계정 얻기
다음 자습서의 5단계까지 수행합니다.
htps : //에서 ゔぇぺぺrs. 음 p. 코 m / 쓰리 아 ls / hcp-c 어서 - t 리 l - 아코 응 t. HTML # df07-fc9-d1 3-472f-1 1-9 960943
2. Web IDE에 로그인
개발은 Web IDE에서 수행됩니다. 이 단계에서는 Web IDE에 로그인하는 절차를 설명합니다.
SAP Cloud Platform Cockpit의 환영 화면에서 아래쪽으로 스크롤하면 Environments라는 섹션이 있습니다. 여기에서 "Access Neo Trial"을 클릭하십시오.
![](https://s1.md5.ltd/image/7253c80d38885d61da50031beacbc321.png)
"서비스"메뉴를 클릭합니다.
![](https://s1.md5.ltd/image/9fc0de31e11520ec54b6ee3d5ac218f1.png)
검색창에서 "web ide"를 검색하고 "SAP Web IDE Full-Stack"을 클릭합니다.
![](https://s1.md5.ltd/image/35858fd8110fb05c667bea53bd81093e.png)
하단으로 스크롤하여 "Go to Service"링크를 클릭하십시오.
![](https://s1.md5.ltd/image/d9e03e43d529eb5889d99e0fe8eb2990.png)
다음 번부터 직접 액세스할 수 있도록 이 페이지를 즐겨찾기에 등록해 둡시다.
![](https://s1.md5.ltd/image/b081516624372cbacabb6ceaf9915142.png)
3. "Hello World"라고 표시하는 앱 만들기
왼쪽 툴바에서 ""버튼을 눌러 작업 공간을 엽니다.
![](https://s1.md5.ltd/image/9c49aa586a7cec1cdb1040bde8ece98e.png)
WorkSpace 폴더를 마우스 오른쪽 단추로 클릭하고 New > Folder를 선택합니다.
새 프로젝트 폴더의 이름 (여기서 HelloWorld)을 입력하고 "확인"을 클릭하십시오.
![](https://s1.md5.ltd/image/e013e7c34b69a28207f89a4cd9d2154a.png)
또한 HelloWorld 폴더를 마우스 오른쪽 버튼으로 클릭하고 New>File을 선택하여 "index.html"파일을 만듭니다.
![](https://s1.md5.ltd/image/8e6b7124650d3779c348ff94a5bac075.png)
index.html 파일에 다음 코드를 입력합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Hello World App</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
저장 버튼 또는 Ctrl+S를 눌러 저장합니다.
※파일이 보존되어 있지 않을 때는 파일명의 왼쪽에 "*"가 붙습니다.
![](https://s1.md5.ltd/image/0cabbad9ab3f83d2573f283338d9fef8.png)
4. 앱 실행
툴바에서 "Run"버튼을 클릭하십시오.
※팝업 블록이 나왔을 경우, 팝업을 허가하고 나서 다시 실행해 주세요.
![](https://s1.md5.ltd/image/69b6de75277b43d3946d49ba9ce6baa1.png)
아래와 같이 "Hello World"라고 표시되면 성공입니다.
![](https://s1.md5.ltd/image/0cad238d4f0bab3f2b2d67c0361adad3.png)
끝에
SAP의 개발이라고 하면 종래는 ABAP가 주류였지만, 향후 프런트 엔드의 개발은 SAPUI5가 주류가 될 것으로 생각됩니다.
필자는 업무에서는 ABAP 밖에 사용한 적이 없고, SAPUI5를 만져 보아 이하와 같은 점이 어렵다고 느꼈습니다.
후자는 웹 기술자 쪽이라면 철저히 이해할 수 있을지도 모릅니다.
따라서 앞으로는 프런트엔드, 백엔드에서 다른 스킬셋을 가진 기술자가 분담해 개발하게 될지도 모릅니다.
앞으로 openSAP나 튜토리얼에서 배운 것을 Qiita에서 공유해 나가면 좋겠습니다.
Reference
이 문제에 관하여(【SAPUI5】Hello World), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tami/items/05014dd40577cc92ccca텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)