グリッチは、コードを学び、実験するための非常に素晴らしいプラットフォームです。この投稿では、グリッチを紹介し、ゼロからヒーローに移行します
グリッチコーディング方法を学ぶのに最適なプラットフォームです。
私は私のチュートリアルの多くでグリッチを使用しています、私はそれが素晴らしいツールにショーケースコンセプト、そしてまた人々があなたのプロジェクトを使用できるようにするそしてそれらの上に構築します。
これは私がグリッチで作ったプロジェクトの例です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リクエストが届くとすぐに、再開されます
グリッチの概要
これはグリッチのホームページです。クールであるために紹介することにしたいくつかのプロジェクトと、いくつかのスタータープロジェクトが表示されます。
アカウントの作成は無料で簡単です。「サインイン」を押して、「エントリポイント」としてFacebookとGitHubのどちらかを選択するだけです（GitHubをお勧めします）。
以下を承認するためにGitHubにリダイレクトされます。
ログインすると、ホームページが変更され、プロジェクトも表示されます。
クリックするあなたのプロジェクトURLにあなたの名前が含まれているプロフィールページに移動します。私のはhttps://glitch.com/@flaviocopes。
あなたはできるピンプロジェクトは、たくさんあるときにもっと簡単に見つけることができます。
リミックスのコンセプト
もちろん、最初に始めたときは、独自のプロジェクトはありません。
グリッチを使用すると、開始が非常に簡単になり、空白のプロジェクトから開始することはありません。あなたはいつもリミックス別のプロジェクト。
Twitterで見つけたプロジェクトや、Glitchホームページに掲載されているプロジェクトなど、好きなプロジェクトをリミックスすることも、定型的なプロジェクトから始めて何かを始めることもできます。
これらのコレクションには、他にも多くのスターターグリッチがあります。
あなたが今コーディングを学んでいるなら、グリッチコレクションのコーディングを学ぶとてもいいです。
デモやテストに常に使用するスターターアプリをいくつか作成しました。それらは次のとおりです。
グリッチを使用すると、独自のビルディングブロックを非常に簡単に作成できます。プロファイルに固定することで、常に一番上に配置して、簡単に見つけることができます。
グリッチをリミックスする
構築したいグリッチができたら、それをクリックするだけで、ウィンドウが表示されます。
3つのボタンがあります：
- プレビューグリッチは何かをするコードです。これは、グリッチの結果を示しています。
- プロジェクトの編集プロジェクトのソースが表示され、編集を開始できます
- これをリミックスグリッチを新しいものに複製します
グリッチをリミックスするたびに、ランダムな名前で新しいプロジェクトが作成されます。
別のものをリミックスして作成した直後の不具合は次のとおりです。
グリッチはそれに名前を付けましたguttural-noodle。名前をクリックすると、変更できます。
説明を変更することもできます。
ここから、ゼロから新しいグリッチを作成したり、現在のグリッチをリミックスしたり、別のグリッチに移動したりすることもできます。
GitHubのインポート/エクスポート
GitHubとの間で簡単にインポート/エクスポートできます。これは非常に便利です。
プロジェクトを非公開にする
ロックをクリックすると、グリッチが非公開になります。
新しいプロジェクトを作成する
「新規プロジェクト」をクリックすると、3つのオプションが表示されます。
- node-app
- node-sqlite
- ウェブページ
これは、これらのスターターアプリを見つけてリミックスするために出かけるためのショートカットです。内部で、これらのオプションの1つをクリックすると、既存のグリッチがリミックスされます。
グリッチが発生した場合は、[表示]をクリックすると、アプリが実行される新しいタブが開きます。
アプリのURL
URLに注意してください。次のとおりです。
https://flavio-my-nice-project.glitch.me
それはアプリ名を反映しています。
編集URLは少し異なります：
https://glitch.com/edit/#!/flavio-my-nice-project
プレビューはのサブドメインで実行されますglitch.me、編集が行われている間glitch.com。
ページの右側にある魚に気づきましたか？他の人がプロジェクトをリミックスしたり、ソースを表示したりできるようにするために、Glitchがページに追加することをお勧めするのは小さなJavaScriptです。
アプリの実行
ソースに変更を加えるたびに、アプリが再構築され、ライブビューが更新されます。
これはとても便利で、変更をリアルタイムで適用すると、開発時に非常に役立つフィードバックがすぐに得られます。
秘密
コードで使用される可能性のあるAPIキーまたはパスワードがすべての人に見られることは望ましくありません。それらの秘密の文字列のいずれかを特別に入れる必要があります.envファイル。横にキーがあります。
共同編集者を招待すると、プロジェクトの一部であるため、共同編集者はコンテンツを見ることができます。
しかし、それをリミックスする人、またはあなたから助けを求められた人は、ファイルの内容を見ることができません。
ファイルの管理
プロジェクトに新しいファイルを追加するのは簡単です。
あなたはできるローカルコンピュータからファイルとフォルダをドラッグアンドドロップします、または「新しいファイルファイルリストの上にある「」ボタン。
また、ファイルの名前を変更、コピー、または削除する方法も直感的です。
ワンクリックライセンスと行動規範
コードにライセンスがあることは、サンプルプロジェクトでは見落とされがちなことの1つですが、他の人があなたのプロジェクトでできること、できないことを決定します。ライセンスがなければ、プロジェクトはオープンソースではなく、すべての権利が留保されているため、コードを再配布することはできず、他の人はそれを使って何もできません（注：これは私の理解であり、IANAL-私は弁護士ではありません）。
グリッチはそれを作ります超簡単ライセンスを追加するには、新しいファイルパネル：
簡単に変更することもできます。
行動規範は、プロジェクトやコミュニティにとってもう1つの非常に重要な要素です。これにより、貢献者はコミュニティへの参加を歓迎され、保護されていると感じることができます。
ザ・行動規範を追加するボタンは、開始できるオープンソースプロジェクトの行動規範のサンプルを追加します。
npmパッケージの追加
クリックpackage.jsonファイルを作成し、まだ持っていない場合は、空のファイルを作成します。
クリックパッケージを追加上部に表示されるボタンをクリックすると、新しいパッケージを追加できます。
また、更新が必要なパッケージがある場合、Glitchは更新が必要なパッケージの数を表示し、クリックするだけで最新リリースに更新できます。
Node.jsのカスタムバージョンを使用する
Node.jsのバージョンを次のように設定できますこれらのいずれかあなたの中でpackage.json。使用する.xメジャーバージョンの最新リリースを使用します。これは、次のように最も便利なものです。
{
//...
"engines": {
"node": "8.x"
}
}ストレージ
グリッチには永続的なファイルシステムがあります。アプリを停止してもファイルはディスクに保存されたり、長時間使用しなかったりします。
これにより、ローカルデータベースまたはファイルベースのストレージ（フラットファイル）を使用して、データをディスクに保存できます。
あなたがあなたのデータを.dataこの特別な名前は、グリッチがリミックスされた状態でコンテンツが新しいプロジェクトにコピーされないことを示します。
ページにグリッチを埋め込む
グリッチを使用してチュートリアルを作成するための鍵は、コードとプレゼンテーションビューをページに埋め込む機能です。
クリック共有そして埋め込みプロジェクト埋め込みプロジェクトビューを開きます。そこから、コードやアプリのみを埋め込むか、ウィジェットの高さをカスタマイズするかを選択できます。そして、そのHTMLコードを取得してサイトに配置します。
グリッチでのコラボレーション
共有パネルから、共同編集者を編集に招待するリンクを使用すると、誰でもリアルタイムでグリッチを編集するように招待できます。
彼らがそれを行うにつれて、あなたは彼らの変化を見ることができます。超カッコイイ！
助けを求める
このコラボレーション機能にリンクされているのは素晴らしい機能です。ページ内のテキストを選択し、挙手アイコンをクリックするだけで、世界中の誰にでも助けを求めることができます。
これにより、言語タグと必要なものの簡単な説明を追加できるパネルが開きます。
完了すると、リクエストはGlitchホームページに表示され、誰でも受け取ることができます。
誰かが助けを求めて飛び込んだとき、あなたが強調表示した行が表示されます。コメントはチャットのようにコミュニケーションするのに良い方法であることがわかりました。
ログを見る
クリックログアプリのすべてのログにアクセスするには：
コンソールにアクセスする
ログパネルから、コンソールボタン。それをクリックして、ブラウザの別のタブでインタラクティブコンソールを開きます。
デバッガー
クリックするとデバッガ[ログ]パネルのボタンをクリックすると、Chrome DevToolsのインスタンスが別のタブで開き、デバッガーのURLへのリンクが表示されます。
変更履歴
優れた機能は、プロジェクト履歴のすべての変更をチェックする機能です。
これはGitの動作とよく似ています。実際、Gitは、⏪ボタンをクリックすると開くこの非常に使いやすいインターフェイスに電力を供給しています。
グリッチはCodepenやJSFiddleとどう違うのですか？
Glitchを他のツールと区別する大きな違いの1つは、サーバー側のコードを実行する機能です。
CodepenとJSFiddleはフロントエンドコードのみを実行できますが、Glitchはアプリの軽量サーバーとしても使用できます-使用制限を念頭に置いてください。
たとえば、1日の特定の時間にWebhookによってトリガーされるExpress.jsサーバーをセットアップして、いくつかの職務を実行しました。別のサーバーで実行されることを心配する必要はありません。Glitchで作成し、そこから直接実行します。
それでおしまい！
グリッチの使用に関する私の小さなチュートリアルが気に入っていただければ幸いです。また、グリッチのキラー機能のほとんどを説明できたと思います。
さらに質問を？
試してみて、カチッと音がするかどうかを確認することをお勧めします。
ザ・グリッチFAQ始めるのに最適な場所です。
楽しむ！
その他のサービスチュートリアル：
- FirebaseHostingの開始方法
- Netlifyで静的サイトをホストするためのチュートリアル
- Web開発者向けのコードリンターとフォーマッター
- 自動トリガーがNetlifyにデプロイされます
- グリッチ、開発者のための素晴らしいプラットフォーム
- 開発者向けのAirtableAPI
- GoogleAPIに対して認証する方法
- ZeitNowチュートリアル
- NetlifyLambda関数のチュートリアル
- FirebaseFirestoreをデータベースとして使用する方法
- Netlifyの書き換えで末尾のスラッシュを修正した方法
- Netlify関数でクエリパラメータにアクセスする方法
- Netlify関数で環境変数を使用する方法
- Netlify関数でnpmパッケージを使用する方法
- DigitalOceanで最初のVPSを作成する方法