Пет-проєкти українських розробників. Які корисні продукти айтівці створюють для себе — друга частина

А ви колись розробляли для себе пет-проєкт, який урешті перетворився на непоганий і зручний продукт? Наші герої — так. Українські розробники розповіли, як і для чого створювали читацький трекер з прогрес-баром, бот для завантаження контенту з Instagram, довідник на держпідприємстві та власну систему обліку.

Це друга частина матеріалу про пет-проєкти, його перша частина — за посиланням.

Rork — читацький трекер зі спільнотою читачів

Роман Грядунов, Senior Front-end Engineer

Як виникла ідея проєкту

Засиджуючись вечорами на роботі, я іноді переводив погляд з лептопа на те, що відбувалося навколо в офісі. Ну знаєте, кажуть, корисно час від часу відводити очі від моніторів :) У поле зору найперше потрапляли книжки на робочому столі, подаровані або куплені імпульсивно, — здебільшого нон-фікшн і біографії. Згадував, який великий профіт принесли кілька прочитаних професійних книжок про JavaScript, будування карʼєри тощо, — й міркував, як чудово було б привчитися читати більше.

Проте кожна спроба закінчувалася кількома прочитаними розділами, або ж посеред книжки ставало нецікаво — і я її закидав. Виправдовував це тим, що мене приваблює багато тем.

Одного вечора я заливав код у Bitbucket і щиро радів, яку фантастичну роботу вдалося виконати за тиждень. Окрім класного оновлення, я побачив, що 155 файлів було додано, приблизно 40 зазнали змін, 13 видалено — і весь цей перелік PULL-реквесту було виділено різними кольорами. Така візуалізація надавала додаткової мотивації та слугувала візуальним підтвердженням проробленої праці.

І я подумав: а що якби аналогічна візуалізація прогресу була і для паперових книжок? Було б цікаво побачити прогрес у вигляді логів, кількості прочитаних сторінок і часу, який на це пішов. Книжковий GIT.

Особливості реалізації

Оскільки моя основна спеціалізація — Front-end, я захотів побачити в динаміці те, що уявив собі в голові. Для цього створив файли: .html, .js, щоб накидати UI, як усе виглядатиме — книжка з прогрес-баром, список книжок. Дані записав у константи в .js-файл.

Вийшло ось що:

Ось так усе виглядало в жовтні 2018-го.

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

Десь за пів року я змінив роботу. Приблизно тоді ж моя дівчина написала рукопис книжки в електронному вигляді, і я мав з ним ознайомитися. Почав читати на обідніх перервах, але десь на половині трохи знудився і став перемикатися на електронну «Продається все. Джефф Безос та ера Amazon» або брав до рук паперову «iWoz. Від комп’ютерного ґіка до культу».

Одного вечора виявилося, що друзі дівчини дочитали книжку, а я — ні, і мені стало соромно. Як зазвичай, віджартувався, але відчуття, що зі мною не все гаразд, залишилося.

Збентежений думкою про те, що мені мало що вдається довести до завершення, узявся за книжку Девіда Аллена «Getting Things Done», яку колись подарував колега. Починав її читати ще раніше, тож іронічно, що книжку про те, як завершувати справи, я закинув десь на 40%.

Вирішив поставити на-гора все і дочитати її до кінця. Щовечора я їхав у коворкінг, аби читати поради Девіда Аллена. Повернувшись до паперових книжок, зауважив, що мені не вистачає відмітки 30%—40%—50%: час на читання ніби витрачаю, а прогресу не видно. У книжці дівчини в iBooks було видно, скільки відсотків я прочитав. Це робило все зрозумілішим, як на мене.

Згадав про свій скрипт і уявив: як натискаю старт, вводжу сторінку початку, натискаю стоп, вводжу сторінку, на якій завершив читання, а вся брудна робота робиться автоматично. Вирішив зробити прототип: бекенд (у минулому був досвід PHP/MySql) і UI на Angular4+, щоб «Getting Things Done» уже дочитувати з відстежуванням прогресу. Так зʼявилися перші дві таблиці: books та progress.

Я зробив десктоп-прототип з простеньким бекендом і щовечора їздив у коворкінг «Часопис» у Києві читати книгу. Натрапив в інтернеті на пораду: щоб доробити муторну справу, потрібно щодня приділяти їй час і мати простір, де тебе не потурбують. До речі, прочитання «Getting Things Done» змінило моє життя, й решту рукопису дівчини я дочитав за два вечори.

Функції продукту

По-перше, тут є трекер для паперових книжок: скільки відсотків/хвилин/сторінок читаєте щодня — та розрахунок ETA: скільки годин треба читати, аби завершити поточну книжку.

По-друге, є фото цитат — їх можна завантажувати всередину книжки, щоб вони не загубилися в галереї смартфона. Не знаю, як я жив без цього раніше? :)

По-третє — календар, який обожнюють усі користувачі, в ньому видно дні народження друзів (якщо ви, як і я, пропускаєте читання в їхній день народження).

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

Доступність і популярність продукту

Коли був готовий MVP, який працював лише для мене, — зрозумів, що хочу, аби Rork’ом могли користуватися інші. Досвід запуску збиткових проєктів я вже мав, тож одразу вирішив: продукт буде доступний за підпискою — символічний $1/місяць (ця сума покриває витрати на середньостатистичного юзера).

Я зробив реєстрацію, вилив UI на хостинг, прикрутив LiqPay — і вийшов SaaS, який працює в браузері. Почав трохи розповідати про тоді ще «сервіс» Rork для покращення читання друзям і колегам. Деякі цікавились і починали користуватися.

У 2019–2020 роках я допомагав дівчині з іншим офлайн-бізнесом, майже не займався Rork’ом, хіба додав фотонотатки, календар і можливість бачити прогрес читання інших читачів.

2020 року — спростив дизайн і покращив стиль. У 2021-му почав робити мобільну версію продукту. Вивчив кілька можливостей щодо локальних БД та їхньої синхронізації із сервером та назад. Надихнувся прикладом Notion, який зберігає кожний «чмих» і відправляє на сервер пачку змін.

Оцінив та спланував перероблення архітектури для роботи офлайн, доробив свій бекенд для синхронізації змін.

Для того щоб Angular-застосунок став мобільним застосунком, я перепробував різне — врешті зупинився на Cordova. Зробив собі кілька npm-шорткатів: збірка Android / збірка iOS, запуск Xcode із того ж терміналу WebStorm.

Наприкінці 2021 року, читаючи книжки про бізнес, виникала думка зробити PIVOT та змінити модель Subscription на Fremium. Проте не наважувався: не хотів переводити проєкт у ранг збиткових. (За певними дослідженнями, продати користувачу безплатної версії pro-акаунт нічим не легше, а то й складніше, ніж продати одразу платний продукт, показавши його переваги та потенціал.)

За тиждень після початку повномасштабного вторгнення росії в Україну, коли з’явилося місце для інших думок, окрім як про безпеку, я вирішив допрацювати застосунок і зробити його безоплатним. Тому весь свій позаробочий час спрямував, щоб здійснити реліз в AppStore / Google Play.

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

Методом сарафанного радіо і мемів в Instagram почали з’являтися тисячі перших читачів. Зробив можливість шукати та підписуватися на інших користувачів. Оскільки веб мені ближчий, ніж мобільна розробка, то я рахую реєстрації та деякі важливі показники з бази даних.

Нещодавно мій продукт перетнув позначку в 19 тисяч реєстрацій.

А ще для мене дуже важливий зворотний звʼязок, тож у застосунку одразу зʼявилася можливість написати побажання у два кліки. Їх уже понад тисяча, і всі вони будуть враховані під час розробки та покращень. Наприклад, багато читачів просили зробити текстові нотатки.

Майбутнє проєкту

Проєкт я обовʼязково підтримуватиму, є ще багато моментів, які можна покращити. По-перше, сформувати каталог книжок, аби не доводилося додавати книжки вручну (як-от заповнювати автора, обирати обкладинки). По-друге, переробити спільноту: вона зараз дуже MVP-шна, тож додам більше соціальних взаємодій між читачами. Буде більше аналітики. Звичайно, від багфіксів нікуди не подітися 🙂

Скажу також за себе — Rork справді допоміг мені більше читати.

До 2018-го я читав 1-2 книжки на рік, при цьому віддавав перевагу інтернет-виданням, YouTube, технічним сайтам з документацією тощо та відверто вважав читання застарілим методом отримання інформації.

У 2019 році — 6 книжок.

За 2020 рік — 50 книжок.

За 2021 рік — 20 книжок, з них кілька величезних. Та й я почав більше працювати, бігати півмарафони, марафони і менше читати.

За 2022 рік — майже 9 книжок. Самі знаєте обставини, але зараз я поновлюю читання. На наступні роки у планах — читати понад 50 книжок за рік.

Telegram-бот для завантаження контенту з Instagram

Андрій Балій, Founder в Efrox

Ідея мого пет-проєкту виникла на початку 2017 року, коли я адміністрував Telegram-чат менеджерів Instagram-сторінок. Там ми обмінювалися новою інформацією, способами просування у соцмережі тощо. Саме тоді я зіткнувся з проблемою завантаження постів з Instagram. Просто зберегти зображення чи відео користувачам було важко. Потрібно було встановлювати спеціальні розширення для браузера або ж завантажувати застосунки для телефонів, де нерідко просили авторизуватися, що є потенційно небезпечним для акаунта. Тоді ж почався бум на Telegram-ботів, і я подумав, що було б непогано розібратися в цій темі.

Ідея виникла сама собою: мені потрібно було постійно стягувати багато контенту з Instagram, часом — цілі профілі. Я подумав, що Telegram-бот для реалізації таких цілей підійде найкраще через свою простоту, зручність, та й через свою простоту, зручність і кросплатформеність Telegram.

Бота @instasavegrambot я написав практично за один вечір на чистому PHP, без сторонніх бібліотек (раніше у мене вже був досвід роботи з Instagram API). Завдяки ботові можна було отримати аватари акаунтів, а також пости (фото та відео) й описи до них. Все було зроблено максимально просто: користувач надсилав боту посилання на пост чи акаунт, далі через file_get_contents() отримувався пост з Instagram — і користувач діставав медіа та опис. Таким чином у мене вийшов робочий продукт приблизно на 70 рядків коду. Посилання на бота я розмістив відразу у своєму чаті, він був повністю відкритим, і ним могли користуватися всі охочі.

До сьогодні основа бота не зазнала великих змін. Рядків коду, щоправда, побільшало, з часом довелося додати підтримку проксі. Також я під’єднав гугл-аналітику для мобільних додатків, почав зберігати в базу користувачів сервісу, декілька разів змінював принцип скрапінгу (Instagram регулярно оновлюється). Наразі аудиторія бота сягає плюс-мінус 2 млн унікальних користувачів. У найближчому майбутньому планую повністю оновити функціонал, зробити повноцінну багатомовність, під’єднати деякі бібліотеки для розширення функціонала, а ще задумуюся над додатковою цінністю для платної підписки (наприклад, завантаження stories, що потребує авторизації) чи просто можливістю донатів.

Власна система обліку

Ігор Копеляс, засновник та директор ТОВ «Інноваційні сервісні рішення»

Як виникла ідея проєкту

Після закінчення коледжу я пішов працювати в одну з перших компаній, яка займалася заправкою картриджів до лазерних та струменевих принтерів. Там же я стикнувся з першою системою обліку виконаних робіт, яка була написана на основі Microsoft Access. Облік картриджів відбувався за допомогою штрихкодів, наклеєних на картридж. Пізніше ця система була переписана на C++ або C#, точно я не згадаю, — її можна було купити й використовувати в будь-якому сервісному центрі через сайт. Що ми й зробили, коли відкрили свій сервісний центр.

Але система працювала лише під Windows, через що її використання було дещо обмеженим та незручним. Тоді виникла ідея розробити сучаснішу систему обліку замовлень і виконаних робіт, яка б працювала через браузер і була доступна з будь-якого місця і пристрою.

Як головну фішку ми вирішили реалізувати облік картриджів не за штрихкодом, а за QR-кодом, який би дозволив клієнтам перевіряти інформацію щодо картриджа просто зі смартфона.

Особливості реалізації

Саму розробку системи ми розпочали 2014 року, серверну частину писали на PHP 5 + MySQL, а Front-end, для економії часу, вирішили писати за допомогою готових шаблонних форм Metronic, у якому тоді ще використовувався Bootstrap 3, та шаблонізатора Smarty.

Щодо функціонала, то спочатку в системі був тільки список замовлень зі статусами «відкрите» та «закрите», технікою на ремонті, виконаними роботами, деякими налаштуваннями та звітами за виконаними роботами. З часом ми додали власний генератор QR-кодів, систему додавання та розподілення завдань за заявкою, складський облік, систему розрахунку заробітної плати залежно від виконаних робіт та завдань або залежно від чистого прибутку за замовлення, різні звіти та налаштування.

У 2018 році у нас з’явилася ідея зробити нашу систему загальнодоступною. Ми створили сайт з формою реєстрації та особистим кабінетом і почали переробляти ядро системи під масштабування та клонування, переписали все на сучаснішу версію PHP 7.2 та змінили систему БД на MariaDB, розбили всю систему на Docker-контейнери, додали можливість створювати субдомени з власною назвою, систему вибору тарифного плану, поповнення балансу та списання абонплати.

Доступність та популярність продукту

До кінця 2021 року все було готово. Ми потроху давали рекламу, але реальних клієнтів не було, тож ми стали міркувати над іншими стратегіями поширення продукту і залучення клієнтів. А 24 лютого 2022 року розпочалася війна і стало зрозуміло, що пропонувати продукт російською мовою немає сенсу. Тож ми почали переробляти весь інтерфейс і сайт на багатомовність, реалізували це через заміну всіх слів на константи й створення окремих файлів зі значеннями українською та російською мовами. Після того, як багатомовність була реалізована, захотілося оновити інтерфейс на сучасніший. Тому вирішили створити повністю новий шаблон з використанням Bootstrap 5 та сучасних плагінів, чим зараз і займаємось. Плануємо до кінця літа завершити, оновити сайт, додати відео і скриншоти з новим інтерфейсом та функціоналом.

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

Додам контексту — 15 років тому я навчався у КПІ на розробника, але айтівцем тоді так і не став — пішов у бізнес. Тож спочатку всю базу розробляв мій товариш — дуже хороший розробник. Я ж під час карантину зрозумів, як сильно помилявся, і почав наново вивчати програмування. Зараз я вже самостійно переписую та перероблюю нашу систему, як на Front-end, так і на Back-end.

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

Телефонний довідник на держпідприємстві

Дмитро, Back-end Developer

Як виникла ідея проєкту

2009 року я прийшов працювати інженером-механіком на одне з великих держпідприємств. Традиційно такі підприємства не є юзер-френдлі для новачків, банально з погляду на «знайти вісім місць, куди потрібно віднести документи». Звісно, колеги радо тебе скерують: «За нашим корпусом повернеш ліворуч, потім прямуй стежкою по діагоналі, там — сіра будівля, у ній на другому чи третьому поверсі перші або другі двері ліворуч без номера, а там уже спитаєш». Якщо пощастить, таким чином отримаєш приблизно 60% потрібних даних.

Можна, звісно, обдзвонити підрозділи, адже підприємство має щось на кшталт своєї дротової телефонної мережі. Та на момент мого приходу тамтешній телефонний довідник, надрукований ще за часів «совка», м’яко кажучи, втратив свою актуальність ( через регулярне переформатування підрозділів, плинність кадрів та часу тощо). Тож єдиним рішенням, аби не забувати нічого та не перепитувати безліч разів одне й те ж, було записувати всю інформацію на листочок: корпуси, кімнати, назви, телефони тощо.

Листочки швидко перетворились на Excel-файл із чіткою структурою та претензією на таблицю бази даних.

Особливості реалізації

Інформацією періодично обмінювався з колегою, який вів для себе аналогічну пам’ятку. На той час він захоплювався UI/UX, а я — кодингом і базами даних. У нас швидко з’явилася ідея створити для себе щось схоже на телефонний довідник. Ми мали базові знання Back-end і Front-end; велику локальну мережу, де була теоретична можливість розгорнути хоча б самопальний вебсервер, тож узялися до справи.

Мій повноцінно робочий інструментарій на той момент був обмежений знаннями PHP 5 без фреймворків, MySQL 5 та jQuery — із цим і почали працювати.

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

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

Клієнтську частину робили через ajax (тоді вже з’явилася на нього мода ) за допомогою jQuery. Серверна частина — це примітивна імплементація з п’яти-шести PHP-файлів («контролерів», як би ми сказали зараз) через switch усередині кожного, який обирає конкретний «маппінг» не за шляхом, а за спеціальним параметром. Робили всі запити через POST. GET для отримання, PUT/PATCH для зміни, DELETE для видалення? Ні, не в курсі.

Тез «писати тести», «не створювати функції/методи на 1000 рядків», «ділити бекенд на шари» я тоді навіть не чув, тому кодив як міг. Не було і системи контролю версій — версіонування робили архівами всього коду з підписаною датою.

Перша версія нашого довідника, яка була готова приблизно через рік, майже одразу лягла на полицю — тоді її побачило лише кілька наших друзів та знайомих. Там було забагато некрасивих рішень в імплементації бізнес-логіки. На той час я мав замало знань для створення такої системи з її величезною кількістю бізнес-правил та винятків.

Частину з цих винятків, до речі, нам доводилося вигадувати самостійно, ґрунтуючись на пошуку закономірностей, а також на чомусь на кшталт фази Місяця. Частину ми виводили з опитувань друзів та знайомих. Інколи це виглядало десь так: «У нас є два варіанти типу цього підрозділу, а залишитися має лише один. Тому вольовим рішенням обираємо цей варіант». Ми самі були собі замовниками, писали ТЗ, додавали побажання довірених друзів та знайомих, які були в курсі нашої розробки.

Приблизно за два роки ми все переробили майже з нуля. Технології не змінилися, але дещо іншим став наш підхід до бізнес-логіки і проєктування. Також повністю переробили дизайн.

Доступність і популярність продукту

У липні 2014 року відбувся реліз, який ми розгорнули на віртуальній машині, а ще випустили невеличку статтю про проєкт на локальному форумі та локальному сайті новин.

Далі понеслося: розвиток проєкту, додавання нових фіч, виправлення багів — і так по колу. Потихеньку у довідника збільшувалася кількість модераторів. Без них нікуди, бо хто як не співробітники зможуть підтримувати дані свого та/або сусідніх підрозділів в актуальному стані.

Проєкт зайняв величезну нішу, яка досі була порожньою, — ним почало користуватися багато людей. Відгуки були як схвальні: «З вашим довідником життя полегшилося!», так і негативні: «Чому інформація не скрізь актуальна?», «Додайте фото керівництва», «Чому довідник не виправляє орфографічні помилки у пошукових запитах, як Google?». Однак проєкт був і залишається волонтерським, just for fun, тож деякі побажання ми просто не мали змоги реалізувати.

2017 року я змінив роботу. Пішов займатися одним зі своїх хобі — кодингом. Натоді серед моїх інструментів уже були Java, Spring, Hibernate, React, Redux. Адмініструвати та розвивати проєкт продовжував мій колега-співавтор та один наш «довірений модератор». Розвиток системи трохи загальмувався, якихось глобальних речей уже не впроваджували, але тривала підтримка поточного стану, адміністрування та закриття маленьких багів.

На жаль, я не мав змоги стежити за життям проєкту особисто, адже він недоступний ззовні. Тому періодично розпитую про стан справ у теперішнього адміністратора.

Повна офіційна назва проєкту — «Online-версія телефонного довідника», скорочена — «Довідник», а кодова під час розробки — «Phone». Я ж його називаю своїм першим серйозним пет-проєктом. До речі, за понад вісім років свого існування він і досі не має офіційного статусу, висить на тій самій старезній віртуальній машині та регулярно страждає від проблем з інфраструктурою, які, на жаль, ми не можемо подолати. Прохання ж про допомогу висять у повітрі вже багато років.

Утім, я жодного разу не пожалкував про витрачені на цей проєкт, без перебільшення, сотні людиногодин. Велика кількість грабель, на які я наступав упродовж років розробки, трансформувалася у досвід, що став у пригоді, коли хобі стало повноцінною роботою. Проєктування бази, застосування архітектурних патернів, зокрема і чистою мовою, бо слова «фреймворк» я тоді теж не знав, — усі ці основи було закладено під час розробки пет-проєкту. Не без помилок, звісно, бо вчився я в самого себе та в Google, але це було надзвичайно корисно й цікаво. І спогади про телефонний довідник дуже теплі.

👍ПодобаєтьсяСподобалось13
До обраногоВ обраному5
LinkedIn



4 коментарі

Підписатись на коментаріВідписатись від коментарів Коментарі можуть залишати тільки користувачі з підтвердженими акаунтами.

tabXpert.com — менеджер вкладок та сесій

А, раз пішла така тема...

bordozer.github.io — класичний морський бій. Стало цікаво, що ж таке ото тій ReactJS. Знайомство переросло в ось таку грульку. Є ще варіація з бекендом — мультіплеєр, але до розуму ніяк не доведу остаточно.

bordozer-visual-guitar.herokuapp.com — для тих, кто вчиться грати на електро-гітарі. Дуже корисно для практикування вміннь імпровізації. Може грузитися секунд 30 перший раз, це тому, що використовую free план від Хєроку і він кладе віртуальну машину, якщо немає реквестів і підіймає півсля першого ж знову.

read, not readed

(let the sruch begin)

Підписатись на коментарі