2か月でコーディングを学び、Webアプリケーションを作成してProduct Huntで起動した方法

2か月前、私は最初のWebアプリケーションを作成する旅を始めました。 これはWhen To Surfと呼ばれる非常にシンプルなWebアプリケーションであり、毎日サーフィンをするのに最適な時間をサーファーに伝えます。 今日、私はそれを起動しています。



UPD：発売後、結果に関する記事を書きました

私の名前はアンドレイです

私はウクライナ出身で、 Railswareでリモートで働いています。 IT企業の多くの人々と同様に、私は自分の製品を作成することを夢見ていました。 人々が毎日使用する独自のアプリケーション。 いつかこの夢を現実にしたかった。

問題

私は現在、バリ島から離れて働いています。 そして、たまたまバリはサーフィンに最適な場所の1つです。 ここに移動してからレッスンを受け始めましたが、サーフィンを始めたとき、困難に直面しました。天気の情報や予報を提供するMagic Seaweedのようなサーファーのアプリケーションを理解することは非常に困難でした。 現在のデータ、うねり、風速、風向など、さまざまなデータがたくさんあります。











もちろん、多くの情報がある場合は素晴らしいことですが、人々が何も理解できない場合、それは何を意味しますか？ このデータをすべて解読する方法については、インターネット上に10ページのマニュアルがありました。



私の意見では、これはUXデザイナーの悪夢です。



しかし、生の気象データを収集し、特別なコードを使用して「サーフィン」の観点からそれらを分析および評価できるとしたらどうでしょう（そのような言葉はあるのでしょうか？）



やりたかったのですが、できませんでした。 プログラミングに真剣に取り組んだことがないからです。 どこから始めればいいのか分かりませんでした。 しかし、アプリケーションを作成する大規模なチームを雇う手段がありませんでした。 したがって、私はこの考えを捨てました。 しばらくの間。

ピーター・レベルズ

数か月後、 道場 （バリ島の集合オフィス）でピーターレベルズに会いました。 彼はかつて、12か月で12のスタートアップを立ち上げるという目標を設定しました。そして、このプロジェクトの一環としてNomad Listが作成されました。 彼は私にインスピレーションを与えてくれました。 彼のビデオを見ることを強く勧めます。 その原則は次のとおりです。

• 個人的に懸念される問題を解決する
• スタートアップの集まりに行くのをやめ、スタートアップのトレーナーを避ける
• Googleでの練習と検索の2つの方法でコードを書くことを学ぶ
• コース、トレーニング、書籍を忘れる
• 現在の知識レベルで習得できる最も簡単なことを行います（つまり、1年間習得しなければならないReactなどの超クールな新しいツールで時間を無駄にしないでください）
• 自分でやる

これらの原則に沿って、コードの記述方法とアプリケーションの作成方法を学びたいと思いました。 もちろん、私は一流のエンコーダーになることを期待していませんでしたが、サーフィンアプリケーションのアイデアを実現できることを望みました。

開始する

2016年12月3日Namecheapでwhentosurf.coドメインを6ドルで購入しました。 これだけで私は興奮しました。



私は無料のatspace.comホスティングを見つけ、私の人生で最初のHello World HTMLページをダウンロードしました。









次に、アプリケーションのデータを取得する場所について考えました。 私は天気APIをグーグル検索し、 World Weather APIを見つけました。 最初の2か月間は無料で情報を提供し、風向、うねり期間、満潮など、必要なすべてのデータを持っています。



コードを書いた経験はありませんでした。 そのため、以前に出会った言語を整理し始めました。



最初の目標は単純でした。APIからデータを取得し、HTMLで出力しました。 プロセス全体ができるだけ単純であり、最小限の準備が必要であることが望ましい。 1行のコードを変更して、すぐにすべてが機能するかどうかをテストできるようにしたかったのです。 サーバー、フレームワーク、コンパイル、デプロイなしで、すべてが初歩的である必要がありました。 私は迅速に仕事をする必要があり、「思い通りに」すべてを行う大規模なコマンドのように、1日に1行のコードを思慮深く書く必要はありませんでした。

実装

最初にJavaScriptを試しました。 私のような初心者にとって、大きなプラスはブラウザだけが必要なことです。 しかし、私にとって純粋なJavaScriptは困難でした。 非同期コールバック関数は特に混乱していました。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

地獄へ。 難しすぎる！



Python



私はPythonについて考えていました。 構文は非常に読みやすいですが、Djangoフレームワークをインストールし、特別なWebサーバーを作成する必要があります。

スクリプトを実行するだけです！ そのため、Pythonは削除されました。



Php



PHPを試したところ、すぐに気付きました。 彼らは彼について話していることを知っていました：「PHPはクールではありません。Ruby、Node、React、Bla.JSが必要です。」 しかし、私は気にしませんでした。 この言語は、ゼロから始める人にとっては最速の選択肢であることが判明したためです。 真剣に、PHPは私のコンピューター（macOS）で既に実行され、Webサーバーにインストールされていました。 余分な労力はありません！



最初の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;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ある夜、私は最初のWebアプリケーション（実際にはWebサイト）を作成しました。









数日間の仕事の後、私はインターネットからの例に触発され、このレイアウトを作成しました。





私は自分自身をとても誇りに思っていました。

gitではありません

同時にどこかで、誰もがGitHubを使用してFTP経由のダウンロードを停止することを勧めるようになりました。



私は毎回gitでこれを行うのは好きではありません：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

代わりに、フォルダを作成し、新しいフォルダを作成するたびにバックアップのために、昨日の名前を書きます。 だから私はgitを避けます。 しかし、私はまだ自分の簡単なバージョン管理システムを持っていました。

独自のWebサーバーを作成する

私の無料ホスティングは良くありませんでした。 数週間後、それは正常に動作しなくなり、私は自分のVPSを持つように提案されました。



私は怖かった：私はサーバー構成をまったくしたくなかった。 しかし、無料のホスティングが機能しなかったため、あまり選択肢がありませんでした。 そこで、 DigitalOceanに 5ドルを支払い、ステップバイステップマニュアルの指示に従い、すべてをセットアップしました。 オスカー 、私はバリの集合オフィスで会ったスウェーデンから来た男は、私が行き止まりに達したときにVPSサーバーで私を助けていました。

HTTPSに切り替える

障害は終わりませんでした。 ブラウザからGPSを介してユーザーの位置データを取得する必要がありました。 これを行うために、JavaScriptコードを入力しました。 ただし、Chromeでは最近、HTPPS証明書を持つサイトでのみ場所を許可しています。 そのため、最初にLets Encryptの設定方法を理解する必要がありました。 それはめちゃくちゃ複雑だったが、再び、私はちょうど指示に従った-そして、すべてがうまくいった。 現在、私のサイトはHTTPSに翻訳されています。

半ば

1か月の作業の後、私のコードは巨大なサイズに成長しました。 しかし、私のクレイジーな組み込みのコメントのおかげで、どういうわけか自分が担当していたことを理解できました。

フィードバック収集

Lean Startupの Eric Riseは、できるだけ早くユーザーのフィードバックを得るようにアドバイスしました。



集合オフィスにいる私のもう1人の友人であるMarkは 、人々にインタビューするそのような方法を提案しました。私のアプリケーションが実行されているタブレットと、壁にあるフィードバックボックスを添付してください。 ここの人々の40％がサーファーであるため、これは理にかなっています（道場はビーチから目と鼻の先です）。 私の箱は次のように見えました。







日中にコメントをいくつか集めました。 アイデアは発動しませんでした。 ユーザーからのフィードバックを求めましたが、ユーザーはあまり熱心に反応しませんでした。 彼らは私の申請に興味がありませんでした。

絶望の暗い沼

この時点で、最初のアプリケーションを作成していたことに気付いた喜びは消え始めました。 それはもはやそれほど刺激的ではなく、むしろ苦痛でした。 今では、主な仕事で日中何週間も働き、夜はアプリケーションを思い浮かべるために夜遅くまで座っていました。



私はサーフインストラクターにアプリケーションを見せましたが、彼はすぐにそのアイデアは失敗だと言いました。「波に乗るのが最適な時間を判断するには、あまりにも多くの要因を考慮する必要があるからです」



私は彼がおそらく正しいことを理解していました-今まで本当に時間を予測することができなかったからです。 すべての情報を要約し、評価し、サーフィンの時間を選択するのに十分なデータとコード作成のスキルがありませんでした。



さらに、私のアプリケーションはバリ島でのみ機能しました。 他の場所のサーファーに信頼できる情報を提供できませんでした。 そして、世界中のサーファーがhttp://whentosurf.coを開いて、今日の必要な情報をすぐに入手できるようにしたかったのです。



私はあきらめたかった-誰も使用しない何かをすることのポイントは何ですか？ そして、アプリケーションが世界中の人々に役立つように、どのように大量のデータを取得するのですか？



それを補うために、私は目の感染をキャッチしました。 私は赤い目で座って、ラップトップを見ることさえできませんでした。



しかし、私は目に滴を入れて、コーディングを続けました。

二回戦

私は友人と話をし、彼らは私に働き続けることを勧めました。 ピーターは普通だと言い、「この段階では、多くの人がすべてをあきらめ、恐れに屈し、製品をリリースしない」と言いました。



次の数週間、私はハードモードで働きました。 罰金のシステムを導入して、強制的にタスク（私の場合はサーフィンアプリケーション）を完了させました。



誰も私のアプリケーションを必要としません、私はまだそれを終えたかったです。 プロジェクトを立ち上げたいと思いました。



私たちの「夜勤」は夕方8時から始まり、朝6時まで続きました。 テクノを聴いてお茶を飲みました。

サーフィンに最適な時間を計算するための式

サーフィンに最適な時間を計算する方法を学びたかったのですが、コードではできませんでした。 だから、どういうわけか違うやり方で始めなければならなかった。 テーブルをコンパイルし、数式を試し始めました。







次に、試行錯誤を通じて、これらの式をコードに変換しました。

そしてうまくいきました！ まあ、ほとんど

この試みの後、アプリケーションは世界のあらゆる場所の評価を発行し始めました。 サーフィン用のビーチがまったくない場所を含む-たとえば、カザフスタンはわかりません。 しかし、それは問題ではありません。最初のバージョンでした。 少なくとも今ではすべてが何らかの形で機能しました：

打ち上げ計画

アプリケーションの最初の基本バージョンが準備できました。 今日、私はアプリケーションを立ち上げているので、この投稿はほぼ終わりました。 後で投稿を更新して、どのように行ったかを説明します。



私の計画：

• 個別にアプリケーションをProduct Huntに送信します（成功に影響を与えるインフルエンサーになりたくはありません。製品に独自のメリットを犠牲にして突破したいです）-UPD： 製品HUNTのアプリケーションのみ 。
  
  
  
  
• FacebookやWebでサーフィンコミュニティを見つけ、参加者とアプリを共有し、参加者にそれについてどう思うかを尋ね、さらに改善を続けます。
  
  
  
  
• 画面の下部にあるMailChimpフィールドを使用して電子メールアドレスを収集し、ユーザーの地域でのサーフィンに関する最新情報を送信します（後で、コードをまだ作成していません）。
  
  
  
  
• これが機能する場合、 Magic Seaweedのような大規模なプレーヤーと競い合い、ユーザーにアプリケーションとのよりシンプルでより適した初心者サーファーの相互作用スキームを提供します。

時間とお金の費用

時間



Togglアプリケーションの使用に費やしたすべての時間を計算しました。 約118時間



お金



ドメイン名= 6 $ /年

VPS = 5 $ /月

合計：11ドル



会社にサーファー向けのアプリケーションの実装を依頼した場合、さらに29.989ドルの費用がかかると確信しています:)



使用済みツール



私が使用した：

• コードを書くための崇高なテキストエディター
• ドメイン登録のNamecheap
• VPSのデジタルオーシャン
• LetsEncrypt for SSL
• トラフィックを測定するためのGoogle Analytics
• 時間を追跡するトグル
• タスクを記録するための大量のステッカー

私のコードはオープンリソースです

私のコードはすべてGitHubで入手できます 。 彼は超ハードコアです。 MVCなし、すべて1つのファイルに

私は何を学びましたか？

1. 自分の問題に取り組みます。 あなたは間違いなくそれらを気にするので、これは最高です。 サーフィンするのに最適な時間を計算することが私の強迫観念となり、プロセス全体が簡単になりました（それでもなお困難でしたが）。 最初のユーザーは自分です。
   
   
   
   
2. すでにあなたが多くの助けを求めているレベルに達した良いメンター。 Dojoなどの集合オフィスは、この点で役立ちます。そこで、興味深く成功したプロジェクトに取り組んでいる人々に会うことができます。
   
   
   
   
3. 練習することを学びます。 本を購入/読む必要はありません。 コースに登録する必要はありません。 教師に支払う必要はありません。 ただグーグルして、あなたがすでにマスターしたものを利用してください。 そして、メンターが必要な場合は、覚えておいてください。彼らのベストは無料でアドバイスします。彼らはすでに成功しており、あなたのお金を必要としないからです！ また、スタートアップのコーチも避けてください-これらはあなたから最後のお金を吸い取りたいだけのヒルです。
   
   
   
   
4. 新しいテクノロジーを使うことを恐れないでください。 私はコード、API、サーバー設定、HTTPSをいじることを恐れていました。 しかし、私はそれをやった。 そして、私が試みたとき、すべてはそれほど怖くありませんでした。

行動する！ あきらめないでください。 常にプロジェクトを終了してください。