Spotify-integraatio Peps-mobiilisovellukseen

Abstract

Tämän insinöörityön tarkoitus on tutkia ja vertailla mahdollisia Spotify-integraation ratkaisuvaihtoehtoja React Nativella kehitetyn mobiilisovelluksen sekä React-pohjaisen verkkosovelluksen yhdistelmään, joiden välissä käytetään Firebase-palvelua. Tarkoitus on myös toteuttaa mahdollinen integraatio sovelluksiin sekä avata eri vaiheita, joita se sisältää. Toteutus viedään läpi tekemällä muutoksia lähdekoodeihin ja lisäämällä tarvittaessa riippuvuuksia sekä rakenteita olemassa oleviin palveluihin. Tarkoituksena on myös luoda sovellusten ja palveluiden ulkopuoliset riippuvuudet.

Työssä pyritään vastaamaan kysymykseen, onko React Native -sovelluksen mahdollista luoda luotettava yhteys Spotify-sovellukseen ja onko yhteydellä mahdollista luoda vaaditut lisätoiminnallisuudet luotettavasti React Native -sovelluksen kautta myös verkkosovellukseen. Vaikka tavoiteltu luotettava lisätoiminnallisuus onnistutaan toteuttamaan integraation myötä, päädytään vielä toistaiseksi vastaamaan kysymykseen kielteisesti johtuen Spotify SDK:n iOS-version sisäisestä ongelmasta.

Työ alkaa esittelyillä, joista siirrytään tarkastelemaan tarkemmin sovellusten, palveluiden ja ratkaisuvaihtoehtojen tekniikoita sekä rakenteita. Vaatimukset käydään tämän jälkeen tarkemmin läpi, jonka jälkeen vertaillaan ja pohditaan, miten olennaisimmat toiminnallisuudet toteutettaisiin ratkaisuvaihtoehdoilla. Vertailua seuraa ratkaisun perusteltu valinta ja suunnitelman luonti. Ratkaisuksi päätyy yhdistelmä Spotify Web API:tä ja Spotify SDK:ta.

Suunnitelman toteutuksessa näytetään vain integraatioon liittyvät sovelluksien lähdekoodeihin tehdyt muutokset ja tuloksissa näytetään muutoksien myötä toteutunut visuaalinen sekä toiminnallinen muutos. Toteutuksen pääosaksi päätyy React Native -sovellukseen tehtävä kontrolleriluokka, joka Spotify SDK:n funktionaalisuutta hyödyntäen hoitaa kaksisuuntaisen tiedonkulun Spotify-sovelluksesta verkkosovellukseen. Lopuksi todetaan myös React Native -sovelluksen muuttuneen ns. aktiiviseksi adapteriksi Spotify-sovelluksen ja verkkosovelluksen väliin.

The purpose of this thesis is to study and compare possible Spotify integration solution options for a combination of a mobile application developed with React Native and a React-based web application, where Firebase service is used in between. It is also intended to implement the possible integration into the applications as well as open the various steps it contains. The implementation will be carried out by making changes to the source codes and, if necessary, adding dependencies and structures to existing services. The aim is also to create dependencies outside the applications and services.

This thesis aims to answer the question whether it is possible for a React Native application to establish a reliable connection to the Spotify application and whether it is possible to reliably create the required additional functionalities to the web application through the React Native application. Although the desired reliable additional functionality will be achieved with the integration, for the time being, we will end up answering the question in the negative, due to an internal problem with the iOS version of Spotify SDK.

The work begins with presentations, from which we move on to take a closer look at the technologies and structures of the applications, services and solution options. The requirements are then examined in more detail, followed by a comparison and consideration of how the most essential functionalities would be implemented with the solution options. The comparison is followed by a justified choice of solution and the creation of a plan. The solution will be a combination of the Spotify Web API and the Spotify SDK.

In the implementation of the plan, only the changes made to the application source codes related to the integration are shown, and the results show the visual and functional change that has taken place as a result of the changes made. The main part of the implementation ends up with the creation of a controller class for the React Native application, which utilizes the functionality of the Spotify SDK to handle the two-way flow of information from the Spotify application to the web application. Finally, it is also noted that the React Native application has evolved into a so-called active adapter between the Spotify application and the web application.