The change log describes notable changes in this package.
SAP Community Code Challenge: This repository is a template project/solution showing how to enhance your SAP Community profile picture with a new border.
Some of the technology contained within this project:
- Node.js
- SAPUI5 Image Editor Control
- Sharp - High performance Node.js image processing
- SVG Scalable Vector Graphics
Although this project is a complete code sample, it's really only intended to be the starting point. It's part of a code challenge; which means have some fun and learn at the same time. For the full details on the Code Challenge please see this SAP Community Discussion Thread. But let's detail right here some of the possible challenges you might undertake using this starting point.
The whole project can run locally. It's a SAPUI5 app where you start by uploading the base picture you want. You can do some editing on it. Then you set it to a circular crop (since that's is what the SAP Community profile pic requires). When you press enhance picture it's uploaded to the "server" there we apply the border. Then you can save the final file (or edit if further if you want). Upon save it automatically opens your SAP Community Profile in another browser tab. There you can upload your newly enhanced profile picture. Now that you understand what the code sample does; here are the challenges.
-
Ensure that you have Node.js ver 12, 14 or 16 installed locally.
-
From the root of the project in a terminal issue the command
npm install. This will install all project dependencies into the /node_modules folder.
-
Once all dependencies are installed, issue the command
npm startfrom the terminal. This will start a local web server. You can test the application locally via the url: http://localhost:4000/profilepic/
-
[Optional]: If you plan to make changes to the project code, there is a command
npm run devthat you can use for testing. This command will automatically restart the server with each code change you make. This can be quite convenient when making frequent changes and constantly retesting.
-
Create or reuse an SAP Business Application Studio Dev Space of type "Full Stack Cloud Development". This will ensure that you have the correct Node.js runtime already installed into the development environment.
-
Clone this repository into the workspace.
-
From the root of the project in a terminal issue the command
npm install. This will install all project dependencies into the /node_modules folder.
-
Once all dependencies are installed, issue the command
npm startfrom the terminal. This will start a local web server. You can test the application locally by using the "Expose and Open" button
-
[Optional]: If you plan to make changes to the project code, there is a command
npm run devthat you can use for testing. This command will automatically restart the server with each code change you make. This can be quite convenient when making frequent changes and constantly retesting.
-
From GitHub choose the option to create a new codespace.
-
You can then use this codespace from the browser or open it remotely in your locally VSCode installation. The codespace will be pre-configured with the correct Node.js runtime and already has the project cloned into it.
-
From the root of the project in a terminal issue the command
npm install. This will install all project dependencies into the /node_modules folder.
-
Once all dependencies are installed, issue the command
npm startfrom the terminal. This will start a local web server. You can test the application locally by using the "Open in Browser" button
-
[Optional]: If you plan to make changes to the project code, there is a command
npm run devthat you can use for testing. This command will automatically restart the server with each code change you make. This can be quite convenient when making frequent changes and constantly retesting.
Create your own profile enhancement. Maybe instead of a border it adds your profile name, badges, etc.
Try and port the whole project to another programming language. I'm sure we will let lots of people converting it to ABAP.
Extend the app to offer multiple server side enhancements but then extend the SAPUI5 frontend to allow the end user to choose the enhancement type. The trick there is sending the choice along with the upload (it can be done but its tricky). That challenge would be focused on UI5 skills.
Node.js version 12.x, 14.x, or 16.x https://nodejs.org/en/download/
See Challenges
None
Create an issue in this repository if you find a bug or have questions about the content.
For additional support, ask a question in SAP Community.
If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.
Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.