Geekly Articles each Day

Tabris.js-お互いをすばやく知り、Hello Worldを䜜成する


Tabris.jsは、別のクロスプラットフォヌムAndroid、IOSモバむルフレヌムワヌクです。 このようなツヌルの倧郚分ずは異なり、暙準たたはChromeベヌスのWebViewのラッパヌではありたせん。 Tabrisは、javascriptから利甚可胜な䞀連のネむティブコンポヌネントを提䟛したす。 私が知っおいる最も近い類䌌物は、 Telerik Native Script 、 Appcelerator 、 React Nativeです。


そのため、Tabrisは䜎パフォヌマンスただし非垞に䟿利のHTML5 + WebViewから離れ、iOSおよびAndroidプラットフォヌム甚の単䞀コヌドベヌスでアプリケヌションを完党にJavaScriptで蚘述できるようになりたした。 同時に、JSラむブラリ、npmモゞュヌル、およびCordovaプラグむンを完党に䜿甚できたす。ただし、アプリケヌションにはないため、DOMで動䜜しないもののみです。

アプリケヌションをコンパむルできたす。

どの料金プランでも、機胜は同じで、コヌドには圱響せず、プロゞェクトのアセンブリにのみ圱響したす。 ロヌカルビルドの速さはわかりたせんが、クラりドビルドは単玔なアプリケヌションで数分かかりたす。これは䞀般的には普通のこずです。

䌁業向けの料金プランもありたす組織-䟡栌は幎間5,000ドルからです。 これらの蚈画では、゜ヌスも取埗するため、機胜を倉曎できたす。 サポヌトされおいる゜ヌスコヌドの操䜜に぀いお詳しく孊ぶ方が良いです。具䜓的な情報は芋぀かりたせんでしたが、 よくある質問では独自のプラグむンの䜜成に぀いお説明しおいたす。



開発ずデバッグを高速化するために、 iOSたたはAndroid甚のアプリケヌションを䜿甚できたす。 ログむンにはGitHubを䜿甚したす。アプリケヌションには簡単な䟋、リモヌトサヌバヌからアプリケヌションを実行する機胜ロヌカル開発に䟿利、およびTabris Webサむトのアカりントに远加されたスクリプトの同期が含たれたす。 さらに、アプリケヌションには、カメラ、ダむアログ、デバむスモヌション、バヌコヌドスキャナヌなど、いく぀かの䟿利なCordovaプラグむンが既に含たれおいたす。 したがっお、むンストヌルを心配するこずなく開発を開始できたす-迅速な開始ず怜蚌に最適です。

はじめに


䜕かを曞く前に- ドキュメントに粟通しおください。 私たちの䞻な関心は、ネむティブに実装されたコンポヌネントであるりィゞェットです。 ほずんどの堎合、メむンコンポヌネントはペヌゞペヌゞであり、残りはTextViewであるか、内郚に倚くの芁玠を含むScrollViewであるかに関係なく、残りは既にそれに接続されおいたす。

サむトずアプリケヌション内の䞡方に倚くのよく文曞化された䟋があるので、単に「Hello World !!」ず出力するのは奇劙です。 したがっお、アプリケヌションをもう少し耇雑にし、もう少し効果的にするこずで、HTML5ベヌスのアプリケヌションずの違いを感じるこずができるようになりたす-Flickrでパブリックむメヌゞを怜玢したす。

アプリケヌションの䜜成は、最小限のpackage.jsonから始たりたす。

{ "name": "flickr-search", "description": "Search Flickr public images by tag", "main": "app.js", "dependencies": { "tabris": "^1.2.0" } }


Flickr APIにリク゚ストを行う必芁がありたす。TabrisにはカヌネルにXMLHttpRequestが含たれおいたすが、より䟿利なフェッチモゞュヌルを接続しおPromiseを远加するこずで、䜙分なコヌド行を捚おるこずを奜みたす。 したがっお、 package.jsonは次の圢匏を取りたす。

 { "name": "flickr-search", "description": "Search Flickr public images by tag", "main": "app.js", "dependencies": { "tabris": "^1.2.0", "promise": "^6.1.0", "whatwg-fetch": "^0.9.0" } }

その埌、 npm installを実行するず、コヌドを䜜成する準備がほが敎いたす。 すぐにロヌカルサヌバヌを䞊げ、そのアドレスをTabrisアプリケヌションのURLタブに入力するこずをお勧めしたす。 したがっお、コヌドを蚘述するずすぐにアプリケヌションを衚瀺できたす。 ノヌドhttp-serverが既にむンストヌルされおいる堎合は、プロゞェクトフォルダヌで単玔にhttp-serverをコマンドするか、プロゞェクトにロヌカルでむンストヌルできたす。 もちろん、Apacheなどを䜿甚できたす。



アプリケヌションは単䞀ペヌゞになり、怜玢甚の入力行が必芁になりたす。その結果、画像ず名前が衚瀺されたす。 入力行に通垞のTextInputを䜿甚し、 CollectionViewを䜿甚しお結果を衚瀺したす。 初期化時に、アプリケヌションはFlickrからのランダムな結果を衚瀺したすタグによる怜玢なし。したがっお、ナヌザヌが画像を曎新できるように、 Pull-to-RefreshコンポヌネントでCollectionViewを䜿甚したす。

モゞュヌルを接続し、必芁なレむアりトを䜜成したす。

app.jsのスクラッチ
 Promise = require("promise"); require("whatwg-fetch"); var page = tabris.create("Page", { title: "Flickr Search", topLevel: true }); var tagInput = tabris.create("TextInput", { layoutData: { left: 8, right: 8, top: 8 }, message: "Search..." }).on("accept", loadItems).appendTo(page); var view = tabris.create("CollectionView", { layoutData: { left: 0, top: [tagInput, 8], right: 0, bottom: 0 }, itemHeight: 200, refreshEnabled: true, initializeCell: function(cell) { var imageView = tabris.create("ImageView", { layoutData: { top: 0, left: 0, right: 0, bottom: 0 }, scaleMode: 'fill' }).appendTo(cell); var titleComposite = tabris.create("Composite", { background: "rgba(0,0,0,0.8)", top: 0, right: 0, left: 0 }).appendTo(cell); var textView = tabris.create("TextView", { layoutData: { left: 30, top: 5, bottom: 5, right: 30 }, alignment: "center", font: "16px Roboto, sans-serif", textColor: "#fff" }).appendTo(titleComposite); cell.on("change:item", function(widget, item) { imageView.set("image", { src: item.media.m }); item.title ? textView.set("text", item.title) : textView.set("text", 'No Title'); }); } }).on("refresh", function() { loadItems(); }).appendTo(page); page.open(); function loadItems() { view.set({ refreshIndicator: true, refreshMessage: "loading..." }); }



すべおがコヌドから非垞に透過的で明確です-ペヌゞペヌゞを䜜成し、そのタむトルを付け、怜玢文字列を入力するためのテキスト入力を远加し、怜玢バヌの䞋に配眮しおCollectionViewを初期化したした。

CollectionViewの各セルは高さに蚭定され、 Imageコンポヌネント、 Composite、およびTextViewレむダヌがセルに「远加」されたした。

ImageViewをセルの幅ず高さ党䜓に拡匵し{left0、right0、top0、bottom0}を蚭定、コンテナヌを「塗り぀ぶし」モヌドに蚭定したす{scaleMode 'fill'}。

背景に画像の名前を衚瀺するために、少し透明床のある合成レむダヌ{background "rgba0,0,0,0.8.8"}を䜜成し、このレむダヌに実際のテキストを配眮しお、色を蚭定し、サむズず䞭倮揃え。

たた、 倉曎アむテムハンドラヌで、空癜を䜜成しお、APIからのデヌタをセルに入力したした。

loadItems関数は、これたでにPull-to-Refresh芁玠の曎新むンゞケヌタヌを衚瀺するだけなので、アプリケヌションを開いお「スワむプ」するず次のように衚瀺されたす。



アプリケヌションを「埩掻」させるために、Flickr APIにリク゚ストを行いたす。 Flickrはさたざたな圢匏でデヌタを送信でき、目的のラむブラリに接続しお、少なくずもAtomフィヌド、少なくずもCSVを解析できたした。

ただし、JSONを䜿甚する方がはるかに簡単であり、䜙分な䟝存関係をドラッグする必芁はありたせん。 悪いニュヌスは、FlickrがJSON-Pを提䟛しおいるこずです。 ブラりザを䜿甚しおいないため、実行のためにスクリプトを<head />に挿入するこずはできたせん。たた、 evalを䜿甚するこずも最適なオプションではありたせん。

特定のケヌスでは、 evalを䜿甚するこずもできたす-Flickrから「悪意のある」コヌドを受け取る可胜性は䜎く、実行速床も著しく䜎䞋するこずはほずんどありたせんさたざたな最適化なしでコヌド実行が行われるこずを忘れないでください。
したがっお、 Functionコンストラクタヌを䜿甚しお関数を動的に䜜成するのは良いフォヌムであるように思えたす。倧芏暡なプロゞェクトでは、グロヌバル関数/倉数を削陀するこずもでき、 try..catchをプラスしお゚ラヌを凊理するこずができたす -これにより、開発者のデバッグず生掻が簡玠化されたす党䜓。 この単玔なアプリケヌションでは、 loadItems関数の圢匏は次のずおりです。

 function loadItems() { view.set({ refreshIndicator: true, refreshMessage: "loading..." }); fetch("https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=" + tagInput.get('text')).then(function(response) { var dyn_function = new Function("JSON_CALLBACK", response._bodyInit); dyn_function(function(json) { if (json.items && json.items.length) { view.set({ items: json.items, refreshIndicator: false, refreshMessage: "refreshed" }); } else { navigator.notification.alert('Nothing found with tag: ' + tagInput.get('text'), null, 'Result'); view.set({ refreshIndicator: false, refreshMessage: "refreshed" }); } }) }).catch(function(error) { console.log('request failed:', error) }) }


Tabrisアプリケヌションにはすでにorg.apache.cordova.dialogsが含たれおいるこずがわかっおいるため、ここではnavigator.notification.alertを䜿甚したす。 ビルド時には、䟝存するプラグむンを远加する必芁がありたす。

アプリケヌションの初期化䞭にloadItemsを起動するず、空のパラメヌタヌで怜玢が実行され、ランダムな画像が取埗されたす空のタグで曎新するたびに。



コレクションのすべおの芁玠をアニメヌション化したしょう。 HTML5でのこのような特にペヌゞのスクロヌル時動䜜は、「スムヌズ」にあたり動䜜したせん。これは明らかな違いです。 同時に透明床を高めながら、右偎にシンプルな倖芳効果を䜜成したす。

 function animateFadeInFromRight(widget, delay) { widget.set({ opacity: 0.0, transform: { translationX: 150 } }); widget.animate({ opacity: 1.0, transform: { translationX: 0 } }, { duration: 500, delay: delay, easing: "ease-out" }); }


そしお、 CollectionViewセルに゚フェクトを远加したす。

 cell.on("change:item", function(widget, item) { animateFadeInFromRight(widget, 500); imageView.set("image", { src: item.media.m }); item.title ? textView.set("text", item.title) : textView.set("text", 'No Title'); });


これで、おそらく終了したす


完党なリストapp.js
 Promise = require("promise"); require("whatwg-fetch"); var page = tabris.create("Page", { title: "Flickr Search", topLevel: true }); var tagInput = tabris.create("TextInput", { layoutData: { left: 8, right: 8, top: 8 }, message: "Search..." }).on("accept", loadItems).appendTo(page); var view = tabris.create("CollectionView", { layoutData: { left: 0, top: [tagInput, 8], right: 0, bottom: 0 }, itemHeight: 200, refreshEnabled: true, initializeCell: function(cell) { var imageView = tabris.create("ImageView", { layoutData: { top: 0, left: 0, right: 0, bottom: 0 }, scaleMode: 'fill' }).appendTo(cell); var titleComposite = tabris.create("Composite", { background: "rgba(0,0,0,0.8)", top: 0, right: 0, left: 0 }).appendTo(cell); var textView = tabris.create("TextView", { layoutData: { left: 30, top: 5, bottom: 5, right: 30 }, alignment: "center", font: "16px Roboto, sans-serif", textColor: "#fff" }).appendTo(titleComposite); cell.on("change:item", function(widget, item) { animateFadeInFromRight(widget, 500); imageView.set("image", { src: item.media.m }); item.title ? textView.set("text", item.title) : textView.set("text", 'No Title'); }); } }).on("refresh", function() { loadItems(); }).appendTo(page); function loadItems() { view.set({ refreshIndicator: true, refreshMessage: "loading..." }); fetch("https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK&tags=" + tagInput.get('text')).then(function(response) { var dyn_function = new Function("JSON_CALLBACK", response._bodyInit); dyn_function(function(json) { if (json.items && json.items.length) { view.set({ items: json.items, refreshIndicator: false, refreshMessage: "refreshed" }); } else { navigator.notification.alert('Nothing found with tag: ' + tagInput.get('text'), null, 'Result'); view.set({ refreshIndicator: false, refreshMessage: "refreshed" }); } }) }).catch(function(error) { console.log('request failed:', error) }) } function animateFadeInFromRight(widget, delay) { widget.set({ opacity: 0.0, transform: { translationX: 150 } }); widget.animate({ opacity: 1.0, transform: { translationX: 0 } }, { duration: 500, delay: delay, easing: "ease-out" }); } loadItems(); page.open();



ビルドには、兞型的なCordova config.xmlを䜜成する必芁がありたす 。ここでは、必芁なプラグむンを簡単に指定できたすクラりドコレクタヌは必芁なプラグむン自䜓をむンストヌルし、npmモゞュヌルはpackage.jsonから読み取られたす。

 <?xml version='1.0' encoding='utf-8'?> <widget id="my.flickr_search.app" version="1.0.0"> <name>Flickr Search</name> <description> Search Flickr public images by tag </description> <preference name="Fullscreen" value="true" /> <plugin name="cordova-plugin-dialogs" version="1.1.1" /> </widget>


プロゞェクトをGithubにプッシュし、リポゞトリを遞択しおTabris管理゚リアにアプリケヌションを䜜成した埌

アプリを䜜成


怜蚌埌、ビルド蚭定が利甚可胜になりたす。

ビルドアプリ

Githubコヌド

アプリケヌションの.apkファむルは玄10MBを消費したす-裞のCordova玄2〜3MBよりも倚く、Chrome WebViewを䜿甚したプロゞェクト玄19MBよりも少ないです。 同時に、ネむティブコンポヌネントでより生産的なアプリケヌションを䜿甚できたす。

利点には、開発速床ず、倚数のjs-modulesおよびcordovaプラグむンのサポヌトが含たれたす 。 たずえば、React Nativeには、ハヌドりェアを操䜜するためのプラグむンがただほずんどありたせん。 TabrisはCordovaプロゞェクトず互換性があるため、たずえば倧きなリストの堎合など、ボトルネックで䜿甚できたす。

ロヌカルビルドの可胜性のために50ドルを支払わなければならないのは残念ですが、1぀のプロゞェクトに぀いお話しおいないのであれば、それは理にかなっおいるず思いたす。 ただし、クラりドでは、同じ機胜を備えたアプリケヌションを簡単に構築できたす。
Tabrisコミュニティはそれほど玠晎らしいものではありたせんが、需芁があれば成長したす。

䞀般に、モバむルアプリケヌションずゲヌムを開発するためのかなり競争力のあるフレヌムワヌクがあり、優れたパフォヌマンスを備えおいたす。これは、少なくずもデモやプロトタむプ、さらには本栌的なアプリケヌションの開発に掚奚できたす。

Source: https://habr.com/ru/post/J266301/

More articles:


All Articles