Как я научился кодить, создал веб-приложение и запустил его на Product Hunt за 2 месяца

Два месяца назад я начал путь к созданию своего первого веб-приложения. Это очень простенькое веб-приложение, оно называется When To Surf и каждый день подсказывает серферам самое лучшее время для занятий серфингом. Сегодня я его запускаю.

UPD: после запуска я написал статью о результатах

Меня зовут Андрей

Я из Украины, работаю удаленно в Railsware. Как и многие люди в IT-компаниях, я мечтал создать свой собственный продукт. Свое собственное приложение, которым люди пользовались бы ежедневно. Мне очень хотелось когда-нибудь претворить эту мечту в реальность.

Проблема

В данный момент я работаю удаленно, из Бали. И так уж совпало, что Бали — одно из лучших мест для серфинга. Переехав сюда, я стал брать уроки, но, когда начал заниматься сферфингом, столкнулся со сложностью: было очень трудно разобраться в приложениях для серферов типа Magic Seaweed, которые выдают сведения о погоде и прогнозы. Там целая куча разных данных — течение, свеллы, скорость и направление ветра и тому подобное.

Здорово, конечно, когда много информации, но какой в ней смысл, если люди не могут ничего понять? В интернете были целые руководства на 10 страниц о том, как расшифровать все эти данные.

С моей точки зрения, это просто ночной кошмар UX-дизайнера.

А что, если бы я мог собирать необработанные данные о погоде, а затем при помощи особого кода анализировать и оценивать их с точки зрения «серфибилити» (интересно, есть ли вообще такое слово?)

Я хотел это сделать, но не мог. Потому что никогда серьезно не занимался программированием. Даже не имел представления, с чего начинать. Вместе с тем, у меня не было средств нанять большую команду, которая создала бы приложение за меня. Поэтому я отказался от этой мысли. На какое-то время.

Петер Левелс

Через несколько месяцев в Dojo (коллективный офис на Бали), я познакомился с Петером Левелсом. Когда-то он поставил себе цель запустить 12 стартапов за 12 месяцев — и в рамках этого проекта был создан Nomad List. Он вдохновил меня сделать собственное приложение. Я настоятельно рекомендую посмотреть его видео. Вот его принципы:

• Решайте проблемы, которые волнуют лично вас
• Перестаньте ходить на сходки стартаперов, избегайте стартап-тренеров
• Учитесь писать код двумя методами: практика и поиск в Google
• Забудьте о курсах, тренингах и книгах
• Делайте простейшие вещи, которые можно осилить с вашим текущим уровнем знаний (т.е. не тратье время на супер-классные новые инструменты, типа React, которые придется осваивать год)
• Делайте все самостоятельно

Руководствуясь этими принципами, я хотел попробовать научиться писать код и создавать приложения. Первоклассным кодером я, конечно, стать не рассчитывал, но надеялся, что сумею реализовать свою идею приложения для серфинга.

Старт

3 декабря 2016 г. я купил домен whentosurf.co за 6 долларов на Namecheap. Уже одно это меня взбудоражило.

Я нашел бесплатный хостинг atspace.com и загрузил первую в своей жизни HTML страничку «Hello World».

Затем я задумался о том, где достать данные для приложения. Я погуглил погодные API и нашел World Weather API. Они предоставляют информацию бесплатно первые два месяца, и у них есть все данные, которые были мне нужны: направление ветра, периоды свелла и время прилива.

У меня не было никакого опыта в написании кода. Поэтому я начал перебирать языки, которые мне встречались раньше.

Моя первая цель была проста: брать данные с API и выводить их в HTML. Желательно, чтобы весь процесс был как можно проще и требовал минимума подготовки. Я хотел иметь возможность изменить одну строку кода и тут же протестировать, все ли работает. Все должно было быть элементарно, без установки серверов, фреймворков, компилирования, деплоя — без вот этого всего. Мне нужно было работать быстро, а не вдумчиво писать по одной строчке кода в день, как некоторые большие команды, которые делают все «как надо».

Реализация

Сначала я попробовал JavaScript. Для такого новичка, как я, большой плюс, что нужен только браузер. Но чистый JavaScript был оказался для меня сложным. Особенно сбивали с толку асинхронные функции обратного вызова.

// Javascript
var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();

К черту. Слишком трудно!

Python

Я подумывал насчет Python. Синтаксис у него очень читаемый, но мне бы пришлось установить фреймворк Django, создать для него особый веб-сервер и так далее.
И все это чтобы просто запустить скрипт! Так что Python отпал.

PHP

Я попробовал PHP и сразу понял: вот оно. Я знал, что о нем говорят: «PHP — это не круто, тебе нужен Ruby, Node, React, Bla.JS». Но мне было все равно. Потому что этот язык оказался самым быстрым вариантом для тех, кто начинает с нуля. Серьезно, PHP уже был запущен на моем компьютере (macOS) и установлен на веб-сервер. Никаких дополнительных усилий!

Потребовалось всего несколько минут работы, чтобы сделать первый в жизни API вызов и извлечь данные. Дамы и господа, представляю вам мой первый код!

$url=’http://api.worldweatheronline.com/premium/v1/marine.ashx?key=2a5fc1776e234e14a7e172153160312&q=-8.659263,115.130158&format=json&tide=yes&tp=1&date=;
$json = file_get_contents($url);
$data = json_decode($json);
$swell_period = $data->data->weather[0]->hourly[0]->swellPeriod_secs;

За одну ночь я создал свое первое веб-приложение (на самом деле, сайт):

После нескольких дней работы я вдохновился примерами из Интернета и сделал такой макет:

Я был очень горд собой.

Только не git

Где-то в это же время все наперебой стали советовать мне использовать GitHub и прекратить загрузку через FTP.

Мне не нравится каждый раз делать так с git:

git add, git commit -m “Bla Bla Commment ”, git push origin master

Вместо этого я просто создал папку, а для бэкапов каждый раз делаю новую, прописывая в названии вчерашнюю дату. Так я избегаю git. Но собственная незамысловатая система управления версиями у меня все-таки была.

Создание собственного веб-сервера

Мой бесплатный хостинг никуда не годился. После нескольких недель он перестал нормально работать, и мне предложили завести собственный VPS.

Я испугался: мне вовсе не хотелось заниматься настройкой сервера. Но особого выбора у меня не было, ведь бесплатный хостинг не работал. Поэтому я заплатил DigitalOcean 5 $, проследовал инструкциям, прописанным в их пошаговых рукодствах, и все настроил. Оскар, парень из Швеции, которого я встретил в коллективном офисе на Бали, помогал мне с VPS сервером, когда я заходил в тупик.

Переход на HTTPS

Препятствия не кончались. Мне нужно было получать данные о местоположении пользователя через GPS из браузеров. Для этого я ввел код JavaScript. Но Chrome в последнее время позволяет определять местоположение только на сайтах с сертификатом HTPPS. Так что сначала мне нужно было разобраться, как настраивать Lets Encrypt. Это было безумно сложно, но опять-таки, я просто следовал инструкциям — и все получилось. Теперь мой сайт был переведен на HTTPS.

На полпути

После месяца работы мой код разросся до огромных размеров. Но я как-то ухитрялся понимать, что за что отвечает, благодаря своим сумасшедшим встроенным комментариям:

Сбор отзывов

Эрик Райз из Lean Startup посоветовал мне наладить обратную связь с пользователями как можно скорее.

Еще один мой знакомый по коллективному офису, Марк, предложил такой способ опрашивать людей: прикрепить планшет, на котором запущено мое приложение, и ящик для отзывов на стену. Это имело смысл, потому что здесь 40% людей — серферы (Dojo находится в двух шагах от пляжа). Мой ящик выглядел так:

За день я собрал всего несколько комментариев. Идея не выстрелила. Я попросил у пользователей фидбэка, и они отреагировали без особого энтузиазма. У них не было интереса к моему приложению.

Темное болото отчаяния

В это время радостное волнение от осознания, что я делаю свое первое приложение, начало пропадать. Это уже не было так захватывающе, скорее мучительно. Теперь я неделями работал днем на своей основной работе, а по ночам сидел допоздна, чтобы довести приложение до ума.

Я показал приложение своему инструктору по серфингу, и он сразу сказал, что идея провальная, потому что «чтобы опеределить, в какое время лучше всего кататься на волнах, нужно учитывать слишком много факторов».

Я понимал, что он, возможно, прав – ведь мне и правда не удавалось до сих пор предсказать время. Мне не хватало данных и навыков написания кода, чтобы обобщить всю информацию, оценить ее и выбрать время для серфинга.

Вдобавок мое приложение работало ТОЛЬКО на Бали. У меня не было возможности предоставлять достоверную информацию для серферов из других локаций. А хотелось, чтобы серферы из любой точки земного шара могли открыть http://whentosurf.co и немедленно получить всю необходимую информацию на текущий день.

Я хотел сдаться – какой смысл делать то, чем никто не будет пользоваться? И как мне получить столько данных, чтобы приложение могло быть полезным людям по всему миру?

В довершение всего я подхватил глазную инфекцию. Я сидел с красными глазами и не мог даже смотреть в ноутбук.

Но я закапал в глаза капли и продолжил кодить.

Второй раунд

Я поговорил с друзьями и они посоветовали продолжать работу. Петер сказал, что это нормально и «на этом этапе многие бросают все, поддаются страху и не доводят продукт до релиза».

Следующие несколько недель я работал в жестком режиме. Мы ввели систему денежных штрафов, чтобы заставить себя закончить задачи, в моем случае – приложение для серфинга.

Пускай мое приложение никому не будет нужно, я все равно хотел закончить его. Мне хотелось довести проект до запуска.

Наши «ночные смены» начинались с 8 вечера и продолжались до 6 утра. Мы слушали техно и пили чай.

Формула расчета лучшего времени для серфинга

Я хотел узнать, как вычислить лучшее время для серфинга, но не мог сделать это при помощи кода. Значит, мне нужно было начать как-то по-другому. Я составил таблицу и начал экспериментировать с формулами:

Затем путем проб и ошибок я перевел эти формулы в код:

И сработало! Ну, почти

После этой попытки приложение стало выдавать рейтинги для любой локации в мире. Включая места, где вообще нет пляжей для серфинга – например, не знаю, Казахстан. Но не беда, это ведь была первая версия. По крайней мере, теперь все хоть как-то работало:

План запуска

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

Мой план:

• Самостоятельно отправить приложение на Product Hunt (не хочу быть обязанным своим успехом influencers, хочу, чтобы мой продукт пробился за счет собственных достоинств) — UPD: ТОЛЬКО ЧТО ЗАПУСТИЛ ПРИЛОЖЕНИЕ на Product Hunt.
• Найти на Facebook и в Сети сообщества по серфингу, поделиться с участниками приложением, спросить, что они об этом думают, и продолжать его дорабатывать.
• Собирать email-адреса с помощью поля MailChimp в нижней части экрана, чтобы рассылать пользователям обновления, касающиеся серфинга в их регионе (позже, я еще не написал код) и тем самым подталкивать их вернуться на сайт.
• Если это сработает, конкурировать с крупными игроками вроде Magic Seaweed, предлагая пользователям более простую и подходящую для начинающих серферов схему взаимодействия с приложением.

Временные и денежные расходы

Время

Я подсчитал все потраченное мною время при помощи приложения Toggl. Вышло около 118 часов

Деньги

Доменное имя = 6$ / год
VPS = 5$ / месяц
Итого: 11$

Если бы я попросил какую-нибудь компанию реализовать мое приложение для серферов, уверен, это бы мне стоило на $29,989 больше :)

Использованные инструменты

Я использовал:

• Sublime Text Editor для написания кода
• Namecheap для регистрации домена
• Digital Ocean для VPS
• LetsEncrypt для SSL
• Google Analytics для измерения траффика
• Toggl, чтобы отслеживать время
• Тонны стикеров для записи задач

Мой код – открытый ресурс

Весь мой код доступен на GitHub. Он супер хардкорный. Никакого MVC, все в одном файле

Чему я научился?

1. Работайте над своими собственными проблемами. Это лучше всего, потому что до них-то вам точно будет дело. Вычисление лучшего времени для серфинга стало моей навязчивой идеей, и это сделало весь процесс легче (хотя все равно было сложно). Первый ваш пользователь – это вы сами.
2. Очень помогают хорошие наставники, которые уже вышли на тот уровень, к которому вы стремитесь. В этом отношении полезны коллективные офисы типа Dojo – там вы встретите людей, работающих над интересными и успешными проектами.
3. Учитесь на практике. Не надо покупать/читать книги. Не надо записываться на курсы. Не надо платить учителям. Просто гуглите и пользуйтесь тем, что уже освоили. А если вам нужны наставники, имейте в виду: лучшие из них консультируют бесплатно, потому что они уже успешны и не нуждаются в ваших деньгах! Также избегайте тренеров по стартапам – это пиявки, которые хотят только высосать из вас последние деньги.
4. Не бойтесь использовать новые технологии. Я боялся связываться с кодом, потом с API, потом с настройкой серверов, потом с HTTPS. Но я сделал это. А когда попробовал, все оказалось не так страшно.

Действуйте! Не сдавайтесь. Всегда старайтесь закончить свой проект.

Автор: Everyday Tools

Источник