検索
ホームページウェブフロントエンドjsチュートリアルMatlabと平均スタックでWebアプリを作成する

Creating a Web App with MATLAB and the MEAN Stack

コアポイント

  • テクニカルコンピューティングの高レベル言語であるMATLABは、平均スタックと統合して強力なWebアプリケーションを作成できます。
  • 平均スタックは、mongodb、express.js、angularjs、node.jsで構成されており、Matlabと併用すると、Web上のリアルタイムのデータ視覚化が可能になります。
  • 統合プロセスには、Matlabのコンピューティングパワーを使用してデータを処理して結果を生成します。これは、平均スタックを使用して構築されたWebアプリケーションに表示されます。
  • MATLAB言語での無料のオープンソースJSONエンコーダー/デコーダー実装であるJSonLabは、Webアプリケーションで使用するためにMATLABデータをJSON形式に変換するために使用されます。
  • MATLAB Webアプリケーションの作成には、MATLABコンパイラを使用したスタンドアロンアプリケーションの作成、MATLAB WebアプリサーバーでWebアプリケーションプロジェクトの作成、Webアプリケーションプロジェクトへのスタンドアロンアプリケーションのアップロード、ユーザーへのWebアプリケーションの展開が含まれます。
MATLABは、問題やソリューションをおなじみの数学的表記で表現できる使いやすい環境で、コンピューティング、視覚化、プログラミングを統合する技術コンピューティングの高レベルの言語です。 Matlabで書かれ、何百万人もの科学者とエンジニアによって開発された世界中に多くのプロジェクトがあります。 MATLABから取得したさまざまな実験および運用データを使用して、Webアプリケーションをサポートすることができますが、いくつかの障害があります。

MATLABはマトリックス形式のデータを理解していますが、WebアプリケーションはJSONまたはXML形式でデータを好みます。
  • データは通常、MATLABプログラム内で作成および使用されます。これにより、データの節約と使用などの開発者の自由が制限されます。
  • MATLABがJSON形式でデータを提供し、WebアプリケーションがMATLABからこのJSONデータを使用して素晴らしいものを作成できる場合、アプリケーションの作成ははるかに簡単です。
  • この記事では、MATLABと平均スタックを一緒に動作させる方法を示すための小さなデモプログラムを開発します。
Webアプリケーションについて

このWebアプリケーションには、MATLABからブラウザへのリアルタイムデータ転送が含まれます。簡単にするために、現在の時刻をMATLABから転送し、ブラウザに表示します。 MATLABでJSONファイルをエンコード/デコードするためのツールボックスであるJSonLabを使用します。 Webアプリケーションは、平均スタックを使用して作成されます。平均スタックに慣れていない場合は、継続する前に「平均スタックの初心者」を読むことをお勧めします。

jsonlabの紹介

jsonlabは、matlab言語でのJSONエンコーダー/デコーダーの無料オープンソース実装です。 MATLABデータ構造(配列、構造、セル、構造配列、およびセル配列)をJSON形式の文字列に変換するか、JSONファイルをMATLABデータにデコードするために使用できます。

loadjson()savejson()loadubjson()、およびsaveubjson()の4つの関数へのアクセスを提供します。最後の2つの関数は、UBJSON形式を処理するために使用されます。 loadjson()は、JSON文字列を関連するMATLABオブジェクトに変換するために使用されます。私たちのプロジェクトでは、Matlabオブジェクト(セル、構造、または配列)をJSON文字列に変換するsavejson()関数のみを使用します。次のように使用できます

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
ファイルを記述する必要があるため、最初の署名を使用します。 JSON文字列を返し、文字列をファイルに書き込みます。

jsonlabのインストール

開始するには、jsonlabをダウンロードし、アーカイブを解凍し、次のコマンドを使用してMATLABのパスリストにフォルダーのパスを追加します。

このパスを永続的に追加する場合は、

と入力し、jsonlabルートフォルダーを参照してリストに追加する必要があります。終了したら、[保存]をクリックする必要があります。次に、matlabで
addpath('/path/to/jsonlab');
を実行して

を実行します。出力が表示された場合、JsonLabが正しくインストールされていることを意味します。 pathtool rehashwhich loadjsonmatlab code

現在の時刻が必要なので、コマンドを使用します。 [年、月、日、時間、秒]の形式で現在の日付と時刻を含む6要素の日付ベクトルを返します。繰り返し時間を取得するために、

コマンドを無限の

ループに配置します。したがって、MATLABコマンドウィンドウでCTRL Cを使用してスクリプトの実行が終了するまで、リアルタイムデータを取得し続けます。 clock clock次のコードは、このアイデアを実装しています:while

プロジェクトでは、営業時間、分、秒に焦点を当てています。上記のコードで使用されている

関数は、マトリックスのすべての要素を最も近い整数に丸めます。時間データを取得するには、マトリックスの列4の値が必要なため、コマンド
format shortg;
y=0;
while y == 0
    % c = [year month day hour minute seconds]
    c=clock;
    % 将每个值四舍五入为整数
    c=fix(c);
    x.clock=c;
    % 访问c的第4列,即小时
    x.hours=c(:,4);
    % 访问c的第5列,即分钟
    x.minutes=c(:,5);
    % 访问c的第6列,即秒
    x.seconds=c(:,6);
    % 将x转换为JSON并写入matlabData.json
    savejson('',x,'data/matlabData.json');
end
を使用します。同じ方法を使用して、分と秒を取得します。

fix(c)クロックといくつかの個別の変数をWebアプリケーションに個別に送信して、MATLABオブジェクトからJSONへの異なるデータ型の変換を表示します。クロックデータは配列に変換されますが、時間、分、秒の値は数値に変換され、後で表示されます。 c(:,4) 私たちのプロジェクトでは、JSON形式を使用して変数xを変換および書き込み、ファイルに書き込みます

に書き込みます。簡単にするために、

パラメーターは空の文字列になります。

前のコードを使用して、必要なすべてのMATLABコードを完了します。これで、スクリプトを実行すると、JSONファイルがデータフォルダーに作成され、ファイル内のデータが自動的かつ絶えず更新されることを観察できます。 JSONファイルコンテンツの例は次のとおりです savejson() matlabData.jsonこのファイルを監視し、node.jsを使用して最新のデータを読み取ります。それでは、Webアプリケーションの構築を開始しましょう。 rootname

webアプリケーション

{
   "hours": 19,
   "minutes": 28,
   "seconds": 28,
   "clock": [2015,5,27,19,28,28]
}

MATLABデータがJSONに変換され、ファイルに保存されたため、このファイルを独立して読み取り、変更を監視してデータを取得できます。この操作は、MATLABとは何の関係もありません。この記事の残りの部分では、基本的な概念の一部のみを使用していても、socket.ioと平均スタックを理解していると思います。

Webアプリケーションの作成を開始しましょう。

package.jsonファイルを作成

アプリケーションを開始するには、プロジェクトの依存関係を定義しましょう。これを行うには、次のようにpackage.jsonファイルを作成します。

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
ファイルを作成した後、プロジェクトのルートフォルダーで

を実行して、すべての依存関係をインストールします。 NPMに慣れていない場合は、「NPM Getting Guide -Node Package Manager」を読むことをお勧めします。 npm install

サーバーサイドコード コードのこの部分には、node.js、Express、およびMongodbの使用が含まれます。サーバーによって実行される操作には、

が含まれます

提供
    file
  • index.html jsonファイルのデータを監視および読み取り
  • mongodb
  • を使用してデータベースにデータを保存します
  • socket.io
  • を使用してブラウザにデータを送信します
  • ルートフォルダーに
という名前のファイルを作成し、説明されているすべての機能に必要なコードを記述します。

server.js Expressを使用して静的ファイルを提供します:

要求が
addpath('/path/to/jsonlab');
に送信されるたびに、

ディレクトリに保存されているファイルが提供されます。 / appファイルへの変更を監視するには、index.htmlを使用し、ファイルが変更されるたびに読み取るには、

を使用します。変更が検出されると、ファイルが読み取られ、データが取得されます。プロセス全体が次のコードを使用して完了します。

fs.watch()クライアントとの接続が確立され、データの取得を開始すると、2つのことが行われます。 fs.readFile() functionを使用して、データをブラウザに送信します

format shortg;
y=0;
while y == 0
    % c = [year month day hour minute seconds]
    c=clock;
    % 将每个值四舍五入为整数
    c=fix(c);
    x.clock=c;
    % 访问c的第4列,即小时
    x.hours=c(:,4);
    % 访问c的第5列,即分钟
    x.minutes=c(:,5);
    % 访问c的第6列,即秒
    x.seconds=c(:,6);
    % 将x转换为JSON并写入matlabData.json
    savejson('',x,'data/matlabData.json');
end

Mongooseミドルウェアを使用してMongoDBにデータを保存します 2番目の操作を実行するには、データのスキーマを作成し、そのスキーマに基づいてモデルを作成します。これは、以下に示すコードを使用して行われます:

  1. 前のコードセグメントの最後のステートメントでは、定義されたパターンに基づいてモデルを作成します。関数に渡された最初のパラメーターは、モデルが属するセットの単数名です。 Mongooseは、複数の名前をコレクションに自動的に割り当てます。したがって、ここではemit()
  2. コレクションのモデルです。
  3. 新しいデータを取得すると、最新のデータを使用してスキーマの新しいインスタンスを作成し、
メソッドを使用してデータベースに保存します。このインスタンスはドキュメントと呼ばれます。次のコードでは、

はドキュメントです。

この部分の最終コードは次のとおりです。
json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)

tryおよびcatchを使用して、アプリケーションのクラッシュを防ぎます。使用しないと、JSON.parseが急速な変更により予期しないユーザー入力エラーを引き起こした場合、アプリケーションがクラッシュする場合があります。これは私たちが避けたいものです!

また、MongoDBサーバーが実行されていることを確認してください。そうしないと、アプリケーションがクラッシュします。

クライアントコード

このセクションでは、単純な静的HTMLページを作成します。 socket.ioを介して新しいデータが受信されると、ページに表示されるデータを更新します。このデータは、リアルタイムチャートの作成にも使用できます。

以下は、

ファイルの単純なコードです:index.html

addpath('/path/to/jsonlab');

ディレクティブは、アプリケーションがロードされているときに、ブラウザが元の(コンパイルされていない)AngularJSテンプレートを簡単に表示しないようにするために使用されます。 ngCloak

アプリケーションを実行します

node.jsサーバーを起動する前に、MatlabコードとMongoDBサーバーが実行されていることを確認する必要があります。 MongoDBサーバーを実行するには、端末でコマンド

を実行する必要があります。 node.jsサーバーを実行するには、プロジェクトフォルダーのルートディレクトリでコマンドmongodを実行する必要があります。 node server.js

現在の時刻を示す静的ページは

で提供されます。 127.0.0.1:3000

結論 この記事では、平均スタックを使用して、MATLABプログラムからJSON形式のデータを取得するWebアプリケーションを作成します。データはJSonLabの助けを借りて変換されます。データはsocket.ioを使用してブラウザに送信されるため、ブラウザの変更はリアルタイムで反映されます。このデモの完全なソースコードは、GitHubで入手できます。

この記事を楽しんで、コメントを読むことを楽しみにしています。

(FAQSセクションは、記事の長さのために個別に処理するようにお勧めします。重要な質問と回答を抽出し、必要に応じて簡単に要約または再編成できます。

以上がMatlabと平均スタックでWebアプリを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン10 jQueryの楽しみとゲームプラグインMar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか?Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景jQuery Parallaxチュートリアル - アニメーションヘッダーの背景Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください

jqueryとajaxを使用した自動更新Divコンテンツjqueryとajaxを使用した自動更新DivコンテンツMar 08, 2025 am 12:58 AM

この記事では、JQueryとAjaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。 この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。 読み込み画像はオプションです

Matter.jsを始めましょう:はじめにMatter.jsを始めましょう:はじめにMar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか?Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター