Meraki Dashboard API 다이어그램

 

 

 

 

 

 

Meraki Dashboard API 다이어그램

https://meraki.cisco.com/product-catalog/

Product Catalog

 

https://developer.cisco.com/meraki/api-v1/

Introduction - Meraki Dashboard API v1 - Cisco Meraki Developer Hub

 

 

 

 

 

 

 

 

 

 

 

 

스몰기획 (다이어그램 + 상세페이지)

 

 

 

 

 

 

 

 

필요성

Meraki API는 업데이트가 활발해 문서작업을 매주 하지 않는 한 최신화가 불가능

조건

1. API에 변동이 있을때마다 손쉽게 업데이트가 가능한가
2. 맵형식으로 구현되어 이해하기 쉬운가
3. 한달 반 이내 구현이 가능한가

 

 

 

 

 

 

 

 

 

 

 

1. Mermaid.js → notion과 너무 흡사함. 제한이 있음 오히려 시간이 더 걸릴것임.
2. JsPlumb (Diagram Toolkit) → 너무 좋은 툴이나 올드하고 정말 단순히 Map만 그림 이정도를 하려면 Figma에서 작업하는게 나음
3. DHTMLX Diagram → 이또한 훌륭한 툴이나 JsPlumb와 같지만 디자인만 좀더 보완된 버전
4. Figma - FigJam → 가장 현실성이 있고 처음에 생각했던 방안임 다만 애초에 ‘여러명과함께 작업하는 방식’으로 시간이 꽤 걸림 시간을 단축할 오픈소스 및 솔루션을 서치하지 못할 경우 최후의 방안
5. Draw.io (diagrams.net) + 메모 기능 → 단순한 메모만 가능함 다만 url링크를 넣을 수는 있음 아하..?! 굳이 상세페이지를 따로 지원하는 솔루션을 찾는것이 아닌 기존 api문서를 잘 가공해서 동적 html 원페이지를 하나 만들어서 url로 대체하는 것도 방법일것이란 생각이 스침
6. D3.js + Custom Implementation → 아주 전문적인 툴임. 모달 열기가 가능하고 json 파일 기반으로 정보표시가 가능하다는데 구현난이도가 높아 자칫 학습시간이 더걸림 아쉬움

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

작업시 조건

1. Figma
   1. embed 코드와 click to page 기능이 가능해야. → 가능
2. Meraki api
   1. 공식 api문서를 사용해야 → https://developer.cisco.com/meraki/api-v1/api-index/
   2. csv를 tag에 따라 sheet를 구분해 자동저장 되어야
3. GitHub Pages
   1. param에 따른 동적 웹페이지가 가능해야 → 가능
   2. push하면 바로 반영되어야 → 확인완료

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 다이어그램에 표시될 icon 작업
   1. icon 형식 및 이름은 Meraki api 공식 tag네이밍에 맞출것
2. tag에 따른 csv 자동 분리
3. 각 상세페이지 1차 구현 (시간단축을 위해 디자인생각하지 x)
4. 다이어그램 완성 (구현에 힘들경우 엔지니어 지원요청)
5. 각 링크 연결
6. 각 원페이지 수정 및 확정 (디자인적용)

 

 

 

 

 

 

 

 

 

 

 

 

 

1주차: Meraki Dashboard API의 주요 기능/구조를 나타내는 각 요소 ****디자인 (1/2)

2주차: Meraki Dashboard API의 주요 기능/구조를 나타내는 각 요소 ****디자인 (2/2)

3주차: API 상세 웹페이지의 첫 번째 버전, Meraki 공식 API자료로 페이지 구현.

4주차: 다이어그램의 각 구조 및 관계를 시각적으로 기호, 선, 점의 연결 및 배치 최적화 (1/2) ——————————중단 (250827 결정)

5주차: 다이어그램의 각 구조 및 관계를 시각적으로 기호, 선, 점의 연결 및 배치 최적화 (2/2)

6주차: 다이어그램과 웹페이지 간 연결 및 API 상세 웹페이지의 내용과 기능을 보완 및 종합적 점검

 

 

 

 

 

 

 

 

 

 

 

 

 

excel 시트 분리구현