健全性によるコンテンツモデリングとデータ設計io

データはほとんどのアプリケーションの基盤であり、右に得るために挑戦.それは
アプリケーションの長期的な健康に不可欠なデータを持っている
理解可能で、柔軟で、ユーザーに関連します.
本稿では、より柔軟なコラボレーションとデザインを可能にするために、Eggheadのデータレベルでコンテンツモデリングをどのように見直しているかについて議論する.

ここで私たちがいたときに

私たちには、同じ根底にあるPostgresデータベースにアクセスできるAPIが2つあります.一つはREST APIで、優れたハイパーメディア機能を持ち、JBuilderの上に構築されています.もう一つは、より多くのパフォーマーであり、我々が望むデータのスライスへの即時の直接アクセスを提供するよく形成されたGraphSQL APIです.
これらのAPIの両方は、基本的なデータベースで公正に1 : 1であり、私が仕事を得た「ハイパー指定された」内容モデルとして見に来たものを定義します、しかし、我々が長年生きていなければならなかった重大な制約でした😅
これらのAPIの両方を展開し、Rails、GraphSQL、およびRubyのかなり深い知識を展開する必要があります.
深い技術的なAPI層はエントリーに大きな障壁を提供します、そして、すべてがデータベースの変化に非常に密接に結びついているので、決して意図されなかった副作用を波及することができます

資源と収集

Eggheadがきらめくような新鮮なアプリだったとき私はその時に明らかだったモデリングを始めた.

Lessons :人々はEggheadにビデオでなくレッスンを見に来ます.

Series :時々、人々は一連のレッスンを見たいです(ビデオでない)

その後、私たちはPlaylists、それらをコレクションと呼ばれる追加し、両方のシリーズとプレイリストは、実際にコースだったことを決めた.lol
基本的に我々が扱っているのは、リソースとコレクションです.コレクションは、参照される他のリソースのリストを持つリソースだけです.

どこになりたい

我々は、a digital gardenを構築したい.我々は、彼らはすぐに必要なものを見つけることができますし、彼らが望む結果に到達できるように、ユーザーにcurate、更新、関連付ける、そして関連するリソースを提示したい.
私たちにとって、これは堅いスキーマなしでAPIの上に座る「メタデータ」層を必要とします、あるいは、操作する技術的なノウハウの深いレベルの必要性.
長年の間、我々は、アプリケーションでコンパイルされる平らなファイルで様々なJavaScript/JSONデータ構造を作成することによってこれをしました.
あなたはsee an example here where we keep various metadata about egghead courses.他の例はthis one that describes the data for our curated home pageである.
これは正直ではないが、それはまだ退屈な、エラーがちであり、私たちはコンテンツを更新するためのUIとしてIDEを使用する必要があります.理想的ではなく、非常に柔軟です.

健全性とコンテンツモデリング。io

いくつかの選択肢を探索し、数年間のフラットJSONファイルとの生活の後、製品は我々が必要なボックスのほとんどをチェックして浮上している.深い柔軟性.使いやすさ.非常に素晴らしいオーサリング体験と歓迎のチームやコミュニティ.
健全性
まず最初に、正気について私に目立つのは、彼らのCLI(コマンドラインインターフェース)を通してあなたのプロジェクトにインストールするということです.これは私にとって最初に理解しにくいことでしたが、デフォルトのスターターデータセットでインストールされたCLIを入手したら、それは意味を持ち始めました.
かつて、私はドキュメントを読んで、それが本当にクリックした柔軟な可能性を調査し始めました.
我々の新生のシステムの中心的な原子は、resourceタイプです.興味があるなら、あなたはhow it evolved here on Githubを見ることができます.typeプロパティとしてのリソース.Eggheadで扱うコンテンツタイプのいずれかを記述でき、必要に応じて常に追加の型を追加できます.タイプは、ポッドキャスト、ビデオ、コース、コレクション、および機能のようなリソースです.
我々は健全性を持つ既存のデータベースを同期することができますので、Postgresにあるすべての項目は、健全性で表されます.それは潜在的に我々のデータ必要の巨大な部分を交換することができました、しかし、現在、我々は手動で彼らを同期させています.

レイアウトではなくリソースのモデリング

私たちにとって重要なのは、コアコンテンツを記述し、拡張する堅牢なリソースモデルを作りたいということです.我々は、それが柔軟で、より典型的なレイアウトより長く生きていて、デザインとプレゼンテーションに重い変化に耐えることを望みます.
我々は意図的にコンテンツモデル内の任意のレイアウトの懸念を避けているので、我々のデータは、我々のアプリを超えて別のコンテキストで動作するようにします.データは、どこではなく、内容は最終的に表示されます説明します.
これは、ページのモデル化の代わりに、コンテンツを記述し、適切で適切なコンテンツを選択できるようにするための資産やメタデータをサポートすることについての階層化を行っています.

実例

説明するために、我々はリソース、新しいコース、evemtなどを展示する大きな旗を提示する

それは、 home-page-date.ts as a property called jumbotron で表されます

{
  id: 'jumbotron',
  title: 'Introduction to Cloudflare Workers',
  byline: 'new course',
  description:
    `Follow along with Kristian Freeman as you build a localization engine that
     renders data based on the Edge location nearest to the application's user.`,
  image: '/banner.jpg',
  path: '/playlists/introduction-to-cloudflare-workers-5aa3',
  slug: 'introduction-to-cloudflare-workers-5aa3',
  instructor: {
    name: 'Kristian Freeman',
    slug: 'kristian-freeman',
    path: '/q/resources-by-kristian-freeman',
    twitter: 'signalnerve',
    image: '/headshot.jpg',
  },
},

これはかなりうまくいく.それを交換するとき、我々はちょうど入って、新しいデータを入力します.しかし、それは偉大でありません、そして、配備を必要とします.
私が正気でこれをモデル化するために座るとき、最初の衝動は「ホームページJumbotron」と呼ばれている文書をつくることでした.それから、サーバー上のGRQクエリ言語を使用して健全性を問い合わせることができ、ヘッダグラフィックをレンダリングするための同様のデータ構造を作成できます.

export const getServerSideProps: GetServerSideProps = async ({res, params}) => {
  const load = async () => {
    const data = await sanityClient.fetch(groq`
      *[slug.current == 'home-page-jumbotron'][0]{
        name,
        title,
        description,
        summary,
        byline, 
        meta,
        path,
        'slug': resources[][0]->_id,
        'instructor': collaborators[]->[role == 'instructor'][0]{
          title,
          'slug': person->slug.current,
          'name': person->name,
          'path': person->website,
          'twitter': person->twitter,
          'image': person->image.url
        },
        'background': images[label == 'background'][0].url,
        'image': images[label == 'badge'][0].url,
      }
  `)
    return data
  }

  const resource = await load()

  res.setHeader('Cache-Control', 's-maxage=1, stale-while-revalidate')
  return {
    props: {
      resource,
    },
  }
}

これは快方に向かっている.これは、同じデータ構造を生成し、我々は今健全なスタジオの内部のヘッダーコンポーネントを更新し、再配備する必要はありませんライブをすることができます.これは、特定のページに関連付けられているドキュメントを作成している間、それはレイアウトのモデリングデータではなく、私たちに柔軟性のトンを与える.
これがGroqを見るのが初めてであるならば、それは奇妙に見えるかもしれませんが、それは実際に魅力的で比較的簡単な方法でデータを照会することです.ここでは、偉大な概観を与えるofficial GROQ Cheat Sheetです.
さらに一歩を踏み出すと、全体のhome-page-date.tsの代わりに、SANityのGroq問い合わせ言語の「外部リフレクション」と呼ばれるものを使っているようなローダで置き換えることができます.

import {sanityClient} from 'utils/sanity-client'
import groq from 'groq'

export async function loadHomePageData() {
  const slugs = {
    jumbotron: 'home-page-jumbotron',
  }
  const data = await sanityClient.fetch(
    groq`
      {
        'jumbotron': ${jumbotronQuery},
      }
  `,
    slugs,
  )

  return data
}

const jumbotronQuery = groq`
*[slug.current == $jumbotron][0]{
  name,
  title,
  description,
  summary,
  byline, 
  meta,
  path,
  'slug': resources[][0]->_id,
  'instructor': collaborators[]->[role == 'instructor'][0]{
    title,
    'slug': person->slug.current,
    'name': person->name,
    'path': person->website,
    'twitter': person->twitter,
    'image': person->image.url
  },
  'background': images[label == 'background'][0].url,
  'image': images[label == 'badge'][0].url,
}
`

このアプローチでは、各セクションの機能をロードして、サイトのホームページにアクション(CTA)を呼び出し、チームの能力を更新し、キュレーションし、フロントエンドの展開を必要とせずに共同のデジタルコミュニティの庭の傾向を与えるために構造化クエリを追加することができます.
我々がデザインを変えたいか、我々がロードしているデータを切り抜くならば、それは同様により簡単になり始めます.
我々は容易に我々の資源の上に層資産をすることができて、我々のデザイナーと編集チームメンバーに結果ページのより協力的な創造的な支配権を持つことができます.

我々が向かっているところ。

これはすばらしいスタートです.健全性は多くの可能性を持ち、我々は表面をひっかき始めさえしていない.我々はコンテンツモデルを調整し、より多くのデータを最初にインポートする予定です.それから、我々はデジタル・ガーデニング・プロセスでさらに柔軟性を与えるコンテンツ・パイプラインとワークフローを設計するのに使用できるSANityの構造ビルダーを調査し始めます.
私たちの処分では、コンテキスト、美しいコンテンツのオーサリングツールを持っているエキサイティングな、そして私は前方にもっと掘りに探しています.
質問?どうぞお気軽に!