如何零基礎開(kāi)發(fā)一款電商 App?

App開(kāi)發(fā)是一個非常有趣的事(shì)情，如果你試著(zhe)開(kāi)發(fā)一個自己的app的話，你一定會(huì)愛上這(zhè)項活動。

編者按：React Native愈發(fā)火爆，如果你尚未接觸過(guò)，不如看看本文作者的入門指南，他會(huì)帶你體驗基于RN平台開(kāi)發(fā)一款電子商務搜索類App的奇妙旅程！本文編譯自Hackernoon，原文标題爲：Building an e-commerce search app with react native，推薦有一定編程基礎的讀者閱讀。

今天我們來聊一聊是如何在RN平台開(kāi)發(fā)一款用于查找圖書數據庫的電子商務移動app。如果你之前沒(méi)有使用過(guò)RN，那麼(me)現在就(jiù)跟我一起(qǐ)開(kāi)啓你的移動端Javascript開(kāi)發(fā)之旅吧。

2018年Javascript迎來了前所未有的發(fā)展，各種(zhǒng)庫、框架、開(kāi)發(fā)工具都(dōu)已經(jīng)發(fā)展的相當的成(chéng)熟了，整個社區也都(dōu)在緻力于使網上沖浪變得更加方便快捷。當然，開(kāi)發(fā)過(guò)程中還(hái)是會(huì)存在一些bug，但是，如果你會(huì)用Javascript，那麼(me)這(zhè)些小問題就(jiù)都(dōu)不是事(shì)。你可以利用JS來制作web app、後(hòu)台服務器、移動端app。

React Native不僅可以像Cordova/Ionic/Phonegap等利用WebView架構和Javascript進(jìn)行移動端APP開(kāi)發(fā)，而且支持native編譯，因此如果有需要也可以編寫native代碼。

你需要提前知道(dào)的事(shì)情

現在React Native非常的火，網上有很多的資源，所以你可以很容易從互聯網上獲取學(xué)習資源，因此，在你進(jìn)行RN程序開(kāi)發(fā)之前最好(hǎo)有一定的學(xué)習基礎。如果你是剛接觸這(zhè)個項目，你可以先嘗試學(xué)習下官方教程，如果，你更願意跟著(zhe)視頻課程進(jìn)行學(xué)習，那麼(me)我會(huì)強烈推薦你去看Kent C. Dodds在egghead上的免費課程“The Beginner’s Guide to ReactJS”

如果你對(duì)ES6+同樣了解的話，那就(jiù)再好(hǎo)不過(guò)了。這(zhè)有一本ES6的入門指南，有了它，你就(jiù)能(néng)很快上手了。

作爲一個初學(xué)者，雖然我建議你去認真學(xué)習一下React，并開(kāi)發(fā)一些網絡版的APP，但是，如果你想抓緊時(shí)間上手開(kāi)發(fā)自己的程序的話，好(hǎo)好(hǎo)的了解React的基本架構也是很有必要的，因爲React和React Native具有相通的架構，隻是他們最後(hòu)的目标不同，一個是服務于Web APP的，另一個是服務于native APP

如果，你使用React或React Native 進(jìn)行産品開(kāi)發(fā)，你將(jiāng)節省大部分的時(shí)間和精力，因爲，無論是IOS還(hái)是Andriod平台，社區上都(dōu)有很多其他人共享的代碼。這(zhè)也是爲什麼(me)RN開(kāi)發(fā)平台被像愛彼迎，臉書，照片牆，沃爾瑪和特斯拉等公司接受并利用它開(kāi)發(fā)移動端app的原因。

基本概念

簡單的介紹一下React Native是如何進(jìn)行工作的以及JavaScript的代碼是如何裝換成(chéng)到一個強大的移動端app。我們需要知道(dào)的是任何的一個React Native 應用都(dōu)是雙線程的：

1. 主線程

主線程管理著(zhe)程序的用戶界面(miàn)，處理包括手勢和觸摸在内的所有本地交互。因爲RN允許在源代碼中添加android java，Objective C或swift代碼，所以這(zhè)些代碼塊也可以在此線程中執行。是不是感覺這(zhè)樣開(kāi)發(fā)變得很舒服。

2. JavaScript 線程

這(zhè)個線程執行在JavaScript編譯器寫的JavaScript代碼（默認狀态下是在iOS平台中，并且通過(guò)構件可以發(fā)送到Android設備上。）

爲了使應用程序正常工作，兩(liǎng)個線程之間就(jiù)需要搭一座橋接器來實現交流，就(jiù)像下面(miàn)的示意圖展示的那樣。

React Native core architecture

正如名字所表示的，中間件可以幫助實現JavaScriprt線程和主線程之間的數據（信息）處理。這(zhè)些信息可以被異步和批量處理。中間件可以保證JS代碼與本機模塊進(jìn)行對(duì)話并且與設備API交互。

現在我們對(duì)RN的結構有了基本的了解，接下來我們來介紹實現的過(guò)程。

搭建開(kāi)發(fā)環境

如果你已經(jīng)安裝了RN并且對(duì)開(kāi)發(fā)系統比較了解，你就(jiù)可以跳過(guò)去看下一部分内容了。如果你是剛入門的新手，那麼(me)你可以按照官方的安裝指南（會(huì)有更加詳細的介紹）去操作，或者按照我下面(miàn)說(shuō)的去做。首先确認你的電腦上已經(jīng)成(chéng)功安裝了node和yarn模塊。我們將(jiāng)利用CRNA（create-react-native-app ）工具來創建模版,運行下面(miàn)的指令實現程序“HelloNative”

create-react-native-app HelloNative

cd HelloNative

npm start

這(zhè)將(jiāng)爲你啓動一個可擴展的服務器，并在終端輸出一段QR代碼。使用CRNA工具出現的警告隻有：

it may not use the latest version of react-native

如果出現這(zhè)個警告，你可以使用Expo CLI 或者 Expo XDE去解決。

然後(hòu)安裝Expo 在你的iOS系統或者Android系統上，并將(jiāng)手機和你的電腦一樣聯接到網絡中。使用Expo app你就(jiù)可以在你的手機上進(jìn)行操作啦，想想就(jiù)很令人激動把。就(jiù)像下面(miàn)圖顯示的一樣：

React Native app

你可以運用yarn ios 和yarn android指令分别在iOS和Android模拟器上測試，這(zhè)樣你就(jiù)可以運行你的React-Native app啦。

如果你知道(dào)如何打開(kāi)app中的擴展菜單，你將(jiāng)會(huì)看到有支持熱加載和實時(shí)重載選項。這(zhè)些可以使你可以迅速在Andriod環境下加載你的app

A closer look at the developer options

擴展操作同時(shí)具有了debugging模塊，在後(hòu)面(miàn)的内容中我們將(jiāng)進(jìn)行詳細的介紹。

調試模塊

遠程調試JS程序可以讓我們查看相關的控制信息和錯誤信息。這(zhè)讓我們的開(kāi)發(fā)和調試過(guò)程變得更加容易，另外，你還(hái)需要安裝 React Native window

React Native window in action

這(zhè)是一個非常實用的工具，可以幫助我們查看React Native app中的模塊聲明和類樹，你也可以在上面(miàn)查看和碼上你開(kāi)發(fā)的app需要運用的模塊。

準備階段

React Native提供了一些開(kāi)發(fā)app的基本模塊，你可以在list of available components here中找到React Native提供的不同平台下對(duì)應的功能(néng)模塊，這(zhè)些模塊可以幫助你進(jìn)行開(kāi)發(fā)屬于你自己的app，這(zhè)讓開(kāi)發(fā)過(guò)程變得更加簡單。React Native支持fetch 功能(néng)，這(zhè)樣使得開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中就(jiù)可以像網頁一樣從服務器上獲取數據和處理http請求。

對(duì)于我們將(jiāng)要設計的搜索app，我們將(jiāng)使用能(néng)夠在短時(shí)間内遍曆大量數據的NoSQL數據架構進(jìn)行開(kāi)發(fā)。它將(jiāng)對(duì)以JSON爲對(duì)象的所有文檔進(jìn)行全文搜索。

可能(néng)你以前沒(méi)有接觸過(guò)Elasticsearch，但是你不得不接受使用Elasticsearch是個趨勢。你可以從下面(miàn)的介紹中學(xué)習相關的基礎。

Elasticsearch的起(qǐ)步并不是那樣的簡單，設置環境、添加數據、查看數據等等操作對(duì)于一個初學(xué)者來講并不是一件簡單的事(shì)，因此，Elasticsearch的社區裡(lǐ)面(miàn)提供了很多開(kāi)源的工具來幫助初學(xué)者進(jìn)行開(kāi)發(fā)。

· Importer 添加數據到Elasticsearch中

· Data Browser 以excel表格的形式查看Elasticsearch中的數據。

· Query Builder 組織管理關聯的Elasticsearch隊列。

在這(zhè)些工具的幫助下，我們可以直接利用這(zhè)些工具和React Native 去組建一個強大的移動端圖書館app

你可以按照官網的指導安裝設計Elasticsearch服務器，或者你可以申請一個appbase.io 的賬号，appbase.io 提供了一個Elasticsearch的服務器，這(zhè)樣就(jiù)更加方便了，因此，我們就(jiù)用appbase.io平台開(kāi)始我們的開(kāi)發(fā)。

我已經(jīng)簡單的創建了一個基本的數據搜索的app，你可以進(jìn)入下圖進(jìn)行查看。

Dataset of books

你可以利用最下面(miàn)的 Clone this app選項複制已經(jīng)存在的模版作爲你開(kāi)發(fā)的基礎。這(zhè)些授權信任書可以幫助我們連接到UI上，我們在這(zhè)篇教程中要使開(kāi)發(fā)的app的授權信任模塊如下

{

app: "good-books-ds",

credentials: "nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d",

type: "good-books-ds"

}

開(kāi)啓 Reactive search之旅

我們將(jiāng)使用ReactiveSearch來進(jìn)行開(kāi)發(fā)，因爲ReactiveSearch是一個Elasticsearch上的UI模塊的React和React Native通用的開(kāi)源庫，它提供了一個豐富的資源庫、完善的配置環境以及架構，這(zhè)樣你就(jiù)可以連接到任何一個Elasticsearch的服務器上，

爲什麼(me)我們需要ReacttiveSearch呢？

ReactiveSearch提供了一整套連接到Elasticsearch服務器上的模塊，可以創建隊列、具有靈活直觀的特點。并且可以讓你的模塊可以與其他的模塊實現通信，比如說(shuō)你創建了一個A模塊，A模塊實現了升級更新，這(zhè)樣需要B模塊可以獲取信息并且可以實現不依靠任何關聯額自主的實現更新。

Reactivesearch-native上有很多的nativeUI模塊，這(zhè)些可以使你開(kāi)發(fā)app的UI 模塊的時(shí)候有所借鑒，讓你的app變得更加的美觀和智能(néng)。

開(kāi)發(fā)搜索app

我們需要在我們的React Native項目下利用下面(miàn)的代碼安裝reactivesearch-native

yarn add @appbaseio/reactivesearch-native

全部的ReactiveSearch的模塊都(dōu)被包裝在ReactiveBase 的容器中，

我們將(jiāng)使用這(zhè)些在App.js中Adding ReactiveBase component React Native 中的Styling和網頁類似，我們這(zhè)裡(lǐ)采用的是Flex中的基本Styling，如果你之前沒(méi)有接觸過(guò)這(zhè)個Flex的話呢，個人建議你可以嘗試從FlexBox Froggy開(kāi)始起(qǐ)步。

除了Stylesheet以外，我們的代碼中還(hái)使用了React Native中的兩(liǎng)個其他的模塊。

· View 在React Native中和html中的div元素差不多是一個容器，可以支持多種(zhǒng)操作。

· Text 這(zhè)個是React Native中可以查閱相關内容的的模塊。

在我們設計的BookSearch app中，我們將(jiāng)需要嘗試Reactivesearch-native中的另外的兩(liǎng)個模塊：

1. Search box for searching the books:

我們這(zhè)裡(lǐ)將(jiāng)使用reactivesearch-native中的DataSearch模塊去實現多區域的搜索功能(néng)，其核心如下所示

<DataSearch

componentId="searchbox"

dataField={[

'original_title',

'original_title.search',

'authors',

'authors.search',

]}

placeholder="Search for books"

autosuggest={false}

/>

DataSearch使用起(qǐ)來相當的方便，由于其本身就(jiù)是在dataFied（s）的隊列中，因此這(zhè)個模塊就(jiù)可以輕松的幫助我們實現轉入到ReactiveBase模塊中，并且可以傳遞和接收一切索引的信息，這(zhè)樣就(jiù)不需要我們自己去編寫相關的隊列算法了。

2. Result List View for displaying the search results:

結果展示模塊

我們在結果的輸出上主要采用的是reactivesearch-native 中的ReactiveList模塊：

<ReactiveList

componentId="results"

dataField="original_title"

size={7}

showResultStats={false}

pagination={true}

react={{

and: "searchbox"

}}

onData={(res) => (

<View style={styles.result}>

<Image source={{ uri: res.image }} style={styles.image} />

<View style={styles.item}>

<Text style={styles.title}>{res.original_title}</Text>

<Text>{res.authors}</Text>

</View>

</View>

)}

/>

上面(miàn)的代碼是如何工作的呢？

· dataField: 通過(guò)name field去調整結果

· onData: 接收返回值爲JSX相關結果的函數，這(zhè)是我們常用來查看部分結果的方式。

如果你想讓你的app變得美觀，想要調整一些字體的話，可以在你的程序裡(lǐ)面(miàn)輸入下面(miàn)的代碼

async componentWillMount() {

await Expo.Font.loadAsync({

Roboto: require('native-base/Fonts/Roboto.ttf'),

Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),

Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),

});

}

編後(hòu)語：如果你很有興趣，還(hái)想了解更多，不妨去看看這(zhè)兩(liǎng)個論壇，和更多朋友交流下你的想法：

1. ReactiveSearch GitHub repo

2. ReactiveSearch docs

原文鏈接：

https://hackernoon.com/building-an-e-commerce-search-app-with-react-native-2c87760a2315