Where and How do I start with a BTP Proof of Concept? [Part 2]

This is part 2 of the series about a Proof of Concept on BTP. Find part 1 here

Short review

Welcome back – short review. We did set up a Proof of Concept with some easy targets to get some know how and first insights about dealing with the BTP. Now we do continue with our motivated team and our first UI5 webapp 🙂

Your first app

=> @Michael: Please set up a new empty repository on our Source-Code-Management system (SCM). GitHub? Yes, we can use this for now, it’s just a PoC and we wanna learn – so there is nothing about data protection….

There are a few opportunities to start with. I like the template ideas from SAP and their way to provide templates via the “Template Wizard“. That’s a good starting point.
So let me share my template and some thoughts on why I do recommend my template:

• It has our own approuter inside
• There is a gitlab and a github pipeline as example existing
• The webapp folder contains a simple ui5 webapp as dummy, showing us a list with entries from our (local) model
• It’s using ui5-tooling. The best way to start for new (and experienced) UI5 developers! Check out Peter Muessigs great post to get more background knowledge about it.

=> @Michael: Copy the content of Cedrics template repository to our new repo and share the access with @Tim.

Some first words about this app

There are tons of blog out there, telling and coaching you through UI5 and beginner guides or tutorials exist too. So I can recommend to click on these hyperlinks checking out what’s already there and how to get more UI5 knowledge. But I want to highlight one thing:
Do not waste your time yet and do not check out the approuter (this module is routing requests from your app to different targets – it routes. That’s it for now!) details and npm behaviours.

=> @Tim: It’s your turn! Check out the Model-View-Controller (MVC) principles and how the template app is using this approach
=> @Michael: Please subscribe to Business Application Studio (BAS) and provide access to @Tim!
=> @Michael: You did automatically create a new space? Good so! Add all developers as space-members, please.

Things you should Try, Tim

This is for you, you frontend developer.
Clone the new repository into your BAS IDE. @Michael was sharing the access and url with you.

It’s good to start with Business Application Studio as IDE as it has a lot of features and tools already on board preinstalled. You can select the different tools on your own within a space setup.
Create your dev space with Fiori capabilities and give it a name before you click “Create Dev Space”

Press the button “Clone Repository” and enter the URL @Michael was sharing with you (yes, it’s your own enterprise repository).

Select folder “projects” within the “open popup window” and click on “open” on the appearing message on the bottom. Open a “Terminal” > “New Terminal” session and enter the dummyUI5 folder (“cd dummyUI5”).

Type into your terminal “npm install” – Your BAS IDE is now loading necessary dependencies of ui5-tooling (and other modules) for you and stores them inside the (new) folder “node_modules”. This folder will stick on your IDE and will not be (up-)loaded into the repository. This is “configured” in the “.gitignore” file (just if you’re interested open this file, it’s distraction again).

Continue after the npm install part with “ui5 serve”.
Let the magic happen …

Click on “Expose and Open”, press enter (ignore the upcoming input field) and click on “index.html” file at the new window.

Okay, it’s running locally on your IDE. Nice! Good job!

Let the new window open and go back to the BAS.
Open the corresponding model file “dummyUI5/webapp/models/apps.json” and change or add something.
The website will reload automatically (due to some magic ui5-tooling things we will check later).

Check up the “dummyUI5/webapp/views/view.xml” file. You will identify the way how it’s related to each other via bindings.
=> @Tim: Now it’s time for you to investigate about these binding things

Your first deployment

Okay, @Michael it’s your turn now – Our target is the build and deploy of Tims new lovely application. So you did copy all things from the template, didn’t you?

Check out the folder “.github/workflows” and open the “main.yml“.
This file contains your dummy pipeline I did prepare for you. Yes, all for free😉

Before we can use this file – you should review the triggers. Does it fit to your branche? Change it to another branche you did create on your repository (I guess it’s “main”) if necessary.

And commit this file. Do not worry, you will get a mail within a failed pipeline message from github, looking like this:

Why? We need to supply the secrets! The build did work but the deployment failed.

Click on “Settings” on your github repository. Select tab “Secrets” and add “New repository secret” for these attributes:
CF_ORG (this is the subaccount name), CF_USER and CF_PASSWORD (this is your S-Account, please check your S-Account is added as member of the space, you will mention now), CF_SPACE
Open the “Actions” tab again and start your workflow (again) by selecting the workflow and clicking on “Re-run jobs”.

Click on each of that items inside your (running?) workflow and check out what’s happening. These 2 jobs will do exactly what they are named to – they do “build the mta” and “deploy the mta to cf”. This will give you some first hand investigation time within the mbt build and CF CLI.

Check this posting for a more detailed view on devOps with github actions for BTP.

Wrap up + Next steps

Good job! We did set up our first UI5 app and we learned some first things about UI5.

Also we’re able now to set up and discover our existing github pipeline.

Within the next posts we will cover more things about security, integration and backend development things and continue with our Proof of Concept.

Stay tuned to meet the other members of our team and their journeys!

Image sources: All screenshots were taken by myself and I did design the other illustrations too.