Всі ваші Фільми, Книги та Ігри в один клік: знайомтесь з Hikka Custom Lists

Вступ

Я досить недавно з'явився на сайті hikka.io, але вже встиг його полюбити. До цього, весь свій прогрес перегляду та прочитання я зберігав у звичайних нотатках. З часом модерувати та переглядати цей список, який ріс не по днях, стало досить не зручно. Колега по роботі порекомендувала мені цей сайт як гарний український аналог MAL. Але, як і багатьом іншим, мені не вистачало можливості записувати не тільки аніме, манґу чи ранобе, але й інший контент: фільми, серіали, ігри та книги.

Адміністратори сайту підтвердили, що таке розширення функціоналу є в планах, але не на часі. Тому я вирішив взяти все у свої руки й реалізувати це самостійно!

Важливе зауваження: Тримайте в голові те, що це розширення я зробив за вечір під пиво, тому не виключаю баги чи лаги, які я фізично сам не знайшов.

Розширення додає дві ключові можливості, які роблять hikka.io повноцінною платформою для відстеження будь-якого медіаконтенту. Стаття буде розділена на декілька частин: Функціонал, де я детально покажу, що і як працює. Встановлення, де ми поговоримо про всі технічні аспекти та Подяка - донат на армію.

Функціонал

Перше, що додає Hikka Custom Lists - це чотири нові категорії у пошук: фільми, серіали, ігри та книги. Технічно у фільмах та серіалах є можливість знайти мультфільми та мультсеріали.

Фільми, серіали, мультфільми та мультсеріали шукаються через сервіс TMDB. Ігри через RAWG, а книги - Google Cloud. Для повноцінної роботи потрібно отримати API ключі з кожного сервісу, але про це детальніше буде в іншому блоці. Пошук та його результат максимально схожі на те, що є на сайті, лише додана нова кнопка “Додати”. Звідси ви зможете додавати знайдений елемент у потрібний список одразу зі своїм статусом. Статуси - рівно ті самі, що й на сайті.

На головній сторінці та у профілі ви знайдете кнопку “Інше”. Вона дублює функціонал, тому не важливо де ви її натиснете.

При натисканні на неї ви побачите другу родзинку цього доповнення - списки, де зберігаються наші знайдені у пошуку елементи. На старті доступно чотири списки: Фільми, Серіали, Мультфільми та Мультсеріали.

Але, у розширенні є можливість створити нові кастомні списки. Для цього потрібно перейти у Налаштування → Списки → Прокрутити трохи вниз та знайти новий пункт “Створення власних списків”

Повернемося до списків. Біля назви у дужках є число. Це кількість елементів у поточному списку. На скриншоті бачимо “Фільми(1)”, отже у списку 1 елемент. В середині списку можна побачити карточку з фільмом, де є назва, категорія, дата виходу, можливість поставити оцінку (від 0 до 10 - реалізовано як на сайті), змінити статус та додати в “Улюблене” натиснувши на сердечко. Якщо натиснути на назву - то перекине на сайт, звідки цей елемент було додано.

Внизу ви можете побачити три кнопки “Власний запис”, “Редагування” та “Фільтри”. Пійдемо знизу догори.

Фільтри відкривають нову бокову панель із деякими налаштуваннями та фільтрацією. Вигляд - змінює візуально вигляд картки між списком та сіткою. Статус - натиснувши можна побачити картки за певним статусом. Вибрати можна декілька (та хоч всі🥸). Як і у випадку із назвою списку, тут можна побачити число, яке відповідає за кількість елементів з цим статусом у поточному списку. Рейтинг. Тут в нас три пункти фільтрації - строго за вибраною оцінкою, мінімальний та максимальний. Думаю, за назвою та описом тут зрозуміло, що воно робить. Повторний натиск на ту саму оцінку скине фільтр. Рік виходу - фільтрація за роком. Можна вписати, щоб показувало, наприклад, від 1999 до 2012 - і тоді воно фільтрує за цими роками. Якщо вказати рік лише в полі “Від”, то воно покаже всі елементи до поточного року. Сортування. Думаю за назвами все досить зрозуміло. Посортує за категоріями. Скидання - скине всі фільтри. Очищення - видалить всі елементи у цьому списку, але список сам залишиться. Фільтри індивідуально працюють у кожному списку. Тобто, можна, наприклад, поставити фільтр на “Заплановано” і окремо в кожному списку продивитися це. Воно не виводить “Заплановано” для всіх списків в одному місці.

Переходимо на наступну кнопку “Редагування”. Вона дозволяє перемістити списки між собою, шляхом утримання трьох смужок збоку та перетягування. Є можливість змінити назву списку чи видалити його. Схожий функціонал є й в елементах всередині списків, але тут ще можна окремо редагувати картку елементу.

Цікавий факт. Можна відкрити “Фільтр” при увімкненому “Редагуванні” та змінити назву Статусів. Це зроблено для більш зручного та логічного розуміння, наприклад, можна у списку із книгами перейменувати статус “Дивлюсь” на “Читаю”. Цей оновлений статус буде показуватися в пошуку. При фільтрації він фактично буде вважатися, як “Дивлюсь", хоча й буде фільтрувати у межах одного списку.

Остання кнопка - “Власний запис". Вона дозволяє створити кастомну карточку у поточний список. Зроблено це для випадку, коли чогось немає у пошуку або ви ведете якийсь екстравагантний список. При створенні можна вибрати назву, тип, дату створення, вказати url посилання на картинку, яка буде постером та url посилання, яке буде відкриватися при натисканні на назву картки.

Також є функціонал глобального пошуку. Він шукає вже по всіх списках за конкретною назвою. При натисканні на результат - перекидає у список та на декілька секунд підсвічує знайдений елемент.

Синхронізація списків. В теорії, всі ваші списки мають синхронізуватися через гугл акаунт в хромі або майкрософт акаунт в edge. На практиці - в мене спрацювало, але я не впевнений на 100%, що це стабільно працює. Для таких випадків є можливість завантажити xml файл та підвантажити його на іншому пристрої чи браузері. Для цього потрібно перейти у Налаштування → Списки → Прокрутити трохи вниз та знайти нові пункти “Експорт списків” та “Імпорт списків”. Працює це аналогічно, як і на сайті.

Власне це все по функціоналу плагіна. З цікавих фішок є ще можливість відкрити списки та пошук при натисканні на значок розширення у табі. Це на випадок, якщо сайт глобально переверстають і все злетить, а мені буде лінь фіксити🤭. Для того аби це все правильно працювало, наполегливо рекомендую уважно прочитати наступний блок статі. Там я детально описав увесь процес встановлення та налаштування розширення.

Встановлення

Почнемо зі встановлення самого розширення. Створював я його в першу чергу для себе, тому публікувати його в магазин розширень хрому чи еджу - поки в планах немає. Качаємо zip архів з розширенням по цьому посиланні та розпаковуємо його у зручну теку, де ви точно його не видалите (так, воно завжди десь має бути у вас на пристрої). Далі користувачі гугл хрому переходять по цьому посиланні (прямо так і вставляєте в адресний рядок):

chrome://extensions

Користувачі egde - по цьому посиланні:

edge://extensions

Потрібно увімкнути “режим розробника”

Після цього тицяємо “Завантажити в розпакованому вигляді", вибираємо теку з плагіном (саме теку, не потрібно в неї заходити) та тиснемо окей. Усе, розширення додано. Тепер потрібно отримати API ключі із сервісів. Потрібні вони для того аби працював пошук по новим категоріям. TMDB - для фільмів та серіалів Переходимо у Налаштування → Списки → Прокрутити трохи вниз та знаходимо поле для TMDB API ключ. Звідси можна перейти на сайт.

Переходимо на сайт та реєструємося там.

Далі, тицяємо на іконку профілю та переходимо у Налаштування → API. Там, у пункті “Замовити ключ API” тицяємо на “click here”. Тицяємо “Yes”. У вас відкриється вікно з “Developer Plan” та багато полів. Тут не обов'язково вказувати реальну інформацію, головне, щоб воно прийняло все. Після всіх цих дій ви отримаєте “Ключ API”. Скопіюйте його та вставте в поле TMDB API ключ на сайті hikka. Тиснемо “Зберегти”. Тепер у вас працює пошук по “Фільми” та “Серіали”. RAWG - для ігор Переходимо у Налаштування → Списки → Прокрутити трохи вниз та знаходимо поле для RAWG API ключ. Звідси можна перейти на сайт.

Переходимо на сайт та реєструємося там.

Далі тицяємо API, заповняємо інформацію та отримуємо ключ. Скопіюйте його та вставте у поле RAWG API ключ на сайті hikka. Тиснемо “Зберегти”. Тепер у вас працює пошук по “Іграм”. Google Cloud - для книг

Переходимо у Налаштування → Списки → Прокрутити трохи вниз та знаходимо поле для Google Books API ключ. Звідси можна перейти на сайт.

У лівому верхньому куті тицяємо на “Select a project” та “New Project”.

Вказуємо будь-яку назву у “Project name". “Location” - “No organization” та тиснемо “Create”. Потім знову тиснено на “Select a project” та вибираємо створений проєкт. Натискаємо на три смужки у верхньому правому куті та вибираємо “APIs & Services”

У пошуку вгорі пишемо “Book” та вибираємо “Book API”. У відкритому вікні тиснемо “Enable”. Відкриється нове вікно і тут ми вже тиснемо “Create credentials”.

Вибираємо “Public data” та "Next". І ось нарешті ви отримаєте “API key 1”. Скопіюйте його та вставте в поле Google Books API ключ на сайті hikka. Тиснемо “Зберегти”. Тепер у вас працює пошук по “Книги”.

Подяка

Зовсім недавно почався збір Книголють 4.0 для 2 МБ 116 ОМБр, напрямок: Купʼянський, Харківщина. Я буду дуже вдячний, якщо ви закинете пару гривень на мою дружню банку : https://send.monobank.ua/jar/5HcD5kQW7i