1 Milyard Şazam Musiqi Tanıması ilə Məlumat Görünüşü

Shazam San Francisco-da

Universitetdə olarkən Shazam-a part-time veb tərtibatçısı kimi qoşuldum. 5 xoş il ərzində Shazam-da qaldım. Bu yazı işlədiyim bir hackday layihəsi haqqındadır. Layihə, boş bir kətan üzərində bir milyard Shazam tanıma qurmağı və nəticəni müşahidə etməyi əhatə edir.

Bu yazı vizualları yaratmaq üçün istifadə etdiyim prosesə də toxunur.

'Shazam tanıma' nədir

Bu kimi bir Shazam tanıma düşünün. Şazam, mobil tətbiqetməni açırsınız və arxa planda oynayan bir musiqi parçası üçün onu "dinləyin". Bir tanınma mahnının müvəffəqiyyətli eyniləşdirilməsidir.

Yer məlumatları

Bir istifadəçi yer məlumatlarını Shazam ilə bölüşmək üçün seçim edə bilər. Shazam sonra istifadə vəziyyətindən asılı olaraq bəzi işçilərə anonim yer məlumatlarını (enlem ve uzunluq) təqdim edir.

Görüntüləmək üçün anonim yer məlumatlarına sahib olmaq xoş bir təcrübə idi. Mənə böyük məlumat toplusu, bir hekayəni izah edən vizual görüntülər və yaraşıqlı görünən, lakin başqa bir şey etməyən vizual görüntülər haqqında çox şey öyrətdi.

Vizual

Bilməlisiniz bir şey, bütün vizual görüntülər bu fikrə uyğundur: Bir nöqtə bir uğurlu tanıma təmsil edir. Nöqtələr coğrafi koordinat sisteminə çəkilir. Bu Google Xəritə götürmək və sonra yer nişanlarını çəkməklə eyni deyil.

Chicago, London, New York, TamNew Yorka böyüdü

Android və iOS'u fərqləndirmək üçün rəng istifadə etdim. Hansı olduğunu təxmin edə bilərsiniz? Ip ucu: Böyük şəhərlərə baxın. Sizcə orada hansı cihaz növü üstünlük təşkil edir?

  • Android: Qırmızı
  • iOS: Mavi

Nöqtəli xəritələrə diqqətlə baxsanız, yollar üçün dəqiq tərifləri görə bilərsiniz. Bunu avtomobil karnaylarından səslənən Shazam'ing musiqisi olan sərnişinlər izah edə bilər.

Alternativ rəng sxemləri ilə xəritələr də etdim.

Chicago, Los Angeles, New York, Birləşmiş Krallıq

İnteraktiv Xəritələr

Xəritəni interaktiv şəkildə görüntüləmək əyləncəli olduğunu düşünürdüm. Eynilə Google Xəritədə sürükleyin / böyüdəsiniz, bir Shazam xəritəsini də sürükləyə / böyütə bilsəniz? İnteraktivliyin bu elementi insanları xəritələrdən istifadə etməyə, araşdırmağa və öyrənməyə təşviq edən şeydir. Heç vaxt ziyarət etmədiyiniz statik bir şey olmaqdan daha çox.

Bunun üçün milyonlarla xəritə 'lövhəsi' yaratmaq lazım idi. Məsələn, burada Google Maps-dən götürülmüş Londonun bəzi plitələri var.

Hər bir kafel ayrı bir görüntüdür. Fərqli miqyas səviyyələrinə diqqət yetirin. Təxmin etdiyiniz kimi, Google Xəritəni sürüklədikdə və böyüdüyünüzdə sizə bir çox fərqli görüntü təqdim edir, şəkillər xəritə xəritə adlanır.

Budur Şazam Xəritəsinin plitələri.

Ümumilikdə 40GB dəyərində kafel məlumatları yaratdım. Bu göstərdiyim böyütmə səviyyəsinə görə. Yüksək böyütmə səviyyəsi xəritəyə baxanların daha böyük səviyyəyə yuvarlana biləcəyini bildirir.

Görüşləri həmkarları ilə nəzərdən keçirdikdən sonra maraqlandıq: böyük klasterlərin yerində hansı "yer" var. Məsələn, insanların Şazamdan tez-tez istifadə edəcəyi bir musiqi məkanı idimi?

Bu suala cavab vermək üçün bir düşüncəm var idi: hal-hazırda hansı yerlərin olduğunu müəyyən etmək üçün bir yer xidmətindən istifadə etsəm nə olar. Bunu etmək üçün Google Maps Places API istifadə etdim. Hər dəfə yeni bir yerə keçəndə Google Maps API-dən soruşuram ki, sual verim: Bu məkanda hansı yerlər var?

Bu xüsusiyyətdən istifadə edərkən nöqtələrin çoxluqlarının nəticəsi olacağını başa düşməyə başladıq: kafe, gecə klubları, ticarət mərkəzləri, rahatlıq mağazaları və s.

Şaqam xəritəsini sürükləyib böyütdüyünüz zaman digər "müntəzəm" xəritə də hərəkət edərkən Mapbox xəritəsini (Google Xəritələrə bənzər) sinxronlaşdırdım. Bu, hal hazırda baxdığınız coğrafi yeri tez bir zamanda müəyyənləşdirməyə imkan verir

Kod

Etdiyim hər şey kimi, yalnız cəmiyyətimizdəki başqalarının zəhmətindən bəhrələnirəm. Bütün kreditlər, məlumat xəritələrində əla işlədikləri üçün Eric Fişerə verilir. Həmin Github depolarındakı təlimatlara əməl etsəniz, öz vizual görüntülərinizi edə bilərsiniz. Uzunluq və enlem nöqtələrindən ibarət bir verilənlər bazasına ehtiyacınız olacaq, məsələn, zəhmli-ictimai məlumat bazaları üçün Github-da bir şey tapa bilərsiniz.

Əgər cəhd etməyi başa vurursan: özüm üçün yararlı ola biləcəyim bir neçə qeyd.

Birincisi, uzunluq və uzunluq böyük bir siyahıya ehtiyacınız var. Lakin bu məlumatları tutmaq üçün əlavə iş görmək lazım gələ bilər. Mənim vəziyyətimdə daxili Shazam API-dən əldə etdim. Məlumatları təhlil etmək üçün fast-csv adlı bir Node modulundan istifadə etdim. Bu tərzdə axınlardan istifadə etmək böyük məlumatların (gigabayt dəyərində) analizini sadə edir.

csv.fromStream (stream, {başlıqlar: həqiqi}). on ('data', handleRecord);

Bu idarəRecord funksiyası bunu edir:

funksiya idarəRecord (qeyd) {const location = tag.location.latitude + ',' + tag.location.longitude; konsol.log (yer); }

Nəticə bir şeyə bənzəyir:

lat, lon
-22.1028,166.1833
29.8075, -95.4113
51.2168, -0.8045
27.3007, -82.5221
20.5743, -100.3793
-36.0451,146.9267
26.7554, -81.4237

Bu anda onu məlumat xəritələrinə qoşmağa başlaya bilərsiniz (layihə sənədləri daxilində ətraflı təlimat var).

Sənədlərdən kifayət qədər uzun müddət sonra, son görüntünü yarada biləcəyim bir yerə gəldim. Londonun məlumat xəritəsini yaratmaq üçün, əldə etmək istədiyiniz yer koordinatları kimi məhdudlaşdırma qutusunu göstərin:

./render -A - çıxış 14 51.641353 -0.447693 51.333508 0.260925> london.png

Eyni statik xəritələri çox tez-tez yaratdığım üçün (məsələn rəng ilə təcrübə edərkən) bütün prosesi ssenariyə götürməyə qərar verdim. Bir veb geliştiricisi olaraq bütün bunları Node.js-də etdim, lakin sadə bir Baş skript yaxşı olardı. Əvvəlcə göstərmək istədiyim bütün xəritələri ehtiva edən bir obyekt etdim.

Bütün xəritələri göstərəcək məlumat quruluşu

Daha əvvəl gördüyünüz əmri düzəltmə hadisəsi oldu, ancaq yuxarıdakı şəkildəki gördüyünüz JSON blokundakı hər bir giriş üçün.

Təqdim edir

Shazam'da çoxlu hack günləri var idi. Sonra bir neçə aydan sonra demo günü oldu. Demo günündə hack işinizi təqdim etdiniz. Bu xüsusi layihə insanlara göstərildi.

Komanda sətri tətbiqetmələrini yaradan və ya hack günlərində kodun yenilənməsi sərgüzəştlərini davam etdirənlər üçün düşünün ki, demo gününün tamaşaçıları texniki deyil, daha çox vizual demolara üstünlük verə bilərlər (bu mənim təcrübəm oldu). Bunun bir yolu budur: etdikləriniz haqqında bloq yazmaq və resursları bölüşmək, canlı bir demonu tamamilə atlayaraq. Və ya daha da yaxşısı, texniki anlayışları texniki olmayan bir auditoriyaya necə yayındıracağınızı, daha çox vizual tanıtdırmağı və canlı nümayişinizə demənizi davam etdirməyin. Çətindir, amma daha təltifdir.

Məlumat xəritələrinin yüksək qətnamə şəkilləri

Qeyd: Google Foto interfeysi ilə bu şəkilləri böyütə bilərsiniz

  • Dünya - Hansı ölkələrdə / şəhərlərdə yüksək iOS istifadəsi olduğuna diqqət yetirin
  • Birləşmiş Krallıq - Şəhərlərə diqqət yetirin
  • Toronto
  • San-Fransisko
  • Paris

Nəticə

Şazam-a yeni bacarıq və texnologiyalar öyrənməyə təşviq etdiyiniz üçün minnətdaram. İlk növbədə datamaps layihəsini inkişaf etdirdiyinə görə Eric Fişerə təşəkkür edirəm! Məkan məlumatlarına çıxışınız varsa, görüntüləmək üçün bir çox maraqlı yol düşünün. Twitter API-dən Tweets istifadə etməyə cəhd edə bilərsiniz, sadəcə onların yer məlumatlarına sahib olduğundan əmin olun.

Daha çoxunu görmək istəyirsiniz?

Twitter-də məni izləyin: @umaar və mənə bildirin! Çox sayda veb inkişaf mənbəyini sınayıram və tvit edirəm.

Xahiş edirəm məqaləmi oxumaqdan zövq alsaydınız və paylaşın.