3

Let’s Play some Music – Music Player with AppGyver – No Code Challenge

 1 year ago
source link: https://blogs.sap.com/2022/06/06/lets-play-some-music-music-player-with-appgyver-no-code-challenge/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
June 6, 2022 4 minute read

Let’s Play some Music – Music Player with AppGyver – No Code Challenge

We are living in the exciting time of technology evolution with technology changing with a pace never seen before. Lot of buzzing words be it Machine Learning, AI, Blockchain, IOT, Cloud , Data Science & Analytics and the list never ends…

And the latest in the list is Low-Code/ No-Code which is raising eyebrows. We are heading to the time when we will be configuring solutions rather then building them and we have already stepped into the era with all these No-Code/Low-Code solutions.

Purpose

Since I have heard about the SAP’s AppGyver Low-Code/No Code platform , i wanted to know more about it and try it out. I attended some sessions, reading blogs from the community friends and  also  started exploring it  at the same time

In this blog i will share some of my learnings and experience of using SAP AppGyver.

My App

I wanted to try out something different then usual work stuff and looked at different wonderful ideas people came up with and build solutions using AppGyver.

So My App is called “Music Player”. This app will play the source audio file with features like:

  • Play/Pause,
  • Stop,
  • Rewind by 10 secs
  • Show the current audio time / full audio time.

https://mymusicplayer.appgyverapp.com/

(Note: It will preload the audio before we could play. so give few secs and once you see the full audio time , you could play it)
1-52.png

Check out the App demo below

My Learnings

The initial impression of AppGyver on me is “Smooth”. I really found it very easy to use and understand. User interface is also very cool and is mostly self explanatory with lot of help documents to make your journey smoother.

Lets talk about few learnings from the app I build.

Flow Function / Component Marketplace

For this app I had to handle the functionalities like loading the audio file from source location, Starting and stopping the audio file on press of Play/Pause button, Seek control and all the audio control features. And the beauty was, i had to write no code for this, I literally installed all the flow functions from the flow function marketplace.

Similarly, you could find the required component in the Component marketplace , install and use in your app.

4-8.png

Stitching the Flow functions together

I got all the individual flow functions from the marketplace but still i had to weave them to build my logic. And again i found it supper easy to link the flow functions in the logic section of the component. I was able to drag and drop the required flow function and connect the output of one flow functions to the input of other and control the flow of my logic

3-9.png

Formula function

It is always not possible to get the desired values as output of the provided flow functions and we need out own logic to derive the desired result and that is where the formula function is very handy. It a very easy to use as well as it comes with the code completion support. As i start typing it shows you the code system for all the possible elements you could pick from.

In this case , I used formula to 

  • Check the audio status ( stopped/ paused) to resume/ pause audio on click of the respective button.
  • I also used the Formula to rewind the audio by 10 seconds by subtracting 10 seconds from the current audio time.
5-9.png
6-10.png

Variables

How could we miss the variables in any solution, as they are the key to connect one logic to the other. AppGyver provides different variable types like App variable, Page variable, page parameters and Data variables and it is very easy to create them and use them across navigations.

In this app , I created three page variable to hold on to the values I fetched from the flow functions as I had to use them in my UI.

7-8.png

Styling and Layout

Styling and Layout is import aspect for any UI. AppGyver has fully considered it in its features. It provides all the features to style the UI and make it look cool and as per the requirement be it Fonts, Margins , Width and height of the components , Icons , Colors and what not..

In my app , i used styling to select the color and fonts of the icons i used and layout to position them as required. I found it very easy to do all the  via the styling and layout property controls.

Conclusion:

I found AppGyver a very easy to use and powerful Low-Code/No-Code tool with lot of powerful features and functionalities to offer.

Note: In this demo app, i just used single audio file as source. We could create a playlist with link to the individual audio file and on selection of the individual track we could load the respective audio file.

Keep Learning & Keep Sharing!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK