技術

Reactを使用したフルスタックNLP：Ionic vs Cordova vs React Native

Appleが最初のiPhoneをリリースしてから約15年で、ソフトウェア開発の状況は劇的に変化しました。スマートフォンが広く採用され、独自の機能が増え続けるにつれて、ユーザーはデスクトップやラップトップではなくモバイルデバイスを介してソフトウェアサービスにアクセスすることをますます好むようになっています。スマートフォンは、ジオロケーション、生体認証、モーションセンシングなどの機能を提供しますが、その多くはデスクトッププラットフォームがコピーを開始したばかりです。一部の人口統計では、スマートフォンまたは同様のモバイルデバイスがソフトウェア消費の主要な手段であり、コンピューターを完全にバイパスします。

企業はこの変化に気づき、主要な方法でそれを強化しました。モバイルアプリはもはや後付けではありません。金融仲介会社のロビンフッドからソーシャルメディア会社のインスタグラム、配車サービス会社のユーバーに至るまで、さまざまなアプリケーションがモバイルファーストの開発戦略を採用しています。デスクトップアプリケーションがある場合、それは主な焦点ではなく、モバイルアプリを補完するものとして提供されることがよくあります。

フルスタック開発者にとって、これらの変化する傾向に適応することは非常に重要です。幸いなことに、Web開発者が自分のスキルをモバイル開発に適用するのに役立つ、成熟した十分にサポートされたテクノロジーが数多くあります。今日は、Cordova、Ionic、ReactNativeの3つのテクノロジーについて説明します。コア開発テクノロジーとして、フロントエンドWeb開発で最も人気のあるフレームワークの1つであるReact.jsを使用します。 iPhoneアプリケーションの開発に焦点を当てますが、これらはクロスプラットフォームテクノロジーであり、Androidプラットフォームにクロスコンパイルできます。

今日構築するもの

自然言語処理（NLP）を使用してTwitterフィードを処理およびキュレートするアプリケーションを構築します。このアプリケーションを使用すると、ユーザーはTwitterハンドルのセットを選択し、Twitter APIを使用して最新の更新をプルし、感情とトピックに基づいてツイートを分類できます。その後、ユーザーは感情やトピックに基づいてツイートを表示できるようになります。

バックエンド

フロントエンドを構築する前に、バックエンドを構築する必要があります。今のところ、バックエンドはシンプルに保ちます。基本的な既成の感情分析と品詞のタグ付けに加えて、データセット固有の問題に対処するためのデータクリーニングを少し使用します。 TextBlobと呼ばれるオープンソースのNLPライブラリを使用し、Flaskを介して結果を提供します。

感情分析、品詞タグ付け、およびNLP：クイック入門書

これまで自然言語分析アプリケーションを使用したことがない場合、これらの用語は非常に異質なものである可能性があります。 NLPは、自然な人間の言語データを分析および処理するテクノロジーの総称です。これは幅広いトピックですが、この分野に取り組むすべてのテクノロジーに共通する多くの課題があります。たとえば、人間の言語は、プログラミング言語や数値データとは異なり、人間の言語の文法の寛容な性質のために、大まかに構造化される傾向があります。さらに、人間の言語は非常に文脈的である傾向があり、ある文脈で発声または書かれたフレーズは別の文脈に翻訳されない場合があります。最後に、構造とコンテキストはさておき、言語は非常に複雑です。段落のさらに下の単語は、段落の先頭の文の意味を変える可能性があります。語彙は、発明、再定義、または変更することができます。これらの複雑さはすべて、データ分析手法を相互適用することを困難にします。

感情分析は、自然言語の一節の感情を理解することに焦点を当てたNLPのサブフィールドです。人間の感情は本質的に主観的であるため、技術的に特定することは困難ですが、感情分析は、商業的に非常に有望なサブフィールドです。感情分析の一部のアプリケーションには、さまざまな機能の肯定的評価と否定的評価を識別するための製品レビューの分類、電子メールまたはスピーチのムードの検出、およびムードによる歌詞のグループ化が含まれます。感情分析のより詳細な説明をお探しの場合は、感情分析ベースのアプリケーションの構築に関する私の記事を読むことができます。ここに。

品詞タグ付け、またはPOSタグ付けは、非常に異なるサブフィールドです。品詞タグ付けの目的は、文法的および文脈的情報を使用して、文中の特定の単語の品詞を識別することです。この関係を特定することは、最初に目にするよりもはるかに難しい作業です。単語は、文脈や文の構造に基づいて非常に異なる品詞を持つ可能性があり、ルールは人間にとってさえ常に明確であるとは限りません。幸いなことに、今日の多くの既製のモデルは、ほとんどの主要なプログラミング言語と統合された強力で用途の広いモデルを提供します。詳細については、POSタグ付けに関する私の記事をご覧ください。ここに。

Flask、TextBlob、およびTweepy

NLPバックエンドには、Flask、TextBlob、およびTweepyを使用します。 Flaskを使用して小型で軽量のサーバーを構築し、TextBlobを使用して自然言語処理を実行し、Tweepyを使用してTwitterAPIからツイートを取得します。コーディングを開始する前に、Twitterから開発者キーを取得して、ツイートを取得することもできます。

より洗練されたバックエンドを記述し、より複雑なNLPテクノロジーを使用することもできますが、今日の目的のために、バックエンドを可能な限りシンプルに保ちます。

バックエンドコード

これで、コーディングを開始する準備が整いました。お気に入りのPythonエディターとターミナルを起動して、クラックを始めましょう。

まず、必要なパッケージをインストールします。

pip install flask flask-cors textblob tweepy python -m textblob.download_corpora

それでは、機能のコードを書いてみましょう。

新しいPythonスクリプトを開き、server.pyと呼び、必要なライブラリをインポートします。

import tweepy from textblob import TextBlob from collections import defaultdict

それでは、いくつかのヘルパー関数を書いてみましょう。

# simple, average a list of numbers with a guard clause to avoid division by zero def mean(lst): return sum(lst)/len(lst) if len(lst) > 0 else 0 # call the textblob sentiment analysis API and noun phrases API and return it as a dict def get_sentiment_and_np(sentence): blob = TextBlob(sentence) return{ 'sentiment': mean([s.sentiment.polarity for s in blob.sentences if s.sentiment.polarity != 0.0]), 'noun_phrases': list(blob.noun_phrases) } # use the tweepy API to get the last 50 posts from a user’s timeline # We will want to get the full text if the text is truncated, and we will also remove retweets since they’re not tweets by that particular account. def get_tweets(handle): auth = tweepy.OAuthHandler('YOUR_DEVELOPER_KEY') auth.set_access_token('YOUR_DEVELOPER_SECRET_KEY') api = tweepy.API(auth) tl = api.user_timeline(handle, count=50) tweets = [] for tl_item in tl: if 'retweeted_status' in tl_item._json: Continue # this is a retweet if tl_item._json['truncated']: status = api.get_status(tl_item._json['id'], tweet_mode='extended') # get full text tweets.append(status._json['full_text']) else: tweets.append(tl_item._json['text']) return tweets # http and https are sometimes recognized as noun phrases, so we filter it out. # We also try to skip noun phrases with very short words to avoid certain false positives # If this were a commercial app, we would want a more sophisticated filtering strategy. def good_noun_phrase(noun_phrase): noun_phrase_list = noun_phrase.split(' ') for np in noun_phrase_list: if np in {'http', 'https'} or len(np) <3: return False return True

ヘルパー関数を記述したので、いくつかの簡単な関数ですべてをまとめることができます。

# reshapes the tagged tweets into dictionaries that can be easily consumed by the front-end app def group_tweets(processed_tweets): # Sort it by sentiment sentiment_sorted = sorted(processed_tweets, key=lambda x: x['data']['sentiment']) # collect tweets by noun phrases. One tweet can be present in the list of more than one noun phrase, obviously. tweets_by_np = defaultdict(list) for pt in processed_tweets: for np in pt['data']['noun_phrases']: tweets_by_np[np].append(pt) grouped_by_np = {np.title(): tweets for np, tweets in tweets_by_np.items() if len(tweets) > 1 and good_noun_phrase(np)} return sentiment_sorted, grouped_by_np # download, filter, and analyze the tweets def download_analyze_tweets(accounts): processed_tweets = [] for account in accounts: for tweet in get_tweets(account): processed_tweet = ' '.join([i for i in tweet.split(' ') if not i.startswith('@')]) res = get_sentiment_and_np(processed_tweet) processed_tweets.append({ 'account': account, 'tweet': tweet, 'data': res }) sentiment_sorted, grouped_by_np = group_tweets(processed_tweets) return processed_tweets, sentiment_sorted, grouped_by_np

これで、関数download_analyze_tweetsを実行できます。フォローしたいハンドルのリストに表示され、結果が表示されます。

次のコードを実行しました。

if __name__ == '__main__': accounts = ['@spacex', '@nasa'] processed_tweets, sentiment_sorted, grouped_by_np = download_analyze_tweets(accounts) print(processed_tweets) print(sentiment_sorted) print(grouped_by_np)

これを実行すると、次の結果が得られました。結果は明らかに時間に依存するため、似たようなものが見られれば、正しい方向に進んでいます。

[{'account': '@spacex', 'tweet': 'Falcon 9… [{'account': '@nasa', 'tweet': 'Our Mars rove… {'Falcon': [{'account': '@spacex', 'tweet': 'Falc….

これで、Flaskサーバーを構築できます。これは非常に簡単です。 server.pyという名前の空のファイルを作成し、次のコードを記述します。

from flask import Flask, request, jsonify from twitter import download_analyze_tweets from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/get_tweets', methods=['POST']) def get_tweets(): accounts = request.json['accounts'] processed_tweets, sentiment_sorted, grouped_by_np = download_analyze_tweets(accounts) return jsonify({ 'processedTweets': processed_tweets, 'sentimentSorted': sentiment_sorted, 'groupedByNp': grouped_by_np }) if __name__ == '__main__': app.run(debug=True)

サーバーを実行すると、選択したHTTPクライアントを使用してサーバーにPOSTリクエストを送信できるようになります。 {accounts：[“ @NASA”、“ @SpaceX”]}をjson引数として渡すと、APIがTwitter分析コードで返されたものと同様のものを返すことがわかります。

サーバーができたので、フロントエンドをコーディングする準備が整いました。電話エミュレータを介したネットワークの微妙な違いがあるため、APIをどこかにデプロイすることをお勧めします。それ以外の場合は、アプリがエミュレーターで実行されているかどうかを検出し、:5000にリクエストを送信する必要があります。 localhost:5000の代わりにエミュレーターにあるとき。コードをデプロイする場合は、そのURLにリクエストを発行するだけです。

サーバーをデプロイするための多くのオプションがあります。最小限のセットアップで無料のシンプルなデバッグサーバーを使用するには、PythonAnywhereのようなものをお勧めします。このサーバーは、箱から出してすぐに実行できるはずです。

バックエンドサーバーをコーディングしたので、フロントエンドを見てみましょう。まず、Web開発者にとって最も便利なオプションの1つであるCordovaから始めます。

ApacheCordovaの実装

コルドバ入門書

Apache Cordovaは、Web開発者がモバイルプラットフォームをターゲットにするのに役立つソフトウェアテクノロジーです。 Cordovaは、スマートフォンプラットフォームに実装されているWebブラウザー機能を利用することにより、Webアプリケーションコードをネイティブアプリケーションコンテナーにラップして、アプリケーションを作成します。ただし、Cordovaは単なる派手なWebブラウザではありません。 Cordova APIを介して、Web開発者は、オフラインサポート、位置情報サービス、オンデバイスカメラなどのスマートフォン固有の多くの機能にアクセスできます。

このアプリケーションでは、JSフレームワークとしてReact.jsを使用し、CSSフレームワークとしてReact-Bootstrapを使用してアプリケーションを作成します。 BootstrapはレスポンシブCSSフレームワークであるため、小さな画面での実行をすでにサポートしています。アプリケーションが作成されたら、Cordovaを使用してWebアプリケーションにコンパイルします。

アプリの構成

まず、CordovaReactアプリをセットアップするために独自のことを行います。で中論文、開発者のShubhamPatilが私たちの活動について説明します。基本的に、React CLIを使用してReact開発環境をセットアップし、次にCordova CLIを使用してCordova開発環境をセットアップしてから、最終的に2つをマージします。

開始するには、コードフォルダーで次の2つのコマンドを実行します。

cordova create TwitterCurationCordova create-react-app twittercurationreact

セットアップが完了したら、Reactアプリのpublicフォルダーとsrcフォルダーの内容をCordovaアプリに移動します。次に、package.jsonで、Reactプロジェクトからスクリプト、ブラウザーリスト、および依存関係をコピーします。 'homepage': './'も追加しますpackage.jsonのルートで、Cordovaとの互換性を有効にします。

package.jsonがマージされたら、public /index.htmlファイルをCordovaで機能するように変更します。ファイルを開き、www / index.htmlからメタタグをコピーし、Cordova.jsがロードされたときにbodyタグの最後にあるスクリプトをコピーします。

次に、src / index.jsファイルを変更して、Cordovaで実行されているかどうかを検出します。 Cordovaで実行している場合は、devicereadyイベントハンドラー内でレンダリングコードを実行する必要があります。通常のブラウザで実行している場合は、すぐにレンダリングしてください。

const renderReactDom = () => { ReactDOM.render( , document.getElementById('root') ); } if (window.cordova) { document.addEventListener('deviceready', () => { renderReactDom(); }, false); } else { renderReactDom(); }

最後に、デプロイメントパイプラインを設定する必要があります。以下の定義をconfig.xmlファイルに追加します。

そして、次のスクリプトをprebuild.jsに配置します。

const path = require('path'); const { exec } = require('child_process'); const fs = require('fs'); const rimraf = require('rimraf'); function renameOutputFolder(buildFolderPath, outputFolderPath) { return new Promise((resolve, reject) => { fs.rename(buildFolderPath, outputFolderPath, (err) => { if (err) { reject(err); } else { resolve('Successfully built!'); } }); }); } function execPostReactBuild(buildFolderPath, outputFolderPath) { return new Promise((resolve, reject) => { if (fs.existsSync(buildFolderPath)) { if (fs.existsSync(outputFolderPath)) { rimraf(outputFolderPath, (err) => { if (err) { reject(err); return; } renameOutputFolder(buildFolderPath, outputFolderPath) .then(val => resolve(val)) .catch(e => reject(e)); }); } else { renameOutputFolder(buildFolderPath, outputFolderPath) .then(val => resolve(val)) .catch(e => reject(e)); } } else { reject(new Error('build folder does not exist')); } }); } module.exports = () => { const projectPath = path.resolve(process.cwd(), './node_modules/.bin/react-scripts'); return new Promise((resolve, reject) => { exec(`${projectPath} build`, (error) => { if (error) { console.error(error); reject(error); return; } execPostReactBuild(path.resolve(__dirname, '../build/'), path.join(__dirname, '../www/')) .then((s) => { console.log(s); resolve(s); }) .catch((e) => { console.error(e); reject(e); }); }); }); };

これにより、Reactビルドが実行され、Cordovaビルドが開始される前にビルドフォルダーが適切な場所に配置されるため、デプロイプロセスが自動化されます。

これで、アプリの実行を試すことができます。コマンドラインで次を実行します。

npm install rimraf npm install npm run start

Reactアプリがセットアップされ、ブラウザーで実行されていることを確認する必要があります。コルドバを今すぐ追加：

cordova platform add iOS cordova run iOS

そして、エミュレーターで実行されているReactアプリが表示されます。

ルーターとパッケージのセットアップ

アプリを構築するために必要なインフラストラクチャの一部をセットアップするために、必要なパッケージをインストールすることから始めましょう。

npm install react-bootstrap react-router react-router-dom

次に、ルーティングを設定します。その間、すべてのコンポーネントで共有される単純なグローバル状態オブジェクトも設定します。本番アプリケーションでは、ReduxやMobXなどの状態管理システムを使用する必要がありますが、ここでは単純なままにしておきます。 App.jsに移動し、次のようにルートを構成します。

import { BrowserRouter as Router, Redirect, Route, } from 'react-router-dom'; function App() { const [curatedTweets, setCuratedTweets] = useState(); return } /> } /> } /> }

このルート定義を使用して、実装する必要のある2つのルート（入力と表示）を導入しました。 curatedTweetsに注意してください変数がDisplayに渡され、setCuratedTweets変数が入力に渡されています。これは、入力コンポーネントが関数を呼び出してcuratedTweetsを設定できることを意味します。変数、およびDisplayは、表示する変数を取得します。

コンポーネントのコーディングを開始するには、/ srcの下に/ src / componentsというフォルダーを作成しましょう。 / src / componentsの下に、/ src / components / inputという別のフォルダーと、その下にinput.jsとinput.cssという2つのファイルを作成します。 Displayコンポーネントについても同じことを行います-/ src / components / displayを作成し、その下にdisplay.jsとdisplay.cssを作成します。

その下で、次のようなスタブコンポーネントを作成しましょう。

import React from ‘react’; import ‘input.css’ const Input = () => Input ; export default Input

ディスプレイについても同じです。

import React from ‘react’; import display.css’ const Display = () => Display ; export default Display

これで、ワイヤーフレーミングが完了し、アプリが実行されるはずです。ここで、入力ページをコーディングしましょう。

入力ページ

全体像の計画

コードを書く前に、入力ページに何をさせたいかを考えてみましょう。もちろん、ユーザーがプルしたいTwitterハンドルを入力および編集する方法が必要になります。また、ユーザーが完了したことを示すことができるようにする必要があります。ユーザーが完了を示したら、PythonキュレーションAPIからキュレートされたツイートを取得し、最後にDisplayコンポーネントに移動します。

コンポーネントに何をさせたいかがわかったので、コーディングする準備が整いました。

ファイルの設定

ReactRouterライブラリのwithRouterをインポートすることから始めましょうナビゲーション機能にアクセスするには、次のように必要なReactBootstrapコンポーネントを使用します。

import React, {useState} from 'react'; import {withRouter} from 'react-router-dom'; import {ListGroup, Button, Form, Container, Row, Col} from 'react-bootstrap'; import './input.css';

それでは、Inputのスタブ関数を定義しましょう。入力がsetCuratedTweetsを取得することはわかっています関数であり、Python APIからキュレートされたツイートを設定した後、表示ルートに移動できるようにする必要もあります。したがって、小道具から取得したいと思うでしょうsetCuratedTweetsおよび履歴（ナビゲーション用）。

const Input = ({setCuratedTweets, history}) => { return Input }

履歴APIアクセスを提供するために、withRouterでラップします。ファイルの最後にあるexportステートメント内：

export default withRouter(Input);

データコンテナ

Reactフックを使用してデータコンテナを設定しましょう。すでにuseStateをインポートしましたフックして、次のコードを入力コンポーネントの本体に追加できるようにします。

c ++物理エンジン

const [handles, setHandles] = useState([]); const [handleText, setHandleText] = useState(‘’);

これにより、ユーザーがプルしたいハンドルのリストを保持するハンドルのコンテナーと修飾子、およびユーザーがハンドルの入力に使用するテキストボックスのコンテンツを保持するhandleTextが作成されます。

それでは、UIコンポーネントをコーディングしましょう。

UIコンポーネント

UIコンポーネントはかなりシンプルになります。入力テキストボックスと2つのボタンを含むBootstrap行が1つあり、1つは現在の入力ボックスのコンテンツをハンドルのリストに追加し、もう1つはAPIからプルします。 Bootstrapリストグループを使用してユーザーがプルしたいハンドルのリストを表示する別のBootstrap行があります。コードでは、次のようになります。

return ( Pull {' '} Add {handles.map((x, i) => {x} delete )} );

UIコンポーネントに加えて、データの変更を処理する3つのUIイベントハンドラーを実装する必要があります。 getPull APIを呼び出すイベントハンドラーは、次のセクションで実装されます。

// set the handleText to current event value const textChangeHandler = (e) => { e.preventDefault(); setHandleText(e.target.value); } // Add handleText to handles, and then empty the handleText const onAddClicked = (e) => { e.preventDefault(); const newHandles = [...handles, handleText]; setHandles(newHandles); setHandleText(''); } // Remove the clicked handle from the list const groupItemClickedBuilder = (idx) => (e) => { e.preventDefault(); const newHandles = [...handles]; newHandles.splice(idx, 1); setHandles(newHandles); }

これで、API呼び出しを実装する準備が整いました。

API呼び出し

API呼び出しでは、プルするハンドルを取得し、それをPOSTリクエストでPython APIに送信し、結果のJSON結果をcuratedTweetsに入れます。変数。次に、すべてがうまくいけば、プログラムで/ displayルートに移動します。それ以外の場合は、より簡単にデバッグできるように、エラーをコンソールに記録します。

コードモードでは、次のようになります。

const pullAPI = (e) => { e.preventDefault(); fetch('http://prismatic.pythonanywhere.com/get_tweets', { method: 'POST', mode: 'cors', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ accounts: handles }) }).then(r=>r.json()).then(j => { setCuratedTweets(j); history.push('/display'); }) .catch(e => { console.log(e); }) }

そしてそれで、私たちは行ってもいいはずです。アプリを自由に実行し、いくつかのハンドルを追加して、APIにリクエストを送信してください。

これで、感情ページをコーディングする準備が整いました。

センチメントソートモード

Python APIはすでにツイートを感情で並べ替えているため、Python APIの結果が得られれば、感情ページは実際にはそれほど難しくありません。

全体像の計画

ツイートを表示するためのリストインターフェイスが必要になります。また、いくつかのナビゲーションコンポーネントをトピックグループ化モードに切り替えて、入力ページに戻る必要があります。

まず、display.jsファイルでSentimentDisplayモードのサブコンポーネントを定義しましょう。

SentimentDisplayコンポーネント

SentimentDisplayはcuratedTweetsを取りますオブジェクトを作成し、感情でソートされたツイートをリストに表示します。 React-Bootstrapの助けを借りて、コンポーネントは非常に簡単です：

const SentimentDisplay = ({curatedTweets}) => { return {curatedTweets.sentimentSorted.map((x, i) => {x.account}: {x.tweet} ({x.data.sentiment.toPrecision(2)}) )} }

その間に、スタイリングも追加しましょう。以下をdisplay.cssに入れて、インポートします。

 .account-div { font-size: 12px; font-weight: 600; } .tweet-span { font-size: 11px; font-weight: 500; } .sentiments-span { font-size: 10px; } .tl-container { margin-top: 10px; } .disp-row { margin-top: 5px; }

これで、SentimentDisplayコンポーネントを表示できます。 Displayを変更しますそのように機能します：

const Display = ({curatedTweets}) => { return };

また、この機会にナビゲーションコンポーネントをコーディングしましょう。「編集に戻る」ボタンとトピックグループモードの2つのボタンが必要になります。

これらのボタンは、次のように、SentimentDisplayコンポーネントのすぐ上の別のBootstrap行に実装できます。

Return Back {' '} View by Topic

アプリを実行し、いくつかのハンドルからツイートをプルします。かなり気の利いたように見えます！

トピックグループ化モード

ここで、トピックグループ化モードを実装します。 SentimentDisplayよりも少し複雑ですが、非常に便利なBootstrapコンポーネントが非常に役立ちます。

全体像の計画

すべての名詞句を取得し、それらをアコーディオンリストとして表示します。次に、アコーディオンリストが展開されたら、名詞句を含むツイートをレンダリングします。

トピックグループ化モードへの切り替えの実装

まず、センチメントモードからトピックグループ化モードに切り替えるロジックを実装しましょう。まず、スタブコンポーネントを作成することから始めましょう。

const TopicDisplay = () => { return Topic Display }

そして、それを表示するモードを作成するためのロジックを設定します。メインの表示コンポーネントで、次の行を追加して、コンポーネントが表示されるロジックを作成します。

// controls the display mode. Remember to import {useState} from ‘react’ const [displayType, setDisplayType] = useState('Sentiment'); // Switch the Display Mode const toggleDisplayType = () => { setDisplayType(displayType === 'Sentiment' ? 'Topic': 'Sentiment'); } // determines the text on the mode switch button const switchStr = displayType === 'Sentiment'? 'View by Topic': 'View by Sentiment'

そして、JSXを次のように変更して、ロジックを追加します。

Return Back {' '} {switchStr} { displayType === 'Sentiment'? : }

これで、切り替えるとトピックグループ表示スタブが表示されます。

TopicDisplayコンポーネント

これで、TopicDisplayをコーディングする準備ができました。成分。前に説明したように、ブートストラップアコーディオンリストを活用します。実装は実際にはかなり単純です。

const TopicDisplay = ({curatedTweets}) => { return {Object.keys(curatedTweets.groupedByNp).map((x, i) => {x} ({curatedTweets.groupedByNp[x].length}) {curatedTweets.groupedByNp[x].map((y, i2) => {y.account}: {y.tweet} ({y.data.sentiment.toPrecision(2)}) )} )} }

アプリを実行すると、トピック表示が表示されます。

これでアプリが完成し、エミュレーター用のアプリを作成する準備が整いました。

エミュレーターでアプリを実行する

Cordovaを使用すると、エミュレーターでアプリを非常に簡単に実行できます。単に実行します：

cordova platform add ios # if you haven’t done so already cordova run ios

そして、エミュレーターにアプリが表示されるはずです。 BootstrapはレスポンシブWebアプリであるため、WebアプリはiPhoneの幅に適応し、すべてが非常に見栄えがします。

Cordovaアプリが完成したら、Ionicの実装を見てみましょう。

Ionic-Reactの実装

イオンプライマー

Ionicは、ハイブリッドアプリケーションの構築を容易にするWebコンポーネントライブラリおよびCLIツールキットです。当初、IonicはAngularJSとCordovaの上に構築されていましたが、その後React.jsでコンポーネントをリリースし、Cordovaと同様のプラットフォームであるCapacitorのサポートを開始しました。 Ionicを際立たせているのは、Webコンポーネントを使用している場合でも、コンポーネントがネイティブのモバイルインターフェイスに非常に似ていることです。さらに、Ionicコンポーネントのルックアンドフィールは、それが実行されているオペレーティングシステムに自動的に適応します。これにより、アプリケーションのルックアンドフィールがよりネイティブで自然になります。最後に、これは記事の範囲外ですが、Ionicは、アプリケーションのデプロイを少し簡単にするいくつかのビルドツールも提供します。

このアプリケーションでは、IonicのReactコンポーネントを使用して、Cordovaセクションで作成したJavaScriptロジックの一部を活用しながらUIを作成します。

アプリの構成

まず、Ionicツールをインストールします。それでは、以下を実行しましょう。

npm install -g @Ionic/cli native-run cordova-res

インストールが完了したら、プロジェクトフォルダに移動しましょう。次に、IonicCLIを使用して新しいプロジェクトフォルダーを作成します。

ionic start twitter-curation-Ionic blank --type=react --capacitor

魔法が起こるのを見て、今度は次のフォルダに移動します。

cd twitter-curation-Ionic

そして、次のコマンドで空のアプリを実行します。

ionic serve

これでアプリがセットアップされ、準備が整いました。いくつかのルートを定義しましょう。

先に進む前に、IonicがTypeScriptを使用してプロジェクトを開始したことに気付くでしょう。 TypeScriptを使用するのに邪魔になることはありませんが、いくつかの非常に優れた機能があり、この実装に使用します。

ルーターのセットアップ

この実装では、input、sentimentDisplay、およびtopicDisplayの3つのルートを使用します。これは、Ionicが提供するトランジション機能とナビゲーション機能を利用したいため、またIonicコンポーネントを使用しており、アコーディオンリストにはIonicがあらかじめパッケージ化されていないためです。もちろん、独自に実装することもできますが、このチュートリアルでは、提供されているIonicコンポーネントを使用します。

App.tsxに移動すると、すでに定義されている基本ルートが表示されます。

入力ページ

全体像の計画

Bootstrapの実装と同様のロジックとコードを多数使用しますが、いくつかの重要な違いがあります。まず、TypeScriptを使用します。これは、次のセクションで説明するコードの型注釈があることを意味します。次に、Bootstrapとスタイルが非常に似ているが、スタイルがOSに依存するIonicコンポーネントを使用します。最後に、Bootstrapバージョンのように履歴APIを使用して動的にナビゲートしますが、Ionicルーターの実装により、履歴へのアクセスは少し異なります。

セットアップ

スタブコンポーネントを使用して入力コンポーネントを設定することから始めましょう。 inputという名前のページの下にフォルダーを作成し、その下にInput.tsxという名前のファイルを作成します。そのファイル内に、次のコードを入れてReactコンポーネントを作成します。 TypeScriptを使用しているため、少し異なることに注意してください。

import React, {useState} from 'react'; const Input : React.FC = () => { return Input ; } export default Input;

そして、App.tsxのコンポーネントを次のように変更します。

const App: React.FC = () => ( } /> );

これで、アプリを更新すると、入力スタブコンポーネントが表示されます。

データコンテナ

それでは、データコンテナを作成しましょう。入力されたTwitterハンドルのコンテナーと、入力ボックスの現在の内容が必要です。 TypeScriptを使用しているため、タイプアノテーションをuseStateに追加する必要があります。コンポーネント関数での呼び出し：

const Input : React.FC = () => { const [text, setText] = useState(''); const [accounts, setAccounts] = useState ([]); return Input ; }

また、APIからの戻り値を保持するデータコンテナも必要になります。その内容は他のルートと共有する必要があるため、App.tsxレベルで定義します。インポートuseState App.tsxファイルのReactから、アプリコンテナ関数を次のように変更します。

const App: React.FC = () => { const [curatedTweets, setCuratedTweets] = useState({} as CuratedTweets); return ( } /> ); }

この時点で、Visual Studio Codeのように構文が強調表示されたエディターを使用している場合は、CuratedTweetsが点灯するはずです。これは、ファイルがCuratedTweetsインターフェースがどのように見えるかを知らないためです。それを今定義しましょう。 srcの下にinterfacesというフォルダーを作成し、その中にCuratedTweets.tsxというファイルを作成します。ファイルで、CuratedTweetsインターフェースを次のように定義します。

 interface TweetRecordData { noun_phrases: Array, sentiment: number } export interface TweetRecord { account: string, data: TweetRecordData, tweet: string } export default interface CuratedTweets { groupedByNp: Record, processedTweets: Array, sentimentSorted: Array }

これで、アプリはAPI戻りデータの構造を認識します。 App.tsxにCuratedTweetsインターフェースをインポートします。 App.tsxが問題なくコンパイルされるのを確認できます。

ここでさらにいくつかのことを行う必要があります。 setCuratedTweetsを渡す必要があります関数を入力コンポーネントに追加し、入力コンポーネントにこの関数を認識させます。

App.tsxで、次のように入力ルートを変更します。

} exact={true} />

これで、エディターが別のフラグを下に表示するはずです。Inputは、渡された新しいpropを認識しないため、Input.tsxで定義する必要があります。

まず、CuratedTweetsインターフェースをインポートし、次に次のようにContainerPropsインターフェースを定義します。

interface ContainerProps { setCuratedTweets: React.Dispatch }

そして最後に、次のように入力コンポーネントの定義を変更します。

const Input : React.FC = ({setCuratedTweets}) => { const [text, setText] = useState(''); const [accounts, setAccounts] = useState ([]); return Input ; }

データコンテナの定義が完了し、UIコンポーネントの構築が完了しました。

UIコンポーネント

UIコンポーネントの場合、入力コンポーネントとリスト表示コンポーネントを作成する必要があります。 Ionicは、これらのためのいくつかの単純なコンテナーを提供します。

使用するライブラリコンポーネントをインポートすることから始めましょう。

import { IonInput, IonItem, IonList, IonButton, IonGrid, IonRow, IonCol } from '@Ionic/react';

これで、スタブコンポーネントをIonGridでラップされたIonInputに置き換えることができます。

return setText(e.detail.value!)} />

イベントリスナーがonIonChangeであることに注意してくださいonChangeの代わりに。それ以外の場合は、非常に見覚えがあるはずです。

ブラウザでアプリを開くと、Bootstrapアプリのように見えない場合があります。ただし、ブラウザをエミュレータモードに設定すると、UIの意味がわかります。モバイルに展開するとさらに見栄えが良くなるので、楽しみにしています。

それでは、いくつかのボタンを追加しましょう。「リストに追加」ボタンと「APIをプル」ボタンが必要になります。そのために、IonButtonを使用できます。入力のIonColのサイズを8に変更し、列のある次の2つのボタンを追加します。

setText(e.detail.value!)} /> Add Pull

ボタンを作成しているので、イベントハンドラーも作成しましょう。

Twitterハンドルをリストに追加するハンドラーは単純です。

const onAddClicked = () => { if (text === undefined || text.length === 0) { return; } const newAccounts: Array = [...accounts, text]; setAccounts(newAccounts); setText(''); }

次のセクションでAPI呼び出しを実装するので、onPullClickedのスタブ関数を配置しましょう。

const onPullClicked = () => {}

次に、ユーザーが入力したハンドルのリストを表示するためのコンポーネントを作成する必要があります。そのために、IonListを使用して、新しいIonRowに配置します。

{accounts.map((x:string, i:number) => {x} Delete )}

各リストアイテムは、独自のIonGridにハンドルと削除ボタンを表示しています。このコードをコンパイルするには、deleteClickedHandlerを実装する必要があります。同じように。前のセクションから非常によく知っているはずですが、TypeScriptアノテーションが付いています。

const deleteClickedBuilder = (idx: number) => () => { const newAccounts: Array = [...accounts]; newAccounts.splice(idx, 1); setAccounts(newAccounts); }

これを保存すると、すべてのUIコンポーネントが実装された[入力]ページが表示されます。ハンドルを追加したり、ハンドルを削除したり、ボタンをクリックしてAPIを呼び出したりできます。

最後の演習として、インラインスタイルをCSSに移動しましょう。 input.cssという名前の入力フォルダーにファイルを作成し、Input.tsxファイルにインポートします。次に、次のスタイルを追加します。

.input-button { float: right; } .handle-display { padding-top: 12px; }

ここで、className='input-button”を追加しますすべてのIonButtonとclassName=”handle-display”で目的のTwitterハンドルを表示しているハンドルリストアイテムIonCol。ファイルを保存すると、すべてが非常によく見えるはずです。

API呼び出し

APIをプルするコードは、1つの例外を除いて、前のセクションで非常によく知られています。ルートを動的に変更できるようにするには、履歴コンポーネントにアクセスする必要があります。 withHistoryを使用してこれを行います針。

最初にフックをインポートします。

import { useHistory } from 'react-router';

次に、入力コンポーネントにハンドラーを実装します。

const history = useHistory(); const switchToDisplay = () => { history.push('/display'); } const onPullClicked = () => { fetch('http://prismatic.pythonanywhere.com/get_tweets', { method: 'POST', mode: 'cors', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ accounts }) }).then(r=>r.json()).then(j => { setCuratedTweets(j); switchToDisplay(); }) .catch(e => { console.log(e); }) }

ヘッダーの追加

入力ページは非常に見栄えがしますが、Ionicのモバイル中心のスタイルのため、少しむき出しに見えます。 UIをより自然に見せるために、Ionicは、より自然なユーザーエクスペリエンスを提供できるヘッダー機能を提供します。モバイルで実行する場合、ヘッダーはネイティブOSのモバイルプラットフォームもシミュレートするため、ユーザーエクスペリエンスがさらに自然になります。

コンポーネントのインポートを次のように変更します。

import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonInput, IonItem, IonList, IonButton, IonGrid, IonRow, IonCol } from '@Ionic/react';

そして、次のように、UIをヘッダー付きのIonicページでラップします。

return Twitter Curation App Twitter Curation App setText(e.detail.value!)} /> Add Pull {accounts.map((x:string, i:number) => {x} Delete )}

今それはよさそうだ！

センチメントソートページ

全体像の計画

センチメントソートページは、ブートストラップページのセンチメントソートページとほぼ同じですが、TypeScriptとIonicを使用します。また、モバイルでの実行中にIonicのナビゲーション機能を利用するために、トピックディスプレイを別のルートとして実装するため、このページにトピックディスプレイルートにもナビゲートできるようにする必要があります。

ルート設定

まず、sentimentsortedという名前の新しいフォルダーと、その下にSentimentSorted.tsxという名前のファイルを作成します。次のようにスタブコンポーネントをエクスポートします。

import React from 'react'; const SentimentSorted: React.FC = () => { return Sentiment Sorted } export default SentimentSorted;

そして、App.tsxで、コンポーネントをインポートします。

import SentimentSorted from './pages/sentimentsorted/SentimentSorted';

そして、ルートを追加します。

} />

SentimentSortedというTypeScriptエラーが表示されますはcuratedTweetsの小道具を期待していないので、次のセクションでそれを処理しましょう。

UIコンポーネント

コンテナの小道具を定義することから始めましょう。入力コンポーネントとよく似ています。

import CuratedTweets from '../../interfaces/CuratedTweets'; interface ContainerProps { curatedTweets: CuratedTweets }

そして今、スタブ表示を変更します。

const SentimentSorted: React.FC = ({curatedTweets}) => { return Sentiment Sorted }

そして、すべてがコンパイルされるはずです。

表示は非常にシンプルで、表示コンポーネントを備えた単なるIonListです。

return {(curatedTweets.sentimentSorted).map((x, i) => {x.account}:
 {x.tweet}
 ({x.data.sentiment.toPrecision(2)})
 )}

入力コンポーネントを使用していくつかのツイートを保存およびプルすると、ツイートがリストに表示されます。

それでは、ナビゲーションボタンを追加しましょう。 IonGridに追加します。

Back {switchStr}

switchToInput履歴APIを使用して実装するのは非常に簡単です。

const switchToInput = () => { history.goBack(); }

そしてToggleDisplayType同様に精通している必要があります：

const toggleDisplayType = () => { setDisplayType(displayType === 'Sentiment' ? 'Topic': 'Sentiment'); } const switchStr = displayType === 'Sentiment'? 'View by Topic': 'View by Sentiment'

これでSentimentDisplayができましたコンポーネントが実装されました。ここで、トピック表示ページを実装する前に、すべてのトピックを表示するコンポーネントを実装する必要があります。次のセクションでそれを行います。

トピックグループコンポーネント

トピックリスト表示オプションを追加して、条件付きで表示してみましょう。そのためには、感情表示リストを作成する必要があります。 SentimentDisplayの名前をDisplayに変更し、感情表示リストを分割してみましょう。

interface SentimentDisplayProps { sentimentSorted: Array } const SentimentDisplay: React.FC = ({sentimentSorted}) => { return {(sentimentSorted || []).map((x, i) => {x.account}:
 {x.tweet}
 ({x.data.sentiment.toPrecision(2)})
 )} }

CuratedTweetsインターフェースでクラス定義の1つをどのように使用しているかに注目してください。これは、これらのコンポーネントがCuratedTweetsオブジェクト全体を必要とせず、サブセットのみを必要とするためです。トピックリストは非常に似ています。

interface TopicDisplayProps { groupedByNP: Record } const TopicDisplay: React.FC = ({groupedByNP}) => { return {Object.keys(groupedByNP || {}).map((x, i) => {x} ({groupedByNP[x].length})
 )} }

そして今、条件付き表示は表示コンポーネントで簡単に設定できます。

return ( Back {switchStr} { displayType === 'Sentiment'? : } );

必ずデフォルトのエクスポートを変更してください。これで、トピック表示ページを実装する準備が整いました。

トピック表示ページ

全体像の計画

トピック表示ページは、感情表示と同様のリスト表示ですが、routeパラメータから問題のトピックを探します。

ルート設定

ここまで進んだら、何をすべきかをすでに知っているはずです。 topicdisplayとTopicDisplay.tsxというページフォルダーを作成し、スタブコンポーネントを作成して、App.tsxページにインポートしましょう。それでは、ルートを設定しましょう。

} />

これで、UIコンポーネントを実装する準備が整いました。

UIコンポーネント

まず、ContainerPropsを作成しましょう定義：

interface ContainerProps { curatedTweets: CuratedTweets } const TopicDisplay: React.FC = ({curatedTweets}) => { Return Topic Display }

次に、URLパス名からトピックを取得する必要があります。そのために、historyAPIを使用します。それでは、useHistoryをインポートし、履歴APIをインスタンス化して、パス名からトピックを取得しましょう。その間に、スイッチバック機能も実装しましょう。

const TopicDisplay: React.FC = ({curatedTweets}) => { const history = useHistory(); const switchToDisplay = () => { history.goBack(); } const topic = history.location.pathname.split('/')[2]; const tweets = (curatedTweets.groupedByNp || {})[topic];

その特定のトピックに関するツイートができたので、表示は実際には非常に簡単です。

return ( Back {(tweets || []).map((x, i) => {x.account}:
 {x.tweet}
 ({x.data.sentiment.toPrecision(2)})
 )} );

保存して実行すると、状況は良好に見えるはずです。

エミュレーターでアプリを実行する

エミュレーターでアプリを実行するには、Cordovaでセットアップするのと同じように、いくつかのIonicコマンドを実行してモバイルプラットフォームを追加し、コードをコピーします。

ionic build # builds the app ionic cap add ios # adds iOS as one of the platforms, only have to run once ionic cap copy # copy the build over ionic cap sync # only need to run this if you added native plugins ionic cap open ios # run the iOS emulator

そして、アプリが表示されるはずです。

ReactNativeの実装

React Native Primer

React Nativeは、前のセクションのWebベースのアプローチとは非常に異なるアプローチを採用しています。 React Nativeは、Reactコードをネイティブコンポーネントとしてレンダリングします。これにはいくつかの利点があります。まず、基盤となるオペレーティングシステムとの統合がはるかに深くなっているため、開発者は、Cordova / Capacitorでは利用できない可能性のある新しいスマートフォン機能やOS固有の機能を利用できます。次に、中央にWebベースのレンダリングエンジンがないため、React Nativeアプリは、通常、Cordovaを使用して作成されたアプリよりも高速です。最後に、React Nativeではネイティブコンポーネントの統合が可能であるため、開発者はアプリケーションをよりきめ細かく制御できます。

このアプリケーションでは、前のセクションのロジックを使用し、NativeBaseと呼ばれるReactNativeコンポーネントライブラリを使用してUIをコーディングします。

アプリの構成

まず、指示に従ってReactNativeの必要なすべてのコンポーネントをインストールする必要がありますここに。

React Nativeがインストールされたら、プロジェクトを開始しましょう。

react-native init TwitterCurationRN

セットアップスクリプトを実行すると、最終的にフォルダが作成されます。フォルダーにcdしてreact-nativerun-iosを実行すると、サンプルアプリでエミュレーターがポップアップ表示されます。

コンポーネントライブラリであるNativeBaseもインストールする必要があります。これを行うには、次を実行します。

npm install --save native-base react-native link

また、ReactNativeスタックナビゲーターをインストールしたいと思います。実行しましょう：

npm install --save @react-navigation/stack @react-navigation/native

そして

react-native link cd ios pod-install cd

ネイティブプラグインのリンクとインストールを完了するため。

ルーターのセットアップ

ルーティングには、上記の手順でインストールしたスタックナビゲーターを使用します。

ルーターコンポーネントをインポートします。

import { NavigationContainer } from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack';

そして今、スタックナビゲーターを作成します。

const Stack = createStackNavigator();

スタックナビゲーターを使用するようにアプリコンポーネントのコンテンツを変更します。

const App = () => { return ( ); };

この時点で、エントリがまだ定義されていないため、エラーが発生します。それを幸せにするためだけにスタブ要素を定義しましょう。

プロジェクトにコンポーネントフォルダーを作成し、Entry.jsxという名前のファイルを作成して、次のようなスタブコンポーネントを追加します。

import React, {useState} from 'react'; import { Text } from 'native-base'; export default Entry = ({navigation}) => { return Entry; // All text must be wrapped in a component or if you’re not using NativeBase. }

アプリにエントリコンポーネントをインポートすると、ビルドされます。

これで、入力ページをコーディングする準備が整いました。

入力ページ

全体像の計画

上記で実装したページと非常によく似ていますが、NativeBaseコンポーネントを使用するページを実装します。フックやフェッチなど、使用したJavaScriptAPIとReactAPIのほとんどは、引き続き利用できます。

rtl-sdrとは

1つの違いは、ナビゲーションAPIの操作方法です。これについては後で説明します。

UIコンポーネント

使用する追加のNativeBaseコンポーネントは、Container、Content、Input、List、ListItem、およびButtonです。これらはすべてIonicとBootstrapReactに類似したものがあり、NativeBaseのビルダーは、これらのライブラリーに精通している人々にとって非常に直感的です。単にそのようにインポートします：

import { Container, Content, Input, Item, Button, List, ListItem, Text } from 'native-base';

そして、コンポーネントは次のとおりです。

return Add Pull {handles.map((item) => {item.key} )}

それでは、状態ハンドラーとイベントハンドラーを実装しましょう。

const [input, changeInput] = useState(''); const [handles, changeHandles] = useState([]); const inputChange = (text) => { changeInput(text); } const onAddClicked = () => { const newHandles = [...handles, {key: input}]; changeHandles(newHandles); changeInput(''); }

そして最後に、API呼び出し：

const onPullClicked = () => { fetch('http://prismatic.pythonanywhere.com/get_tweets', { method: 'POST', mode: 'cors', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ accounts: handles.map(x => x.key) }) }).then(r=>r.json()).then(data => { navigation.navigate('SentimentDisplay', { data }); }) .catch(e => { console.log(e); }) }

この実装は、異なる方法でナビゲートしていることを除いて、NativeBase実装と同じであることに注意してください。スタックナビゲーターは、そのコンポーネントに「ナビゲーション」と呼ばれる小道具を渡します。これは、.navigateを使用してルート間を移動するために使用できます。単にナビゲートするだけでなく、ターゲットコンポーネントにデータを渡すこともできます。このメカニズムを使用してデータを渡します。

アプリをコンパイルするには、Entryを作成する必要があります。ナビゲーションコンポーネントを認識しています。これを行うには、コンポーネント関数宣言を変更する必要があります。

export default Entry = ({navigation}) => {

保存すると、ページが表示されます。

センチメントソートページ

全体像の計画

前のセクションと同じように感情ページを実装しますが、ページのスタイルを少し変えて、ナビゲーションライブラリを別の方法で使用してAPI呼び出しの戻り値を取得します。

React NativeにはCSSがないため、StyleSheetオブジェクトを定義するか、単にスタイルをインラインでコーディングする必要があります。コンポーネント間でスタイルの一部を共有するため、グローバルスタイルシートを作成しましょう。ルート設定後に行います。

また、StackNavigator [戻る]ナビゲーションボタンが組み込まれているため、独自の[戻る]ボタンを実装する必要はありません。

ルート設定

StackNavigatorでのルート定義とてもシンプルです。 Stack Screenという名前の新しいものを作成し、Reactルーターのようにコンポーネントを指定するだけです。

import React from 'react'; import {Text} from 'native-base'; const SentimentDisplay = () => { return Sentiment Display; } export default SentimentDisplay;

これを機能させるには、もちろん、components /SentimentDisplay.jsにスタブコンポーネントを作成する必要があります。

import SentimentDisplay from './components/SentimentDisplay';

そしてそれをインポートします：

import {StyleSheet} from 'react-native'; export default StyleSheet.create({ tweet: {paddingTop: 5}, accountName: {fontWeight: '600'}, })

これで、グローバルスタイルシートを作成する準備が整いました。

グローバルスタイルシート

まず、globalStyles.jsという名前のファイルを作成します。次に、React NativeからStyleSheetコンポーネントをインポートし、スタイルを定義します。

StackNavigator

これで、UIをコーディングする準備が整いました。

UIコンポーネント

UIコンポーネントは、ルートの操作方法を除いて、かなりよく知られています。 const SentimentDisplay = ({route, navigation}) => { の特別な小道具のナビゲーションとルートを使用して、現在のアプリケーションの状態を取得し、ユーザーがそのページを見たい場合はトピック表示に移動します。

コンポーネント定義を変更して、ナビゲーション小道具にアクセスします。

const {params: {data}} = route; const viewByTopicClicked = () => { navigation.navigate('TopicDisplay', { data }); }

そして今、アプリケーションの状態読み取りとナビゲーション機能を実装します。

import globalStyles from './globalStyles';

グローバルスタイルをインポートします。

import { View } from 'react-native'; import {List, Item, Content, ListItem, Container, Text, Button} from 'native-base';

そしてコンポーネント：

return View By Topic {data.sentimentSorted.map((item, i) => {item.account}: {item.tweet} ({item.data.sentiment.toPrecision(2)}) )} ;

そして最後に、コンポーネント：

import React from 'react'; import {Text} from 'native-base'; const TopicDisplay = () => { return Topic Display; } export default TopicDisplay;

保存してツイートをプルしてみると、感情が表示されます。次に、トピックのグループ化ページに移動します。

トピックのグループ化ページ

全体像の計画

トピックの表示も非常によく似ています。ハンドラービルダーを使用して、特定のトピックアイテムの表示ページに移動するためのナビゲーション関数を構築します。また、このページに固有のスタイルシートを定義します。

私たちが行う新しいことの1つは、TouchableOpacityを実装することです。これは、ボタンのように機能するReactNative固有のコンポーネントです。

ルート設定

ルート定義は以前と同じです。

import TopicDisplay from './components/TopicDisplay;

スタブコンポーネントcomponents / TopicDisplay.js：

import { View, TouchableOpacity, StyleSheet } from 'react-native'; import {List, Item, Content, ListItem, Container, Text} from 'native-base';

そしてそれをインポートします：

import globalStyles from './globalStyles';

UIコンポーネント

これの多くは非常によく知られているように見えます。ライブラリ関数をインポートします。

const styles = StyleSheet.create({ topicName: {fontWeight: '600'}, })

グローバルスタイルをインポートします。

export default TopicDisplay = ({route, navigation}) => {

カスタムスタイルを定義します。

const {params: {data}} = route; const specificItemPressedHandlerBuilder = (topic) => () => { navigation.navigate('TopicDisplayItem', { data, topic }); }

ナビゲーション小道具を定義します。

onPress

データハンドラーとアクションハンドラーを定義します。関数を返す関数であるハンドラビルダーを使用していることに注意してください。

return {Object.keys(data.groupedByNp).map((topic, i) => {topic} )} ;

そして今、コンポーネント。 TouchableOpacityを使用していることに注意してください。これにはimport TopicDisplayItem from './components/TopicDisplayItem'; を含めることができます。ハンドラ。 TouchableTransparencyを使用することもできましたが、TouchableOpacityのクリックアンドホールドアニメーションの方がアプリケーションに適していました。

import React from 'react'; import {View} from 'react-native'; import {List, Item, Content, ListItem, Container, Text} from 'native-base'; import globalStyles from './globalStyles'; const TopicDisplayItem = ({route}) => { const {params: {data, topic}} = route; return Topic Display Item; } export default TopicDisplayItem;

そして、これはそれを行う必要があります。アプリケーションを保存してお試しください！

次に、トピック表示アイテムページに移動します。

トピック表示項目ページ

全体像の計画

トピック表示項目ページは非常によく似ており、他のセクションではすべての特異性が処理されているため、ここからスムーズに航行できるはずです。

ルート設定

ルート定義を追加します。

return {data.groupedByNp[topic].map((item, i) => {item.account}: {item.tweet} ({item.data.sentiment.toPrecision(2)}) )} ;

インポートを追加します。

|_+_|

そして、スタブコンポーネントを作成します。ベアコンポーネントだけでなく、使用するNativeBaseコンポーネントもインポートして、ルートプロップを定義しましょう。

|_+_|

UIコンポーネント

UIコンポーネントは非常にシンプルです。以前に見たことがありますが、実際にはカスタムロジックを実装していません。だから、それのために行きましょう！深呼吸する…

|_+_|

保存してください、そして私たちは行ってもいいはずです！これで、エミュレーターでアプリを実行する準備が整いました…待ってください。

アプリの実行

ええと、あなたはReact Nativeを使っているので、あなたはすでにエミュレーターでアプリを実行しているので、この部分はすでに処理されています。これは、ReactNativeの開発環境の優れた点の1つです。

ふぅ！これで、この記事のコーディング部分は終わりです。テクノロジーについて学んだことを見てみましょう。

テクノロジーの比較

コルドバ：長所と短所

コルドバの最も優れている点は、熟練したWeb開発者が機能的で合理的に見栄えのするものをコーディングできるスピードです。結局のところ、Webアプリをコーディングしているので、Web開発のスキルと経験は簡単に移行できます。開発プロセスは迅速かつシンプルであり、CordovaAPIへのアクセスもシンプルで直感的です。

Cordovaを直接使用することの欠点は、主にWebコンポーネントへの過度の依存にあります。ユーザーは、モバイルアプリを使用するときに特定のユーザーエクスペリエンスとインターフェイスデザインを期待するようになりました。アプリケーションがモバイルサイトのように感じられる場合、エクスペリエンスは少し不快になる可能性があります。さらに、トランジショナルアニメーションやナビゲーションユーティリティなど、アプリに組み込まれている機能のほとんどは手動で実装する必要があります。

Ionic：長所と短所

Ionicの最も優れた点は、「無料」で入手したモバイル中心の機能の数でした。 Webアプリケーションをコーディングするのと同じようにコーディングすることで、CordovaとReact-Bootstrapを使用するよりもはるかにモバイルフレンドリーに見えるアプリを構築することができました。ナビゲーションアニメーション、ネイティブなスタイルのボタン、およびユーザーエクスペリエンスを非常にスムーズにする多くのユーザーインターフェイスオプションがありました。

Ionicを使用することの欠点は、その長所が部分的に原因でした。まず、さまざまな環境でアプリがどのように動作するかを想像するのが難しい場合がありました。アプリが一方向に見えたからといって、同じUI配置が別の環境でも同じように見えるとは限りません。第二に、Ionicは多くの基盤となるテクノロジーの上に位置しており、一部のコンポーネントにアクセスするのは困難であることがわかりました。最後に、これはIonic-Reactに固有ですが、Ionicは最初にAngular用に構築されたため、多くのIonic-React機能にはドキュメントとサポートが少ないようです。ただし、Ionicチームは、React開発者のニーズに非常に注意を払っているようで、新しい機能を迅速に提供します。

React Native：長所と短所

React Nativeは、モバイルでの開発が非常にスムーズなユーザーエクスペリエンスを提供しました。エミュレーターに直接接続することで、アプリケーションがどのように見えるかは不思議ではありませんでした。 Webベースのデバッガーインターフェイスは、Webアプリケーションの世界からのデバッグ手法を相互適用するのに非常に役立ち、エコシステムは非常に堅牢です。

React Nativeの欠点は、ネイティブインターフェイスに近いことです。多くのDOMベースのライブラリは使用できませんでした。つまり、新しいライブラリとベストプラクティスを学ぶ必要がありました。 CSSの利点がなければ、アプリケーションのスタイル設定はやや直感的ではありませんでした。最後に、学習する多くの新しいコンポーネント（たとえば、divの代わりに表示、すべてをラップするテキストコンポーネント、ボタンとTouchableOpacityとTouchableTransparencyなど）を使用すると、誰かが入ってくる場合、最初は少し学習曲線があります。力学の予備知識がほとんどない状態でネイティブワールドに反応します。

各テクノロジーをいつ使用するか

Cordova、Ionic、およびReact Nativeはすべて非常に強力な長所と短所があるため、各テクノロジーには、最高の生産性とパフォーマンスを享受できるコンテキストがあります。

UIデザインと一般的なルックアンドフィールを取り巻く強力なブランドアイデンティティを備えたWebファーストの既存のアプリケーションを既にお持ちの場合、最適なオプションはCordovaです。これにより、スマートフォンのネイティブ機能にアクセスしながら、ほとんどのアプリケーションを再利用できます。 Webコンポーネントを作成し、その過程でブランドアイデンティティを維持します。レスポンシブフレームワークを使用する比較的単純なアプリケーションの場合、変更をほとんど必要とせずにモバイルアプリを構築できる場合があります。ただし、アプリケーションはアプリのようには見えず、Webページのように見えます。また、モバイルアプリに期待されるコンポーネントの一部は個別にコード化されます。 したがって、アプリケーションをモバイルに移植するWebファーストプロジェクトに参加している場合は、Cordovaをお勧めします。

アプリファーストの哲学で新しいアプリケーションのコーディングを開始しているが、チームのスキルセットが主にWeb開発にある場合は、Ionicをお勧めします。 Ionicのライブラリを使用すると、ネイティブコンポーネントに近い外観と感触のコードをすばやく記述しながら、Web開発者としてのスキルと本能を適用できます。 Web開発のベストプラクティスはIonicを使用した開発に容易に相互適用され、CSSを使用したスタイリングはシームレスに機能することがわかりました。さらに、サイトのモバイルバージョンは、レスポンシブCSSフレームワークを使用してコーディングされたWebサイトよりもはるかにネイティブに見えます。ただし、途中のいくつかのステップで、React-Ionic-Native APIの統合には手動調整が必要であり、時間がかかることがわかりました。したがって、アプリケーションをゼロから開発していて、モバイル対応のWebアプリケーションとモバイルアプリケーション間で大量のコードを共有したい場合は、Ionicをお勧めします。

ネイティブコードベースが実装された新しいアプリケーションをコーディングしている場合は、ReactNativeを試してみることをお勧めします。ネイティブコードを使用していない場合でも、React Nativeに既に精通している場合や、ハイブリッドアプリケーションではなくモバイルアプリケーションが主な関心事である場合にも最適なオプションです。フロントエンド開発の取り組みのほとんどをWeb開発に集中させた後、コンポーネントの編成とコーディング規則の違いにより、React Nativeを使い始めるには、IonicやCordovaよりも多くの学習曲線があることに最初に気付きました。ただし、これらのニュアンスが学習されると、特にNativeBaseのようなコンポーネントライブラリの助けを借りて、コーディングエクスペリエンスは非常にスムーズになります。開発環境の品質とアプリケーションの制御を考えると、 プロジェクトのフロントエンドが主にモバイルアプリケーションである場合は、選択するツールとしてReactNativeをお勧めします。

今後のトピック

私が探求する時間がなかったトピックの1つは、カメラ、ジオロケーション、生体認証などのネイティブAPIへのアクセスのしやすさでした。モバイル開発の大きな利点の1つは、通常はブラウザーではアクセスできない豊富なAPIエコシステムにアクセスできることです。

将来の記事では、さまざまなクロスプラットフォームテクノロジを使用してこれらのネイティブAPI対応アプリケーションを開発することの容易さを探求したいと思います。

結論

本日、3つの異なるクロスプラットフォームモバイル開発テクノロジーを使用してTwitterキュレーションアプリを実装しました。これにより、各テクノロジーがどのようなものかをよく理解し、独自のReactベースのアプリケーションを開発するきっかけになったと思います。

読んでくれてありがとう！

基本を理解する

自然言語処理（NLP）はどのくらい難しいですか？

NLPは、意味、コンテキスト、気分、その他の属性を理解し、それに対応したり、報告したりすることを含む、機械学習の包括的な手法です。これらの手法の多くは複雑であり、かなりの処理能力を必要とします。幸いなことに、多くの手間のかかる作業を行うオープンソースライブラリがあり、多くのエンジニアやアプリケーションがNLPにアクセスできるようになっています。