다이어그램
단순화된 통합
외부 백엔드가 필요하지 않은 단순 작업의 경우:
고급 통합
시퀀스 다이어그램
| 아래 시퀀스는 일반적인(권장) 작업 시퀀스를 보여 줍니다. 경우에 따라 실제 구현은 이 워크플로에서 벗어날 수 있습니다. |
일반 워크플로
세부 정보:
1. 사용자가 트래커의 문서 보기로 이동
◦ 문서 보기에서 외부 위젯은 오른쪽 패널에 표시될 수 있습니다.
2. 문서 보기에서 IFrame 렌더링
◦ 외부 위젯은 IFrame에 캡슐화됩니다.
3. IFrame은 위젯의 viewUrl 호출
◦ IFrame은 Codebeamer의 위젯 구성 중에 제공된 viewURL에서 위젯 UI를 로드하려고 시도합니다.
4. 외부 위젯 인스턴스화
5. 인증 토큰 가져오기
6. 인증 토큰
7. 구성 가져오기
8. 외부 위젯 구성
9. 기본 URL 가져오기
10. Rest API V3 URL
11. 위젯 높이 설정
12. 위젯 백엔드 초기화
13. 백엔드 인스턴스
14. 선택한 항목 가져오기
15. 항목 ID
16. 항목 세부 정보 가져오기
17. Codebeamer에서 항목 세부 정보 가져오기
18. 항목 세부 정보
19. 추가 계산/외부 서비스 호출
20. 항목 세부 정보
21. 결과 위젯 HTML
◦ 위젯 HTML은 필요에 따라 해당 항목 세부 정보로 채워집니다.
22. 문서 보기 표시
◦ 사용자는 오른쪽 패널에서 선택한 항목에 대해 올바르게 채워진 외부 위젯을 볼 수 있습니다.
Codebeamer에서 선택한 항목 변경됨
| 전제 조건: 사용자가 트래커 항목의 문서 보기 페이지에 있습니다. |
사용 사례: 사용자가 선택한 항목을 변경하면(예: 트래커 대시보드에서) 이에 따라 외부 위젯 콘텐츠가 업데이트됩니다.
세부 정보:
1. 위젯이 항목 선택 변경에 대해 알림을 받을 콜백 생성
2. 위젯이 CB 프런트엔드에 콜백 등록
3. 사용자가 항목 선택 변경
4. CB 프런트엔드가 등록된 콜백을 통해 외부 위젯에 알림
5. 내부적으로 새 항목 ID 등록
◦ 위젯 쪽에 저장된 선택한 항목 ID 수정
6. 항목 세부 정보 가져오기
7. CB에서 항목 세부 정보 가져오기
8. 항목 세부 정보
9. 추가 계산/외부 서비스 호출
◦ 위젯 백엔드는 추가 작업을 수행할 수 있습니다. 자체 데이터베이스를 사용하거나 외부 위젯 작업에 필요할 수 있는 외부 서비스를 호출할 수도 있습니다.
10. 항목 세부 정보
11. 업데이트된 위젯 HTML
◦ 위젯 HTML은 변경된 항목 세부 정보를 기반으로 변경됩니다.
12. 업데이트된 문서 보기 페이지 표시
◦ 사용자는 업데이트된 외부 위젯 콘텐츠가 CB에서 선택한 항목에 속하는 것을 볼 수 있습니다.
CB 항목 다시 로드
사용 사례: 사용자가 외부 위젯 UI에서 항목의 일부 등록 정보를 수정합니다. 이 수정 사항은 CB에서 업데이트됩니다.
세부 정보:
1. 사용자가 외부 위젯에서 항목 수정
◦ 외부 위젯은 항목 업데이트에도 사용할 수 있습니다. 이론적으로 모든 것은 Rest API V3에서 지원됩니다.
2. 수정 요청
◦ 위젯 프런트엔드에서 위젯 백엔드로 전송된 수정 요청(예: POST HTTP 요청).
3. 해당 업데이트 방법
◦ 백엔드는 Swagger 클라이언트에서 해당 update/... 방법을 호출해야 합니다(이렇게 하면 해당 Rest API V3 엔트포인트를 호출함).
4. 업데이트 결과
◦ 업데이트 결과는 Swagger 클라이언트의 경우와 동일합니다. 예를 들어 실패한 업데이트를 처리하고 표시하는 방법은 외부 위젯 구현에 따릅니다.
5. 추가 계산/외부 서비스 호출
◦ 위젯 백엔드는 추가 작업을 수행할 수 있습니다. 자체 데이터베이스를 사용하거나 외부 위젯 작업에 필요할 수 있는 외부 서비스를 호출할 수도 있습니다.
◦ 예를 들어, 업데이트가 성공하면 다른 외부 시스템이나 자체 데이터베이스에서 동일한 수정을 수행할 수 있습니다.
6. 업데이트 결과
◦ 위젯의 백엔드는 프런트엔드에 업데이트 결과를 알립니다.
7. 항목 다시 로드 요청
◦ 업데이트 결과에 따라 외부 위젯은 CB UI에서 항목 다시 로드를 요청할 수 있습니다.
8. CB UI에서 항목 다시 로드
◦ 지정된 페이지에서 이 항목 다시 로드 기능을 지원할 경우 CB DB에서 지정된 항목을 다시 로드합니다.
9. 업데이트된 항목으로 문서 보기 새로 고침
◦ 사용자는 CB 응용 프로그램에서 외부 위젯에 대해 수행된 수정을 볼 수 있습니다.
외부 위젯 배포
• 이론적으로 외부 위젯은 인터넷의 모든 외부 웹 응용 프로그램일 수 있으며 해당 URL과 함께 IFrame에 포함될 수 있습니다.
• 외부 위젯 배포에 대한 현재 접근 방식은 별도의 Docker 컨테이너이므로 모든 외부 위젯에는 자체 경량 Docker 컨테이너가 있습니다.
데모 응용 프로그램
Angular 응용 프로그램
이 위젯과 호환되는 Angular 버전을 확인하려면 프로젝트의
package.json 파일에 있는
"dependencies" 객체를 참조하십시오.
Typescript 응용 프로그램
JavaScript 응용 프로그램