This is a searchable description of the content of a live stream recording, specifically "Ep.46 - The SAP Business Application Studio with Marius Obert" in the "Hands-on SAP dev with qmacro" series. There are links directly to specific highlights in the video recording. For links to annotations of other episodes, please see the "Catch the replays" section of the series blog post.
This episode was streamed live on Fri 29 Nov 2019 and is approximately 60 minutes in length. The stream recording is available on YouTube.
Brief synopsis: In this episode we take a look at the new IDE from SAP - the Business Application Studio. We have an old friend of the stream Marius Obert to tell us about it and demo it live too. Don't miss this!
00:03:15 A quick reminder that Advent of Code (AoC) starts in and runs throughout the December month, get your brain fired up and enjoy practising thinking and writing in a language you know, or improve your knowledge of a new language, while solving interesting programming puzzles. If you're interested in chatting with other developers in the wider SAP Developer community about this, join the #adventofcode channel on the SAP Mentors & Friends workspace - everyone is welcome (if you're not already on that workspace, you can find an invite link here).
As DerEinzigeWaherKobold points out, I'm an Advent of Code supporter - you can be too if you're interested.
00:04:00 The structure that we used in Ep.00 to solve an older AoC puzzle is available (particularly for pdominique-bio who asked about it) in the HandsOnSAPDev annotations repo (in the
00:04:45 If you're looking for programming puzzles that are slightly less intense than those in AoC, there's always Project Euler, which, according to Former Member I've been pronouncing "oddly" (my word). Fair enough 🙂
00:05:00 A quick mention of repl.it which is a lovely online lightweight IDE that you use to write in all sorts of languages and environments, and it has facilities to sync your code with GitHub repos. Recommended (and I'm using it for my AoC puzzles at the moment).
00:05:30 Welcoming mariusobert to the episode, who has of course been on #HandsOnSAPDev before, in Ep.24 – Going from local CAP to cloud CAP with MTA based deployments in fact.
Marius is going to show us the SAP Business Application Studio, and we start with a brief look at a couple of blog posts: Showcasing: SAP Business Application Studio (the next generation of SAP Web IDE) by nirm.kol and indeed one of Marius's own posts, from his Cloud Foundry Fun series - #CloudFoundryFun #9 – Develop with the SAP Business Application Studio.
00:10:20 Marius starts out by describing what we're going to build - a simple application consuming everyone's favourite OData service - Northwind!
00:11:00 There's a tutorial group in our Tutorial Navigator that Marius highlights, that relates to what we're going to build: Create a Web Front End with SAPUI5 in Web IDE.
00:11:50 Looking at Marius's Northwind destination definition, which is at the subaccount level.
00:13:00 In our first touch point with the Business Application Studio we see for the first time the concept of "Dev Spaces". Each Dev Space comes with all the tools you need to develop your solution (such as plugins, cli tools, and so on).
00:15:30 Seeing the UI for the first time, it looks very familiar - based on, and compatible with, VS Code. Very nice!
00:16:15 Discussing the "Format on Save" feature of the IDE, which on the whole I think is a very good thing.
00:17:40 Using the command line to install some software, specifically Marius's UI5 generator:
00:19:15 The beauty of the Business Application Studio is (for me) that it gives each developer a full, working environment, in the cloud. One of the challenges we see when running CodeJams is the requirement to set up a development environment locally, especially on Windows devices. These challenges are completely neutralised in this context.
00:21:30 Checking what version of Node.js is automatically available, we see that it's the LTS version of Node.js 10. That's good.
00:22:15 Using the IDE's Command Palette to invoke a Yeoman (
00:24:00 Choosing the view type for the UI5 project, and we joke about choosing JavaScript views (this did remind me of an old blog post I wrote comparing the different view types in UI5 (XML, HTML, JavaScript and JSON), but I can't seem to find where that got to - if you know, or have a link, please let me know!).
00:25:50 Looking at the
00:28:50 Looking at how the App Router can be started from a local directory.
00:29:20 Comparing the destination definitions in Neo and Cloud Foundry (CF), and how they're very similar, but that in CF the destination is created as an instance of the Destination service (and that, as we see shortly after this, the application needs to be bound to this instance).
00:30:30 Connecting to and authenticating with CF, and selecting the organisation and space; following this we can also immediately use the command line
00:31:25 Creating a new service instance, using the Command Palette - very comfortable and convenient!
00:34:45 Discussing the generation and use of service keys, which are required to be able to access and interact with services from outside the SAP Cloud Platform context directly.
00:35:30 Highlighting graham.robinson observation that the Business Application Studio is much more "target aware", in that we can carry out deployment target activities without having to jump out to other tools.
00:35:50 Checking the success of the service binding, by looking at the
00:36:50 Even more goodness - on startup we see that the Business Application Studio offers a port forwarding facility so that an application started up and listening in the context of the development space (in the cloud, but "pseudo-local" to the developer in the IDE) can be accessed from a regular workstation-local web browser.
00:39:00 Following a question on the
00:44:20 Roberdinho points to a great set of blog posts by kevin_hu on building an English Premier League app with CAP, using Visual Studio Online - see this post for more details: Part 5 Try out Visual Studio Online with Cloud Programming Model #epl-app.
00:44:55 Talking about Cloud9, another cloud IDE, which in fact was (I seem to remember) based on Bespin, created originally by Dion Almaer and Ben Galbraith (both at Mozilla, at the time). Find out more about this at https://ace.c9.io/.
In fact, online IDEs and editors abound - we also mention the code editor available in Google Cloud Shell, Gitpod, a one-click online IDE for GitHub and of course repl.it.
00:47:00 Getting back to the app, we start to add to the view with a
00:51:00 Reminiscing about the early days of UI5 - the first version of UI5 I played with (when it was first released publicly) was 1.2.0 (a beta version) - I wrote about it in a post in 2012: SAPUI5 - The Future direction of SAP UI Development?, and indeed it seems a long time ago already since we were celebrating the milestone release of 1.30 with the series of articles under the theme "30 Days of UI5".
00:51:35 rsletta has a great website and service that tells us about the latest UI5 versions - check it out at https://latest-openui5.rikosjett.com/!
00:52:40 Following a successful test "locally", as a final part of the demo, given the time, Marius starts the build and deploy process:
00:54:35 Sorting out a quick demo-based issue, by using
And with a quick
00:57:20 Marius shows an example of the work that the teams have been doing, to bring over the extensions from SAP Web IDE so that they can be used in the SAP Business Application Studio. The example here is the Layout Editor for XML Views in UI5. Very nice!
00:58:20 And to round this episode off, Marius loads the actual deployed application in his browser, served from CF. Not only that, but he shows a use of command line tools and pipelining to get a clickable URL:
... which is the perfect way to end this episode and this annotations blog post (remember - #TheFutureIsTerminal!). Thanks to Marius for this great session, and to you all for your continued support and following of Hands-on SAP dev with qmacro!
This episode was streamed live on Fri 29 Nov 2019 and is approximately 60 minutes in length. The stream recording is available on YouTube.
Brief synopsis: In this episode we take a look at the new IDE from SAP - the Business Application Studio. We have an old friend of the stream Marius Obert to tell us about it and demo it live too. Don't miss this!
00:03:15 A quick reminder that Advent of Code (AoC) starts in and runs throughout the December month, get your brain fired up and enjoy practising thinking and writing in a language you know, or improve your knowledge of a new language, while solving interesting programming puzzles. If you're interested in chatting with other developers in the wider SAP Developer community about this, join the #adventofcode channel on the SAP Mentors & Friends workspace - everyone is welcome (if you're not already on that workspace, you can find an invite link here).
As DerEinzigeWaherKobold points out, I'm an Advent of Code supporter - you can be too if you're interested.
00:04:00 The structure that we used in Ep.00 to solve an older AoC puzzle is available (particularly for pdominique-bio who asked about it) in the HandsOnSAPDev annotations repo (in the
ep00 directory).00:04:45 If you're looking for programming puzzles that are slightly less intense than those in AoC, there's always Project Euler, which, according to Former Member I've been pronouncing "oddly" (my word). Fair enough 🙂
00:05:00 A quick mention of repl.it which is a lovely online lightweight IDE that you use to write in all sorts of languages and environments, and it has facilities to sync your code with GitHub repos. Recommended (and I'm using it for my AoC puzzles at the moment).
00:05:30 Welcoming mariusobert to the episode, who has of course been on #HandsOnSAPDev before, in Ep.24 – Going from local CAP to cloud CAP with MTA based deployments in fact.
Marius is going to show us the SAP Business Application Studio, and we start with a brief look at a couple of blog posts: Showcasing: SAP Business Application Studio (the next generation of SAP Web IDE) by nirm.kol and indeed one of Marius's own posts, from his Cloud Foundry Fun series - #CloudFoundryFun #9 – Develop with the SAP Business Application Studio.
00:10:20 Marius starts out by describing what we're going to build - a simple application consuming everyone's favourite OData service - Northwind!
00:11:00 There's a tutorial group in our Tutorial Navigator that Marius highlights, that relates to what we're going to build: Create a Web Front End with SAPUI5 in Web IDE.
00:11:50 Looking at Marius's Northwind destination definition, which is at the subaccount level.
00:13:00 In our first touch point with the Business Application Studio we see for the first time the concept of "Dev Spaces". Each Dev Space comes with all the tools you need to develop your solution (such as plugins, cli tools, and so on).
00:15:30 Seeing the UI for the first time, it looks very familiar - based on, and compatible with, VS Code. Very nice!
00:16:15 Discussing the "Format on Save" feature of the IDE, which on the whole I think is a very good thing.
00:17:40 Using the command line to install some software, specifically Marius's UI5 generator:
npm i generator-easy-ui500:19:15 The beauty of the Business Application Studio is (for me) that it gives each developer a full, working environment, in the cloud. One of the challenges we see when running CodeJams is the requirement to set up a development environment locally, especially on Windows devices. These challenges are completely neutralised in this context.
00:21:30 Checking what version of Node.js is automatically available, we see that it's the LTS version of Node.js 10. That's good.
00:22:15 Using the IDE's Command Palette to invoke a Yeoman (
yo) command, where we see that the palette is used as a generic UI for input and selection, which looks really nice.00:24:00 Choosing the view type for the UI5 project, and we joke about choosing JavaScript views (this did remind me of an old blog post I wrote comparing the different view types in UI5 (XML, HTML, JavaScript and JSON), but I can't seem to find where that got to - if you know, or have a link, please let me know!).
00:25:50 Looking at the
xs-app.json file in the App Router, where we define a mapping to the Northwind destination, and discussing the challenges of ensuring the route definitions are in the right order so that URLs are appropriately matched ... and whether the editor should do something to help us here.00:28:50 Looking at how the App Router can be started from a local directory.
00:29:20 Comparing the destination definitions in Neo and Cloud Foundry (CF), and how they're very similar, but that in CF the destination is created as an instance of the Destination service (and that, as we see shortly after this, the application needs to be bound to this instance).
00:30:30 Connecting to and authenticating with CF, and selecting the organisation and space; following this we can also immediately use the command line
cf CLI client (or the Command Palette equivalents).00:31:25 Creating a new service instance, using the Command Palette - very comfortable and convenient!
00:34:45 Discussing the generation and use of service keys, which are required to be able to access and interact with services from outside the SAP Cloud Platform context directly.
00:35:30 Highlighting graham.robinson observation that the Business Application Studio is much more "target aware", in that we can carry out deployment target activities without having to jump out to other tools.
00:35:50 Checking the success of the service binding, by looking at the
.env file in the dist/ directory (and we then move .env into the approuter/ directory for it to be accessed and used.00:36:50 Even more goodness - on startup we see that the Business Application Studio offers a port forwarding facility so that an application started up and listening in the context of the development space (in the cloud, but "pseudo-local" to the developer in the IDE) can be accessed from a regular workstation-local web browser.
00:39:00 Following a question on the
mbt tool (the cloud MTA Build Tool), we note that the tool is now no longer in beta, and is in fact accessible from https://www.npmjs.com/package/mbt. Note that mbt will replace the now-deprecated Java-based build tool.00:44:20 Roberdinho points to a great set of blog posts by kevin_hu on building an English Premier League app with CAP, using Visual Studio Online - see this post for more details: Part 5 Try out Visual Studio Online with Cloud Programming Model #epl-app.
00:44:55 Talking about Cloud9, another cloud IDE, which in fact was (I seem to remember) based on Bespin, created originally by Dion Almaer and Ben Galbraith (both at Mozilla, at the time). Find out more about this at https://ace.c9.io/.
In fact, online IDEs and editors abound - we also mention the code editor available in Google Cloud Shell, Gitpod, a one-click online IDE for GitHub and of course repl.it.
00:47:00 Getting back to the app, we start to add to the view with a
StandardListItem (my favourite control, I think), and add to the controller with a handler.00:51:00 Reminiscing about the early days of UI5 - the first version of UI5 I played with (when it was first released publicly) was 1.2.0 (a beta version) - I wrote about it in a post in 2012: SAPUI5 - The Future direction of SAP UI Development?, and indeed it seems a long time ago already since we were celebrating the milestone release of 1.30 with the series of articles under the theme "30 Days of UI5".
00:51:35 rsletta has a great website and service that tells us about the latest UI5 versions - check it out at https://latest-openui5.rikosjett.com/!
00:52:40 Following a successful test "locally", as a final part of the demo, given the time, Marius starts the build and deploy process:
npm run deploy00:54:35 Sorting out a quick demo-based issue, by using
npx to more specifically point to the mbt tool so that the build runs correctly.And with a quick
cf deploy we're off to CF! While that happens, Marius takes us on a brief tour of the plugins in his Business Application Studio instance.00:57:20 Marius shows an example of the work that the teams have been doing, to bring over the extensions from SAP Web IDE so that they can be used in the SAP Business Application Studio. The example here is the Layout Editor for XML Views in UI5. Very nice!
00:58:20 And to round this episode off, Marius loads the actual deployed application in his browser, served from CF. Not only that, but he shows a use of command line tools and pipelining to get a clickable URL:
echo "https://"$(cf apps | grep started | awk '{print $6}')... which is the perfect way to end this episode and this annotations blog post (remember - #TheFutureIsTerminal!). Thanks to Marius for this great session, and to you all for your continued support and following of Hands-on SAP dev with qmacro!
- SAP Managed Tags:
1 Comment
