At the beginning of this year, my team and I decided to embrace a new challenge: build a music app using OutSystems. We call it Hi Music. This idea is part of some public initiatives that my Front-End team came up with to prove the unlimited applications of OutSystems low-code. For those who use OutSystems but feel that some things are impossible to do with it, we have to say: Sorry, they are wrong! Let us explain why we are so assertive in saying this! We will use the Hi Music developing process we’ve worked on to show the low-code platform technical and unlimited features. But to do so, we needed a real based-life example. We choose the music platform of the moment, Spotify.
The latest OutSystems Platform version already uses client-side rendering with Virtual DOM (based on React), and it gave us an infinity of opportunities to be creative!
%20(1).png)
The challenge of Building Hi Music with OutSystems
In this challenge of building the Hi Music app with OutSystems, my team decided to follow as a guideline one of the most used applications nowadays, the Spotify!
The main difference between creating Hi Music and another app using OutSystems was the context. Hi Music wasn’t built as a typical enterprise application developed using the OutSystems low-code technology. And this gave us enough functionality challenges to exceed its limits!
So let's start from the beginning of the Hi Music developing process.
The Deliverables Documentation
First, we created the deliverables documentation with the necessary elements of what would be implemented to build the Hi Music App with OutSystems.
The creation of the deliverables makes part of our developing common process. It helps us and the stakeholders be connected with the future app that will be delivered.
Usually, we find the deliverables a great tool to manage expectations.
You can find the used deliverables document here.
Developed features resume
The main features, in order to have a brief contextualization of what makes the application that was developed and that can be compared with what exists on Spotify are:
- Music player with typical features as music detail, controls and audio volume;
- Login with personal account experience;
- Create and manage our own playlists based available music;
- Save our favourites music;
- Search for music;
- Pre displayed playlists;
- List with the next music will be played;
From this point forward it begins the real Hi Music app building process using OutSystems low-code.
The Start of development Music App With Outsystems
To start we organized a brainstorming group of developers on a Friday night, in a live conference, and recorded it for future insights. The ideas popped-up like bubbles! Then we funnel them. And, finally, we came to an agreement on what could truly engage us as OutSystems platform experts.
You can find the resume video of our amazing meeting about the creation of Hi Music app with OutSystems on our Youtube channel.
The biggest challenge
Our biggest technical challenge in the Hi Music app development with OutSystems was: how to create a player and, at the same time, manage to play a song with multiple screens and lists?
One of the most relevant features of Spotify we’re the ones we find more difficult for us to develop. But with tenacity and creativity, we manage it! And we’re able to implement the feature that allows us to see the music that is playing identified in the middle of any list, liked songs, search results, or playlists.
To overcome the challenge and manage audio we used a javascript library called howler.js. That let us not only set up access to html5 audio, as well as controlling it, and also implementing the traits that we wanted to.
On the other hand, the audio object was managed by an OutSystems local variable type object. That OutSystems feature allowed us to share the object between the different actions.
The Team behind
Working in the development of the Hi Music app with OutSystems, just reinforced in our developer team's mindset the benefits of that amazing and unlimited low-code platform:
- gave us the agility to work easier, faster, and with coherency
- turned possible having 5 developers working at the same time
- develop the project without spending to much time in management
This project was really innovative because working on Hi Music led us to explore the best of our OutSystems' experts! Not only it pushed forward or Front-end knowledge on the low-code platform, but it also made some of us reuse some previous backend development experience in other technologies. In the end, we saw our developers' know-how grow!
The Effort
In the initial moment on the creation of the Hi Music app with OutSystems, we spend about 25 hours for:
- making the back-office to manage playlists and music
- doing the database architecture
- and shaping the end-user screens navigation.
After that, we invested some of our team's Friday free time to finish implementations and improve the high-quality interface.
In sum, the effort came around to:
- 160 hours for development,
- and 60 hours for management, quality, and sample data.
It was worthwhile!
The Live Experience
.png)
Why make a music app with OutSystems and keep it for ourselves?
Obviously not!
Today we're proud to share our live Hi Music app with everyone else, such as yourself!
Please keep in mind that this is a music app concept made with OutSystems low-code! The first of its kind! Therefore you may find some songs missing and other smaller issues. And most probably, you won't have the entire experience as the one you're used to in the Spotify app.
Also, please notice that the pieces of music available in our Hi Music app are 30 seconds samples with low quality, only to demonstrate the app functionalities. By the way, the musical preferences may not be consensual.
Ready to take the Hi Music app experience? Just click this link!
Resuming the Hi Music app with OutSystems
As a team leader, I feel honored to participate in the Hi Music app with the OutSystems project. It was a challenging one. No doubt! Great Front-end work and amazing experience using that unlimited low-code platform. We start with the idea that it would be hard to deliver software with great UX, especially using a business-oriented low-code platform such as OutSystems, and we figure out that it's not true!
We can see this project as an example that we can use something that already exists and has already been tested and improved to reduce work effort in terms of UX and UI design. On the other hand, this project gave us a true sense of the no limits of low-code in terms of Front-end development.
In the present day, we know the experience that we deliver to the users is more important than ever! Hence, we are certain that the Hi Music app needs more time to improve its design experience and create the best possible experiences.
And low-code, especially OutSystems, gives us the time we need by reducing the development effort and sharing it to design the experience.
Thanks
If you are an OutSystems developer or simply believe on the platform, please share the article and help us promote the OutSystems with no limits.
.png){kind=small}
.png){kind=small}
