...

...

기준환경(Environment)

...

...

ICE4 설치전 필수 설치

Install Git

Link참고: Git - MacOS

...

Install Nodejs

Download

Link참고: Node - MacOS

...

Install Yarn

Url: https://classic.yarnpkg.com/en/docs/install/#windows-stable => npm install --global yarn

...

Install IntelliJ IDEA

a. Two option install

Option 1.

...

Hombrew로 설치

brew install intellij-idea --cask

Option 2.

...

공식홈페이지에서 설치

Download

...

IntelliJ IDEA Ultimate

Url: https://www.jetbrains.com/idea/download/

...

Install

...

IntelliJ IDEA Ultimate

Move into Application

...

II. ICE4 - FrontBuilder Project Setting For IntelliJ

1. Source Code Download

Git Clone

Click Get Version Control

...

Next, Enter the git link

URLApplications

...

Gitlab 프로젝트 멤버 추가

Gitlab 가입

ICE4 Gitlab 관리자에게 이메일로 초대 요청하여 가입

→ 관리자: DXP본부 박유라 대리(angela.park@i-on.net)

→ 장애문의, 신규 프로젝트 생성: DXP본부 이정아 차장(hannah@i-on.net)

Gitlab 프로젝트 멤버추가

Backend: http://dcsf-dev08.i-on.net/dxp/frontbuilderbackendcore.git

...

Write Username & Password git

...

2. Git Checkout

Click right side in the bottom

...

Choose what you want to checkout git branch

...

3. Project Setting

Click Preferences Install the plugin Vue.js for Vuejs syntax

...

Run npm install

...

Run yarn install

...

4. Change Domain Name

The default domain name is localhost

a. Instruction to change the domain name

Step 1: Open terminal and type sudo nano /etc/hosts and press Return

...

Step 2: Enter the domain name: 127.0.0.1 local.i-on.net

Step 3: Save the file by pressing Ctrl + O and press Return

Step 4: Exit with Ctrl + X

Step 5: Next, run yarn run loc

Url: BackOffice: http://localdcsf-dev08.i-on.net:3000/account/admin/SignIn

III. Environment and Prerequisites of FrontBuilder Editor

1. Editor Types

Prerequisite condition: running BackendCore source first

Select icon run

...

If the message was displayed on the console window, the service has started normally.

...

a. Editor has 2 types:

• BO editor

Step 1: Run BO source code

Step 2: Enter yarn run loc on BO

Step 3: Run Backend Core

References for backend core: /wiki/spaces/ICE3/pages/983728145

Urldxp/frontbuilder.git

FrontOffice: http://localdcsf-dev08.i-on.net:3000/account/admin/SignIn

• FO editor

Step 1: Run BO and FO source code

Step 2: Enter yarn run loc on BO

Step 3: Enter yarn run loc on FO

Step 4: Run Backend Core

References for backend core: /wiki/spaces/ICE3/pages/983728145

Urldxp/basecamp.git

...

Backoffice 프로젝트 설정

ICE4 Frontbuilder Source Code 다운로드

Git Clone

IntelliJ를 실행하여 Get Version Control 실행

...

Git 정보 입력: URL, UserID, Password → Clone

URL: http://localdcsf-dev08.i-on.net:3000/account/admin/SignIn

2. How to use the editor to drag and drop component

when all of the source code succeeded.

Open Url http://local.i-on.net:3000/account/admin/SignIn

a. Login Form

...

User information:

user: system

password: 1234

First of all, Click Platform Cosole

...

and then choose sites => pages

There are site map on the top bar

...

Next, choose any site, list page will be exposed by the site which you choice

Left FrontOffice Page: Contain all of the pages that we made

• New button: Make a new page

• List page

Right FrontOffice Page: Detail of the page

• Edit button: Edit the page which already been

• Save button: Save information when changing

• Delete button: Delete page

• Store button: Save page data

...

We have two ways to move to the template editor.

• Create your new page and click on the Edit button to move to template editor

• Select an available template on the left sidebar

Url: dxp/frontbuilder.git

...

Username(id or email) & Password 입력

...

Git Checkout

IntelliJ 오른쪽 하단 branch명(master 혹은 develop) 클릭

...

프로젝트명(예시: proejct/DEMO) → Checkout 클릭

...

Project 설정

npm 라이브러리 인스톨

yarn install

로컬에서 webpack 모드로 실행(실시간으로 compile)

yarn run loc

• ICE4 backend 실행해야만 UI 사용 가능

로컬에서 빌드

yarn run build:loc

로컬에서 실행

yarn run start:loc

• ICE4 backend 실행해야만 UI 사용 가능

페이지 접근 테스트

크롬 브라우저에서 URL 호출

http://local.i-on.net:3000/account/admin/templateEditor?path=/grid-test&siteId=basic&_parentId=foPage::basic>/grid-test

...

IV. Update library on package.json

When you want to update package.json. Removing package-lock.json and then run npm install again

...

SignIn

ID: system

Password: 1234

...

관리자 페이지 정상 로딩되면 Backend ↔︎ Backoffice 간 통신 테스트 완료

...