Met Angular kun je alles! Zelfs Spotify namaken. In deze blog maken we een eerste opzet.
Angular is een heeeerlijk framework uit de koker van Google. Het is als het ware een springplank om zelf de frontend van een web applicatie mee te bouwen. We hebben dit trouwens ook gebruikt om SnelStart Web mee te maken. Wil je een beetje ervaren hoe we dit gedaan hebben? Lees dan verder.
Sinds september 2017 zijn we overgestapt van AngularJS (a.k.a. Angular 1) naar het nieuwste van het nieuwste, namelijk Angular (zonder JS erachter a.k.a. Angular 2 a.k.a. ng2 a.k.a. ngx, ehh…). In deze nieuwe versie van Angular zitten heel veel gave dingen waardoor de performance van de applicatie nog beter is geworden. Dit heeft vooral te maken met de nieuwe manier van change detection. Change detection klinkt cool en dat is het ook, maar we gaan er in deze blog nog even niet verder op in. Volgende keer okay?
Er zitten in de nieuwe versie van Angular ook veel verbeteringen die het leven van een ontwikkelaar een stuk aangenamer maakt. Eén van die dingen is de Angular CLI. Zo moest je in de vorige versie van Angular zelf de infrastructuur verzorgen voor zaken zoals package management, compileren, bundelen en testen. Nu legt Angular met de Angular CLI een standaard voor je neer. Dat scheelt heel veel werk in de startfase van een project. Ik wil je graag laten zien hoe makkelijk dit is geworden door samen met jou een brand new Angular project op te zetten!
Wat is dan een leuk onderwerp voor een nieuw Angular project? Het allerleukste en allicht ook de grootste kracht van Angular, is communiceren met andere systemen over "het internet". Die andere systemen worden in de ontwikkelwereld liefkozend API genoemd.
Er zijn talloze toffe publieke API’s die je zou kunnen gebruiken voor je eigen experimenten. Eéntje die ik zelf als muziekliefhebber extra interessant vind is dus de API van Spotify. Laten we eens kijken wat we hiermee uit kunnen spoken!
Het werkt inderdaad, maar het is nog niet zo stylish… Daar brengen we in een volgende blog verandering in, okay? Laten we eerst maar eens iets met onze vriend Spotify doen!
Neem eens een kijkje op https://developer.spotify.com/web-api/. Hier staat een schat aan informatie over wat je allemaal met de API van Spotify kunt doen. Ook belangrijk is de Terms of Use, in het geval je het “experimenteer-stadium” ontgroeit.
Wij gaan nu onze applicatie aanmelden bij Spotify zodat we van hun API gebruik kunnen maken. Na het aanmelden krijgen we van Spotify een Client ID toegewezen. Met dit Client ID kunnen we namens een Spotify gebruiker onze applicatie autoriseren zodat we gegevens bij Spotify kunnen opvragen.
Er zijn verschillende manieren (flows) van autoriseren bij Spotify, je kunt ze hier nalezen: https://developer.spotify.com/web-api/authorization-guide/. Wij gaan de Implicit Grant Flow gebruiken. Dit is niet de ideale flow, maar wij hebben hier te maken met een client side applicatie waarvoor dit de enige door Spotify toegelaten flow is. Je wilt Spotify wel te vriend houden toch?
Voordat we daadwerkelijk data kunnen ophalen via de Spotify API, moeten we een Spotify gebruiker laten inloggen vanuit onze applicatie. Daarom maken we eerst een lekker simpele knop waarop staat “Verbind met Spotify” die deze eerste stap gaat regelen.
<button (click)="connectSpotify()">Verbind met Spotify</button>
connectSpotify() { const clientId = "jouwClientID"; location.href = "https://accounts.spotify.com/authorize?response_type=token&redirect_uri=http://localhost:4200&client_id=" + clientId; }
Wanneer je vervolgens inlogt krijg je nog een extra scherm om de koppeling te bevestigen en kom je uiteindelijk terug in onze eigen applicatie. Als je goed naar de URI in de browser kijkt zie je dat http://localhost:4200 nu gevolgd wordt door #access_token=……. en daarna nog twee parameters, te weten token_type en expires_in. De access_token parameter hebben we nodig om data op te kunnen halen bij Spotify, namens deze gebruiker.
Nu is eindelijk het heuglijke moment aangebroken dat we echt gegevens kunnen ophalen bij Spotify! Overigens kunnen we ook gegevens ópslaan in het account van de gebruiker, zoals playlists, maar in deze blog gaan we alleen nog even wat ophalen.
Leuk om eerst eens te proberen is de ingelogde gebruiker laten zien, inclusief zijn of haar afbeelding. Om dit voor elkaar te krijgen moeten we het access_token opvangen en deze doorgeven als Authorization request header bij het aanroepen van het Spotify API endpoint om de huidige gebruiker op te vragen, zie: https://developer.spotify.com/web-api/get-current-users-profile/. Klinkt als een goed plan.
ngOnInit() { this.route.fragment.subscribe((fragment: string) => { if (fragment.startsWith("access_token=")) { let fragmentJson = this.getJsonFromFragmentParams(fragment); this.accessToken = fragmentJson.access_token; } }) }
getUserData() { let options: RequestOptionsArgs = { headers: new Headers({ "Authorization": "Bearer " + this.accessToken, }) }; this.http.get("https://api.spotify.com/v1/me", options) .map((resp) => resp.json()) .subscribe((me: any) => { this.name = me.display_name; this.imgSrc = me.images[0].url; }); }
<button *ngIf="!isConnectedToSpotify()" (click)="connectSpotify()">Verbind met Spotify</button> <ng-container *ngIf="isConnectedToSpotify()"> <div><img [src]="imgSrc"/></div> {{ name }} </ng-container>
Hmm, wat kunnen we nog meer doen? Misschien één van de basisfuncties van Spotify: zoeken naar muziek! Laten we eens proberen hoe ver we komen met zoeken naar een artiest. Het zoeken kan met het volgende API endpoint van Spotify: https://developer.spotify.com/web-api/search-item/.
Als je goed oplet, kun je in dit voorbeeld de kracht van de RxJS voelen. RxJS is naast de Angular CLI één van de twee gaafste dingen die in de nieuwe Angular beschikbaar zijn gekomen. Komt ie.
search(searchTerm: string): Observable<any> { return this.http.get("https://api.spotify.com/v1/search?type=artist&q=" + searchTerm, this.getRequestionOptions()) .map((resp) => resp.json().artists.items); }
triggerSearch(searchTerm: string) { this.searchTerms.next(searchTerm); }
this.artists = this.searchTerms .debounceTime(300) .distinctUntilChanged() .switchMap(searchTerm => this.search(searchTerm));
<hr /> <input #searchBox (keyup)="triggerSearch(searchBox.value)" /> <div> <div *ngFor="let artist of artists | async"> {{ artist.name }} </div> </div>
Bij SnelStart bouwen we applicaties met Angular als frontend. We koppelen Angular net als je hier ziet aan API’s, in dat geval API’s die we zelf maken met het .NET Framework. We hosten alles op het cloud platform Azure. Kortom: we zijn continue bezig met de nieuwste technieken. Doe jij mee?