グリッチ、開発者のための素晴らしいプラットフォーム

グリッチは、コードを学び、実験するための非常に素晴らしいプラットフォームです。この投稿では、グリッチを紹介し、ゼロからヒーローに移行します

グリッチコーディング方法を学ぶのに最適なプラットフォームです。

私は私のチュートリアルの多くでグリッチを使用しています、私はそれが素晴らしいツールショーケースコンセプト、そしてまた人々があなたのプロジェクトを使用できるようにするそしてそれらの上に構築します。

これは私がグリッチで作ったプロジェクトの例ですReactそしてReactルーターhttps://glitch.com/edit/#!/flaviocopes-react-router-v4-2

グリッチを使用すると、簡単に作成できますデモそしてプロトタイプ単純なWebページからReactやReactなどの高度なフレームワークまで、JavaScriptで記述されたアプリケーションのVue、およびサーバー側のNode.jsアプリ。

それは上に構築されていますノード、および任意のをインストールする機能がありますnpm必要なパッケージを実行しますwebpackとはるかに。

TrelloやStackOverflowなど、大成功を収めた製品を作った人々によってもたらされたものなので、そのための信頼性のボーナスがたくさんあります。

グリッチが素晴らしいと思うのはなぜですか?

グリッチは、それがどのように表示されるかについて私のために「クリック」しましたおかしいインターフェース、しかし唖然としない

あなたはにアクセスできますログコンソール、および多くの内部のもの。

また、インターフェイスで非常に目立つリミックスの概念により、クリーンな状態から始める必要がないため、そこで多くのプロジェクトを作成する可能性がはるかに高くなります。

コードに飛び込むことができます時間を無駄にすることなく自動で、環境のセットアップ、バージョン管理、アイデアへの集中HTTPSURLとCDNメディア資産のために。

また、ロックインはまったくなく、Node.jsだけです(または、サーバー側のJavaScriptを使用しない場合は、HTML、JS、CSSだけです)。

無料なの?

はい、それは無料であり、将来的には有料プランのためにさらに多くの機能を追加する可能性がありますが、現在のグリッチは現在のように常に無料になると彼らは述べています。

次のような合理的な制限があります

  • npmパッケージを除く128MBのスペースと、メディアアセット用の512MBがあります
  • 1時間あたり最大4000件のリクエストに対応できます
  • アプリは、5分間アクセスされない場合、HTTPリクエストを受信しない場合に停止され、長時間実行されているアプリは12時間後に停止されます。 HTTPリクエストが届くとすぐに、再開されます

グリッチの概要

これはグリッチのホームページです。クールであるために紹介することにしたいくつかのプロジェクトと、いくつかのスタータープロジェクトが表示されます。

The homepage as guest

アカウントの作成は無料で簡単です。「サインイン」を押して、「エントリポイント」としてFacebookとGitHubのどちらかを選択するだけです(GitHubをお勧めします)。

Sign in to Glitch

以下を承認するためにGitHubにリダイレクトされます。

Authorize Glitch on GitHub

ログインすると、ホームページが変更され、プロジェクトも表示されます。

The home page once logged in

クリックするあなたのプロジェクトURLにあなたの名前が含まれているプロフィールページに移動します。私のはhttps://glitch.com/@flaviocopes

The Glitch profile

あなたはできるピンプロジェクトは、たくさんあるときにもっと簡単に見つけることができます。

リミックスのコンセプト

もちろん、最初に始めたときは、独自のプロジェクトはありません。

グリッチを使用すると、開始が非常に簡単になり、空白のプロジェクトから開始することはありません。あなたはいつもリミックス別のプロジェクト

Twitterで見つけたプロジェクトや、Glitchホームページに掲載されているプロジェクトなど、好きなプロジェクトをリミックスすることも、定型的なプロジェクトから始めて何かを始めることもできます。

これらのコレクションには、他にも多くのスターターグリッチがあります。

あなたが今コーディングを学んでいるなら、グリッチコレクションのコーディングを学ぶとてもいいです。

デモやテストに常に使用するスターターアプリをいくつか作成しました。それらは次のとおりです。

グリッチを使用すると、独自のビルディングブロックを非常に簡単に作成できます。プロファイルに固定することで、常に一番上に配置して、簡単に見つけることができます。

グリッチをリミックスする

構築したいグリッチができたら、それをクリックするだけで、ウィンドウが表示されます。

Remix glitch modal

3つのボタンがあります:

  • プレビューグリッチは何かをするコードです。これは、グリッチの結果を示しています。
  • プロジェクトの編集プロジェクトのソースが表示され、編集を開始できます
  • これをリミックスグリッチを新しいものに複製します

グリッチをリミックスするたびに、ランダムな名前で新しいプロジェクトが作成されます。

別のものをリミックスして作成した直後の不具合は次のとおりです。

A remixed glitch

グリッチはそれに名前を付けましたguttural-noodle。名前をクリックすると、変更できます。

Rename a glitch

説明を変更することもできます。

ここから、ゼロから新しいグリッチを作成したり、現在のグリッチをリミックスしたり、別のグリッチに移動したりすることもできます。

GitHubのインポート/エクスポート

GitHubとの間で簡単にインポート/エクスポートできます。これは非常に便利です。

GitHub Import export

プロジェクトを非公開にする

ロックをクリックすると、グリッチが非公開になります。

Keep project private

新しいプロジェクトを作成する

「新規プロジェクト」をクリックすると、3つのオプションが表示されます。

  • node-app
  • node-sqlite
  • ウェブページ

Create a new project on Glitch

これは、これらのスターターアプリを見つけてリミックスするために出かけるためのショートカットです。内部で、これらのオプションの1つをクリックすると、既存のグリッチがリミックスされます。

グリッチが発生した場合は、[表示]をクリックすると、アプリが実行される新しいタブが開きます。

The app running

アプリのURL

URLに注意してください。次のとおりです。

https://flavio-my-nice-project.glitch.me

それはアプリ名を反映しています。

編集URLは少し異なります:

https://glitch.com/edit/#!/flavio-my-nice-project

プレビューはのサブドメインで実行されますglitch.me、編集が行われている間glitch.com

ページの右側にある魚に気づきましたか?他の人がプロジェクトをリミックスしたり、ソースを表示したりできるようにするために、Glitchがページに追加することをお勧めするのは小さなJavaScriptです。

The fish on preview

アプリの実行

ソースに変更を加えるたびに、アプリが再構築され、ライブビューが更新されます。

これはとても便利で、変更をリアルタイムで適用すると、開発時に非常に役立つフィードバックがすぐに得られます。

秘密

コードで使用される可能性のあるAPIキーまたはパスワードがすべての人に見られることは望ましくありません。それらの秘密の文字列のいずれかを特別に入れる必要があります.envファイル。横にキーがあります。

共同編集者を招待すると、プロジェクトの一部であるため、共同編集者はコンテンツを見ることができます。

しかし、それをリミックスする人、またはあなたから助けを求められた人は、ファイルの内容を見ることができません。

ファイルの管理

プロジェクトに新しいファイルを追加するのは簡単です。

あなたはできるローカルコンピュータからファイルとフォルダをドラッグアンドドロップします、または「新しいファイルファイルリストの上にある「」ボタン。

また、ファイルの名前を変更、コピー、または削除する方法も直感的です。

Manage the glitch

ワンクリックライセンスと行動規範

コードにライセンスがあることは、サンプルプロジェクトでは見落とされがちなことの1つですが、他の人があなたのプロジェクトでできること、できないことを決定します。ライセンスがなければ、プロジェクトはオープンソースではなく、すべての権利が留保されているため、コードを再配布することはできず、他の人はそれを使って何もできません(注:これは私の理解であり、IANAL-私は弁護士ではありません)。

グリッチはそれを作ります超簡単ライセンスを追加するには、新しいファイルパネル:

Add a license

View the license

簡単に変更することもできます。

Change the license

行動規範は、プロジェクトやコミュニティにとってもう1つの非常に重要な要素です。これにより、貢献者はコミュニティへの参加を歓迎され、保護されていると感じることができます。

ザ・行動規範を追加するボタンは、開始できるオープンソースプロジェクトの行動規範のサンプルを追加します。

npmパッケージの追加

クリックpackage.jsonファイルを作成し、まだ持っていない場合は、空のファイルを作成します。

クリックパッケージを追加上部に表示されるボタンをクリックすると、新しいパッケージを追加できます。

Add an npm package

また、更新が必要なパッケージがある場合、Glitchは更新が必要なパッケージの数を表示し、クリックするだけで最新リリースに更新できます。

Update dependencies

Node.jsのカスタムバージョンを使用する

Node.jsのバージョンを次のように設定できますこれらのいずれかあなたの中でpackage.json。使用する.xメジャーバージョンの最新リリースを使用します。これは、次のように最も便利なものです。

{
  //...
  "engines": {
    "node": "8.x"
  }
}

ストレージ

グリッチには永続的なファイルシステムがあります。アプリを停止してもファイルはディスクに保存されたり、長時間使用しなかったりします。

これにより、ローカルデータベースまたはファイルベースのストレージ(フラットファイル)を使用して、データをディスクに保存できます。

あなたがあなたのデータを.dataこの特別な名前は、グリッチがリミックスされた状態でコンテンツが新しいプロジェクトにコピーされないことを示します。

ページにグリッチを埋め込む

グリッチを使用してチュートリアルを作成するための鍵は、コードとプレゼンテーションビューをページに埋め込む機能です。

クリック共有そして埋め込みプロジェクト埋め込みプロジェクトビューを開きます。そこから、コードやアプリのみを埋め込むか、ウィジェットの高さをカスタマイズするかを選択できます。そして、そのHTMLコードを取得してサイトに配置します。

Embed glitch

グリッチでのコラボレーション

共有パネルから、共同編集者を編集に招待するリンクを使用すると、誰でもリアルタイムでグリッチを編集するように招待できます。

彼らがそれを行うにつれて、あなたは彼らの変化を見ることができます。超カッコイイ!

助けを求める

このコラボレーション機能にリンクされているのは素晴らしい機能です。ページ内のテキストを選択し、挙手アイコンをクリックするだけで、世界中の誰にでも助けを求めることができます。

Ask for help on a line

これにより、言語タグと必要なものの簡単な説明を追加できるパネルが開きます。

Describe your problem

完了すると、リクエストはGlitchホームページに表示され、誰でも受け取ることができます。

誰かが助けを求めて飛び込んだとき、あなたが強調表示した行が表示されます。コメントはチャットのようにコミュニケーションするのに良い方法であることがわかりました。

Help out someone

ログを見る

クリックログアプリのすべてのログにアクセスするには:

The project logs

コンソールにアクセスする

ログパネルから、コンソールボタン。それをクリックして、ブラウザの別のタブでインタラクティブコンソールを開きます。

The project console

デバッガー

クリックするとデバッガ[ログ]パネルのボタンをクリックすると、Chrome DevToolsのインスタンスが別のタブで開き、デバッガーのURLへのリンクが表示されます。

The debugger

変更履歴

優れた機能は、プロジェクト履歴のすべての変更をチェックする機能です。

これはGitの動作とよく似ています。実際、Gitは、⏪ボタンをクリックすると開くこの非常に使いやすいインターフェイスに電力を供給しています。

The history of changes

グリッチはCodepenやJSFiddleとどう違うのですか?

Glitchを他のツールと区別する大きな違いの1つは、サーバー側のコードを実行する機能です。

CodepenとJSFiddleはフロントエンドコードのみを実行できますが、Glitchはアプリの軽量サーバーとしても使用できます-使用制限を念頭に置いてください。

たとえば、1日の特定の時間にWebhookによってトリガーされるExpress.jsサーバーをセットアップして、いくつかの職務を実行しました。別のサーバーで実行されることを心配する必要はありません。Glitchで作成し、そこから直接実行します。

それでおしまい!

グリッチの使用に関する私の小さなチュートリアルが気に入っていただければ幸いです。また、グリッチのキラー機能のほとんどを説明できたと思います。

さらに質問を?

試してみて、カチッと音がするかどうかを確認することをお勧めします。

ザ・グリッチFAQ始めるのに最適な場所です。

楽しむ!


その他のサービスチュートリアル: