Expand my Community achievements bar.

SOLVED

Want to Integrate Spotify into my AEM site.

Avatar

Level 2

Hi All,

I want to integrate Spotify on my web page. What is the best way to do it?

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Administrator

There is no integration or connector component between these two products. You would have to create a custom AEM service and integrate with Spotify using its Rest API - which it supports. Here are community articles on how to hook a Restful service into AEM. To hook into a third-party service - you write an CQ OSGi bundle that contains operations that can invoke the third party service. In your custom OSGI service -- you can wrap a Java API that knows how to invoke operations of the third-party service. 

 

Option 1 :-

Creating Adobe Experience Manager bundles that invoke third party Restful web services

http://helpx.adobe.com/experience-manager/using/creating-cq-bundles-consume-web.html

http://helpx.adobe.com/experience-manager/using/integrating-livecycle-cq-applications.html

Spotify Web API :- https://developer.spotify.com/web-api/tutorial/

 

Create a OSGI service or Sling Servlets and write a code to send HTTP request GET/POST in it. 

Example Code :-

import org.apache.commons.httpclient.HttpClient;import org.apache.commons.httpclient.methods.PostMethod;
 
String url = "http://www.google.com";InputStream in = null;try {HttpClient client = new HttpClient();PostMethod method = new PostMethod(url);//Add any parameter if u want to send it with Post req.method.addParameter("p", "apple");int statusCode = client.executeMethod(method);if (statusCode != -1) {in = method.getResponseBodyAsStream();}


 

Option 2:-

Spotify can be programmed using JAVAScript [Spotify Widgets].

Link:- https://developer.spotify.com/technologies/widgets/

We can use Java-scripting in AEM, you can achieve the needful with the same.

Link:-  https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Link:- https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-javascript.html

 

I hope this would help you. 

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

View solution in original post

3 Replies

Avatar

Level 10

Looks like this product has a Restful API:

https://developer.spotify.com/web-api/endpoint-reference/

So basically, you would create AEM Components that use this Restful API. 

Avatar

Correct answer by
Administrator

There is no integration or connector component between these two products. You would have to create a custom AEM service and integrate with Spotify using its Rest API - which it supports. Here are community articles on how to hook a Restful service into AEM. To hook into a third-party service - you write an CQ OSGi bundle that contains operations that can invoke the third party service. In your custom OSGI service -- you can wrap a Java API that knows how to invoke operations of the third-party service. 

 

Option 1 :-

Creating Adobe Experience Manager bundles that invoke third party Restful web services

http://helpx.adobe.com/experience-manager/using/creating-cq-bundles-consume-web.html

http://helpx.adobe.com/experience-manager/using/integrating-livecycle-cq-applications.html

Spotify Web API :- https://developer.spotify.com/web-api/tutorial/

 

Create a OSGI service or Sling Servlets and write a code to send HTTP request GET/POST in it. 

Example Code :-

import org.apache.commons.httpclient.HttpClient;import org.apache.commons.httpclient.methods.PostMethod;
 
String url = "http://www.google.com";InputStream in = null;try {HttpClient client = new HttpClient();PostMethod method = new PostMethod(url);//Add any parameter if u want to send it with Post req.method.addParameter("p", "apple");int statusCode = client.executeMethod(method);if (statusCode != -1) {in = method.getResponseBodyAsStream();}


 

Option 2:-

Spotify can be programmed using JAVAScript [Spotify Widgets].

Link:- https://developer.spotify.com/technologies/widgets/

We can use Java-scripting in AEM, you can achieve the needful with the same.

Link:-  https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Link:- https://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-javascript.html

 

I hope this would help you. 

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 1

Spotify is Rest full web API. In Aem, there is two different way to consume.

1 Client site using javascript and handlebar.js

2 consume web service using java

3 Rest controller.

Using client site access token is required to consume the Spotify response. Asses token will expire after 1 hours and to get the response you have to regenerate access token and as well you have to authenticate URI that must be match to request that you have to set on Spotify application.

2. Write a component to consume a service.this will return list.

Service like this

private static final String accessToken = "BQAJYc4vWoizFY5q5r4MyDSGCGOYqyxW61PwJFxztQZjKQWCcFut_zb3BBlLIwPRwk03UD5bNS2BSNw1AjTM4zhGI8dQnhOy6YX_wB6dkb2Rqxg6k-TrxTOzP_z7YErzEYlPa_6IajvOOIzUTxdW0Hmz03zsWpd-CMKvCrVPyrP6PMGMpz-73H3QN4IoWAFh";

    private static final SpotifyApi spotifyApi = new SpotifyApi.Builder() .setAccessToken(accessToken).build();

    private static final GetListOfCurrentUsersPlaylistsRequest getListOfCurrentUsersPlaylistsRequest = spotifyApi.getListOfCurrentUsersPlaylists() .limit(10) .offset(0) .build();

@Override

public List<Spotify> playlist() {

List<Spotify> spotifyContent = getListOfCurrentUsersPlaylists();

        return spotifyContent;

}

public List<Spotify> getListOfCurrentUsersPlaylists() {

        List<Spotify> spotiFyList =  new ArrayList<Spotify>();

        try {

      

            final Paging<PlaylistSimplified> playlistSimplifiedPaging = getListOfCurrentUsersPlaylistsRequest.execute();

            Spotify spotifyObj =  new Spotify();

            PlaylistSimplified[] playlistsimplified = playlistSimplifiedPaging.getItems();

            for(PlaylistSimplified paylist : playlistsimplified) {

                spotifyObj.setId(paylist.getId());

                spotifyObj.setName(paylist.getName());

                String playListName = paylist.getName();

                String playId = paylist.getId();

                Image[] playListImages = paylist.getImages();

                for(Image img : playListImages) {

                    String imgUrl =  "";

                        imgUrl =  img.getUrl();

               

                }

                spotiFyList.add(spotifyObj);

            }

        } catch ( SpotifyWebApiException |IOException e) {

         ;;;;;;;;;;;;;;;;;;

        }

     

        return spotiFyList;

    }