web-dev-qa-db-ja.com

Webアプリ開発にIonicフレームワークを使用する方法

Cordovaでラップするのではなく、通常のWebアプリケーションにionicフレームワークを使用することは可能ですか？

mobileweb-applicationsionic-frameworkhybrid-mobile-app
74
xivo

これは、www/lib /のコンポーネントを含めると可能になります-このフォルダーにはionicのコア（ionic framework + angularjs）が含まれており、そこから先に進むことができます。

ただし、ionicは、特にモバイルを考慮して、angularjsの上に構築されたことに注意することが重要です。 Webアプリの開発でより良い結果を得るには、コアのangularjs（機能用）およびbootstrap3（UI用）の使用を検討する必要があります。

28
Orane

V2

IonicはPWA（ウェブアプリ）をサポートするようになり、デスクトップのサポートは間もなく開始されます

Ionic build browser

V1

Ionicは通常のWeb開発に使用できます。必要なのは、ここでWeb開発を停止することだけです。ただし、アプリとウェブを同じコードベースから提供したい場合は、

ステップ1

Merges/browser /内にindex.htmlのコピーを作成します（マージはルートレベル、つまりmyAppにあります）

<script>
    var is_browser = true
</script>

＆

<body ng-app="myApp" class="platform-website">

ステップ2

Index.htmlからcordova.jsなどの不要なjsファイルを削除します

ステップ

app.jsに追加します

var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
              && ionic.Platform.isWebView());

これらを使用して、css hide/showまたはangular hide/showを使用します。

13
aWebDeveloper

IonicにはハイブリッドWebアプリ以外のサポートはあまりないと思いますが、モバイルWebをサポートする非常によく似た代替手段として Mobile Angular UI を確認できます。 。

6
user456584

オランは正しい。

"node app.js"の場合、アプリはサーバーを実行します。このサーバーに必要なすべてのファイルを提供する必要があります。 Ionic Applicationでは、基本的にwwwフォルダーです。次の例では、wwwフォルダーのすべてのコンテンツをpublicフォルダーに配置します。

ルートフォルダーにはapp.jsファイルとpublicフォルダーがあります。 app.jsは次のようになります。

var express = require('express');
var app = express();
var server = require('http').createServer(app);

app.get('/', function (request, response) {
    response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));

public folder iにはすべてのフロントエンドcssとjsがあります。上記のコードにフォルダー全体publicを含めました。次のようにpublicのindex.htmlにpublic /でファイルを含める必要があります

<script src="public/lalala.js"></script>

どなたでも、Node.js + Ionic Frameworkについてお気軽にお問い合わせください

4
markkillah

アプリの複雑さに応じて、通常のWebアプリケーションにIonicフレームワークを使用することが絶対に可能です。

アプリを作成すると、すべてのHTML、JS、CSSを含む/wwwフォルダーが作成されます。これがWebアプリのフロントエンドです。

ほとんどのWebアプリは、間にわずかなロジックだけでデータにアクセスするシンプルなインターフェイスです。ほとんどの場合、そのロジックをJSに入れて、クライアントにワークロードを処理させることができます。

データは、 Firebase または Parse 。私は Firebase が好きです。なぜなら、それはAngularとIonicとうまく結びついているからです。

クレジットカードによる支払いなど、機密性が必要なサービスに接続する必要がある場合は、 Zapier などのサービスに接続できます。

ホスティングには、サーバーレスアプリ専用のポップアップアプリホスティングサービスが多数あります。 divshot が好まれますが、新しい機能を積極的に押し出していないようです。

ここで説明したソリューションは、Ionicを優れたものにするプラットフォーム間で一貫性を維持するのに役立ちます。

1
leetheguy

ハイブリッドモバイルアプリの選択はionicフレームワークですが、Webアプリケーションの場合、フロントエンド部分はionicフレームワークには含まれません。

たとえば、純粋なAngularまたは Angular AngularJS UIのKendo UI でWebアプリケーションパーツを実行します。

同じチームが両方のプラットフォーム（モバイルとWeb）で生産性を上げられると、より効率的です。

それが役に立てば幸い。

0
ivan