キーストン.JS 101

ピクニコのBicanskiによる写真

導入
前に、私は研究データを集めるためにウェブサイトとアプリから成る小さなプロジェクトに取り組んでいました.それは私が私のクライアントのために通常働いている一種のプロジェクトです.ほとんどの場合、その種のプロジェクトのための私のスタックはヘッドプレスCMSとしてWordPressから成ります.JSフロント、およびカスタマイズされたノード.データ収集のためのJSアプリ.しかし、しばしば、私はこれが一種の過ちであると感じます.特に最後のケースで.それで、私はより良い解決策を探すことに決めました.簡単な研究の後、私はキーストンに固執することに決めました.JS、それは私が必要とするすべてを持っています.しかし、それはカスタマイズのビットを必要としました(前の記事でより多くの).これらのカスタマイズは私がそれらについて書くことに決めたほどおもしろかったです、しかし、私が最後の記事を書いていたとき、私は彼らがかなりニッチで、専門であると理解しました.そして、キーストンへの少しの導入もありません.最新バージョンでは、昨年末にリリースされた.そして、私はカスタムフィールドやコンポーネントについての書き込みからブレーキを取るとキーストーンに簡単な、初心者に優しい紹介に集中する理由です.
キーストーンの新しいバージョン.JSは、2021年の終わりにリリースされました.基本的にはCMSシステムのビルドを表現します.次のバックエンドと管理者のUI.jsしかし、それはタイプセーフPrisma ORMとタイプスクリプトを含むパックがリリースブログpostで述べられているように開発者の経験を高めることを含んでいました:

We extended Keystone’s foundations in Node, Express, and JavaScript, by adding Prisma to take care of the database layer and NextJS to power Keystone’s Admin UI. We also introduced a strongly-typed developer experience to make Keystone **the most advanced TypeScript Headless CMS**.

Prisma Keystoneの使用に感謝するたびにデータスキーマの更新があるマイグレーションを生成することができます.それは確かにCOレベル低レベルの実装の詳細についての懸念なしにアプリケーションのビジネスロジックを構築することができます.いくつかのケースでは、それは我々が欲しいものではないかもしれませんが、一般的には、それは箱の外で動作するようにしてうれしいです.ORMの問題は1 + nの問い合わせによっていくつかのパフォーマンスの問題があるかもしれませんが、容易に緩和できます.また、ここでは常に快適であるGraphSQLの組み込みサポートがあります.
を、すべての機能は、ラリー印象的ですが、使用例はキーストンのための知事ですか?最初のそれはCMSのですので、カスタムフロントエンドでウェブサイト、ランディングページやブログのコンテンツを管理することは、それが輝く使用しています.しかし、データ構造を作成するその広い可能性のために、それは多くのより多くのケースで使われることができます.例えば、電子商取引 — 課題は、カートのための適切なモデルを設計するだけであり、支払い処理のような追加機能は、潜在的な表現の組み込みの拡張性を使用して追加することができます.js

インストール
私たちの手を汚すし、自分のキーストーンのインスタンスを起動するのは、高い時間だと思う.

依存
基本的に我々が必要とするのはノードです.JSインストール.ボックスのキーストンはSQLiteで来るので、追加のデータベースの必要はありません.しかし、常にPostgreSQLに切り替えることができます、今のところ私は単純さのために最初のオプションに固執するつもりです.

始めましょう
最初にコマンドを1つだけ必要とします.端末を開き、タイプ:

$ npx create-keystone-app

まず、CLIは我々のアプリの名前を求めて、単純なキーストンのブログを試してみましょう:

次に、そのフォルダにCDをプロンプト(LinuxまたはMacを使用していると仮定して、必要に応じてWindows相当コマンドを使用してください)、Win devとプロジェクトを起動し、ブラウザでhttp://localhost:3000を開きます.
ここでは、管理者ダッシュボードに初期ユーザーアカウントとログインを設定することができます.ボックスのうち、すでに作成された2つのリストがあります.ユーザーとポストので、我々はすべての基本的なブログを書き始める必要があります.また、Grapql API経由ですべてのデータにアクセスするか、またはhttp://localhost:3000/API/GraphSQLの下でサンドボックスをアクセスできます.

ファイル構造
では、プロジェクトのファイル構造を見てみましょう.

最初の2つのフォルダには、自動生成されたビューの管理UI、NPMパッケージに3番目の依存関係が含まれます.キーストン.データベーススキーマ.グラフとスキーマ.Prismaは、データベース自体、GraphSQLとORMの設定は、それぞれも自動生成され、私たちの変更に基づいて.最後の3つの重要なファイルがキーストーンです.東工大理TSとスキーマ.まず、プロジェクトの全体構成を含みます — データベースの設定と他の2つのAuth(セッション)の設定とリストの定義からインポートされます.
< div >
< tt > Authセッティングは箱から本当にうまくいきます、そして、あなたが彼らの興味があるならば、私は彼らに集中しません.もっと興味深いのはリストの設定です.p >
< H 4 >
docs
スキーマ
<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/eabald/195ca58e854992d26aaf78578e541f69.js//>
< div >
このファイルはリストの種類のオブジェクトをエクスポートします.ここで3つの定義があります.それぞれが追加の設定オブジェクトを持つ関数リストを呼び出します.このオブジェクトは最大6つのプロパティを持つことができます — フィールド.このリスト内のすべてのフィールドの一覧を保持します.ここのフィールドタイプの量は巨大ではありません、しかし、それはすべての基本的な必要性( )のために十分です、それはすべてのデータ型、ファイルとイメージ、他のリストとリッチテキストエディタへの関係のためにフィールドを含みます.小道具の残りの部分は、UIプロップの表示オプションのような、より進んだ設定オプションを保持しています.フックのprop、追加のデータベース、またはGraphSQLの設定でこのリストに関連する副作用があります.さらに、この設定プロパティの一部は、それぞれのフィールドのレベルで直接機能を拡張できます.p >
すべてのこの設定オプションは、外部ツールを統合し、さらに拡張できるように副作用を含む各リストの複雑なスキーマを構築する広い可能性を与えます.拡張性の話題では言及する価値がある2つの追加のものがあります.メインコンフィグオブジェクト(Keystone . ts)のすべてのフィールドの上に、下にある急行の設定を変更することができます.jsサーバー.オプションはかなり基本的です — ExtendexressApp.基本的にこのオプションは、私たちのバックエンドにより多くの残りのエンドポイントまたはミドルウェアを追加することができます.第2の重要なオプションは、ExtendGraphlSchemaです.一般的には前のものと同じ仕事をしますが、カスタムのGraphSQLリゾルバを追加することもできます.p >
< H 3 >
more
概要
<高橋潤子>
私は知っている私はかろうじて本当にキーストーンの表面を傷だ.JSはできますが、一方で、私はそれに本当の可能性を示したことを望みます.一見、それは限られたオプションでかなり基本的なCMSのように見えます.しかし、我々が深く掘るとき、可能性のトンと慎重な計画と明確な要件の後、それは我々が別のカスタムシステムを構築する必要はないことが判明する可能性があります.代わりに、ベースとして何かいいものを使って拡張してください.p >
それはキーストンについての3番目の記事です.jsこの1つで、私は一歩後退することに決めて、基本になります.私はそれを試してみるためにあなたを説得するのに十分だと思います.来週、私はシリーズとカスタムコンポーネントに戻ってきました.今回はJSONフィールドを拡張し、ページナビゲーションメニューを構築するためのデータとして使用します.p >