お帰りなさい。
このビデオは、このクラスのかなり大きなマイルストーンを表しています。
私たちは、純粋にフロントエンドの技術から、バックとウェブ開発の最初の味に移行しています。
だから、私たちが学んだことのすべてを使い続けるつもりです。
G-mailのCSSA javascriptですが、私たちは完全なWebアプリケーションを作成するのに役立ついくつかの新しいテクノロジーを学びます。
もちろん、いくつかのコードを書く前に、必要なものをいくつか用意しています。
インターネットの仕組みを見直してみましょう。
次に、静的対対話について説明します
ダイナミックなサイト、フロントエンドの適合場所、バックとフィットする場所などがあります。我々は、今後取り組むべき具体的なバックとテクノロジーについて詳しく説明します。
さて、インターネットの仕組みの60秒版から始めましょう。
私たちがここに私にユーロに行くときには、スラッシュコースがあります。舞台裏で起こることがいくつかあります。
最初のことは、私たちのコンピュータが要求を送信するIPアドレスを把握する必要があることです。
だから私たちにあなたが読んでR-OHが来ると、あなたと私のサーバーのためのユニークなロケータである正しいIPアドレスが得られます。
その後、そのIPアドレスとNew Age TTPリクエストが送信されます。
したがって、そのIPアドレスに要求が送信され、空白の要求だけではありません。
それは情報の束を持っています。
その要求に含まれる具体的な詳細については、次のビデオで詳しく説明します。
しかし、短いバージョンは、あなたがそのタイプのリクエストでそれを送信している時間に、自分のIPアドレスのようなものがあるということです。
そして最も重要なのは、あなたが求めている特定のページです。
この場合、私たちはコースのページを求めています。
だから、私の隣に送られてくるリクエストにコード化されているので、そのリクエストを受け取り、何をすべきかを判断します。
それから、何かで反応します。
だから私たちがスラッシュコースを求めているなら、Tomyサーバーはコースページに何が必要かを理解するでしょう。
だから私はそれがデータベースに入り、いくつかの成功といくつかのjavascriptを使って長い1つのHTLファイルにそれらをコンパイルし、最終的に私のコンピュータに戻ってHTPの応答を受け取ったそのページをレンダリングする仕事をしているブラウザに送信します。
実際のコンテンツは、ブラウザが処理して人間として私たちのためにレンダリングする前のものです。
これは、コンピュータがJavaScriptだけでHMOの成功を見るものです。
要約すると、私がURLに行き、最初に入力すると、そのドメインのIPアドレスを見つけて、そのIPアドレスに特定のページを要求するHTP要求を送信し、次にサーバーその要求を受け取ります。
それは何を返すのかを理解する。
そして、それはHで応答します。 M. SSのjavascriptで。
次に議論したいのは、静的Webページと動的Webページの違いです。
私たちはこれについて、インターネットの仕組みに関する初期のビデオの1つでも話しました。
私は、バックエンドの議論が重要であるため、簡単な要約をしたいと思います。
したがって、静的ページと動的ページの2つの異なるタイプがあります。動的Webページとは、サーバー側でコンパイルされ、応答として返送される前にWebページを構築するサイトです。
これまでに書いたことはすべて静的だった。
だからこのようなものでさえ、動的なコンテンツがあるので静的なようには見えません。
私たちは毎回ランダムな色を取得し、それはゲームです。
このトピックの以前のビデオで使用したレストランWebページの例と同じようには静的ではありませんが、javascriptのHMO C
Sと同じであるため静的です。
毎回。
はい、色がランダムなので違って見えますが、動的Webサイトのブラウザで開くたびに同じ基本的な部分です。
私たちは毎回別のjavascriptや別のC Sを持っていて、毎回送り返されています。
だから、たとえばRedditのようなものに行って、ページをリフレッシュすると、私はここで別のコンテンツを得ることができます。
そして、実際に私はあなたが新しいコンテンツを取得するページを新鮮にしているたびに毎回行います。したがって、コンパイルするデータベースがあります。
あなたがログインしているかどうかを確認するいくつかのコードがあります。ログインしている場合は、ここにフォームが表示されませんが、ログアウトボタンが表示されます。
ログインしていない場合はフォームが表示され、ログインやサインアップボタンが表示されます。
G M L C Ssとまったく同じではありません。
したがって、このWebページは、サーバーが実際に何を返信するかを決めるたびに返されるjavascriptのH
ウェブページを私に送る前にウェブページを構築する際には、毎回同じ正確な内容です。
これでバックエンドに少し集中しましょう。
この図は一般的なスタックであり、スタックとは特定のWebアプリケーションが使用するすべてのテクノロジを指す用語です。
だからH T. Melchiorは、javascriptでは、常に大人気のウェブアプリケーションに、今日は常にスタックの一部であると言います。
技術的には、成功していないWebサイトを持つことができます。
それはちょうど恐ろしいでしょう。
私たちは、クライアントサイドのJavaScriptも持っていないWebサイトを持つことができ、それはあまりインタラクティブではありません。
しかし、私たちは元の写真ポートフォリオサイトのような完全に良いウェブサイトを作ることができますが、Eliseusはそれぞれのチームだけですが、私が言ったようにほとんどのWebアプリケーションはHDMIを持っており、バックエンドで返されているJavascriptは多くの変種。
ですから、サーバー側のコードを書くことができる言語はさまざまです。RubyやPython、Skala、Java、JavaScript、THPを記述したり、使用したりすることができます。
そこにはたくさんの選択肢があります。
そこにはさまざまな種類のデータベースがあります。
危機後に投稿し、それを私とMongoに続けると、たくさんの選択肢があります。
したがって、スタックという用語は、開発者がどのような選択をしたのか、またどのような技術を使用するのかを示しています。
これは、開発者がお互いに尋ねるのが非常に一般的な質問です。
その会社のあなたのスタックは何ですか？また、この特定のプロジェクトで使用しているスタックは何ですか。
Redditスタックの実例がここにあります。
だから、RedditがそのWebサイトで使っている技術のいくつかがあります。
したがって、このサイトは、フラスコと呼ばれるフレームワークを使用してPythonで書かれています。
これはエンジンXサーバ上に構築され、ポストスクリプトをデータベースとして使用します。
実際には、Stack shareと呼ばれる異なる会社のスタックを共有するためのWebサイトがあります。
だから私はここでそれを開いている、これはテクスチャのRedditページであり、我々は彼らが使用するすべての異なる技術を見ることができます。
そして遺伝学PythonはAmazon S3を投稿します。
そして、彼らは彼らが何のために使用されているかについて少し下にあなたに伝えます。
アイコンの数に圧倒されないでください。
いくつの名前とこれらのすべての異なるカテゴリとこれらの異なる用語。
それはここで焦点ではありません。
私があなたに示したいのは、さまざまなWebサイトが異なるテクノロジーを使用しているということだけです。
だから、スタックをクリックして、他のいくつかのスタックを見てみましょう。
例えば、空気BとBはFBN Bが私のEskyをよく使用するレールとRubyを使用してJava JavaScriptを使用していることがわかります。
彼らはさまざまな技術を使います。
ではここでスライドに戻ってみましょう。
私が育てたいもう一つのことは、ここの青い線は、バックエンドとフロントエンドの境界を表していることです。
そこで、バックエンドのサーバーによって動的サイトがどのように構築されるかについて説明しました。
ここでは、この図のこの部分は、サイトの動的部分がどこに来るかです。
これは、Pythonで書かれたすべてのロジックです。赤で書かれています。フォームを表示する必要がある場合にユーザーがログインしているかどうかを確認します。ページに追加するものを入力します。ロックインボタンまたはサインアウトボタン。
そのすべては、図の後ろとこの部分で行われ、その後、h tim L C
S SとJavascriptを返します。
だからここに私たちが学んでいるスタックがあります。
ノードjを使用します。
はい。
だから私たちはまだJavaScriptを書いていますが、私たちはバックエンドに書くつもりです。
Expressと呼ばれるフレームワークを使用し、Mangu DBIをデータベースとして使用します。
そして、もちろん、最後のいくつかのユニットで使用したのと同じように、私たちはht m l c
sとJavascriptを持っています。
だから、コースのこの時点では、フロントエンドの開発者、またはフロントエンドの開発者として、ウェブサイトのフロントエンドの作成を開始するために知っておく必要があるすべてを網羅しています。
ここでは、Web開発の話を始めて、Express
Aを使ってサーバ側のコードを書いているところで、それらの2つを一緒にコースの最後に持っていくことにします。 J. Mongo
D-Bにはユーザーログインがありますが、クライアントサイドまたはフロントエンドのjavascriptも作成しています。
H Tim LおよびC Ss。
それが我々が完全なスタックウェブ開発と呼ぶものです。
フルスタックウェブ開発という用語は、バックエンドとフロントエンドのスタックのすべての部分にコードを記述することを指します。
バスケットに実装できる機能の図を示します。
これはRedditを例として再び使用しています。ユーザーがログインしているかどうかを確認するような機能があります。ユーザーにサインアップするデータベースに新しい投稿を追加する新しいコメントを作成するデータベースから投稿を削除する投稿を並べ替える新しいサブRedditはニュースレターにサブスクライバを追加し、それをデータベースに保存します。
もちろん、最も重要なのは、各チームがjavascriptで評価してユーザーに返信し、返信されるものを把握することです。
この青い線を越えて、ここで私たちはフロントエンドに行くでしょう。 M. S.
暗殺者とJavascriptが私に返され、私はブラウザでこれを見ます。
フロントエンドとバックエンドの話もありますが、やや異なったフォーマットです。
この図は、フロントエンドとバックの間のイベントのシーケンスを示しています。
だからフロントエンドで私はそれをcomとリフレッシュを読むために行く場合。
私はRedditホームページのリクエストを送ってきました。それから、それを読むことになります。
その要求はサーバーに送信され、サーバーはホームページを要求していると判断します。
だから、データベースから一番上のポストをつかむサーバ側のロジックがあり、私がここに見ているLNC
SSとjavascriptをすべて作ってから、それを私のブラウザで見る私に送ります。
次のステップは、私がここで犬をタイプしてエンターを押すようにする犬のような検索ボックスに何かを入力することができるということです。
私がenterを押すと、今度はRedditサーバーに新しいリクエストが送信され、私は犬を探していると言います。
だから、サーバーには検索用語の犬を取るロジックがあり、それはデータベース内のその用語にマッチするすべての投稿を見つけ、その後、私は犬の結果ページのJavaScriptで新しい年齢の男性を評価し、それを私に返します。
そして、私のブラウザはそれをレンダリングして、これは明らかに非常に単純化されたバージョンです。
舞台裏ではさらに多くのことが起こり、Redditは実際にはそれを読むのと非常によく似た独自のバージョンのアプリケーションを作成しています。
Expressについてもっと学び、Jを知ったら S. Mongo DBそして我々は完全なスタックアプリケーションを作ります。