@@ -3,3 +3,186 @@ sidebar_position: 3
33---
44
55# Upgrading From V3
6+ This documentation page provides guidlines to upgrade from the MonkJs 3.X version to the 4.X.
7+
8+ ## Why upgrade?
9+ MonkJs 4 is a complete revamp of the Monk SDK, rewritten from scratch, aimed at providing :
10+ - Better performances
11+ - Better monitoring for bug catching
12+ - New and improved UX/UI
13+ - New features (Video capture, live compliance, offline management...)
14+ - TypeScript typings with TSDoc integrated
15+ - Better documentation
16+ - And many more 🚀
17+
18+ Another key thing is that MonkJs used to be developed as a cross-platform React-Native SDK for Web (iOS / Android /
19+ Web). This basically forced us to use Expo and other dependencies that were hard to maintain with such low-level
20+ features. MonkJs 4 solves this issue by offering basically two SDKs : one for Web using ReactJs, and one for Native
21+ using React-Native. Some packages of the SDK work for both web and native, while others are split into two separate
22+ pacakges every time : one ending with ` -web ` for Web and one ending with ` -native ` for Native.
23+
24+ For now, only the Web part of the SDK has been implemented, but the Native one should come soon enough!
25+
26+ ## Sights
27+ The sights data previous exported as the default export of the Sights package is now split into 3 objects :
28+ - ` vehicles ` containing the details for each vehicle used as a model for the sights
29+ - ` labels ` containing translation details about each Sight label
30+ - ` sights ` containing the Sight data, with more or less the same structure as before, except for the vehicle details and
31+ sight label that now are simply a key reference to the other data export by the package.
32+
33+ Another major difference is that sights now include additional details such as the list of tasks recommended to be run
34+ for this sight. This means that you now don't have to specify manually which task to run for each sight when
35+ implementing a capture workflow.
36+
37+ #### How you did it in MonkJs 3
38+ ``` javascript
39+ import sights from ' @monkvision/sights'
40+
41+ const sight = sights[' fesc20-H1dfdfvH'
42+ console .log (JSON .stringify (sight, null , 2 ));
43+ /*
44+ * Output :
45+ * {
46+ * "id": "fesc20-H1dfdfvH",
47+ * "category": "exterior"
48+ * "overlay": "<svg>...</svg>"
49+ * "label": {
50+ * "en":"Front Low",
51+ * "fr":"Avant (position basse)"
52+ * },
53+ * }
54+ */
55+ ```
56+
57+ #### How you do it in MonkJs 4
58+ ``` typescript
59+ import { sights , labels } from ' @monkvision/sights'
60+
61+ const = sights [' fesc20-H1dfdfvH'
62+ console .log (JSON .stringify (sight , null , 2 ));
63+ /*
64+ * Output :
65+ * {
66+ * "id": "fesc20-H1dfdfvH",
67+ * "category": "exterior",
68+ * "label": "front-low",
69+ * "overlay": "<svg>...</svg>",
70+ * "tasks": [
71+ * "damage_detection"
72+ * ],
73+ * "vehicle": "fesc20"
74+ * }
75+ */
76+
77+ console .log (JSON .stringify (labels [sight .label ], null , 2 ));
78+ /*
79+ * Output :
80+ * {
81+ * "key": "front-low",
82+ * "en": "Front Low",
83+ * "fr": "Avant - vue basse",
84+ * "de": "Vorderseite Niedrig"
85+ * }
86+ */
87+ ```
88+
89+ ## Camera and Inspection Capture
90+ The ` @monkvision/camera ` package used to provide components such as ` Capture ` that were used to implement the picture
91+ taking workflows (capture workflows) for inspections, as well as declaring the Camera app used by these Capture
92+ components. This package has now been split into two :
93+
94+ - ` @monkvision/camera-web ` : A package that export a component called ` Camera ` that implements a camera preview used to
95+ take pictures, as well as logic utilities used to handle this camera. Usually, as a developer using the SDK, you won't
96+ have to use this package directly.
97+ - ` @monkvision/inspection-capture-web ` : A package that export capture components (such as ` PhotoCapture ` ) used to
98+ integrate the different Monk inspection capture workflows into your app.
99+
100+ #### How you did it in MonkJs 3
101+ ``` jsx
102+ import monk from ' @monkvision/corejs'
103+ import { Capture , Controls } from ' @monkvision/camera'
104+
105+ const { TaskName } = monk .types ;
106+ monk .config .authConfig = { domain: ' api.monk.ai/v1'
107+ monk .config .accessToken = ' YOUR_AUTH0_ACCESS_TOKEN'
108+
109+ const inspectionId = ' 1e11fb94-26fe-4956-90b6-d11ef3c87da4'
110+
111+ const sightIds = [
112+ ' fesc20-H1dfdfvH'
113+ ' fesc20-WMUaKDp1'
114+ ' fesc20-LTe3X2bg'
115+ ' fesc20-hp3Tk53x'
116+ ];
117+
118+ const mapTasksToSight = [
119+ { id: ' fesc20-H1dfdfvH' : [TaskName .DAMAGE_DETECTION ] },
120+ { id: ' fesc20-WMUaKDp1' : [TaskName .DAMAGE_DETECTION ] },
121+ { id: ' fesc20-LTe3X2bg' : [TaskName .DAMAGE_DETECTION ] },
122+ { id: ' fesc20-hp3Tk53x' : [TaskName .DAMAGE_DETECTION ] },
123+ ];
124+
125+ function App () {
126+ const [cameraLoading , setCameraLoading ] = useState (false );
127+
128+ const controls = [
129+ { disabled: cameraLoading, ... Controls .AddDamageButtonProps },
130+ { disabled: cameraLoading, ... Controls .CaptureButtonProps },
131+ ];
132+
133+ const handleSuccess = () => {
134+ // Update all the tasks statuses to TODO manually and then redirect to another page.
135+ };
136+
137+ return (
138+ < Capture
139+ inspectionId= {inspectionId}
140+ sightIds= {sightIds}
141+ mapTasksToSight= {mapTasksToSight}
142+ controls= {controls}
143+ loading= {cameraLoading}
144+ onReady= {() => setCameraLoading (false )}
145+ onStartUploadPicture= {() => setCameraLoading (true )}
146+ onFinishUploadPicture= {() => setCameraLoading (false )}
147+ enableComplianceCheck
148+ onComplianceCheckFinish= {handleSuccess}
149+ / >
150+ );
151+ }
152+ ```
153+
154+ #### How you do it in MonkJs 4
155+ ``` tsx
156+ import { sights } from ' @monkvision/sights'
157+ import { PhotoCapture } from ' @monkvision/inspection-capture-web'
158+
159+ const = {
160+ apiDomain: ' api.monk.ai/v1'
161+ authToken: ' YOUR_AUTH0_ACCESS_TOKEN'
162+ };
163+
164+ const = ' 1e11fb94-26fe-4956-90b6-d11ef3c87da4'
165+
166+ const = [
167+ sights [' fesc20-H1dfdfvH'
168+ sights [' fesc20-WMUaKDp1'
169+ sights [' fesc20-LTe3X2bg'
170+ sights [' fesc20-hp3Tk53x'
171+ ];
172+
173+ function App() {
174+ const = () => {
175+ // Immediately redirect to another page.
176+ };
177+
178+ return (
179+ <PhotoCapture
180+ inspectionId = { inspectionId }
181+ apiConfig = { apiConfig }
182+ sights = { sights }
183+ compliances = { { iqa: true }}
184+ onComplete = { handleSuccess }
185+ />
186+ );
187+ }
188+ ```
0 commit comments