In meinem Job als Ext JS Consultant bin ich häufig unterwegs. Während meiner Reisezeit höre ich gerne Hörbücher, von denen Spotify zum Glück, eine große Auswahl an ungekürzten Exemplaren anbietet. Ein Hörbuch-Album besteht in der Regel aus dutzenden oder sogar hunderten von Titeln.
Nach langen Arbeitstagen höre ich auch gerne mal gute Musik, um wieder runter zu kommen. Glücklicherweise gibt es bei Spotify auch davon mehr als genug und so wechsele ich einfach zu meiner Lieblings-Playlist.
Wenn ich nach dem Musikgenuss das nächste Mal in mein Hörbuch-Album wechsele, ist meine letzte Hörposition allerdings verloren und ich muss, basierend auf meiner Erinnerung, nach der richtigen Stelle suchen. Das ist so, weil Spotify keine Lesezeichen-Funktion zum Speichern der Position in den Titeln anbietet. Es ist nicht wirklich überraschend, das ich nicht der Einzige mit diesem Problem bin. Schaut man in die Spotify-Community-Foren, findet man viele Posts und Kommentare von Leuten die das gleiche Problem haben. Leider bleibt das Verlangen nach dieser Funktion, durch Spotify, schon seit über zwei Jahren ungehört.
Es ist sehr nervend und auch nicht ganz einfach jedes Mal händisch nach der richtigen Position zu suchen. Typischerweise benötigt man dafür drei Informationsbestandteile:
Im Moment sind mir drei Wege bekannt wie Spotify-Benutzer das Problem für sich lösen.
Meine Lösung basiert auf einer Ext JS Web App, welche die Spotify Web API verwendet, um auf die Informationen meiner gehörten Spotify-Titel zuzugreifen.
Name der App: «Bookmarks for Spotify»
URL der App: bookmarks-for-spotify.ws4.be
Die App besitzt folgende Features:
Meine App läuft auf einem Node.js Server. Die serverseitige Applikation liefert den Ext JS App Client aus und stellt für diesen Schnittstellen bereit, um mit der Spotify API zu kommunizieren. Die Spotify API REST Requests werden von der Node.js App ausgeführt.
Die Client App basiert mit Ext JS 6.5 auf der momentan aktuellen Version des Frameworks. Es verwendet das «modern Toolkit» und wurde generiert und gebuildet mit Sencha Cmd. Das Theme wurde mit dem Sencha Themer erstellt. Ich verwende therootcause.io für das Error Tracking. Für das Hosting habe ich ein Docker Image erstellt und lasse den Container auf sloppy.io laufen. Für den Build- und Deploy-Prozess habe ich ein Set an NPM Scripts geschrieben.
Technologie Stack:
Zu Beginn der Entwicklung habe ich mit Hilfe von Sencha Cmd einen Sencha Workspace und das Grundgerüst meiner Spotify App generiert.
sencha generate app -modern Spotify client/
sencha app watch
Hierfür sind in der app.json und der index.html Datei-Platzhalter definiert, welche während des Builds ersetzt werden.
{
...
/**
* The version of the application.
*/
"version": "@@@version@@@",
...
}
<target name="-after-init">
<!-- Script to get properties from JSON file -->
<x-script-def name="get-prop">
<attribute name="file"/>
<attribute name="query"/>
<attribute name="property"/>
<script src="${cmd.dir}/ant/JSON.js"/>
<script src="${cmd.dir}/ant/ant-util.js"/>
<![CDATA[
var fileName = attributes.get('file') + '';
var query = attributes.get('query') + '';
var property = attributes.get('property') + '';
var object = readJson(fileName);
var s;
query = query.split('.');
while (query.length) {
s = query.shift();
object = object[s];
}
project.setNewProperty(property, object);
]]>
</x-script-def>
<!-- Read values and save in vars -->
<get-prop file="../package.json" query="version" property="package_version"/>
<get-prop file="../config.json" query="therootcauseapplicationid" property="therootcauseapplicationid"/>
<get-prop file="../config.json" query="googleanalytics" property="googleanalytics"/>
<get-prop file="../config.json" query="frameworkversion" property="frameworkversion"/>
<!-- Replace placeholders -->
<replace file="app.json" token="@@@version@@@" value="${package_version}"/>
<replace file="index.html" token="@@@version@@@" value="${package_version}"/>
<replace file="index.html" token="@@@therootcauseapplicationid@@@" value="${therootcauseapplicationid}"/>
<replace file="index.html" token="@@@googleanalytics@@@" value="${googleanalytics}"/>
<replace file="index.html" token="@@@frameworkversion@@@" value="${frameworkversion}"/>
</target>
Die Ext JS App verwendet das «Modern Toolkit» und liegt in der von Sencha Cmd generierten Ordnerstruktur. Es werden das MVC und MVVM Pattern, so wie ES6 Code Style verwendet. ES6 wird ab Sencha Cmd Version 6.5 unterstützt.
Binding wird an zahlreichen Stellen im Code verwendet. Ein üblicher Anwendungsfall sind Stores. Des Weiteren wird es in Kombination mit ViewModel Formulas benutzt. Im unten stehenden Beispiel prüft eine Formula im ViewModel ob das Authentifizierungstoken gesetzt ist. Basierend auf der Information {hasToken} oder {!hasToken} werden der Login Button und die Titelliste ein oder ausgeblendet.
View: view/main/Main.js
...
items: [
{
xtype: 'spotify-login',
bind : {
hidden: '{hasToken}'
}
},
{
xtype : 'spotify-recentlyplayed',
bind : {
hidden: '{!hasToken}',
store : '{playedTracks}'
},
...
...
data: {
token: ''
},
formulas: {
// check if token is set
hasToken: function (get) {
return !(get('token') === '');
}
},
...
ViewModel: view/tracks/currenttrack/CurrentTrackModel.js
...
data : {
currentPlayback: null
},
formulas: {
// format progress ms to "00:00"
progress_ms: function (get) {
const ms = get('currentPlayback.progress_ms');
return parseInt(ms / 1000 / 60) + ":" + parseInt(ms / 1000 % 60);
},
...
ViewController: view/tracks/currenttrack/CurrentTrackController.js
...
bindings: {
onChangeToken: {
token: '{token}'
}
},
/**
* when token changes, trigger load of current playback
*
* @param data
*/
onChangeToken(data){
if (data.token) {
this.loadCurrentPlayback()
}
},
...
View: view/tracks/currenttrack/CurrentTrack.js
{
xtype: 'progress',
bind: {
value: '{currentPlayback.progress_ms / currentPlayback.item.duration_ms}',
}
}
Die App enthält zwei Titel-Listen. Eine für die Darstellung der zuletzt gespielten Titel und eine der gemerkten Titel (Lesezeichen). Das Aussehen beider ist gleich, aber die Aktionen bei Events unterscheiden sich. Aus diesem Grund gibt es eine abstrakte Basis-Klasse, welche das XTemplate enthält. Die «zuletzt gespielte Titel Liste» und «gemerkte Titel Liste» erweitern die abstrakte Liste. Die «zuletzt gespielte Titel Liste» erweitert die Funktionalität um das «Pull to Refresh»-Plugin, während die «gemerkte Titel Liste» nur einen Text ergänzt, für den Fall, dass die Liste leer bleibt. Beide Komponenten werden im Main View eingebunden und mit unterschiedlichen Event Listener verknüpft.
View: view/tracks/List.js
...
itemTpl:
'<div class="track hbox ">' +
// bookmark/ed icon -> trigger to bookmark or remove bookmark
'<div class="track-bookmark hbox cross-center main-center ">' +
// conditional bookmark icon rendering based on the bookmarked flag of the record
'<span class="icon x-fa {[values.bookmarked ? "fa-bookmark" : "fa-bookmark-o"]}" />' +
'</div>' +
// track infos
'<div class="track-info flex">' +
// date formatting
'<span class="track-played-at">{played_at:date("d.m.Y - H:i")}</span>' +
'<br /> {name} - {artist} ({progress_ms_display}/{duration_ms_display})' +
'</div>' +
// play icon -> trigger for playback
'<div class="track-play hbox cross-center main-center ">' +
'<span class="icon x-fa fa-play-circle-o" />' +
'</div>' +
'</div>'
...
getTarget() Methode des itemtap Listener Event Objekts. Sie überprüft, ob ein DOM Element mit einer bestimmten CSS Klasse getappt wurde.
ViewController: view/main/MainController.js
...
onItemTap(grid, index, target, record, e) {
if (e.getTarget('.track-bookmark')) {
// bookmark track
}
if (e.getTarget('.track-play')) {
// start playback track
}
},
...
In der App gibt es drei Komponenten, welche das Abspielen eines Titels anstoßen. Ich verwende ein eigenes Event, um die Information des zu startenden Titels über den View Controller zu verbreiten.
ViewController: view/tracks/currenttrack/CurrentTrackController.js
...
playCurrentTrack() {
const vm = this.getViewModel();
this.fireEvent('playCurrentTrack', vm.get('currentPlayback'));
}
...
ViewController: view/main/MainController.js
...
listen: {
controller: {
'*': {
bookmarkCurrentTrack: 'onBookmarkCurrentTrack',
playCurrentTrack : 'onPlayCurrentTrack'
}
}
},
...
Manche Daten der App werden persistiert, so dass sie sessionübergreifend zur Verfügung stehen. Die persönlich gespeicherten Lesezeichen der Titel gehören hierzu, denn diese möchte der Benutzer natürlich beim nächsten Öffnen oder nach einem Refresh der App wieder vorfinden. Der bookmarked Store benutzt den Localstorage Proxy, um die Daten im Localstorage des Browsers zu persistieren.
ViewModel: view/main/MainModel.js
...
bookmarked : {
autoLoad: true,
storeId : 'bookmarked',
model : 'Spotify.model.BookmarkedTrack',
proxy : {
type: 'localstorage',
id : 'bookmarked-tracks'
}
}
...
In meinen Ext-JS-Applikationen zeige ich gerne die App-Versionsnummer aus der app.json-Datei an. Ich verwende diese, um herauszufinden welche Version auf welcher Stage läuft, als Info beim Error Tracking und damit Benutzer gezieltes Feedback zu einer Version geben können. In der Bookmarks for Spotify App findet man sie im Info View. Hierfür muss man nur die Ext.manifest.version an einer beliebigen Stelle in seiner App anzeigen.
{
xtype : 'container',
html : 'App v' + Ext.manifest.version
}
Mit Sencha Themer habe ich, auf Basis des Material Design Themes, ein Ext JS Theme Package erstellt und in meiner App eingebunden.
Publish > Apply Theme to App(s)...
Ausgehend von der $base-color, wurden Farben und Größen angepasst, um ein an Spotify angelehntes Aussehen, zu erreichen. Über das Interface des Sencha Themer lassen sich die Theme-Variablen leicht anpassen, um das Theme zu individualisieren.
Für spezielles Styling, habe ich benutzerspezifische UIs angelegt. Zum Beispiel das Spotify UI, welches vom Login-Button verwendet wird. Manchmal ist es nötig, im Sencha Themer zur SASS Variable Anzeige zu wechseln, um Variablen zu ändern. Im folgenden Bild, kann man sehen, dass ich dies getan habe, um den Wert von $ui-spotify-button-padding-big zu ändern.
Im Code können diese UIs über die ui-Konfiguration verwendet werden.
{
xtype : 'button',
ui : 'spotify',
iconCls: 'x-fa fa-spotify',
text : 'Login with Spotify',
handler: 'onSpotifyLogin',
width : 280
}
Für den Spotify-Login-Button und an anderen Stellen habe ich Font-Icons verwendet. Im oben stehenden Code sieht man das iconCls
Font Awesome verwendet, um das Spotify Icon anzuzeigen. Um Font Awesome in einer App zu verwenden, muss das "font-awesome" Package in der app.json Datei „required“ werden. Auf fontawesome.io/icons/ kann man nach benötigten Icons suchen und dann den angezeigten CSS-Klassennamen mit x-fa im Code kombinieren. Beispiel:
iconCls: 'x-fa fa-spotify'
Für die von mir erstellten Komponenten gibt es extra SCSS im Theme Package. Wenn kein namespace in der package.json gesetzt wurde, kann das SCSS anlog zu Ext JS Komponenten Struktur abgelegt werden. Siehe Bild:
Das Styling der Ext-JS-Komponente für die Anzeige des aktuellen Titels mit dem Klassennamen Spotify.view.tracks.currenttrack.CurrentTrack und dem Pfad:
/bookmarks-for-spotify/client/app/view/tracks/currenttrack/CurrentTrack.js
/bookmarks-for-spotify/client/packages/local/spotify/modern/sass/src/Spotify/view/tracks/currenttrack/CurrentTrack.scss
.../view/tracks/currenttrack/CurrentTrack.js
.../view/tracks/currenttrack/CurrentTrack.scss
Hier bei der dkd haben wir komplexe Continuous Integration und Continuous Deployment Prozesse um Apps und Webseiten bis zur Produktions-Stage zu bringen. Wir verwenden hierfür Tools wie Phabricator, Jenkins und Platform.sh. Inspiriert durch diese Prozesse, war es mein Ziel einen einfachen automatisierten Weg zu haben, um meine App zu Builden, Deployen und laufen zu lassen.
Mein Prozess sieht wie folgt aus:
Zu diesem Zweck habe ich ein Set an npm Skripten erstellt, welche all dies machen und durch einen einfachen Befehl auf dem Terminal ausgeführt werden können:
APP_VERSION=2.3.0 DOMAIN=bookmarks-for-spotify.ws4.be DOCKERHUB_REPOSITORY=mrsunshine/spotify-recently-played-tracks npm run deploy:prod
Durch die Verwendung mir bekannter Frameworks und Tools konnte ich das Problem einfach und elegant lösen. Den Code der App habe ich auf Github veröffentlicht.
Ich freue mich die Bookmarks for Spotify - bookmarks-for-spotify.ws4.be App mit dir zu teilen. Ich verwende sie jeden Tag, um zwischen meinen Hörbüchern und Musik-Playlisten zu wechseln und hoffe, dass sie auch dir hilft!
