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

Matlabと平均スタックでWebアプリを作成する

Feb 19, 2025 pm 01:22 PM

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 までご連絡ください。

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン:実装の比較 JavaScriptエンジン:実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScript:Web言語の汎用性の調査 JavaScript:Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合) next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合) Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合) next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合) Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles