跳到主要內容

使用React Native 開發的匯率計算器(SmartCurrency Converter)

React Native 開發的匯率計算器(SmartCurrency Converter)  


在上文（ https://isaaccodeandbusiness.blogspot.com/2018/02/react-react-native-react-vr.html）
中曾提及 使用React Native並配合Expo來開發手機應用程式 ，其中之一好處是可以快速地在手機中預覧開發出來的效果， 不必像開發Native 一樣要先Build 後再經USB 放在手機上。  本文將會以我放在Expo Cloud 的匯率計算器(SmartCurrencyConverter)
為例 介紹如何在手機中預覽，把程式放上Expo 的Cloud 中和我放在Expo Cloud 中匯率計算器(SmartCurrency Converter)

Expo Client 

首先需要在手機中下載Expo Client



然後按照官方教學 安裝Expo Cli
https://expo.io/learn

在正在開發的項目的目錄下運行 


之後便會生成一個QRCode  和Link  如下圖

使用剛在App Store 下載 的Expo Client

使用 Scan QR Code 便能在手機中打開你正在開發的手機應用程式了。

至於要把程式放上Expo Cloud 的話 則只需要開發目錄下 登入Expo Account 並運行以下指令便可


運行後會顯示 你項目所在的URL。 由於exp publish 會生成iphone的ipa檔 和 android 的 apk 在expo 的cloud上， 所以上載會需要花較長的時間，請耐心等候。 

把生成的URL 復制貼上瀏覧器便可前往項目的專頁了


只要把專頁中右手邊的QR Code 分享出去，其他人就可以透過Expo Client 使用你編寫的手機應用程式了。

匯率計算器（SmartCurrencyConverter）

接下來的部分為大家介紹一下我放在Expo Client 上的手機應用程式

SmartCurrencyConverter 是一個讓用戶進行單一對或多對貨幣匯率計算的小工具， 除了提供現價查詢外，還可以使用自訂匯率計算， 如用戶經常去旅行的話，相信會對自訂匯率感興趣，因為旅行購物時， 應使用之前的兌換匯率計算會比較準確。 以下是SmartCurrencyConverter 的截圖






總結

本文講述如何使用Expo 把經React Native 開發的手機應用程式放在手機上運行，有興趣使用React Native 開發手機應用程式的讀者可先在手機中安裝Expo Client， 再Scan 本文中的QR Code 運行匯率計算器(SmartCurrency Converter)  看看效果後再作決定。  


留言

張貼留言

這個網誌中的熱門文章

如何使用Macbook 進行W-Fi 竊聽及信號分析

OS X 中的Wi-Fi Analyzer 工具 要對無線網絡進行分析及診斷， 首先要在PC中安裝Wi-Fi Analyzer 應用程式。 Wi-Fi Analyzer是一種可以檢察Wi-Fi 信號強弱，找出適合架設Wi-Fi 的Channel ， 搜尋附近Wi-Fi 接點及竊聽經Wi-Fi 傳送的網絡封包(這功能要視乎你的網卡是否支援監控模式）的工具。  在網絡上有不同的Wi-Fi Analyzer 供大家下載。 而在OS X 系統中， 其實已預設安裝了Wireless Diagnostics 程式。   在本文中， 會假定讀者對Wi-Fi 的專業名詞(如noise, ssid bssid 等)有基本的認識。 因此， 只會展示Wireless Diagnostics 的操作方法 。  Wireless Diagnostics  Wireless Diagnostics  是一個預設安裝在 OS X 系統的Wi-Fi 分析工具。 用戶可透過它的GUI 介面操作。  在主畫面中，按下option 鍵並點擊在上角的Wi-fi標記會出現Open Wireless Diagnostics。 然後點選它。 點擊工具列中的Window。 並會出現以下選項 如圖 1. Info     點取Info， 會顯示你現在所使用的Wi-fi資訊。 包括它的BSSID，Mac Address，Channel, Network Interface  等等資訊。 如下圖 2. Logs 點選Logs的話， 你可以選取想要收集的網絡介面日誌資訊。 要注意這設定需要重啓電腦才能生效。 並且它是會把收集到的資訊紀錄在電腦中。 因此當你不需要使用時，請記得把它關閉， 以免造成資源浪費。 3.Scan    點選Scan 的話，系統會立即掃描附近的AccessPoint  並列出它們的資料，包括SSID，Mac Address， Noise，RSSI，Channel 等等 資訊。另外系統也會對系統的現時環境作出評估， 列出最合適架設Wi-Fi 的 Channel。 以下圖 圖中的Summary， 就是系統對現在環境的評估。 Total 是系統偵擦到的AccessPoint 數目。 而Best 2.4GHz和Be
張貼留言
閱讀完整內容

C# XML(輸出教學)

C# XML 輸出教學 XML 是其中一種主流的數據儲存格式之一， 在C# 中， 大概有3種不同的寫法把數據輸出成XML 文件。 在本文中, 我會利用一個簡單的Window form 程式介紹這3種不同的寫法。  以下是範例的XML 格式 <Im>    <Number>xx</Number>    <Name> xxx</Name>    <Type> xxx <Type>    <Data> xxx </Data> </Im> 從以上的結構可輕易看得出, 這個範例是把一張圖片輸出成XML 格式。 這是範例中使用的圖片 成功輸出的XML 文件 在Chrome 中顯示 Window form 程式 XML 輸出方法 方法一 首先要介紹的寫法是利用XMLElement 的操作, 在XmlDocument 中構建XML 節點。 上述程式碼先構建一個全新的XmlDocument， 然後逐一構建節點。 最後把構建的節點放到對應的節點或XML Root 節點下。 成功構建後便使用XmlDocument 中的save 方法輸出XML 文件。 以上要注意的事是使用這種方法生成XML 的話, 如遇到要處理圖片的情況。 請先把圖片轉換成base64 字串後， 再放到節點的inner Text 中。 方法二 第二種方法是利用XmlTextWriter 把xml node 按順序寫入Filestream 中。 最後輸出成XML 文件。 程序碼如下， 和方法1相比， 如遇到要處理圖片的情況下， 則只需把圖片的binary data  放到byte 類型的數組中， 再利用XmlTextWriter中的WriteBase64 方法便可。 不用自行轉換成base64字串。 但要留意的事是 由於是使用XmlTextWriter 是把text 以串流的型式輸出。 所以寫入資料流 時最好要按Xml結構的順序寫入。 因為在串流中append 結構是比較困難的事。 方法三 最後一種方法是使用XML.Serialization 空間下的方法, 個人比
張貼留言
閱讀完整內容

C# 的Dynamic Object

C# 的Dynamic Object  介紹 在 .Net 4.0 版本 ， C# 引入了動態編程。 實則上它並不是C# 語言的一部分 ， 因為它是通過引入Dynamic Language Runtime(DLR library) 來實現的 。 對DLR Library 有興趣的話 可瀏覽( https://docs.microsoft.com/en-us/dotnet/framework/reflection-and-codedom/dynamic-language-runtime-overview )  但對於編譯語言(Compiled Language) 來說 ，  引入Dynamic 特性在當時(.Net 4.0 是在2010 發佈的)是一種大躍進 。 雖然 C# 中已有支援動態特性 ， 但C# 始終是一種編譯語言 。所以我還是建議如非必要的話，還是不要使用動態編程 。 如果靜態編譯是可以做到這個效果的話就用靜態編譯實現 。 因為使用動態編程的話 ， 在編譯時是不會提示你的程式碼會不會有錯誤 ， 因此大大增加了執行時出現錯誤的風險 。 而且由於動態編程是late-binding. 所以物件的類別在執行時才會決定 。這種做法相對於靜態編譯是會有執行效率低的問題。 因此 編寫C# 程式應該以靜態編程的方式為主 。 但在以下情況 ，  用動態編程來編寫會較為合適 需要興COM Object 互動 Duck typing 需要與dynamic script language 如IronPython 或Ironruby 等互動 。 以上的情況, 有興趣的讀者可從互聯網中參考，  本文的以下部分會集中 說明C# 中 動態編程的基本語法， 介紹ExpandObject, DynamicObject 和 IDynamicMetaObject 及ExpandoObject 和DynamicObject 的用法。 Dynamic Keyword 若要在C# 中使用dynamic object, dynamic 這個keyword 你是絕對需要知道的 。 當一個變量以dynamic 作為它的型態 。 便代表它是late-binding. 編譯器在執行編譯時不會判斷它的型態 。 因此
張貼留言
閱讀完整內容