Skip to Content
Event Information
Author's profile photo DJ Adams

SAP Community Code Challenge – Results

We had some great entries for the SAP Community Code Challenge, here’s a quick overview and details on what’s next.

We launched the SAP Community Code Challenge a month ago, and we’ve had some great entries and conversations between then and now, in the Community Groups discussion thread.

As the launch blog post explained, this challenge was intended to be loose, friendly and fun, and really it’s a bit of a learning opportunity “in disguise”. Anyone who has coded solutions to exercises on platforms like Project Euler or Exercism (to name just a couple) will know what we mean here!

A new badge!

We decided to create a new SAP Community badge to award to the participants of this challenge. Fittingly, it reflects the “Pixel Person” theme that ran through the discussion thread. Everyone who participated will receive this badge. In fact, if you’ve not yet had the chance to participate, read on to the end for a special offer.

Badge

Challenge aspects

The starter project, created for the challenge by Thomas Jung, contained many technical components that came together to become a great little image editing app. It’s still available of course, as a reference in the SAP Samples organisation on GitHub, in the sap-community-code-challenge repository. In it, you’ll find nuggets of information across these different technical areas:

  • Web app architecture: the project is a web app consisting of a frontend and a backend
  • Node.js: the backend is a Node.js based mechanism, using Express to respond to incoming HTTP requests from the frontend, and serving those requests with JavaScript based responders
  • Fiori: the frontend part of the app embraces the Fiori design language, and also shows you how to create and use a local Fiori launchpad with a tile to launch the app itself
  • UI5: while Fiori is the UX, the UI is provided by UI5, and in particular, the app showcases the UI5 image editor component
  • The project also contains definitions for a container based runtime that can be used with Docker, and specifically within a VS Code devcontainer scenario (for more information on dev containers, you may like the three-part blog post series Boosting tutorial UX with dev containers)

Contributions

There were some great contributions; here is a quick overview:

Nicolai Geburek added another image with which to enhance your profile picture, and also added a randomise feature.

Nils Lutz contributed a whole load of feature and enhancements, not only bringing TypeScript to the table (this is JavaScript with syntax for types) but also switching the package manager, bringing in a mechanism for code formatting, and much more.

Vinay S implemented the app using AppGyver which was a fascinating angle, especially to see the function flow that he shared.

Daniel Wroblewski looked at translations and internationalisation (also known as i18n), and it was great to see Daniel use his native knowledge to add support for Hebrew, which is a right-to-left (RTL) language which of course is supported out of the box with UI5. He also added a chatbot feature!

Alexander Frank added a feature to automatically import the existing profile picture based on the input of one’s SAP Community name.

Huseyin Dereli added a feature which facilitates the import of one’s GitHub profile picture, which nicely balances Alex’s contribution.

Gabor Toth did some fascinating work to build his own control, inheriting from the UI5 image editor control, and added a new control to handle image layers. Not only that, he also added extra filters.

Moreover, lots of folks, including Craig Cmehil, Jerry Janda and Lena Stodal got the project up and running and used it to enhance their profile picture. Just getting the project up and running is a great step forward, and all part of the learning experience.

Everyone listed here will receive the badge, congratulations to everyone who took part!

What’s next

As a quick summary, here are the things to look out for next:

  • We’ll be running more Code Challenges throughout this year, keep an eye out for announcements on SAP Community via the Event Information category or the coding challenge tag
  • Each contributor will have the badge assigned to their SAP Community profile

And if you didn’t get round to participating in this challenge yet, but would like to earn the badge, there’s still a chance. All you have to do is:

  • Get the project up and running
  • Use it to make a nice enhanced profile image
  • Upload that image to be your SAP Community profile picture
  • Let us know you’ve done it in the Community Groups discussion thread (and don’t forget to include your SAP Community profile URL when you do)

This chance will remain open until the end of May this year.

Have fun, and until next time!

Laura Schmitz and DJ.

 

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Hi DJ.

      Thanks for the Challenge.

      Maybe I am late with my idea, but i want to replace Sapui5 editor control  with some npm community Node control for picture editing. Thanks  Peter Muessig for his blog https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/

      But I don't know how to force to work ui5.yaml with custom tasks in challenge application.

      If you or someone have any ideas. Maybe it would be interesting for me.

      Best Regards, Alexander.

      Author's profile photo DJ Adams
      DJ Adams
      Blog Post Author

      Hey Aleksandr - not too late! Please hop over to the discussion thread (Community Groups discussion thread) and ask there, we can share what we know then with everyone.

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks DJ, I will discuss my idea in Community Group.