In the last lesson, we heard a lot about citizen developer hackathons from different experts at SAP who have been involved in organizing these events. You can probably imagine now what an epic task it is to organize an event of that scale. And if you are tackling a more complex challenge, there is definitely a place for hackathons for low-code / no-code, especially in collaboration with SAP through programs like Hack2Build.
However, in this lesson, we’ll introduce you to a smaller-scale, yet equally valuable version of the hackathon, which is a low-code/no-code appathon. You, as a citizen developer and new solution expert, could follow this example to help your teams get their first experience with LCNC in a fast and simple way.
You can use what you learned about one of the products from this learning journey – SAP AppGyver, SAP Process Automation and SAP Work Zone – and coach them through how to build their own solution.
For example, in my team at SAP, we ran our own appathon using SAP AppGyver a few months ago and it was great – we planned, developed and designed our own weather apps together in just a few hours! You can see our happy faces and the apps we made.
You can easily do this too, so let’s dive into how.
What is a low-code/no-code appathon?
A low-code/no-code appathon is a product enablement session that guides participants through a particular tool to create a working app or automation.
This is different from a traditional hackathon in the sense that there isn’t so much a competitive aspect and there isn’t any coding, although you can of course tailor the workshop to fit your own goals.
However, the essence of hackathons that make them so popular is that they’re a more fun and engaging way to learn the tools. This is exactly what you want to achieve with a low-code/no-code appathon. This makes an appathon the perfect introduction for non-technical teams to start with the relevant systems.
A successful appathon will include the following:
- A group of colleagues that is motivated to learn about new technologies.
- Guidance from at least one expert in the tooling – ideally, they will also prepare and share the pre-reading and setup instructions.
- Extended use of a low-code/no-code tool by every participant.
- A clearly defined outcome that will be reached by the end.
- A collaborative and supportive atmosphere.
As I mentioned in the introduction, in our own product communications team at SAP, we participated in a three hour no-code appathon using SAP AppGyver. In the next lesson, you’ll hear from Kanishka Raghuraman and Akseli Virtanen about how they prepared this session and what their main goals were.
Hosting an Appathon for an SAP Product Communications Team
In early 2022, our team of product enablement and communications professionals spread out across three countries participated in our first no-code appathon. For many of the team, it was the first time working with extensively with SAP AppGyver. In this lesson, we’ll look at how the event was structured, so that you can use this as a basis for organizing your own appathon, and you’ll also meet the organizers of our event in a Hear from the Experts clip.
As you might expect, when we were getting started, our organizers needed to figure out what resources were required to run the event. This is what they came up with:
- Solution expert colleague(s) to be the organizer and host.
- Pre-reading materials and exercise.
- Virtual setup with about 10 colleagues, including two moderators.
- SAP AppGyver
- OpenWeatherMap API
Pre-Event Participant Preparation
Prior to the event, one of the organizers sent out an email with the "prerequisites" and instructions we needed to set up SAP AppGyver and do a simple test. Everyone showed up ready to go, so this ensured that the time we planned for the appathon was fully dedicated to building and not delayed due to technical issues. You can see the example of this email below:
Hello future Citizen Developers,
Tomorrow is our Hackathon day!!
We will be building an application during this event.
Please make sure your AppGyver accounts are setup.
In this email, we will see how to set up Appgyver and do a small exercise to get warmed up.
Go to AppGyver - Composer Pro to sign up to the platform, If you are registered already sign in to the platform.
Once you sign in, you can see the project plane. Create a New Project. And let’s call it "Hello World".
On the left of the composer plane, we can see the component library with which UI can be designed.
Click on the launch on the top of the composer plane, you can download the Appgyver preview app for your mobile phone.
Or you can simply search for SAP AppGyver Preview on your respective Appstore.
Now, open the app and click on Scan QR code and Scan the QR code shown on your Launch tab.
Voila! Your Appgyver setup is complete!!
Now let us do a simple exercise:
From the component library, drag and drop the button to the canvas.
On the right side of the Composer, we can see the properties of the button.
The text on the button can be changed in Label under properties.
Click on the grey bar below to open the logic window.
Drag and drop the Toast component from the Logic component library.
On the right side of the Composer Plane, we can see the properties of the "Toast component".
In the message box type Hello World
Now connect the Component tapand Toast.
Click on Save on the top right corner.
Now open SAP AppGyver Preview App on your mobile phone and select the app you created.
Tap on the button and you can see your app Responding to you!!
Congratulations on successfully completing this exercise.
Hope this exercise was not too complex. You can contact me if you have any questions or problem setting up the Appgyver or regarding the exercise.
Participants were given three hours to complete all the steps. They were guided step-by-step, beginning with the API documentation in order to understand which parts of it we would be using. After that, participants set up the API as a data resource within SAP AppGyver. The team also applied logic flows to trigger the app’s events, and finally spent time adding custom UI and formulas to manipulate their app displays based on their own individual requirements.
Here is the agenda that was defined:
|09:00 – 09:20||Agenda review and icebreaker|
|09:20 – 09:30||Pre-reading discussion and setup check|
|09:30 –10:15||Set up Data Connection (API Integration)|
|10:15 – 11:00||Define Customer Logic Flows|
|11:00 – 11:45||Design UI Components|
|11:45 – 12:00||Show final apps, team pictures, social media sharing|
The participants gained hands on experience building with SAP AppGyver, starting the first step in their journey of becoming citizen developers. The following low-code/no-code concepts were put into practice: process and views mapping, REST API integration, data variables, bindings, formula functions, UI components, custom logic flows, and theme design.
- All participants were able to quickly get started because they had completed the pre-reading and setup in advance.
- The two moderators were easily able to get the entire group to build-along at roughly the same pace, while simultaneously answering questions from individuals so that the whole group could benefit from the answers.
- Every participant had their own working weather app by the end, which we tested out through the SAP AppGyver Preview app on our own devices.
- Those who went through all the steps more quickly had extra time to further customize their apps with design and styling elements.
- While the steps to create the app were the same for all, each participant’s own app was different, owing to separate locations, and individual preferences about layout, colors, etc.
In this next video, hear from the Experts, let’s meet the two no-code pros who put this session together:
- Kanishka Raghuraman, SAP LCNC Product Enablement and Communications
- Akseli Virtanen, SAP AppGyver Head of Developer Inspiration
Here’s a sneak peek at what they’ll share:
"Hackathons are usually organized for professional developers to get creative in building solutions. Our appathon’s aim is to transform non-developers into citizen developers who will be able to build logic and create solutions, and solve problems by themselves."
[It] is very important, when designing a hackathon, [to think] about how it will make the participants feel. What are the points of success and how much can they struggle before they start to feel that it’s no longer fun?"
Takeaways from the Low-Code/No-Code Appathon
We had a look at the low-code/no-code appathon and how it was structured for our own product communications team at SAP. We also heard from experts Kanishka and Akseli about the point of an appathon, and why it has value when compared to a full-fledged hackathon. After completing this exercise, there were some standout learnings, especially when it came to challenges around SAP AppGyver.
Here are some key takeaways from the low-code/no-code appathon:
- SAP AppGyver is a no-code tool, but it requires patience to learn at first, especially if you have not done any software development in the past – an appathon is a great way to get started with this and benefit from peer-support.
- Certain aspects of app development proved challenging for participants to get the hang of, especially when it came to working with APIs, data resources, and bindings – so it’s important that one of your moderators can explain these technical topics in a simple way.
- Having two experts participate was very useful for moving the progress of the whole team forward in parallel.
While it was a challenging session, we had a lot of fun, and in the end every single participant had the same, proud "aha" moment when they saw their weather apps working on their phones – and they built it themselves within only three hours! This feeling of accomplishment is exactly what you want to reach by the end of your appathon, and with SAP’s new low-code/no-code tools, it’s now more possible than it’s ever been before.
In the next lesson, we’ll get into planning mode for your own low-code/no-code appathon.