SAP Community Code Challenge

The change log describes notable changes in this package.

Description

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

Challenges

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.

Run the Project Locally

1. Ensure that you have Node.js ver 12, 14 or 16 installed locally.

2. Clone this repository

3. 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.

4. Once all dependencies are installed, issue the command npm start from the terminal. This will start a local web server. You can test the application locally via the url: http://localhost:4000/profilepic/

5. [Optional]: If you plan to make changes to the project code, there is a command npm run dev that 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.

Run the Project on the SAP Business Application Studio

1. 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.

2. Clone this repository into the workspace.

3. 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.

4. Once all dependencies are installed, issue the command npm start from the terminal. This will start a local web server. You can test the application locally by using the "Expose and Open" button

5. [Optional]: If you plan to make changes to the project code, there is a command npm run dev that 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.

Run the Project in a Dev Container or Codespaces

1. From GitHub choose the option to create a new codespace.

2. 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.

3. 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.

4. Once all dependencies are installed, issue the command npm start from the terminal. This will start a local web server. You can test the application locally by using the "Open in Browser" button

5. [Optional]: If you plan to make changes to the project code, there is a command npm run dev that 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.

Learn about SVG - Change the Enhancement

Create your own profile enhancement. Maybe instead of a border it adds your profile name, badges, etc.

Port the Whole Project to Another Programming Language

Try and port the whole project to another programming language. I'm sure we will let lots of people converting it to ABAP.

Multiple Image Enhancement Options in the UI

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.

Requirements

Node.js version 12.x, 14.x, or 16.x https://nodejs.org/en/download/

Download and Installation

See Challenges

Known Issues

None

How to obtain support

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.

Contributing

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.

License

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.