원본 비디오 시청 (영문):

https://www.youtube.com/watch?v=fN4m-a-C64o&fbclid=IwAR3F4R8SqNF_82LcKyV5d4GodmxaI8lrFrNSkYjZpmxGi50eS7Opi17bnGc

 

델파이는 윈도우 등 네이티브 앱 개발 시 가장 강력한 개발 환경입니다. 하지만 웹 서버와 웹 UI 클라이언트 개발로도 확장할 수 있는 습니다. 이 세션에서는 델파이를 웹 세상으로 확장하는 여러 기술 중 하나인 uniGUI를 설명합니다. uniGUI는 웹 서버와 웹 클라이언트 한번에 구축할 수 있는 풀 스택 개발 능력이 특징입니다.

 

- uniGUI와  Sencha Ext JS 개요

- (데모) http://unigui.com 홈페이지에서 제공되는 라이브 데모 살펴보기 (01분 44초 부터)

- (데모) https://sencha.com 홈페이지에서 제공되는 라이브 데모 살펴보기 (04분 20초 부터)

- uniGUI의 주요 특징

- (데모) 5분내에 웹 개발하기 (07분 52초 부터)

- (데모) 모바일웹 화면 개발하기 (12분 52초 부터)

- (데모) 접속한 장비에 맞게 데스크톱웹과 모바일웹 화면을 제공 (16분 16초 부터)

- uniGUI 하이퍼서버 (HyperServer)

- (데모) uniGUI 하이퍼서버 (HyperServer)에서 작동시키기 (19분 49초 부터)

- (데모) uniGUI 하이퍼서버 (HyperServer) 관리 화면 (21분 45초 부터)

- (데모) 하이퍼서버 (HyperServer)로 웹애플리케이션 원격 배포 (23분 55초 부터)

- (데모) 하이퍼서버 (HyperServer)에서 노드 관리하기 (26분 22초 부터)

- 리눅스 서버 지원

- (데모) 리눅스에 uniGUI 웹애플리케이션 배포하기 (30분 25초 부터)

- uniGUI 로드맵

 

uniGUI와  Sencha Ext JS 개요

  • uniGUI
    • (델파이용) 풀스택 웹 애플리케이션 프레임워크
    • 델파이 안에서 델파이와 같은 방식으로 웹 애플리케이션 개발
    • uniGUI는 Ext JS Classic Toolkit와 Ext JS Modern Toolkit을 사용
  • Sencha Ext JS
    • Sencha Ext JS는 자바스크립트 프레임워크 중 가장 종합적이다. 
    • 큰 데이터를 빠르게 표현하는 면에서 탁월하고, 웹과 모바일 플랫폼을 가리지 않는다.
    • Ext JS에는 고성능이 검증된 140여개의 클라이언트 UI 컴포넌트가 들어있다.

(데모) http://unigui.com 홈페이지에서 제공되는 라이브 데모 살펴보기 (01분 44초 부터)

Delphi-uniGUI1LiveDemo.png

그림1. http://unigui.com 의 라이브 데모에서 uniGUI로 구현된 실제 웹 페이지를 직접 작동시켜볼 수 있다.

 

Delphi-uniGUI2LiveDemoCode.png

그림2. http://unigui.com 의 라이브 데모에서 uniGUI로 구현된 실제 웹 페이지의 해당 소스 코드를 볼 수 있다. (델파이 코드임을 알 수 있다)

 

(데모) https://sencha.com 홈페이지에서 제공되는 라이브 데모 살펴보기 (04분 20초 부터)

Delphi-uniGUI3SenchaLiveDemo.png

그림3.  https://sencha.com 홈페이지의 라이브 데모에서 실제 구현된 웹 페이지와 해당 자바스크립트 소스 코드를 볼 수 있다.

 

uniGUI의 주요 특징

  • 150여개의 UI 콘트롤
    • 데이터 표현 성능과 능력이 특히  뛰어나다.
  •  풀 스택 (Full-Stack) 웹 개발 능력
    • 프론트 엔드 클라이언트와 백 엔드 서버를 모두 개발할 수 있다.
    • 클라이언트와 백엔드 서버를 한번에 자동으로 생성한다. (클라이언트 UI와 백엔드 서버 각각 별도의 도구가 사용되는 일반적인 풀 스택 웹 개발보다 쉽고 빠르르다)
    • 델파이의 (애플리케이션 개발을 빠르게하는) RAD 방식을 그대로 적용한다.
    • 세션 관리를 프레임워크 수준에서 자동으로 관리한다.
  •  uniGUI 배포 옵션
    • 독립 실행 파일 (윈도우, 리눅스)
    • 윈도우 서비스
    • ISAPI 모듈 DLL (윈도우 용)
    • 네이티브 아파치 모듈 (윈도우, 리눅스)
    • 리눅스 서비스로도 가능 (독립 실행 파일의 구성 파일 수정 필요)

Delphi-uniGUI4UIControlList.png

그림4. uniGUI에서 제공하는 150여개의 UI 콘트롤들

 

(데모) 5분내에 웹 개발하기 (07분 52초 부터)

File > New > Other > Delphi > uniGUI for Delphi > Application Wizard 를 사용하여 demodb라는 프로젝트를 만든다.

그 결과, 메인폼, 메인모듈, 서버모듈이 생성된다.

 

메인모듈에서는 

FireDAC의 FDMemTable을 추가하고, 로컬 데이터를 담는다.

TDataSource를 추가하고 DataSet 속성에 FDMemTable을 연결한다.

 

메인폼에서는

 TUniDBGrid를 추가하고, DataSource 속성에 메인모듈에서 추가한 DataSource를 연결한다.

 TUniDBImage를 추가하고, DataSource 속성과 DataField 속성을 연결한다. Proportional과 Stretch 속성은 True로 설정한다. 

 TUniDBEdit를 추가하고 DataSource 속성과 DataField 속성을 연결한다. 

 TUniDBNavigator를 추가하고 DataSource 속성을 연결한다. 

 

컴파일을 하고 실행을 하면, uniGUI 웹애플리케이션 서버가 작동한다.

웹브라우저에서 localhost:8077 주소로 접근하면, 델파이에서 만든 메인폼이 웹브라우저에 표시된다.

 

네비게이터를 이용하여 데이터세트 사이를 이동할 수 있다. 하고, 데이터 변경을 할 수 있다.

그리드 안의 셀 또는 에디트박스에서 데이터를 변경하고 네비케이터의 체크 표시를 클릭하면 서버의 데이터가 변경된다.

Delphi-uniGUI5CreateSampleIn5min.png

그림5. uniGUI로 만든 웹화면, 데이터 조회 수정이 모두 가능하다.

 

(데모) 모바일웹 화면 개발하기 (12분 52초 부터)

File > New > Other > Delphi > uniGUI for Delphi > Mobile Form 를 사용하여 모바일폼을 추가한다. (메인화면으로 사용하려면 Mobile Application Main Form을 선택한다)

 

모바일폼에서 uniGUI 모바일 UI 컴포넌트를 추가한다: TUnimDBEdit, TUnimDBimage, TUnimDBNavigator

각 DB인식 UI 컴포넌트에 웹메인폼에서 한 것 처럼 메인모듈에 있는 데이터소스를 연결한다.

 

컴파일을 하고 실행을 하면, uniGUI 웹애플리케이션 서버가 작동한다. 이제 데스크톱의 웹브라우저용 뿐만아니라 모바일 웹브라우저용 메인화면도 제공된다.

모바일용 메인화면은 주소가 달라야한다. 모바일 장비에서 접속하면 이곳으로 전환된다. (데모에서는 /m을 추가한다: localhost:8077/m)

 

Delphi-uniGUI6DemoMobile.png

그림6. uniGUI로 만든 모바일웹화면 (시뮬레이터에서 모바일 장비에 따라 화면이 어떻게 보일지 미리 볼 수 있다)

 

(데모) 접속한 장비에 맞게 데스크톱웹과 모바일웹 화면을 제공 (16분 16초 부터)

  • 델파이에서 데스크톱웹 메인인 Main.pas와 모바일웹 메인인 Mainm.pas가 각각 있다. 
  • uniGUI는 접속한 장비가 데스크톱인지 모바일인지를 인식하고 장비에 맞는 메인폼을 제공한다. 

uniGUI 하이퍼서버 (HyperServer)

  •  uniGUI 애플리케이션의 가용성, 안정성, 확장성을 현격하게 향상시킨다.
  •  백그라운드에서 여러 인스턴스가 작동한다. 각 인스턴스는 노드(Node)라고 부른다.
  •  서버를 멈추지 않고도 원격에서 애플리케이션을 업데이트 할 수 있다.
  •  여러 세션들이 여러 노드에 나누어져서 작동한다.
  •  노드가 사용되지 않을 때는 다른 세션을 위해 재활용될 수 있어서 서버의 컴퓨팅 자원이 효율적으로 사용된다.
  •  즉 하이퍼서버는 계란을 한바구니에 담지 않고 여러 바구니에 나누어 담는 방식이다.

Delphi-uniGUI7HyperServer.png

그림7. 하이퍼서버의 아키텍처는 uniGUI 웹 애플리케이션 세션 1개 이상이 들어있는 노드 여러개가 작동한다. 그리고 노드에 문제가 생기면하므로, 하이퍼서버는 해당 노드를 중단시키고, 차후에 재활용 한다.

 

(데모) uniGUI 하이퍼서버 (HyperServer)에서 작동시키기 (19분 49초 부터)

앞에서 개발된 웹애플리케이션의 실행파일을 복사하여 하이퍼서버 실행파일이 있는 폴더에 넣는다. 

 

같은 폴더에 있는 하이퍼서버 구성정보 파일 (hyper_server.cfg) 내용을 아래와 같이 편집한다:

[hyper_server] 애트리뷰트의 binary_name에 uniGUI로 만든 웹애플리케이션 실행파일명을 적고 저장한다.

 

이제 이 웹애플리케이션은 하이퍼서버 안에서 작동된다.

 

(데모) uniGUI 하이퍼서버 (HyperServer) 관리 화면 (21분 45초 부터)

웹브라우저에서 localhost:8077/server 주소를 통해 하이퍼서버 관리화면을 열 수 있다.

  • 하이퍼서버에서 작동 중인 노드의 PID 상태와 각 보유 세션 갯수 등의 정보를 보고 관리할 수 있다.
  • 문제가 있거나 유휴한 노드는 자동으로 내려가고 추후 재활용된다.
  • 윈도우 작업관리자에서 각 노드가 백그라운드에서 각각 별도의 프로세스로 실행되고 있음을 알 수 있다. 
  • 구성정보에서 노드의 총갯수를 지정할 수 있다.
 

(데모) 하이퍼서버 (HyperServer)로 웹애플리케이션 원격 배포 (23분 55초 부터)

  •  웹애플리케이션의 새버전을 배포할 때 서버를 중단할 필요가 없다.
  •  하이퍼서버 관리 화면에서 [업로드]를 선택하고 버전이 올라간 새 웹애플리케이션의 실행파일을 선택하여 업로드한다.
  •  그 결과, 기존의 노드는 버려지고 구버전 애플리케이션 세션을 더이상 제공하지 않는다. (이후 새버전 세션을 제공할 때 재활용된다)
  •  새 버전이 배포된 후에 웹브라우저를 통해 접근하는 사용자는 자동으로 새 버전을 사용하게 된다. (즉 노드에 새로운 버전으로 작동하는 세션이 생겨난다)

(데모) 하이퍼서버 (HyperServer)에서 노드 관리하기 (26분 22초 부터)

  •  uniGUI 부하 테스트 도구를 사용하여, 동시 접속 100개를 실행하면, 하이퍼서버에는 노드가 16개와 총 100개의 세션이 만들어지는 것을 볼 수 있다.
  •  세션이 만료되면 노드는 재활용된다.
  •  동시접속을 1,000개로 하면 16개 노드에 총 1,000개 세션이 만들어진다. 세션은 각 노드에 안분된다.

리눅스 서버 지원

  •  델파이 10.3 버전 이후부터 Linux용 uniGUI 웹애플리케이션을 만들 수 있다.
  •  데이터베이스 지원: FireDAC 또는 기타 리눅스를 지원하는 데이터 연결 컴포넌트 사용할 수 있다.
  •  그래픽과 이미지 처리 등은 리눅스에서 제약일 있을 수 있지만, 그 외에는 리눅스에서도 윈도우와 같이 작동한다.
  •  리눅스용 하이퍼서버는 현재 개발 중이다.

(데모) 리눅스에 uniGUI 웹애플리케이션 배포하기 (30분 25초 부터)

 델파이에서 타겟플랫폼을 Linux 64-bit로 선택한다.

 PA 서버 연결을 설정하고 실행한다. (참고: 델파이는 개발 장비 바깥으로 애플리케이션을 배포하고 디버깅할 때 PA서버를 사용한다.)

 

단, 리눅스의 경우에는, 배포전에 UniGUIServerModule.pas파일에서 OnVeforeInit 이벤트에 uniGUI 런타임 파일 경로를 지정해야한다.

이때 아래와 같이 IFDEF를 사용하여 해당 플랫폼에서만 반영되도록 한다


{$ifdef Linux64}


  FrameworkFilesRoot := ‘/etc/fmsoft/unigui/unigui_runtime’;


{$endif} 

 

uniGUI 로드맵

  •  Ext JS 최신 버전인 7.4로 업그레이드 (현재 사용 중인 Ext JS 버전은 7.0)
  •  Ext JS 최신 버전의 모든 새 기능을 uniGUI 컴포넌트에 반영하여 강화
  •  uniGUI 모바일 기능 강화 및 새 컴포넌트 추가
  •  하이퍼서버 강화 (설정 파일 대신 관리화면에서 설정 관리 등)
  •  Server Farms 용 하이퍼서버
  •  리눅스 용 하이퍼 서버
  •  uniGUI 설치 자동화 향상
  •  각국 언어 기능 향상
  •  테마 추가 성능 강화

원본 비디오 시청 (영문):

https://www.youtube.com/watch?v=fN4m-a-C64o&fbclid=IwAR3F4R8SqNF_82LcKyV5d4GodmxaI8lrFrNSkYjZpmxGi50eS7Opi17bnGc

 

번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 14389
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13023
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 15532
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 21064
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 22297
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 17933
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 38228
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 173741
269 [고객 사례- 델파이, 모바일, 전략] 축구 전술 기획 앱 - Soccer Playview 관리자 2021.08.20 1306
268 REST 웹서비스, 델파이에서 어떻게 활용해야 할까요? 관리자 2021.08.11 1200
267 델파이용 로우 코드 앱 마법사(LOW CODE APP WIZARD) 관리자 2021.06.25 1271
266 TEdgeBrowser에서 스크립트 실행하기와 소스 보기 관리자 2021.06.22 2278
265 [개발 예제] 웹 소켓 서버&클라이언트 채팅 프로그램 관리자 2021.06.08 2241
264 내가 델파이를 계속 선택하는 이유 관리자 2021.06.01 1173
263 [오브젝트 파스칼을 처음 접하는 사람들을 위한] 무료 튜토리얼 비디오 (DEREK BANAS) 관리자 2021.05.25 485
262 델파이 코드 정적 분석기 V2.4 출시 및 무료 다운로드 관리자 2021.05.25 722
261 NEW! 델파이 오브젝트 파스칼 스타일 가이드 관리자 2021.05.04 508
260 머신 러닝: 윈도우 앱에 적용하는 5가지 방법(파이썬과 델파이) 관리자 2021.04.30 494
259 파스칼(PASCAL) 언어 50년과 델파이(DELPHI) 관리자 2021.03.31 844
258 가장 강력한 ‘데이터베이스 연동’ 기능을 자체적으로 제공하는 프레임워크는? (델파이 VS. WPF VS. ELECTRON) 관리자 2021.03.04 661
257 [UX Summit 요약] 윈도우10에 멋진 플루언트UI 룩앤필을 델파이로 구현하기 #2 (Giving your Apps the Fluent UI Look and Feel with Delphi #2) 관리자 2021.03.02 720
256 [고객 사례- 델파이, 교육] 교육용 프로그래밍 도구 – DEVFLOWCHARTER 관리자 2021.02.19 521
255 26년, 델파이 이야기 관리자 2021.02.17 2285
254 [DelphiCon 요약] 델파이로 웹 다루기 (Powering the Web with Delphi) file 관리자 2021.02.16 1095
253 [고객 사례- 금융, 델파이] 주식, 화폐 등 금융 정보 분석 소프트웨어 - 게임스탑, 비트코인, 아마존, 구글 등 관리자 2021.02.04 613
252 ‘장기 활용 가능성’이 가장 뛰어난 프레임워크는? (델파이 VS. WPF VS. ELECTRON) 관리자 2021.02.01 457
» [델파이 웹개발] 델파이로 풀스택 웹 개발하기 - uniGUI 활용 (Full Stack Web Development with uniGUI for Delphi) file 관리자 2021.02.01 4277