This is part 2 of the series about a Proof of Concept on BTP. Find part 1 here
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).
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).
Okay, it’s running locally on your IDE. Nice! Good job!
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😉
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.