About my internal talk on CAP + Fiori + Mobile in context of app prototyping

This post originated from an idea to do an internal presentation about SAP CAP and SAP Fiori in my company.

The effort was to address the question “What SAP CAP is and how can we use it?” from both business and technical side.

Most of things are pretty trivial for anyone with sap/fiori background, but the target audience in my company were managers and ui/ux designers and devs not familiar with it at all.

Eventually, I made two videos: the main one with general stuff and a “short bonus one”.

Source code as always available at https://github.com/myakinkii/slova

Slides of “presentation” with links used are here (was lazy to put it into proper sections) https://1drv.ms/b/s!Aq45msPLRNMRhYwQ0C0cqU3yEYmRRg

Hope it could be useful to someone.

Below are the youtube vids+chapters links (of course, watch speed 1.5x is recommended ).

00:00 intro

pt1: Demo

01:24 solution motivation

03:21 demo admin flow

04:29 brief mention of stanza nlp

10:38 demo user flow

11:33 mention of vocabulary and treebanks

12:53 translations and flashcards

14:27 second user

15:36 data access privileges

16:36 cards with multiple pairs of langs

17:33 manual parsing example

19:04 treebanks import

20:51 understanding user flow

pt2: Fiori UX

21:25 fiori ux / design system

23:17 floorplans and ux elements

25:49 cheap prototyping to backlog to scope

pt3: NPD

28:15 ideation phase challenges

29:14 brief npd approaches comparison

31:54 fuzzy frontend of npd

34:33 cheap prototype first?

pt4: CAP

36:55 where’s cap? not yet )

37:20 fiori elements

40:59 odata as a protocol between fe and be

43:18 vocabulary annotations as metadata for metadata

44:03 cap/cds finally

46:47 cds ui annotations

49:18 low to full source code comparison

49:56 stanza nodejs to python full code case

51:23 runtime and platform

pt5: Frontend

54:38 fiori ux with react/angular

56:38 freestyle ui5 with fiori elements building blocks

57:54 broken custom page part )

59:59 custom ui5 view and controls

pt6: Outro

1:01:44 outro

1:03:03 capacitor/hybrid mobile apps mention

1:03:41 possible product directions and final words

00:00 intro and reminder of an issue we had

pt1: bootstrap and run with cdn or local resources and proxy

00:44 ui5 114 upgrade cdn rollout + cache as culprit

01:46 about cdn bootstrap2

02:49 cap preview generated index with default cdn

04:10 own index file as bootstrap for flp

05:02 about cache related parameters xx-viewCache and xx-cache-use

06:00 reproduce cache issue with fpm table

07:06 btp docs ui5VersionNumber for stable ui5 version

08:18 ui5 cli tooling that we do use (and fiori that we do not)

10:02 ui5 serve with local resources and proxy

14:20 libs as npm modules

15:26 bootstrap for custom cards app without proxy and relative resoures path

16:28 about componentData in bootstrap

pt2: build our app and run with cors

19:46 use ui5 build to get a distributable app

20:25 about serve/build dependencies like sap.ushell or sap.insights

27:29 default odata model replacement magic in init to have basic auth with cors

31:51 backend issue with auth header

33:41 cors enablement on backend side

35:07 dirty patch of cap/okra forbiddenHeaders

35:51 simple sentence import to recreate a card after backend restart

37:40 frontend issue with headers when using cors

39:32 and we will patch frontend as well )

41:45 finally works

42:18 “I start feeling that this video is already passed half an hour” – intended to be like 20 mins )

42:28 almost at capacitor part

pt3: “second part” about capacitor app build from our dist

43:50 setup capacitor project

47:17 running the apps finally in “run on mac” (ipad) and simulator (iphone)

49:07 ipad/mac app and issues (crashed with debugger + navigation)

51:20 “responsibility” (responsiveness) depending on form factor – menuButton example

53:16 run simulator to test the phone mode (scale/size issue as well)

p4: closing

58:52 final thoughts