React ile tam yığın NLP: Ionic vs Cordova vs React Native

Apple'ın ilk iPhone'u piyasaya sürmesinden bu yana geçen yaklaşık 15 yılda, yazılım geliştirme ortamı önemli ölçüde değişti. Akıllı telefonlar yaygın bir şekilde benimsendikçe ve benzersiz yeteneklerde büyümeye devam ettikçe, kullanıcılar masaüstü veya dizüstü bilgisayarlar yerine mobil cihazlar aracılığıyla yazılım hizmetlerine erişmeyi giderek daha fazla tercih ediyor. Akıllı telefonlar coğrafi konum, biyometrik kimlik doğrulama ve hareket algılama gibi özellikler sunar ve bunların çoğu masaüstü platformları henüz yeni kopyalamaya başlar. Bazı demografilerde, bir akıllı telefon veya benzer bir mobil cihaz, bilgisayarları tamamen atlayarak, yazılım tüketiminin birincil aracıdır.

Şirketler bu değişimi fark etti ve büyük ölçüde güçlendirdi. Mobil uygulamalar artık sonradan akla gelen bir düşünce değil. Bir finansal aracılık şirketi olan Robinhood'dan bir sosyal medya şirketi olan Instagram'a ve bir araç çağırma şirketi olan Uber'e kadar uzanan uygulamalar, mobil öncelikli bir geliştirme stratejisi benimsiyor. Bir masaüstü uygulaması varsa, genellikle birincil odak yerine mobil uygulamanın tamamlayıcısı olarak sunulur.

Tam kapsamlı geliştiriciler için bu değişen trendlere uyum sağlamak çok önemlidir. Neyse ki, web geliştiricilerinin becerilerini mobil geliştirmeye uygulamalarına yardımcı olacak birçok olgun ve iyi desteklenen teknoloji var. Bugün, bu tür üç teknolojiyi keşfedeceğiz: Cordova, Ionic ve React Native. Ön uç web geliştirme için en popüler çerçevelerden biri olan React.js'yi temel geliştirme teknolojimiz olarak kullanacağız. Bir iPhone uygulaması geliştirmeye odaklanacak olsak da, bunlar platformlar arası teknolojilerdir ve Android platformunda çapraz derlenebilir olacaktır.

Bugün Ne İnşa Edeceğiz?

Twitter beslemelerini işlemek ve düzenlemek için Doğal Dil İşleme'yi (NLP) kullanan bir uygulama oluşturacağız. Uygulama, kullanıcının bir dizi Twitter tanıtıcısı seçmesine, bir Twitter API'sini kullanarak en son güncellemeleri almasına ve tweet'leri duygu ve konuya göre sınıflandırmasına olanak tanır. Kullanıcı daha sonra tweetleri duygu veya konuya göre görüntüleyebilir.

Arka Uç

Ön ucu inşa etmeden önce, arka ucu inşa etmek isteyeceğiz. Şimdilik arka ucu basit tutacağız - veri kümesine özgü sorunlarla başa çıkmak için biraz veri temizleme ile birlikte temel, kullanıma hazır duygu analizi ve konuşma parçası etiketleme kullanacağız. TextBlob adlı açık kaynaklı bir NLP kitaplığı kullanacağız ve sonucu Flask üzerinden sunacağız.

Duygu Analizi, Konuşma Kısmı Etiketleme ve NLP: Hızlı Bir Başlangıç

Daha önce doğal dil analizi uygulamaları ile çalışmadıysanız bu terimler size çok yabancı gelebilir. NLP, doğal insan dili verilerini analiz eden ve işleyen teknolojiler için bir şemsiye terimdir. Bu geniş bir konu olsa da, bu alanı ele alan tüm teknolojilerde ortak olan birçok zorluk vardır. Örneğin, insan dili, programlama dilinin veya sayısal verilerin aksine, insan dili dilbilgisinin serbest doğası nedeniyle gevşek bir şekilde yapılandırılma eğilimindedir. Ek olarak, insan dili son derece bağlamsal olma eğilimindedir ve bir bağlamda söylenen veya yazılan bir cümle, başka bir bağlama çevrilmeyebilir. Son olarak, yapı ve bağlam bir yana, dil son derece karmaşıktır. Paragrafta daha aşağıda yer alan kelimeler, paragrafın başındaki cümlenin anlamını değiştirebilir. Kelime hazinesi icat edilebilir, yeniden tanımlanabilir veya değiştirilebilir. Tüm bu karmaşıklıklar, veri analizi tekniklerinin çapraz uygulanmasını zorlaştırır.

Duygu Analizi, doğal bir dil pasajındaki duygusallığı anlamaya odaklanan NLP'nin bir alt alanıdır. İnsan duyguları doğası gereği özneldir ve bu nedenle teknolojik olarak tespit edilmesi zor olsa da, duygu analizi muazzam ticari vaatleri olan bir alt alandır. Duygu analizinin bazı uygulamaları, çeşitli özelliklerin olumlu ve olumsuz değerlendirmesini belirlemek için ürün incelemelerini sınıflandırmayı, bir e-postanın veya bir konuşmanın ruh halini tespit etmeyi ve şarkı sözlerini ruh haline göre gruplandırmayı içerir. Sentiment Analysis'in daha derinlemesine bir açıklamasını arıyorsanız, Sentiment Analysis tabanlı bir uygulama oluşturma hakkındaki makalemi buradan okuyabilirsiniz.

Konuşma bölümü etiketleme veya POS etiketleme, çok farklı bir alt alandır. POS etiketlemenin amacı, gramer ve bağlamsal bilgileri kullanarak bir cümledeki belirli bir kelimenin konuşma kısmını belirlemektir. Bu ilişkiyi belirlemek, ilk bakışta göründüğünden çok daha zor bir iştir - bir kelimenin bağlamına ve cümlenin yapısına bağlı olarak konuşmanın çok farklı bölümleri olabilir ve kurallar insanlar için bile her zaman net değildir. Neyse ki, günümüzde birçok hazır model, çoğu büyük programlama diliyle entegre güçlü ve çok yönlü modeller sunmaktadır. Daha fazlasını öğrenmek isterseniz, POS etiketleme hakkındaki makalemi buradan okuyabilirsiniz.

Flask, TextBlob ve Tweepy

NLP arka ucumuz için Flask, TextBlob ve Tweepy kullanacağız. Küçük, hafif bir sunucu oluşturmak için Flask'ı, doğal dil işlememizi çalıştırmak için TextBlob'u ve Twitter API'sinden tweet'leri almak için Tweepy'yi kullanacağız. Kodlamaya başlamadan önce, tweet'leri alabilmek için Twitter'dan bir geliştirici anahtarı da almak isteyeceksiniz.

Çok daha karmaşık bir arka uç yazabilir ve daha karmaşık NLP teknolojileri kullanabiliriz, ancak bugünkü amaçlarımız için arka ucu mümkün olduğunca basit tutacağız.

Arka Uç Kodu

Artık kodlamaya başlamaya hazırız. Favori Python editörünüzü ve terminalinizi çalıştırın ve hadi başlayalım!

İlk olarak, gerekli paketleri kurmak isteyeceğiz.

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

Şimdi fonksiyonumuzun kodunu yazalım.

Yeni bir Python betiği açın, buna server.py adını verin ve gerekli kitaplıkları içe aktarın:

 import tweepy from textblob import TextBlob from collections import defaultdict

Şimdi bazı yardımcı fonksiyonlar yazalım:

 # 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

Artık yardımcı fonksiyonları yazdığımıza göre, her şeyi birkaç basit fonksiyonla bir araya getirebiliriz:

 # 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

Artık download_analyze_tweets işlevini, takip etmek istediğiniz tutamaçlar listesinde çalıştırabilirsiniz ve sonuçları görmelisiniz.

Aşağıdaki kodu çalıştırdım:

 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)

Bunu yürütmek aşağıdaki sonuçları üretti. Sonuçlar açıkça zamana bağlıdır, bu nedenle benzer bir şey görürseniz doğru yoldasınız demektir.

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

Şimdi oldukça basit olan Flask sunucusunu oluşturabiliriz. server.py adında boş bir dosya oluşturun ve aşağıdaki kodu yazın:

 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)

Sunucuyu çalıştırın ve artık seçtiğiniz bir HTTP istemcisini kullanarak sunucuya bir gönderi isteği gönderebilmeniz gerekir. Bir json argümanı olarak {accounts: [“@NASA”, “@SpaceX”]} girin ve API'nin Twitter analiz kodunda döndürülen şeye benzer bir şey döndürdüğünü görmelisiniz.

Artık bir sunucumuz olduğuna göre ön ucu kodlamaya hazırız. Bir telefon öykünücüsü üzerinden ağ oluşturmadaki küçük bir nüans nedeniyle, API'nizi bir yere dağıtmanızı öneririm. Aksi takdirde, uygulamanızın bir öykünücü üzerinde çalışıp çalışmadığını tespit etmek ve bir öykünücüdeyken localhost:5000 <Your Computer IP>:5000 istek göndermek isteyeceksiniz. Kodu dağıtırsanız, isteği bu URL'ye gönderebilirsiniz.

Sunucuyu dağıtmak için birçok seçenek vardır. Minimum kurulum gerektiren ücretsiz, basit bir hata ayıklama sunucusu için, PythonAnywhere gibi, bu sunucuyu kutudan çıkar çıkmaz çalıştırabilecek bir şey öneririm.

Artık arka uç sunucuyu kodladığımıza göre ön uca bakalım. Bir web geliştiricisi için en uygun seçeneklerden biriyle başlayacağız: Cordova.

Apache Cordova Uygulaması

Cordova Astarı

Apache Cordova, web geliştiricilerinin mobil platformları hedeflemesine yardımcı olan bir yazılım teknolojisidir. Cordova, akıllı telefon platformlarında uygulanan web tarayıcı özelliklerinden yararlanarak, bir uygulama oluşturmak için web uygulama kodunu yerel bir uygulama kapsayıcısına sarar. Bununla birlikte, Cordova sadece süslü bir web tarayıcısı değildir. Cordova API aracılığıyla web geliştiricileri, çevrimdışı destek, konum hizmetleri ve cihaz kamerası gibi akıllı telefona özgü birçok özelliğe erişebilir.

Uygulamamız için JS çerçevesi olarak React.js ve CSS çerçevesi olarak React-Bootstrap kullanarak bir uygulama yazacağız. Bootstrap duyarlı bir CSS çerçevesi olduğundan, daha küçük ekranlarda çalıştırma desteğine zaten sahiptir. Uygulama yazıldıktan sonra Cordova kullanarak bir web uygulaması haline getireceğiz.

Uygulamayı Yapılandırma

Cordova React uygulamasını kurmak için benzersiz bir şey yaparak başlayacağız. Bir Medium makalesinde, geliştirici Shubham Patil ne yaptığımızı açıklıyor. Esasen, sonunda ikisini birleştirmeden önce, React CLI'yi kullanarak bir React geliştirme ortamı ve ardından Cordova CLI'yi kullanarak bir Cordova geliştirme ortamı kuruyoruz.

Başlamak için kod klasörünüzde aşağıdaki iki komutu çalıştırın:

 cordova create TwitterCurationCordova create-react-app twittercurationreact

Kurulum tamamlandıktan sonra, React uygulamasının public ve src klasörünün içeriğini Cordova uygulamasına taşımak isteyeceğiz. Ardından, package.json'da, React projesinden komut dosyalarını, tarayıcı listesini ve bağımlılıkları kopyalayın. Ayrıca Cordova ile uyumluluğu etkinleştirmek için package.json dosyasının köküne "homepage": "./" ekleyin.

package.json birleştirildiğinde, public/index.html dosyasını Cordova ile çalışacak şekilde değiştirmek isteyeceğiz. Dosyayı açın ve Cordova.js yüklendiğinde www/index.html adresindeki meta etiketleri ve gövde etiketinin sonundaki komut dosyasını kopyalayın.

Ardından, Cordova'da çalışıp çalışmadığını algılamak için src/index.js dosyasını değiştirin. Cordova'da çalışıyorsa, oluşturma kodunu deviceready olay işleyicisinde çalıştırmak isteyeceğiz. Normal bir tarayıcıda çalışıyorsa, hemen oluşturun.

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

Son olarak, dağıtım hattımızı kurmamız gerekiyor. Aşağıdaki tanımı config.xml dosyasına ekleyin:

<hook type="before_prepare" src="hooks/prebuild.js" />

Ve aşağıdaki betiği prebuild.js'ye koyun:

 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); }); }); }); };

Bu, React derlemesini yürütür ve Cordova derlemesi başlamadan önce derleme klasörünü uygun yere yerleştirir, böylece dağıtım sürecini otomatikleştirir.

Artık uygulamamızı çalıştırmayı deneyebiliriz. Komut satırında aşağıdakileri çalıştırın:

 npm install rimraf npm install npm run start

Tarayıcıda React uygulamasının kurulduğunu ve çalıştığını görmelisiniz. Cordova'yı şimdi ekleyin:

 cordova platform add iOS cordova run iOS

Ve öykünücüde çalışan React uygulamasını görmelisiniz.

Yönlendirici ve Paket Kurulumu

Uygulamayı oluşturmak için ihtiyaç duyduğumuz bazı altyapıları kurmak için gerekli paketleri yükleyerek başlayalım:

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

Şimdi yönlendirmeyi ayarlayacağız ve bunu yaparken tüm bileşenler tarafından paylaşılacak basit bir global durum nesnesi de kuracağız. Bir üretim uygulamasında Redux veya MobX gibi bir durum yönetim sistemi kullanmak isteyeceğiz ancak şimdilik basit tutacağız. App.js'ye gidin ve rotayı şu şekilde yapılandırın:

 import { BrowserRouter as Router, Redirect, Route, } from "react-router-dom"; function App() { const [curatedTweets, setCuratedTweets] = useState(); return <Router> <Route path="/" exact render={() => <Input setCuratedTweets={setCuratedTweets} />} /> <Route path="/display" render={() => <Display curatedTweets={curatedTweets} />} /> <Route path="*" exact render={() => <Redirect to="/" />} /> </Router> }

Bu rota tanımıyla, uygulamamız gereken iki rotayı tanıttık: Giriş ve Görüntüleme. CuratedTweets değişkeninin Display'e ve curatedTweets değişkeninin setCuratedTweets aktarıldığına dikkat edin. Bu, girdi bileşeninin curatedTweets değişkenini ayarlamak için işlevi çağırabileceği ve Display'in değişkeni görüntülemesini sağlayacağı anlamına gelir.

Bileşenleri kodlamaya başlamak için /src altında /src/components adında bir klasör oluşturalım. /src/components altında, /src/components/input adında başka bir klasör ve altında iki dosya oluşturun: input.js ve input.css. Görüntü bileşeni için de aynısını yapın - /src/components/display ve altında oluşturun: display.js ve display.css.

Bunların altında, şu şekilde saplama bileşenleri oluşturalım:

 import React from 'react'; import 'input.css' const Input = () => <div>Input</div>; export default Input

Ve aynısı Ekran için:

 import React from 'react'; import display.css' const Display = () => <div>Display</div>; export default Display

Bununla, tel çerçevelememiz tamamlandı ve uygulama çalışmalı. Şimdi Giriş sayfasını kodlayalım.

Giriş Sayfası

Büyük Resim Planı

Kodu yazmadan önce Giriş sayfamızın ne yapmasını istediğimizi düşünelim. Açıkçası, kullanıcıların çekmek istedikleri Twitter tanıtıcılarını girip düzenlemeleri için bir yol isteyeceğiz. Ayrıca, kullanıcıların işlerinin bittiğini gösterebilmelerini istiyoruz. Kullanıcılar işlerini tamamladıklarını belirttiğinde, Python küratörlüğü API'mizden küratörlüğünde tweet'leri çekmek ve son olarak Display bileşenine gitmek isteyeceğiz.

Artık bileşenimizin ne yapmasını istediğimizi bildiğimize göre, kodlamaya hazırız.

Dosyayı Ayarlama

Gezinme işlevine erişmek için React Router kitaplığının withRouter içe aktararak başlayalım, ihtiyacımız olan React Bootstrap Bileşenleri:

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

Şimdi Input için saplama fonksiyonunu tanımlayalım. setCuratedTweets işlevini aldığını biliyoruz ve aynı zamanda Python API'mizden küratörlü tweet'leri ayarladıktan sonra görüntüleme yoluna gitme yeteneği vermek istiyoruz. Bu nedenle, setCuratedTweets ve geçmişi (navigasyon için) aksesuarlardan almak isteyeceğiz.

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

Buna geçmiş API erişimi vermek için, dosyanın sonundaki dışa aktarma ifadesinde withRouter ile withRouter :

 export default withRouter(Input);

Veri Kapsayıcıları

React Hooks kullanarak veri kapsayıcılarını ayarlayalım. Aşağıdaki kodu Input bileşeninin gövdesine ekleyebilmemiz için useState kancasını zaten içe aktardık:

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

Bu, kullanıcının çekmek istediği tutamaçların listesini tutacak tutamaçlar ve değiştiriciler ile kullanıcının tutamacı girmek için kullandığı metin kutusunun içeriğini tutacak handleText 'i oluşturur.

Şimdi UI bileşenlerini kodlayalım.

Kullanıcı Arayüzü Bileşenleri

UI bileşenleri oldukça basit olacaktır. İki düğmeyle birlikte giriş metin kutusunu içeren bir Bootstrap satırına sahip olacağız, bunlardan biri mevcut giriş kutusu içeriğini tutamaçlar listesine eklemek ve diğeri API'den çekmek için. Kullanıcının Bootstrap liste grubunu kullanarak çekmek istediği tutamaçların listesini görüntüleyen başka bir Bootstrap satırına sahip olacağız. Kodda şöyle görünür:

 return ( <Container className="tl-container"> <Row> <Col> <Form.Control type="text" value={handleText} onChange={changeHandler} placeholder="Enter handle to pull" /> </Col> </Row> <Row className='input-row'> <Col> <Button variant="primary" onClick={getPull}>Pull</Button> {' '} <Button variant="success" onClick={onAddClicked}>Add</Button> </Col> </Row> <Row> <Col> <ListGroup className="handles-lg"> {handles.map((x, i) => <ListGroup.Item key={i}> {x} <span onClick={groupItemClickedBuilder(i)} className="delete-btn-span"> <Button variant="danger" size="sm"> delete </Button> </span> </ListGroup.Item>)} </ListGroup> </Col> </Row> </Container> );

UI bileşenine ek olarak, veri değişikliklerini işleyen üç UI olay işleyicisini uygulamak isteyeceğiz. API'yi çağıran getPull olay işleyicisi bir sonraki bölümde uygulanacaktır.

 // 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); }

Artık API çağrısını uygulamaya hazırız.

API Çağrısı

API çağrısı için, çekmek istediğimiz tutamaçları almak, bunu bir POST isteğinde Python API'sine göndermek ve elde edilen JSON sonucunu curatedTweets değişkenine koymak istiyoruz. Ardından, her şey yolunda giderse, /display rotasına programlı olarak gitmek istiyoruz. Aksi takdirde, daha kolay hata ayıklayabilmemiz için hatayı konsola kaydedeceğiz.

Kod modunda şöyle görünür:

 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); }) }

Ve bununla birlikte, gitmek için iyi olmalıyız. Uygulamayı çalıştırmaktan, birkaç tutamaç eklemekten ve API'ye bir istek göndermekten çekinmeyin.

Şimdi, duyarlılık sayfasını kodlamaya hazırız.

Duygu Sıralama Modu

Python API zaten tweet'leri duyarlılığa göre sıraladığından, Python API'sinin sonucunu aldığımızda, duygu sayfası aslında çok zor değil.

Büyük Resim Planı

Tweetleri göstermek için bir liste arayüzü isteyeceğiz. Ayrıca konu gruplandırma moduna geçmek ve Giriş sayfasına geri dönmek için birkaç navigasyon bileşeni isteyeceğiz.

Başlamak için, display.js dosyasında SentimentDisplay modu alt bileşenini tanımlayalım.

Duygu Görüntü Bileşeni

SentimentDisplay, curatedTweets nesnesini alacak ve duyarlılığa göre sıralanmış tweetleri bir listede görüntüleyecektir. React-Bootstrap yardımıyla bileşen oldukça basittir:

 const SentimentDisplay = ({curatedTweets}) => { return <ListGroup> {curatedTweets.sentimentSorted.map((x, i) => <ListGroup.Item key={i}> <div className="account-div">{x.account}:</div> <span className="tweet-span">{x.tweet}</span> <span className="sentiments-span">({x.data.sentiment.toPrecision(2)})</span> </ListGroup.Item> )} </ListGroup> }

Hazır buradayken, biraz stil de ekleyelim. Aşağıdakileri display.css içine koyun ve içe aktarın:

 .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; }

Artık SentimentDisplay bileşenini gösterebiliriz. Display işlevini şu şekilde değiştirin:

 const Display = ({curatedTweets}) => { return <SentimentDisplay curatedTweets={curatedTweets} /> };

Gezinme bileşenlerini kodlamak için bu fırsatı değerlendirelim. İki düğme isteyeceğiz - “Düzenlemeye dön” düğmesi ve Konu Grubu Modu.

Bu düğmeleri SentimentDisplay bileşeninin hemen üzerindeki ayrı bir Bootstrap satırında şu şekilde uygulayabiliriz:

 Return <Container className="tl-container"> <Row> <Col> <Link to="/"><Button variant='primary'>Back</Button></Link> {' '} <Button variant='success'>View by Topic</Button> </Col> </Row> <Row className="disp-row"> <Col> <SentimentDisplay curatedTweets={curatedTweets} /> </Col> </Row> </Container>

Uygulamayı çalıştırın ve tweet'leri birkaç tutamaçtan çekin. Oldukça şık görünüyor!

Konu Gruplama Modu

Şimdi, Konu Gruplama Modunu uygulamak istiyoruz. SentimentDisplay'den biraz daha karmaşık, ancak yine de bazı çok kullanışlı Bootstrap bileşenleri bize çok yardımcı oluyor.

Büyük Resim Planı

Tüm isim tamlamalarını alıp akordeon listesi olarak görüntüleyeceğiz. Daha sonra akordeon listesi genişledikten sonra isim tamlamalarını içeren tweetleri render edeceğiz.

Konu Gruplama Moduna Geçmeyi Uygulama

Öncelikle Duyarlılık Modundan Konu Gruplama Moduna geçmek için mantığı uygulayalım. Önce saplama bileşenini oluşturarak başlayalım:

 const TopicDisplay = () => { return <div>Topic Display</div> }

Ve onu görüntülemek için bir mod oluşturmak için biraz mantık ayarlayın. Ana Görüntüleme Bileşeninde, bileşenin görüntüleneceği mantığı oluşturmak için aşağıdaki satırları ekleyin.

 // 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'

Ve mantığı eklemek için JSX'i aşağıdakiyle değiştirin:

 Return <Container className="tl-container"> <Row> <Col> <Link to="/"><Button variant='primary'>Back</Button></Link> {' '} <Button variant='success' onClick={toggleDisplayType}>{switchStr}</Button> </Col> </Row> <Row className="disp-row"> <Col> { displayType === 'Sentiment'? <SentimentDisplay curatedTweets={curatedTweets} />: <TopicDisplay curatedTweets={curatedTweets} /> } </Col> </Row> </Container>

Şimdi, geçiş yaptığınızda Konu Grubu Görüntüleme saplamasını görmelisiniz.

Konu Görüntüleme Bileşeni

Artık TopicDisplay bileşenini kodlamaya hazırız. Daha önce tartışıldığı gibi, Bootstrap Akordeon Listesinden yararlanacaktır. Uygulama aslında oldukça basittir:

 const TopicDisplay = ({curatedTweets}) => { return <Accordion> {Object.keys(curatedTweets.groupedByNp).map((x, i) => <Card key={i}> <Card.Header> <Accordion.Toggle as={Button} variant="link" eventKey={i}> {x} ({curatedTweets.groupedByNp[x].length}) </Accordion.Toggle> </Card.Header> <Accordion.Collapse eventKey={i}> <Card.Body> <ListGroup> {curatedTweets.groupedByNp[x].map((y, i2) => <ListGroup.Item key={i2}> <div className="account-div">{y.account}:</div> <span className="tweet-span">{y.tweet}</span> <span className="sentiments-span">({y.data.sentiment.toPrecision(2)})</span> </ListGroup.Item> )} </ListGroup> </Card.Body> </Accordion.Collapse> </Card> )} </Accordion> }

Uygulamayı çalıştırın ve Konu Ekranını görmelisiniz.

Artık uygulama tamamlandı ve öykünücü için uygulamayı oluşturmaya hazırız.

Uygulamayı Emülatörde Çalıştırma

Cordova, uygulamayı öykünücüde çalıştırmayı çok kolaylaştırır. Basitçe çalıştırın:

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

Ve uygulamayı öykünücüde görmelisiniz. Bootstrap duyarlı bir web uygulaması olduğundan, web uygulaması bir iPhone'un genişliğine uyum sağlar ve her şey oldukça güzel görünür.

Cordova uygulaması bittiğinde, şimdi Ionic uygulamasına bakalım.

İyonik-Reaksiyon Uygulaması

İyonik Astar

Ionic, hibrit uygulamalar oluşturmayı kolaylaştıran bir web bileşeni kitaplığı ve CLI araç takımıdır. Başlangıçta Ionic, AngularJS ve Cordova'nın üzerine inşa edildi, ancak o zamandan beri bileşenlerini React.js'de yayınladılar ve Cordova'ya benzer bir platform olan Capacitor'u desteklemeye başladılar. Ionic'i diğerlerinden ayıran şey, web bileşenleri kullanmanıza rağmen bileşenlerin yerel bir mobil arayüze çok benzemesidir. Ek olarak, Ionic bileşenlerinin görünümü ve hissi, üzerinde çalıştığı işletim sistemine otomatik olarak uyum sağlar ve bu da uygulamanın daha doğal ve doğal görünmesine ve hissettirmesine yardımcı olur. Son olarak, bu makalemizin kapsamı dışında olsa da, Ionic ayrıca uygulamanızı dağıtmayı biraz daha kolaylaştıran çeşitli oluşturma araçları da sağlar.

Uygulamamız için, Cordova bölümünde oluşturduğumuz bazı JavaScript mantığından yararlanırken kullanıcı arayüzünü oluşturmak için Ionic'in React bileşenlerini kullanacağız.

Uygulamayı Yapılandırma

İlk olarak Ionic araçlarını kurmak isteyeceğiz. Öyleyse aşağıdakileri çalıştıralım:

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

Ve kurulum bittikten sonra proje klasörüne geçelim. Şimdi yeni proje klasörümüzü oluşturmak için Ionic CLI kullanıyoruz:

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

Sihrin gerçekleşmesini izleyin ve şimdi klasöre gidin:

 cd twitter-curation-Ionic

Ve boş uygulamayı şununla çalıştırın:

 ionic serve

Böylece uygulamamız kuruldu ve kullanıma hazır. Bazı rotaları tanımlayalım.

Devam etmeden önce, Ionic'in projeyi TypeScript kullanarak başlattığını fark edeceksiniz. TypeScript'i kullanma yolumdan çıkmasam da, bazı çok güzel özellikleri var ve bu uygulama için onu kullanacağız.

Yönlendirici Kurulumu

Bu uygulama için üç yol kullanacağız - girdi, sentimentDisplay ve topicDisplay . Bunu, Ionic tarafından sağlanan geçiş ve gezinme özelliklerinden yararlanmak istediğimiz için ve Ionic bileşenleri kullandığımız için yapıyoruz ve akordeon listeleri Ionic ile önceden paketlenmiş olarak gelmiyor. Elbette kendimizinkini uygulayabiliriz, ancak bu eğitim için sağlanan İyonik bileşenlerle kalacağız.

App.tsx'e giderseniz, önceden tanımlanmış temel yolları görmelisiniz.

Giriş Sayfası

Büyük Resim Planı

Birkaç önemli farkla, Bootstrap uygulamasıyla benzer mantık ve kodların çoğunu kullanacağız. İlk olarak TypeScript kullanacağız, bu da kodumuz için sonraki bölümde göreceğiniz tür ek açıklamalarına sahip olacağımız anlamına geliyor. İkinci olarak, tarz olarak Bootstrap'a çok benzeyen ancak tasarımında işletim sistemine duyarlı olacak İyonik bileşenleri kullanacağız. Son olarak, Bootstrap sürümündeki gibi geçmiş API'sini kullanarak dinamik olarak gezineceğiz, ancak Ionic Router uygulaması nedeniyle geçmişe biraz farklı şekilde erişeceğiz.

Kurulum

Giriş bileşenini bir saplama bileşeniyle ayarlayarak başlayalım. input adlı sayfaların altında bir klasör oluşturun ve bunun altında Input.tsx adlı bir dosya oluşturun. Bu dosyanın içine, bir React bileşeni oluşturmak için aşağıdaki kodu yerleştirin. TypeScript kullandığımız için biraz farklı olduğuna dikkat edin.

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

Ve App.tsx'teki bileşeni şu şekilde değiştirin:

 const App: React.FC = () => ( <IonApp> <IonReactRouter> <IonRouterOutlet> <Route path="/input" component={Input} exact={true} /> <Route exact path="/" render={() => <Redirect to="/input" />} /> </IonRouterOutlet> </IonReactRouter> </IonApp> );

Şimdi, uygulamayı yenilediğinizde Input stub bileşenini görmelisiniz.

Veri Kapsayıcıları

Şimdi veri kapsayıcılarını oluşturalım. Girilen Twitter tutamaçları için kapların yanı sıra giriş kutusunun mevcut içeriğini istiyoruz. TypeScript kullandığımız için, bileşen işlevindeki useState tür açıklamalarını eklememiz gerekecek:

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

Ayrıca API'den gelen dönüş değerlerini tutmak için bir veri kabı isteyeceğiz. Bunun içeriğinin diğer rotalarla paylaşılması gerektiğinden, onları App.tsx düzeyinde tanımlıyoruz. App.tsx dosyasındaki React'ten useState içe aktarın ve uygulama kapsayıcı işlevini aşağıdaki gibi değiştirin:

 const App: React.FC = () => { const [curatedTweets, setCuratedTweets] = useState<CuratedTweets>({} as CuratedTweets); return ( <IonApp> <IonReactRouter> <IonRouterOutlet> <Route path="/input" component={Input} exact={true} /> <Route exact path="/" render={() => <Redirect to="/input" />} /> </IonRouterOutlet> </IonReactRouter> </IonApp> ); }

Bu noktada, Visual Studio Code gibi sözdizimi vurgulamalı bir düzenleyici kullanıyorsanız, CuratedTweets'in yandığını görmelisiniz. Bunun nedeni, dosyanın CuratedTweets arayüzünün nasıl göründüğünü bilmemesidir. Şimdi bunu tanımlayalım. src altında interfaces adında bir klasör oluşturun ve içinde CuratedTweets.tsx adında bir dosya oluşturun. Dosyada CuratedTweets arayüzünü aşağıdaki gibi tanımlayın:

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

Artık uygulama, API dönüş verilerinin yapısını biliyor. CuratedTweets arayüzünü App.tsx'e aktarın. App.tsx derlemesini şimdi sorunsuz olarak görmelisiniz.

Burada birkaç şey daha yapmamız gerekiyor. setCuratedTweets fonksiyonunu Input bileşenine geçirmemiz ve Input bileşeninin bu fonksiyondan haberdar olmasını sağlamamız gerekiyor.

App.tsx'te Giriş yolunu şu şekilde değiştirin:

 <Route path="/input" render={() => <Input setCuratedTweets={setCuratedTweets}/>} exact={true} />

Şimdi, editör bayrağını başka bir şeyde görmelisiniz - Input, kendisine geçirilen yeni prop hakkında bilgi sahibi değildir, bu yüzden onu Input.tsx'te tanımlamak isteyeceğiz.

First, import the CuratedTweets interface, then define the ContainerProps interface like so:

 interface ContainerProps { setCuratedTweets: React.Dispatch<React.SetStateAction<CuratedTweets>> }

And finally, change the Input component definition like so:

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

We are done defining the data containers, and now, onto building the UI components.

UI Components

For the UI component, we will want to build an input component and a list display component. Ionic provides some simple containers for these.

Let's start by importing the library components we'll be using:

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

Now, we can replace the stub component with the IonInput , wrapped in an IonGrid:

 return <IonGrid> <IonRow> <IonCol> <IonInput value={text} placeholder="Enter accounts to pull from" onIonChange={e => setText(e.detail.value!)} /> </IonCol> </IonRow> </IonGrid>

Notice that the event listener is onIonChange instead of onChange . Otherwise, it should look very familiar.

When you open the app in your browser, it may not look like the Bootstrap app. However, if you set your browser to emulator mode, the UI will make more sense. It will look even better once you deploy it on mobile, so look forward to it.

Now, let's add some buttons. We will want an “Add to list” button and a “Pull API” button. For that, we can use IonButton. Change the size of the input's IonCol to 8 and add the following two buttons with columns:

 <IonCol size="8"> <IonInput value={text} placeholder="Enter accounts to pull from" onIonChange={e => setText(e.detail.value!)} /> </IonCol> <IonCol size="2"> <IonButton style={{float: 'right'}} color="primary" size="small" onClick={onAddClicked}>Add</IonButton> </IonCol> <IonCol size="2"> <IonButton style={{float: 'right'}} color="success" size="small" onClick={onPullClicked}>Pull</IonButton> </IonCol>

Since we're writing the buttons, let's write the event handlers as well.

The handler to add a Twitter handle to the list is simple:

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

We will implement the API call in the next section, so let's just put a stub function for onPullClicked :

 const onPullClicked = () => {}

Now, we need to write the component for displaying the list of handles that has been inputted by the user. For that, we will use IonList, put into a new IonRow:

 <IonRow> <IonCol> <IonList> {accounts.map((x:string, i:number) => <IonItem key={i}> <IonGrid> <IonRow> <IonCol size="8" style={{paddingTop: '12px'}}>{x}</IonCol> <IonCol><IonButton style={{float: 'right'}} color="danger" size="small" onClick={deleteClickedBuilder(i)}>Delete</IonButton></IonCol> </IonRow> </IonGrid> </IonItem>)} </IonList> </IonCol> </IonRow>

Each list item is displaying the handle and a delete button in its very own IonGrid. For this code to compile, we will want to implement the deleteClickedHandler as well. It should be very familiar from the previous section but with TypeScript annotations.

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

Save this, and you should see the Input page with all the UI components implemented. We can add handles, delete handles, and click the button to invoke the API.

As a final exercise, let's move the in-line styles to CSS. Create a file in the input folder called input.css and import it in the Input.tsx file. Then, add the following styles:

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

Now, add className="input-button” on all of the IonButtons and className=”handle-display” on the handle list item IonCol that is displaying the intended Twitter handle. Save the file, and you should see everything looking quite good.

API Call

The code to pull the API is very familiar from the previous section, with one exception - we have to get access to the history component to be able to dynamically change routes. We will do this using the withHistory hook.

We first import the hook:

 import { useHistory } from 'react-router';

And then implement the handler in the input component:

 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); }) }

Başlık Ekleme

Our Input page looks quite nice, but it looks a little bare due to Ionic's mobile-centric styling. To make the UI look more natural, Ionic provides a header feature that lets us provide a more natural user experience. When running on mobile, the header will also simulate the native OS's mobile platform, which makes the user experience even more natural.

Change your component import to:

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

And now wrap the UI in an Ionic page with a header, like so:

return <IonPage> <IonHeader> <IonToolbar> <IonTitle>Twitter Curation App</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonHeader collapse="condense"> <IonToolbar> <IonTitle size="large">Twitter Curation App</IonTitle> </IonToolbar> </IonHeader> <IonGrid> <IonRow> <IonCol size="8"> <IonInput value={text} placeholder="Enter accounts to pull from" onIonChange={e => setText(e.detail.value!)} /> </IonCol> <IonCol size="2"> <IonButton className="input-button" color="primary" size="small" onClick={onAddClicked}>Add</IonButton> </IonCol> <IonCol size="2"> <IonButton className="input-button" color="success" size="small" onClick={onPullClicked}>Pull</IonButton> </IonCol> </IonRow> <IonRow> <IonCol> <IonList> {accounts.map((x:string, i:number) => <IonItem key={i}> <IonGrid> <IonRow> <IonCol size="8" className="handle-display">{x}</IonCol> <IonCol><IonButton className="input-button" color="danger" size="small" onClick={deleteClickedBuilder(i)}>Delete</IonButton></IonCol> </IonRow> </IonGrid> </IonItem>)} </IonList> </IonCol> </IonRow> </IonGrid> </IonContent> </IonPage>

Şimdi bu güzel görünüyor!

Duygu Sıralı Sayfa

Büyük Resim Planı

Duygu sıralamalı sayfa, Bootstrap sayfasındaki duygu sıralamalı sayfaya büyük ölçüde benzer ancak TypeScript ve Ionic kullanır. Ayrıca, mobilde çalışırken Ionic'in navigasyon özelliklerinden yararlanmak için Konu Görüntüleme'yi ayrı bir rota olarak uygulayacağız, bu nedenle bu sayfaya Konu Görüntüleme rotasına gitme yeteneği vermemiz gerekecek.

Rota Kurulumu

SentimentSorted.tsx adlı yeni bir klasör ve altında SentimentSorted.tsx adlı bir dosya oluşturarak başlayalım. Bir saplama bileşenini şu şekilde dışa aktarın:

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

Ve App.tsx'te bileşeni içe aktarın:

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

Ve rotayı ekleyin:

 <Route path="/display" render={() => <SentimentSorted curatedTweets={curatedTweets} />} />

SentimentSorted küratörlüTweets özelliklerini beklemediğini söyleyen bir TypeScript hatası alacaksınız, bu yüzden şimdi bir sonraki bölümde bununla ilgilenelim.

Kullanıcı Arayüzü Bileşenleri

Konteynerin aksesuarlarını tanımlayarak başlayalım. Giriş bileşenine çok benzer:

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

Ve şimdi, saplama görüntüsünü değiştirin:

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

Ve her şey derlemeli.

Ekran çok basit, sadece ekran bileşenlerine sahip bir IonList:

 return <IonGrid> <IonRow> <IonCol> <IonList> {(curatedTweets.sentimentSorted).map((x, i) => <IonItem key={i}> <IonLabel className="ion-text-wrap"> <h2>{x.account}:</h2> <h3>{x.tweet}</h3> <p>({x.data.sentiment.toPrecision(2)})</p> </IonLabel> </IonItem>)} </IonList> </IonCol> </IonRow> </IonGrid>

Giriş bileşenini kullanarak bazı tweet'leri kaydedip çekerseniz, bir listede görüntülenen tweet'leri görmelisiniz.

Şimdi navigasyon butonlarını ekleyelim. IonGrid'e ekleyin:

 <IonRow> <IonCol> <IonButton color='primary' onClick={switchToInput}>Back</IonButton> <IonButton color="success" onClick={toggleDisplayType}>{switchStr}</IonButton> </IonCol> </IonRow>

switchToInput geçmiş API'si ile uygulanması çok kolaydır:

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

Ve ToggleDisplayType da aşina olmalıdır:

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

Şimdi SentimentDisplay bileşenini uyguladık. Şimdi, Konu Görüntüleme Sayfasını uygulamadan önce, tüm konuları görüntüleyen bileşeni uygulamamız gerekiyor. Bunu bir sonraki bölümde yapacağız.

Konu Grupları Bileşeni

Konu listesi görüntüleme seçeneği ekleyelim ve koşullu olarak görüntüleyelim. Bunu yapmak için, Duyarlılık Görüntüleme listesini ayırmamız gerekiyor. SentimentDisplay'i Display olarak yeniden adlandırın ve şimdi duyarlılık görüntüleme listesini çıkaralım:

 interface SentimentDisplayProps { sentimentSorted: Array<TweetRecord> } const SentimentDisplay: React.FC<SentimentDisplayProps> = ({sentimentSorted}) => { return <IonList> {(sentimentSorted || []).map((x, i) => <IonItem key={i}> <IonLabel className="ion-text-wrap"> <h2>{x.account}:</h2> <h3>{x.tweet}</h3> <p>({x.data.sentiment.toPrecision(2)})</p> </IonLabel> </IonItem>)} </IonList> }

CuratedTweets arayüzünde sınıf tanımlarından birini nasıl kullandığımıza dikkat edin. Bunun nedeni, bu bileşenlerin tüm CuratedTweets nesnesine değil, yalnızca bir alt kümeye ihtiyaç duymasıdır. Konu listesi çok benzer:

 interface TopicDisplayProps { groupedByNP: Record<string, Array<TweetRecord>> } const TopicDisplay: React.FC<TopicDisplayProps> = ({groupedByNP}) => { return <IonList> {Object.keys(groupedByNP || {}).map((x, i) => <IonItem key={i} routerLink={`/topicDisplay/${encodeURIComponent(x)}`}> <IonLabel className="ion-text-wrap"> <h2>{x} ({groupedByNP[x].length})</h2> </IonLabel> </IonItem>)} </IonList> }

Ve şimdi, Görüntüleme Bileşeninde koşullu görüntülemenin kurulumu kolaydır:

 return ( <IonGrid> <IonRow> <IonCol> <IonButton color='primary' onClick={switchToInput}>Back</IonButton> <IonButton color="success" onClick={toggleDisplayType}>{switchStr}</IonButton> </IonCol> </IonRow> { displayType === 'Sentiment'? <SentimentDisplay sentimentSorted={curatedTweets.sentimentSorted} /> : <TopicDisplay groupedByNP={curatedTweets.groupedByNp} /> } </IonGrid> );

Varsayılan dışa aktarmayı değiştirdiğinizden emin olun; artık Konu Görüntüleme Sayfasını uygulamaya hazırız.

Konu Görüntüleme Sayfası

Büyük Resim Planı

Konu görüntüleme sayfası, duygu gösterimine benzer bir liste gösterimidir, ancak söz konusu konuyu route parametresinden arayacağız.

Rota Kurulumu

Buraya kadar geldiyseniz, ne yapacağınızı zaten biliyor olmalısınız. topicdisplay ve TopicDisplay.tsx adında bir sayfa klasörü oluşturalım, bir saplama bileşeni yazalım ve onu App.tsx sayfasına aktaralım. Şimdi rotaları oluşturalım:

 <Route path="/topicDisplay/:topic" render={() => <TopicDisplay curatedTweets={curatedTweets} /> } />

Artık UI bileşenini uygulamaya hazırız.

Kullanıcı Arayüzü Bileşenleri

Önce ContainerProps tanımını oluşturalım:

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

Şimdi konuyu URL yolu adından almamız gerekecek. Bunu yapmak için geçmiş API'sini kullanacağız. Öyleyse useHistory içe aktaralım, geçmiş API'sini örnekleyelim ve konuyu yol adından çekelim. Hazır buradayken, geri geçiş işlevini de uygulayalım:

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

Artık o konuyla ilgili tweet'lerimiz olduğuna göre, görüntülemek aslında oldukça basit:

 return ( <IonGrid> <IonRow> <IonCol> <IonButton color='primary' onClick={switchToDisplay}>Back</IonButton> </IonCol> </IonRow> <IonRow> <IonCol> <IonList> {(tweets || []).map((x, i) => <IonItem key={i}> <IonLabel className="ion-text-wrap"> <h2>{x.account}:</h2> <h3>{x.tweet}</h3> <p>({x.data.sentiment.toPrecision(2)})</p> </IonLabel> </IonItem>)} </IonList> </IonCol> </IonRow> </IonGrid> );

Kaydet ve koş, işler iyi görünüyor olmalı.

Uygulamayı Emülatörde Çalıştırma

Uygulamayı öykünücüde çalıştırmak için, Cordova ile işleri nasıl kurduğumuza benzer şekilde, mobil platformu eklemek ve kodu kopyalamak için birkaç Ionic komutu çalıştırmamız yeterlidir.

 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

Ve uygulamanın ortaya çıktığını görmelisiniz.

React Native Uygulaması

React Native Primer

React Native, önceki bölümlerdeki web tabanlı yaklaşımlardan çok farklı bir yaklaşım benimsiyor. React Native, React kodunuzu yerel bileşenler olarak işler. Bu, çeşitli avantajlarla birlikte gelir. İlk olarak, temel işletim sistemiyle entegrasyon çok daha derindir, bu da geliştiricinin Cordova/Kapasitör aracılığıyla kullanılamayan yeni akıllı telefon özelliklerinden ve işletim sistemine özgü özelliklerden yararlanmasına olanak tanır. İkincisi, ortada web tabanlı bir oluşturma motoru olmadığından, bir React Native uygulaması genellikle Cordova kullanılarak yazılandan daha hızlıdır. Son olarak, React Native, yerel bileşenlerin entegrasyonuna izin verdiği için geliştiriciler, uygulamaları üzerinde çok daha ayrıntılı kontrol uygulayabilirler.

Uygulamamız için önceki bölümlerdeki mantığı kullanacağız ve UI'mizi kodlamak için NativeBase adlı bir React Native bileşen kitaplığı kullanacağız.

Uygulamayı Yapılandırma

İlk olarak, buradaki talimatları izleyerek React Native'in gerekli tüm bileşenlerini kurmak isteyeceksiniz.

React Native kurulduktan sonra projeye başlayalım:

 react-native init TwitterCurationRN

Kurulum komut dosyasının çalışmasına izin verin ve sonunda klasör oluşturulmalıdır. Klasöre Cd atın ve tepki-yerel run-ios'u çalıştırın ve örnek uygulama ile öykünücünün açıldığını görmelisiniz.

Bileşen kitaplığımız olduğu için NativeBase'i de kurmak isteyeceğiz. Bunu yapmak için şunu çalıştırıyoruz:

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

Ayrıca React Native yığın gezginini de kurmak istiyoruz. Hadi koşalım:

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

Ve

 react-native link cd ios pod-install cd

Yerel eklentilerin bağlanmasını ve kurulumunu tamamlamak için.

Yönlendirici Kurulumu

Yönlendirme için yukarıdaki adımda kurduğumuz yığın gezginini kullanacağız.

Yönlendirici bileşenlerini içe aktarın:

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

Ve şimdi bir yığın gezgini oluşturuyoruz:

 const Stack = createStackNavigator();

Yığın gezginini kullanmak için Uygulama bileşeninin içeriğini değiştirin:

 const App = () => { return ( <> <StatusBar bar /> <NavigationContainer> <Stack.Navigator initialRouteName="Entry"> <Stack.Screen name="Entry" component={Entry} /> </Stack.Navigator> </NavigationContainer> </> ); };

Bu noktada Entry henüz tanımlanmadığı için bir hata alırsınız. Sırf onu mutlu etmek için bir saplama elemanı tanımlayalım.

Projenizde bir bileşen klasörü oluşturun, Entry.jsx adlı bir dosya oluşturun ve aşağıdaki gibi bir saplama bileşeni ekleyin:

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

Uygulamanızdaki Giriş bileşenini içe aktarın ve oluşturulmalıdır.

Artık Giriş sayfasını kodlamaya hazırız.

Giriş Sayfası

Büyük Resim Planı

Yukarıda uygulanana çok benzeyen ancak NativeBase bileşenlerini kullanan bir sayfa uygulayacağız. Hooks and fetch gibi kullandığımız JavaScript ve React API'lerinin çoğu hala kullanılabilir durumda.

Tek fark, daha sonra göreceğiniz navigasyon API'si ile çalışma şeklimiz olacaktır.

Kullanıcı Arayüzü Bileşenleri

Kullanacağımız ek NativeBase bileşenleri Container, Content, Input, List, ListItem ve Button'dır. Bunların hepsinin Ionic ve Bootstrap React'te analogları var ve NativeBase'in geliştiricileri, bu kütüphanelere aşina olan insanlar için onu çok sezgisel hale getirdi. Basitçe şöyle içe aktarın:

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

Ve bileşen:

 return <Container> <Content> <Item regular> <Input placeholder='Input Handles Here' onChangeText={inputChange} value={input} /> <Button primary onPress={onAddClicked}><Text> Add </Text></Button> <Text> </Text> <Button success onPress={onPullClicked}><Text> Pull </Text></Button> </Item> <Item> <List style={{width: '100%'}}> {handles.map((item) => <ListItem key={item.key}> <Text>{item.key}</Text> </ListItem>)} </List> </Item> </Content> </Container>

Şimdi durum ve olay işleyicilerini uygulayalım:

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

Ve son olarak, API çağrısı:

 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); }) }

Farklı bir şekilde gezinmemiz dışında, bu uygulamanın NativeBase uygulamasındakiyle aynı olduğuna dikkat edin. Yığın gezgini, bileşenlerine “navigasyon” adı verilen ve .navigate ile rotalar arasında gezinmek için kullanılabilen bir destek sağlar. Yalnızca gezinmeye ek olarak, verileri hedef bileşene de iletebilirsiniz. Verileri iletmek için bu mekanizmayı kullanacağız.

Uygulamayı derlemek için yine de Entry navigasyon bileşeninden haberdar etmemiz gerekiyor. Bunu yapmak için bileşen işlev bildirimini değiştirmemiz gerekecek:

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

Şimdi kaydedin ve sayfayı görmelisiniz.

Duygu Sıralı Sayfa

Büyük Resim Planı

Duyarlılık sayfasını önceki bölümlerde olduğu gibi uygulayacağız, ancak sayfayı biraz farklı biçimlendireceğiz ve ayrıca API çağrısı dönüş değerini almak için gezinme kitaplığını farklı şekilde kullanacağız.

React Native'in CSS'si olmadığı için, ya bir StyleSheet nesnesi tanımlamamız ya da stilleri satır içinde kodlamamız gerekecek. Bileşenler arasında bazı stilleri paylaşacağımız için, hadi global bir stil sayfası oluşturalım. Bunu rota kurulumundan sonra yapacağız.

Ayrıca, StackNavigator yerleşik bir Geri gezinme düğmesi bulunduğundan, kendi Geri düğmemizi uygulamamız gerekmez.

Rota Kurulumu

StackNavigator rota tanımı çok basittir. Sadece Stack Screen adında yeni bir tane oluşturuyoruz ve React yönlendiricisine çok benzeyen bileşeni ona veriyoruz.

 <NavigationContainer> <Stack.Navigator initialRouteName="Entry"> <Stack.Screen name="Entry" component={Entry} /> <Stack.Screen name="SentimentDisplay" component={SentimentDisplay} /> </Stack.Navigator> </NavigationContainer>

Bunu yapmak için, elbette component/SentimentDisplay.js'de bir saplama bileşeni oluşturmamız gerekecek:

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

Ve içe aktarın:

 import SentimentDisplay from './components/SentimentDisplay';

Artık global stil sayfasını oluşturmaya hazırız.

Küresel Stil Sayfası

İlk önce globalStyles.js adlı bir dosya oluşturun. Ardından, StyleSheet bileşenini React Native'den içe aktarın ve stilleri tanımlayın:

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

Ve kullanıcı arayüzünü kodlamaya hazırız.

Kullanıcı Arayüzü Bileşenleri

UI bileşeni, rotalarla nasıl çalıştığımız dışında oldukça tanıdık. Mevcut uygulama durumunu almak ve kullanıcının o sayfayı görmek istemesi durumunda konu ekranına gitmek için StackNavigator özel props navigasyonunu ve rotasını kullanmak isteyeceğiz.

Navigasyon donanımlarına erişmek için bileşen tanımını değiştirin:

 const SentimentDisplay = ({route, navigation}) => {

Ve şimdi, uygulama durumu okumasını ve gezinme işlevini uyguluyoruz:

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

Genel stilleri içe aktarın:

 import globalStyles from './globalStyles';

Ve bileşenler:

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

Ve son olarak, bileşenler:

 return <Container> <Content> <Item> <Button primary onPress={viewByTopicClicked}><Text>View By Topic</Text></Button> </Item> <Item> <List style={{width: '100%'}}> {data.sentimentSorted.map((item, i) => <ListItem key={i}> <View style={globalStyles.listItem}> <Text style={globalStyles.accountName}>{item.account}:</Text> <Text style={globalStyles.tweet}>{item.tweet} ({item.data.sentiment.toPrecision(2)})</Text> </View> </ListItem>)} </List> </Item> </Content> </Container>;

Kaydedin ve bazı tweetleri çekmeye çalışın ve duygu ekranını görmelisiniz. Şimdi konu gruplandırma sayfasına.

Konu Gruplama Sayfası

Büyük Resim Planı

Konu Gösterimi yine çok benzer. Belirli bir konu öğesi için görüntüleme sayfasına gitmek üzere bir gezinme işlevi oluşturmak için bir işleyici oluşturucu kullanacağız ve ayrıca bu sayfaya özgü bir stil sayfası tanımlayacağız.

Yapacağımız yeni bir şey, bir düğme gibi işlev gören React Native'e özgü bir bileşen olan TouchableOpacity'yi uygulamaktır.

Rota Kurulumu

Rota tanımı öncekiyle aynıdır:

 <Stack.Navigator initialRouteName="Entry"> <Stack.Screen name="Entry" component={Entry} /> <Stack.Screen name="SentimentDisplay" component={SentimentDisplay} /> <Stack.Screen name="TopicDisplay" component={TopicDisplay} /> </Stack.Navigator>

Saplama bileşeni bileşenleri/TopicDisplay.js:

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

Ve içe aktarın:

 import TopicDisplay from './components/TopicDisplay;

Kullanıcı Arayüzü Bileşenleri

Bunların çoğu çok tanıdık gelecek. Kütüphane işlevlerini içe aktarın:

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

Genel stilleri içe aktarın:

 import globalStyles from './globalStyles';

Özel stilleri tanımlayın:

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

Navigasyon donanımlarını tanımlayın:

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

Verileri ve eylem işleyicilerini tanımlayın. Bir işlev döndüren bir işlev olan bir işleyici oluşturucu kullandığımıza dikkat edin:

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

Ve şimdi, bileşenler. onPress işleyicisi olabilen bir TouchableOpacity kullandığımıza dikkat edin. TouchableTransparency'i de kullanabilirdik, ancak TouchableOpacity'nin tıkla ve tut animasyonu uygulamamız için daha uygundu.

 return <Container> <Content> <Item> <List style={{width: '100%'}}> {Object.keys(data.groupedByNp).map((topic, i) => <ListItem key={i}> <View style={globalStyles.listItem}> <TouchableOpacity onPress={specificItemPressedHandlerBuilder(topic)}> <Text style={styles.topicName}>{topic}</Text> </TouchableOpacity> </View> </ListItem>)} </List> </Item> </Content> </Container>;

Ve bu yapmalı. Uygulamayı kaydedin ve deneyin!

Şimdi, Konu Görüntüleme Öğesi Sayfasına gidin.

Konu Görüntüleme Öğesi Sayfası

Büyük Resim Planı

Konu Görüntüleme Öğesi sayfası çok benzerdir ve diğer bölümlerde tüm özellikler halledilir, bu nedenle buradan geçiş sorunsuz olmalıdır.

Rota Kurulumu

Rota tanımını ekleyeceğiz:

 <Stack.Screen name="TopicDisplayItem" component={TopicDisplayItem} />

İçe aktarmayı ekleyin:

 import TopicDisplayItem from './components/TopicDisplayItem';

Ve saplama bileşenini oluşturun. Yalnızca çıplak bir bileşen yerine, kullanacağımız NativeBase bileşenlerini de içe aktaralım ve route props'larını tanımlayalım:

 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 <Text>Topic Display Item</Text>; } export default TopicDisplayItem;

Kullanıcı Arayüzü Bileşenleri

UI Bileşeni oldukça basittir. Bunu daha önce gördük ve gerçekten herhangi bir özel mantık uygulamıyoruz. Öyleyse, hadi bunun için gidelim! Derin bir nefes al…

 return <Container> <Content> <Item> <List style={{width: '100%'}}> {data.groupedByNp[topic].map((item, i) => <ListItem key={i}> <View style={globalStyles.listItem}> <Text style={globalStyles.accountName}>{item.account}:</Text> <Text style={globalStyles.tweet}>{item.tweet} ({item.data.sentiment.toPrecision(2)})</Text> </View> </ListItem>)} </List> </Item> </Content> </Container>;

Tasarruf edin, yola koyulalım! Şimdi uygulamayı öykünücüde çalıştırmaya hazırız… bekle, zaten değil mi?

Uygulamayı Çalıştırmak

Pekala, React Native ile çalıştığınız için, uygulamayı zaten öykünücüde çalıştırıyorsunuz, yani bu kısım zaten halledilmiş durumda. Bu, React Native'in geliştirme ortamıyla ilgili harika şeylerden biridir.

Vay! Bununla, bu makalenin kodlama kısmıyla işimiz bitti. Bakalım teknolojiler hakkında neler öğrendik.

Teknolojileri Karşılaştırma

Cordova: Artıları ve Eksileri

Cordova ile ilgili en iyi şey, yetenekli bir web geliştiricisinin işlevsel ve makul bir şekilde sunulabilir bir şeyi kodlayabildiği katıksız hızdır. Web geliştirme becerileri ve deneyimi kolayca aktarılır çünkü sonuçta bir web uygulamasını kodlarsınız. Geliştirme süreci hızlı ve basittir ve Cordova API'ye erişim de basit ve sezgiseldir.

Cordova'yı doğrudan kullanmanın dezavantajları, çoğunlukla web bileşenlerine aşırı güvenmekten kaynaklanır. Kullanıcılar, mobil uygulamaları kullanırken belirli bir kullanıcı deneyimi ve arayüz tasarımı beklemeye başladılar ve bir uygulama bir mobil site gibi göründüğünde, deneyim biraz sarsıcı olabilir. Ek olarak, geçiş animasyonları ve navigasyon yardımcı programları gibi uygulamalarda yerleşik olan özelliklerin çoğu manuel olarak uygulanmalıdır.

İyonik: Artıları ve Eksileri

Ionic'in en iyi yanı, "ücretsiz" olarak sahip olduğum mobil merkezli özelliklerin sayısıydı. Bir web uygulamasını kodladığım gibi kodlayarak, yalnızca Cordova ve React-Bootstrap kullanmaktan çok daha mobil uyumlu görünen bir uygulama oluşturabildim. Gezinme animasyonu, yerel görünümlü stillere sahip düğmeler ve kullanıcı deneyimini çok pürüzsüz hale getiren birçok kullanıcı arabirimi seçeneği vardı.

İyonik kullanmanın dezavantajı kısmen güçlü yönlerinden kaynaklanıyordu. İlk olarak, uygulamanın çeşitli ortamlarda nasıl davranacağını tasavvur etmek bazen zordu. Uygulamanın bir şekilde görünmesi, aynı UI yerleşiminin başka bir ortamda aynı görüneceği anlamına gelmiyordu. İkincisi, Ionic, birçok temel teknoloji parçasının üzerinde yer alır ve bazı bileşenlere erişim sağlamanın zor olduğu kanıtlanmıştır. Son olarak, bu Ionic-React'e özgüdür, ancak Ionic ilk olarak Angular için oluşturulduğundan, birçok Ionic-React özelliğinin daha az belge ve desteği olduğu görülüyordu. Ancak Ionic ekibi, React geliştiricilerinin ihtiyaçlarına çok dikkat ediyor ve yeni özellikleri hızla sunuyor.

Yerel Tepki: Artıları ve Eksileri

React Native, mobilde gelişen çok akıcı bir kullanıcı deneyimi yaşadı. Doğrudan öykünücüye bağlanarak uygulamanın nasıl görüneceği bir sır değildi. Web tabanlı hata ayıklayıcı arabirimi, web uygulaması dünyasındaki hata ayıklama tekniklerinin çapraz uygulanmasında son derece yardımcı oldu ve ekosistem oldukça sağlam.

React Native'in dezavantajı, yerel arayüze yakınlığından kaynaklanmaktadır. Birçok DOM tabanlı kitaplık kullanılamadı, bu da yeni kitaplıkları ve en iyi uygulamaları öğrenmek zorunda kalmak anlamına geliyordu. CSS'nin faydası olmadan, uygulamayı şekillendirmek biraz daha az sezgiseldi. Son olarak, öğrenilecek birçok yeni bileşenle (örneğin, div yerine Görünüm, her şeyi saran Metin bileşeni, Düğmeler vs. TouchableOpacity vs. TouchableTransparency, vb.), biri giriyorsa, başlangıçta biraz öğrenme eğrisi vardır. Mekaniğe dair çok az ön bilgi ile Yerli dünyaya tepki verin.

Her Teknoloji Ne Zaman Kullanılmalı?

Cordova, Ionic ve React Native'in hepsinin çok güçlü artıları ve eksileri olduğundan, her teknolojinin en iyi üretkenlik ve performansın keyfini çıkaracağı bir bağlamı vardır.

Kullanıcı arayüzü tasarımı ve genel görünüm ve hissi çevreleyen güçlü bir marka kimliğine sahip, web'de ilk olan mevcut bir uygulamanız zaten varsa, en iyi seçeneğiniz akıllı telefonun yerel özelliklerine erişmenizi sağlarken aynı zamanda akıllı telefonunuzun çoğunu yeniden kullanmanıza izin veren Cordova olacaktır. web bileşenleri ve bu süreçte marka kimliğinizi koruyun. Duyarlı bir çerçeve kullanan nispeten basit uygulamalar için, çok az değişiklik gerektiren bir mobil uygulama oluşturabilirsiniz. Ancak, uygulamanız bir uygulamadan çok bir web sayfasına benzeyecek ve insanların bir mobil uygulamadan beklediği bazı bileşenler ayrı ayrı kodlanacaktır. Bu nedenle, uygulamayı mobil cihazlara taşıyan web öncelikli bir projede olduğunuz durumlarda Cordova'yı öneririm.

Önce uygulama felsefesiyle yeni bir uygulamayı kodlamaya başlıyorsanız, ancak ekibinizin beceri seti öncelikle web geliştirmedeyse, Ionic'i öneririm. Ionic'in kitaplığı, bir web geliştiricisi olarak becerilerinizi ve içgüdülerinizi uygulamanıza izin verirken, yerel bileşenlere yakın görünen ve hissettiren kodu hızlı bir şekilde yazmanıza olanak tanır. Web geliştirme en iyi uygulamalarının Ionic ile geliştirmeye kolayca çapraz uygulanabileceğini ve CSS ile stil oluşturmanın sorunsuz çalıştığını gördüm. Ek olarak, sitenin mobil versiyonu, duyarlı bir CSS çerçevesi kullanılarak kodlanmış bir web sitesine göre çok daha doğal görünüyor. Ancak, yol boyunca bazı adımlarda, React-Ionic-Native API entegrasyonunun bazı manuel ayarlamalar gerektirdiğini ve bunun da zaman alıcı olduğunu gördüm. Bu nedenle, uygulamanızın sıfırdan geliştirildiği ve mobil uyumlu bir web uygulaması ile bir mobil uygulama arasında önemli miktarda kod paylaşmak istediğiniz durumlarda Ionic'i öneririm.

Bazı yerel kod temeli uygulanmış yeni bir uygulama kodlıyorsanız, React Native'i denemek isteyebilirsiniz. Yerel kod kullanmıyor olsanız bile, React Native'e zaten aşina olduğunuz veya birincil endişenizin hibrit bir uygulama yerine mobil uygulama olduğu durumlarda da en iyi seçenek olabilir. Ön uç geliştirme çabalarımın çoğunu web geliştirmeye odakladıktan sonra, bileşen organizasyonu ve kodlama kurallarındaki farklılıklar nedeniyle, başlangıçta React Native ile başlamanın Ionic veya Cordova'dan daha fazla öğrenme eğrisi olduğunu gördüm. Bununla birlikte, bu nüanslar bir kez öğrenildiğinde, özellikle NativeBase gibi bir bileşen kitaplığının yardımıyla kodlama deneyimi oldukça sorunsuzdur. Geliştirme ortamının kalitesi ve uygulama üzerindeki kontrol göz önüne alındığında, projenizin ön ucu öncelikle bir mobil uygulama ise, tercih ettiğiniz araç olarak React Native'i öneririm.

Gelecek Konular

Keşfetmek için zamanım olmayan konulardan biri de kamera, coğrafi konum veya biyometrik kimlik doğrulama gibi yerel API'lere erişim kolaylığıydı. Mobil geliştirmenin en büyük avantajlarından biri, genellikle tarayıcıda erişilemeyen zengin bir API ekosisteminin erişilebilirliğidir.

Gelecekteki makalelerde, çeşitli platformlar arası teknolojileri kullanarak bu yerel API etkin uygulamaları geliştirmenin kolaylığını keşfetmek istiyorum.

Çözüm

Bugün, üç farklı platformlar arası mobil geliştirme teknolojisini kullanan bir Twitter küratörlüğü uygulamasını hayata geçirdik. Umarım bu size her teknolojinin neye benzediği konusunda iyi bir fikir vermiştir ve kendi React tabanlı uygulamanızı geliştirmeniz için size ilham vermiştir.

Okuduğunuz için teşekkürler!