Beats Music, почти не те познавахме. Услуга за стрийминг на музика, изпреварила времето си, Beats Music беше безцеремонно заменена от Apple Music, след като Apple придоби Beats през 2014 г. Аз съм голям фен на дизайна и потребителското изживяване и мисля, че се държи добре, въпреки че е на почти четири години.
За разговор, който наскоро изнесох за разработването на потребителски интерфейси с React, реших, че ще бъде забавно да използвам React Native, за да пресъздам интерфейса на Beats Music, по-специално функцията „Sentence“.
Изречението позволява на потребителите да генерират плейлист чрез попълване на интерфейс в стил „Mad Libs“.
Преустроих изречението с помощта на React Native, Expo Snack и Napster API. Expo има React Native dev среда с нулева конфигурация, наречена Snack, която може да се използва за изпълнение на проекта, а Napster API предостави музикалните метаданни. Ето и как можете да го настроите.
Изпълнение на закуската на вашето устройство
Първо, ще трябва да изтеглите приложението Expo Client на телефона си. Можете да го получите от App Store или Google Play. Ако използвате iOS, ще ви е необходим и акаунт в Expo.io.
След като настроите приложението на телефона си и създадете акаунта си, можете да отидете на закуската Beats Music тук:
Това ще ви отведе до страницата на проекта. Следващата стъпка е да свържете телефона си.
Android
Кликнете върху Изпълни на устройство. Сканирайте QR кода с приложението Expo, за да стартирате закуската.
iOS
Ако използвате iOS, процесът е малко по-сложен. Първо, ще трябва да сте влезли в Expo както в уеб браузъра, така и в приложението. След това ще трябва да запазите проекта в собствения си акаунт. След като проектът бъде запазен във вашия акаунт, той трябва да се покаже в секцията Наскоро в разработка на приложението Expo. Може да се наложи да опресните страницата/приложението няколко пъти.
Докоснете закуската, за да стартирате проекта. Ще стартирате това на телефона си!
Зад кулисите: Как работи кодът
Пресъздаването на интерфейса беше доста лесно. Създадох нов текстов компонент, който да съответства на стила на текста. Използвах chroma за програмно генериране на цветовете в градиентите на списъците. Има компонент, който написах, наречен FlipList, който автоматично обгръща всяко от децата си в изглед Animated, за да постигне тази шахматна обръщаща надолу анимация, когато екранът се монтира.
От музикална страна използвах Napster API, за да задвижа цялата функционалност на плейлиста. Свързах поджанрове с конкретните думи в моя речник и дадох оценка на всяка от тях. Когато се натисне Възпроизвеждане на ново изречение, се сумират резултатите от поджанровете и се вземат най-високите два. След това крайната точка на най-добрите песни се запитва в API на Napster и резултатите се подават в PlaylistView. Това в никакъв случай не е идеалното решение, но е в основата.
Заключение
Това беше забавен проект за уикенда и научих много за използването на Expo. Те имат някои „фантастични API“, които всеки разработчик на React Native трябва да провери.
Надявам се, че можете да научите нещо от изходния код на този проект и да го използвате, за да подобрите собствените си проекти! Все още ми липсва Beats Music, но поне сега имам собствена версия.
Любопитно? Или искате да поговорите повече, независимо дали за React или страхотни шрифтове? Можете да намерите нашия страхотен гост-блогър Лукас Макгартланд в Twitter, LinkedIn или Dribbble или да се свържете с него чрез неговия уебсайт или чрез имейл.
