-
Notifications
You must be signed in to change notification settings - Fork 0
Quick Guides
이 문서에서는 Webida 시스템 앱들을 사용하여 HTML5 앱을 개발하는 과정을 간략히 살펴 보겠습니다. 다음과 같은 단계들을 거쳐 앱을 개발하게 됩니다.
- Webida에 로그인
- DevCenter에서 작업공간 만들기
- IDE로 앱 작성 및 테스트
- 작업공간 열기
- 프로젝트 만들기
- 파일 편집
- 테스트
- Deploy 앱으로 Webida에 배포
간단한 Hello World 앱을 작성하고 배포하는 예제를 통해 설명드리겠습니다.
Webida에 로그인할 때는 Webida 계정을 사용하거나 Webida 외 계정 중에 지원되는 것을 사용합니다. 현재 지원되는 Webida 외 계정에는 Google과 GitHub 계정이 있습니다. Webida 메인 페이지(https://webida.org)에서 Log-in 버튼을 클릭하면 로그인 창이 뜨게 되고, 이 창에서 두 가지 방법을 모두 사용할 수 있습니다.
login.png_1397810448990
그림 1 - 로그인 페이지
Webida 메인 페이지에서 New account 버튼을 클릭하면 많은 싸이트에서 채용하고 있는 이메일 인증 방식을 통해서 손쉽게 Webida 계정을 생성할 수 있습니다. Webida 계정을 만든 후에는 계정 생성 시 입력했던 이메일 주소와 암호를 입력하여 로그인 할 수 있습니다.
Webida 계정의 이메일 주소를 잊어버렸을 경우에는 계정을 찾을 수 있는 방법이 없으므로 주의하시기 바랍니다. 그러나, 암호를 잊어버렸을 때에는 로그인 창에서 "Forgot your password?" 링크를 클릭하여 암호를 재설정할 수 있습니다.
Google/GitHub 계정으로 Webida 시스템에 로그인하기 위해서는 Google/GitHub에 미리 계정이 생성되어 있어야 합니다.
Google/GitHub에 로그인 되어 있는 상태에서 로그인 창 아래쪽의 "Connect with Google/GitHub" 버튼을 클릭하면 Webida에 로그인 됩니다. Google/GitHub에 로그인 되어 있지 않은 상태라면 Google/GitHub의 로그인 창이 열리게 됩니다.
Webida에 로그인하면 메인 페이지의 Log-in 버튼이 Open Desktop 버튼으로 바뀌고, 이 버튼을 클릭하여 Desktop 앱을 열 수 있습니다. Desktop 앱의 위 쪽에는 사용자가 현재 갖고 있는 작업공간의 목록이 보이고, 그 아래에 각종 앱들을 시작할 수 있는 아이콘들이 위치합니다.
desktop.png_1397810799123
그림 2 - Desktop 앱
작업공간이란 서로 관련 있는 앱 작성 프로젝트들과 임시 파일들이 모여 있는 곳 입니다. 작업공간은 Webida IDE를 가지고 작업하는 단위이며 (IDE는 한번에 하나의 작업공간을 열어 작업하며) 하나의 작업공간에 속한 여러 프로젝트들은 하나의 IDE 설정을 공유합니다. 작업공간은 개인마다 주어지는 파일 시스템 안에서 하나의 디렉토리로서 존재합니다.
그림 2 - Desktop 앱의 아래쪽에 보이는 아이콘들 중 가장 왼쪽에 있는 'DevCenter'를 클릭하면 DevCenter 앱을 시작할 수 있습니다. DevCenter는 개발에 관련된 전반적인 내용을 보거나 설정할 수 있는 앱입니다. 특히, DevCenter에서 작업공간을 생성, 삭제할 수 있습니다.
DevCenter.png_1397977132798
그림 3 - DevCenter 앱
그림 3의 테이블 오른쪽 위에 있는 '+ Add new workspace' 영역을 클릭하면 작업공간의 이름과 설명을 입력할 수 있는 다음과 같은 창이 나타납니다. 입력을 마치고 Create 버튼을 클릭하면 새 작업공간이 만들어집니다.
createWS.png_1397978119206
그림 4 - 새 작업공간을 만들기 위한 대화창
Webida IDE를 사용해서 앱을 작성하고 테스트 합니다. 다음과 같은 몇 가지 단계로 나누어 볼 수 있습니다.
그림 2 - Desktop 앱의 위쪽에 나타나는 작업공간 목록 중 하나를 클릭하거나, 그림 3 - DevCenter 앱의 아래쪽에 나타나는 작업공간 목록의 Open 버튼들 중 하나를 클릭하여 해당 작업공간을 열 수 있습니다. 새로 생성한 test라는 이름의 빈 작업공간을 열었을 경우, 아래 그림과 같이 IDE 앱이 시작될 것 입니다.
ide-opened.png_1397980554445
그림 5 - IDE로 작업공간을 연 모습
앱 작성을 위한 프로젝트를 만듭니다. 프로젝트를 만들 때는
임의의 디렉토리를 프로젝트로 지정하거나, 프로젝트 위자드를 사용하여 템플릿으로부터 생성 할 수 있습니다.
첫번째 방법은 앱을 처음부터 완전히 새로 작성하는 경우나 앱의 소스코드를 외부로부터 가져오는 경우(예: 파일 업로드 또는 Git clone)를 위한 것입니다. 이 문서에서는 프로젝트 위자드를 사용하는 두번째 방법으로 설명드리겠습니다.
IDE 위쪽의 메뉴에서 "Project / Project Wizard"을 클릭하여 프로젝트 위자드를 시작합니다.
menu-project-wizard.png_1397982608317
그림 6 - Project Wizard 메뉴 아이템의 위치 프로젝트 위자드에는 다음 그림과 같이 템플릿 부류와 각 부류에 속한 템플릿들이 나타납니다. 이 중에서 'hello world' 템플릿을 선택하고 'Project name' 난을 임의의 이름으로 채운 후 Create 버튼을 클릭합니다. 이 예제에서는 myProject라는 프로젝트 이름을 사용하겠습니다.
project-template.png_1397982985735
그림 7 - Hello world 템플릿으로부터 myProject 생성하기 Create 버튼을 클릭하면 프로젝트 위자드가 닫히고, IDE 왼편의 작업공간 뷰에 myProject 디렉토리가 새로 생겨 있는 것을 확인할 수 있습니다. myProject 디렉토리를 더블클릭해서 펼쳐 보면 hello world 템플릿으로부터 복사된 css라는 서브디렉토리 하나와 두 개의 파일 README.md, index.html이 보입니다.
myProject.png_1397984532648
그림 8 - 새로 생성된 프로젝트
Markdown 파일이나 HTML 파일 같은 텍스트 파일들은 작업공간 뷰의 해당 아이템을 더블클릭해서 에디터로 열고 편집할 수 있습니다. 그리고, 변경한 내용은 메뉴의 "File / Save" 아이템을 클릭하거나 단축키 Ctrl+S를 눌러 저장할 수 있습니다. 사용자가 작업하고 있던 PC나 브라우저가 아니라 Webida 파일 시스템 서버에 저장되므로, 장소를 옮겨 Webida에 접속해도 마지막 저장 내용을 가지고 작업을 이어갈 수 있습니다.
Webida IDE는 HTML, CSS, Javascript 파일들을 편집할 때 도움을 주는 다양한 종류의 문법 검사 및 시각화, 단어 추천 기능들을 제공합니다. 이 기능들에 대해서는 IDE 앱 메뉴얼에서 자세히 설명하겠습니다 (TODO: link).
이 예제에서는 간단히 아래 그림에 보이는 index.html 원본 파일에서 h1 태그 안의 텍스트를 Hello에서 Hello Webida로 바꾸어 저장해 보겠습니다.
opened-in-editors.png_1397984654606
그림 9 - 텍스트 파일을 에디터로 열기
배포되기 전 개발 도중인 프로젝트에 대해서도 실행 결과가 어떻게 되는지 테스트해 볼 필요가 있습니다.
Webida IDE에서는 메뉴의 "Project / Run" 아이템을 클릭하여 현재 프로젝트를 테스트할 수 있습니다. 아래 그림은 예제 프로젝트를 테스트해본 결과 입니다. 단계 3-3에서의 변경(Hello --> Hello Webida)이 적용되어 있음을 확인할 수 있습니다.
test-run.png_1397988382927
그림 10 - 테스트 프로젝트 설정에서 live reload 기능을 활성화하면, IDE에서 변경 내용이 저장될 때마다 테스트 결과가 자동 갱신되도록 할 수 있습니다. Live reload 기능에 대해서는 IDE 앱 메뉴얼에서 자세히 설명하겠습니다 (TODO: link).
IDE 왼쪽의 작업공간 뷰에서 프로젝트 디렉토리를 선택한 후, 메뉴의 "Project / Deploy"를 클릭하여 Deploy 앱을 시작합니다.
deploy-menu-item.png_1398066951472
그림 11 - Deploy 메뉴 아이템의 위치 Deploy 앱이 시작되면 Create New Deploy 버튼을 눌러 배포를 위한 몇 가지 설정값을 입력하고 우측 하단의 저장 아이콘(플로피디스크 모양)을 클릭합니다.
Name: 해당 배포을 위한 식별자. 하나의 프로젝트는 여러 건의 배포를 가질 수 있고 이들을 구분할 수 있는 식별자가 필요합니다. Subdomain의 postfix: 시스템이 제공하는 'nnnnnn-' 뒤에 들어갈 문자열을 입력합니다. 이 문자열은 앱 URL의 subdomain을 이룹니다. 알파벳 소문자와 숫자를 사용할 수 있습니다. 첫글자를 제외하고는 '-' (dash)도 사용할 수 있습니다. Desc: 이 배포에 대한 설명. deploy-app.png_1398069224583
그림 12 - 배포를 위한 설정값 입력의 예 서버에서 수초간 배포를 수행한 후 성공 메시지가 나오면, 다음과 같이 Status는 running으로, URL은 배포된 앱의 URL로 변경되어 표시됩니다. 이 URL로 해당앱을 어디서든 실행할 수 있습니다.
deploy-done.png_1398069434753
그림 13 - 배포 성공 후 Deploy 앱 원본 프로젝트에 변경이 있을 경우 Deploy 앱을 다시 실행하고 원하는 배포를 선택하여 변경된 내용으로 재배포가 가능합니다. 그림 10에서 우측 하단의 왼쪽 아이콘(화살표 표시가 있는 지구본 모양)을 클릭하면 재배포할 수 있습니다. 그리고, 하나의 프로젝트에 대해 여러건의 배포를 만드는 것도 가능합니다.
지금까지 간단한 예제를 통해 하나의 앱을 개발하고 배포하는 과정을 살펴보았습니다. 이 과정에서 네 개의 Webida 시스템 앱들 - Desktop, DevCenter, IDE, Deploy - 이 어떤 역할을 하는지에 대해 최대한 간략하게 설명드렸습니다. 각 시스템 앱들의 세부 기능들에 대해서는 System Apps Manuals를 참고하시기 바랍니다.
본 문서 상의 오류나 각종 질문은 help@webida.org로 메일 주시기 바랍니다.