SoundCloud verwendet Jetpack Glance, um das Widget „Liked Tracks“ in nur zwei Wochen zu erstellen

Um das Musikhören auf Android noch einfacher zu machen, haben die Entwickler von SoundCloud, einer Musikplattform, bei der die Künstler im Mittelpunkt stehen, mit Jetpack Glance ein Widget für „Gelikete Titel“ für ihre App erstellt.Die App hat eine Bewertung von 4,6 Sternen und wurde über 100 Millionen Mal heruntergeladen. Mit einem Katalog von über 400 Millionen Titeln von mehr als 40 Millionen Creatorn hat sich SoundCloud zum Ziel gesetzt, Künstler und Fans durch Musik zu verbinden. Das neueste Update der Android-App bietet Hörern eine noch bequemere Möglichkeit, ihre Lieblingstitel zu genießen. Dank Glance konnte das Team das Projekt in nur zwei Wochen abschließen, was wertvolle Entwicklungszeit sparte und die Interaktion steigerte.

Sichtbarkeit mit nutzerfreundlichen Touchpoints maximieren

Das neue Widget „Titel, die ich mag“ zeigt die Cover der zuletzt mit „Mag ich“ bewerteten Titel an. Nutzer können so direkt von ihrem Startbildschirm aus zu einem bestimmten Song springen oder auf ihre vollständige Titelliste zugreifen. So bleibt SoundCloud für die Hörer im Blickfeld, dient als Verknüpfung zu ihren persönlichen Mediatheken und regt sie dazu an, wieder reinzuhören.

„Liked Tracks“ ist nicht das erste Widget von SoundCloud. Vor über einem Jahrzehnt haben die Entwickler von SoundCloud mit RemoteViews ein Player-Widget erstellt, mit dem Nutzer die Wiedergabe einfach steuern und Titel liken konnten. Nachdem das Player-Widget vor Kurzem basierend auf Designfeedback aktualisiert wurde, haben die Entwickler eine personalisierte Oberfläche für „Songs, die ich mag“ priorisiert. Das neue Widget bietet sowohl einen hellen als auch einen dunklen Modus, lässt sich beliebig an die Vorlieben der Nutzer anpassen und passt sein Design dynamisch an den Hintergrund des Nutzers an. Dank Glance ist das Widget nicht nur einfach zu bedienen, sondern auch ein ansprechendes und maßgeschneidertes Gateway zur SoundCloud-App.

Entwicklungszyklen mit Glance beschleunigen

Glance spielte auch eine entscheidende Rolle bei der Optimierung der Entwicklung von „Liked Tracks“. Entwickler, die bereits mit Compose vertraut waren, fanden das intuitive Design von Glance vertraut, was die Lernkurve minimierte und das Onboarding des Teams beschleunigte. Die Sammlung von Codebeispielen auf der Plattform war ebenfalls ein nützlicher Ausgangspunkt, um die Funktionen und Best Practices schnell zu verstehen. „Beispiel-App-Repositories sind eine gute Möglichkeit, zu lernen. Ich kann ein ganzes Repository auschecken und mir ansehen, wie der Code funktioniert“, so Sigute Kateivaite, Lead SoundCloud Engineer im Android-Team. „Die Entwicklung unserer Widgets wurde dadurch erheblich beschleunigt.“

Die deklarative Natur der Glance-Benutzeroberfläche war für Entwickler besonders vorteilhaft. Da sie beim Erstellen keine zusätzlichen XML-Dateien verwenden mussten, konnten Entwickler saubereren, besser lesbaren Code mit weniger Boilerplate-Code erstellen. Mit Glance konnten sie auch separat mit Modulen arbeiten. Das bedeutet, dass Komponenten einzeln geschrieben und integriert und für spätere Iterationen wiederverwendet werden konnten. Durch die Isolierung von Komponenten konnten Entwickler Module schnell testen, Probleme identifizieren und beheben und für verschiedene Zustände ohne Duplizierung entwickeln, was zu effizienteren Workflows führte.

Das Design von Glance verbesserte auch die allgemeine Codequalität. Dank der Unterstützung von Android Studio für die Echtzeitvorschau von Glance konnten Entwickler Komponenten isoliert erstellen, ohne die UI-Komponente in das Widget einbinden oder das gesamte Widget auf dem Smartphone bereitstellen zu müssen. Sie konnten verschiedene Zustände darstellen, alle relevanten Fälle ansehen und Änderungen an Komponenten überprüfen, ohne die gesamte App kompilieren zu müssen. Einfach ausgedrückt: Glance hat die Produktivität der Entwickler gesteigert, weil sie schneller iterieren und das Widget für ein besseres Endprodukt optimieren konnten.

App-Widgets mit Glance optimieren

Dank effektiver neuer Workflows und ohne größere Entwicklungsprobleme lobt das SoundCloud-Team Glance für die Optimierung einer erfolgreichen Produktion. „Mit dem neuen Widget für gelikte Titel war die Einführung wirklich stabil“, so Sigute. „Die Entwicklung und die Tests verliefen reibungslos.“ Erste Daten zeigen auch vielversprechende Ergebnisse: Aktive Nutzer interagieren jetzt durchschnittlich mehrmals am Tag mit dem Widget, um auf die App zuzugreifen.

Das SoundCloud-Team möchte Glance in Zukunft noch stärker nutzen, um bestehende Widgets zu verbessern, z. B. durch die Einführung kanonischer Layouts, und sogar neue Widgets zu entwickeln. Das aktuelle Widget „Songs, die ich mag“ konzentriert sich hauptsächlich auf die Anzeige von Bildern. Das Team möchte jedoch auch andere Arten von Inhalten einbeziehen, um die Nutzerfreundlichkeit weiter zu verbessern. Die Entwickler hoffen außerdem, das Player-Widget zu Glance migrieren zu können, um auf die robusten Designoptionen des Frameworks zuzugreifen, die Größenanpassung zu vereinfachen und einige langjährige Fehler zu beheben.

Neben den Funktionen „Liked Tracks“ und „Player“ ist das Team begeistert von den Möglichkeiten, die Glance für die Erstellung einer breiteren Palette von Widgets bietet. Die modulare, komponentenbasierte Architektur des Widgets „Liked Tracks“ mit wiederverwendbaren Elementen wie „UserAvatar“ und „Logo“ bietet eine solide Grundlage für die zukünftige Entwicklung und vereinfacht die Prozesse von Anfang an.

Erste Schritte zum Erstellen benutzerdefinierter App-Widgets mit Jetpack Glance

Mit Glance können Sie schnell Widgets entwickeln und bereitstellen, die Ihre App sichtbar und interessant machen.

Dieser Blogpost ist Teil unserer Reihe Spotlight-Woche zu Widgets, in der wir Ressourcen wie Blogposts, Videos, Beispielcode und mehr bereitstellen, die Ihnen beim Entwerfen und Erstellen von Widgets helfen sollen. Weitere Informationen findest du in der Übersicht zur Spotlight Week: Widgets, die im Laufe der Woche aktualisiert wird.