スマートスタイル TECH BLOG|データベース&クラウドの最新技術情報を配信

React / Node.js で JSON データを扱う

本記事は MariaDB Corporation より寄稿された記事となります

はじめに

2019-01-31 に MariaDB Connector/Node.js が GA になりましたが,先日 MariaDB Corporation から Node.js / React で実装されたサンプルアプリケーションが GitHub 上で公開されましたので,今回紹介したいと思います。

GitHub レポジトリ

以下の GitHub レポジトリに Places というアプリケーション名で公開されています。

https://github.com/mariadb-corporation/Developer-Examples

実行環境

CentOS 7.7 では,以下のコマンドで Node.js 10 をインストールすることができます。

/etc/yum.repos.d/nodesource-el7.repo に yum レポジトリ設定を行いませんと,古いバージョンの Node.js (6.17.1) がインストールされ,アプリケーション実行時にエラーとなりますので留意願います。

サンプルアプリケーションの設定

スキーマ作成

地点データを収めるテーブルを以下の DDL で作成します。

サンプルデータのINSERT

以下の INSERT 文でサンプルデータを作成します。

サンプルアプリケーションを GitHub レポジトリから clone

Google Maps API キー / MariaDB 接続設定

Google Maps APIを利用するための APIキー取得方法は以下のドキュメントに記載されています。

Get an API Key

Developer-Examples/Places/src/client/src/components/MapContainer.js
の最終行の上の行の ENTER_GOOGLE_API_KEY をさきほど取得した APIキーで置き換えます。

Developer-Examples/Places/src/db.js の MariaDB Server との接続設定を修正します。

Node.js 依存パッケージのインストール

以下のコマンドで今回のサンプルアプリケーションが依存する Node.js パッケージをインストールします。

サンプルアプリケーション(Places)の実行

以下のようにアプリケーションを実行します(実行ディレクトリは Developer-Examples/Places/src)。

以下のような表示がされていればアプリケーションは正常に起動しており,表示 URL でアプリケーションを利用可能です。

右上の Add Location ボタンから場所データを登録することができます。なお,デフォルトの地図中心はシカゴになっています。


執筆者情報

後藤 智(GOTO Satoru)
2017年6月よりMariaDB CorporationにてAPAC(Asia Pacific)地域におけるプリセールス業務を主に担当。現在は主に日本を担当。
この執筆者の他の記事をよむ
Return Top