在 Node.js 上運行 Flutter Web 應用和 API

做者：Brian De Sousa

翻譯：瘋狂的技術宅

原文：blog.logrocket.com/flutter-web…

未經容許嚴禁轉載

大量的跨平臺應用開發框架，使你能夠編寫一次代碼，而後在 Android，iOS 等多個平臺上甚至在臺式機上運行。你可能據說過一些流行的框架，例如 Ionic，Xamarin 和 React Native。另外一個相對較新的框架是 Flutter。

在本文中，你將學到一些有關 Flutter 的知識，特別是對 Web 的支持，該支持最近在 v1.9 版中可做爲技術預覽版本使用。你將能夠向現有的 Flutter 程序中添加 Web 支持，並將其與簡單的 API 一塊兒在 Node.js 服務器上運行。

Flutter 簡述

Flutter 是 Google 跨平臺開發解決方案之一。雖然它出現的時間不是很長，但其功能集使其成爲該領域的強大的競爭對手。

它將你的程序編譯爲可在 iOS 或 Android 上運行的原生代碼，從而得到使人難以置信的性能和幀率。它支持在開發期間進行有狀態的熱重啓，這意味着你能夠隨時對代碼進行更改，並觀看它們在模擬器或物理設備上的應用，而無需從新啓動程序或丟失程序狀態。

Flutter 主要關注 iOS 和 Android。在 1.9 版中已將 Web 支持添加爲技術預覽。它仍處於起步階段，可能還沒有準備就緒，但確定使人興奮且充滿但願。正如你將很快看到的那樣，只需進行一點的修改便可使用現有的 Flutter 應用並將其編譯爲 HTML、CSS 和 JS 包。

爲何在 Node.js 上運行 Flutter Web 程序？

Flutter Web 應用能夠在任何 Web 服務器上運行。那麼爲何要在 Node.js 服務器上託管 Flutter Web 程序呢？好吧，老實說，出於與其餘 Web 應用和 API 選擇 Node.js 的相同緣由：它很是擅於服務大量的簡單請求，你能夠用 JavaScript 在其中編寫前端和後端代碼等。

你可能已經有了一個 Node.js API，可將數據提供給 Flutter iOS 或 Android 程序。將 Flutter 程序編譯爲 Web 應用並將其託管在現有的 Node.js 服務器上多是當前解決方案的邏輯擴展，而無需增長額外的託管成本。

示範

如今該深刻研究代碼，看看 Flutter web 的實際應用了。你須要如下工具：

• Android Studio（Android SDK 管理器和模擬器）
• Visual Studio Code + Flutter 擴展（或 Android Studio）
• Node.js 12

Flutter 有出色的開發人員文檔。若是這是你第一次開發 Flutter 程序，請按照「入門」指南進行設置。

本文中的示例和說明基於 Visual Studio Code，但若是你選擇使用 Android Studio，則仍然能夠繼續學習。

須要 Node.js 12 才能運行 Flutter Weather 程序的 Web 版本以及後端 Weather API。

步驟1：探索示例代碼

爲了演示如何向現有的 Flutter 應用添加 Web 支持，咱們將從一個簡單的氣象應用開始，該應用已在 Android 10（API level 29）上進行了測試。

weather app 容許用戶查看預約義城市的當前天氣。天氣數據是從運行在 Node.js 上的後端服務器中檢索的。

從 GitHub 複製 weather app 和服務器的源代碼：

• briandesousa/weather_app_flutter
• briandesousa/weather-app-nodejs-server

提示：weather-app-nodejs-server 項目庫有一個 Flutter-web-support 分支，其中包含已啓用 Flutter Web 支持的可在服務器運行的完整版本。

最好將兩個項目的存儲庫克隆到同一個父文件夾中。將建立 weather_app_flutter 存儲庫的內容並將其複製到 weather-app-nodejs-server 存儲庫內的文件夾中。

探索 Flutter 天氣應用

在編輯器中打開 weather_app_flutter 。讓咱們仔細看看 main.dart 文件。它包含構成程序用戶界面的腳手架和小部件。 Home 窗口小部件類具備 fetchWeatherData 函數，該函數調用後端天氣 API 來檢索數據並更新窗口小部件的狀態：

fetchWeatherData({String location}) async {
    var url = WEATHER_API_URL + location;
    final response = await http.get(url);
    if (response.statusCode == 200) {
        var jsonResponse = convert.jsonDecode(response.body);
        setState(() {
            this._weatherData = WeatherData(
                jsonResponse\['weather'\]['location'],
                jsonResponse\['weather'\]['temperature'],
                jsonResponse\['weather'\]['weatherDescription'],
            );
            this._apiError = null;
        });
    } else {
        setState(() {
            this._apiError =
                'Unable to retrieve weather data from API (HTTP ${response.statusCode})';
        });
    }
}
複製代碼

fetchWeatherData 函數使用 Dart 的 http 包經過 HTTP 鏈接到服務器。你還可使用其餘 Dart 包，可是若是你打算向 Flutter 程序添加 Web 支持，則這是官方推薦的包。

同時記下 WEATHER_API_URL 常量。在運行程序以前，請先更新此常量的值，以便它能夠鏈接到本地 Node.js 服務器上運行的 API。該網址必須包含你計算機的主機名。 Android 模擬器或物理設備沒法訪問 localhost URL。

探索 Node.js 服務器和天氣 API

在編輯器中打開 weather-app-nodejs-server 項目代碼。

其中有一些重要的文件和目錄：

• public/api-test.html 文件可用於快速測試啓動後服務器是否按預期工做（例如，``http://localhost:3000/api-test.html`）
• routes/weather.js 文件包含一個簡單的 GET API，該 API 接受 path 參數並返回天氣數據（例如，http://localhost:3000/api/weather/londonon）
• 你能夠在 public-flutter 文件夾中複製氣象程序的已編譯 web 版本。設置 Node.js 服務器以將文件從該目錄提供到根上下文（例如，http://localhost:3000）

步驟2：向 Flutter 應用添加 web 支持

因爲目前 web 支持還是技術預覽，所以須要最新的 Flutter 開發中版本，也稱爲master channel。在 weather_app_flutter 存儲庫的根文件夾中，運行如下命令：

flutter channel master
flutter upgrade
複製代碼

提示：在Windows上的 Visual Studio Code 的 bash shell 中運行 Flutter 命令時，你可能會遇到 「Unknown operating system. Cannot install Dart SDK.」錯誤。請嘗試在普通的 Windows command shell中運行命令。

升級過程可能須要幾分鐘。接下來你將須要在 Flutter 安裝中啓用 Web 支持：

flutter config --enable-web
flutter devices
複製代碼

啓用 web 支持後，你將在設備列表中看到一個新的 Chrome 設備。若是沒有看到 Chrome，請在運行如下命令刷新設備列表菜單後從新啓動 Visual Studio Code。

要將網絡支持添加到 weather app，你須要在 weather_flutter_app 項目的頂級文件夾中運行如下命令：

flutter create .
複製代碼

create 命令將對該程序進行一些修改，你能夠在這個提交中看到。最值得注意的變化是添加了一個包含 index.html 的子文件夾 web ：

經過在 weather-app-nodejs-server 的根目錄中運行如下命令來啓動 Node.js 服務器：

npm start
複製代碼

從 Visual Studio Code 的設備列表中選擇 Chrome，而後開始調試。或者，你能夠運行如下 flutter命令：

flutter run -d chrome
複製代碼

因爲 Flutter 須要即時下載其餘依賴項時，你第一次在 Chrome 中啓動該應用可能會花費一些時間。 最終你將在瀏覽器中看到天氣應用正在運行。可能會有某些樣式與你在仿真器或物理設備上看到的樣式略有不一樣。

你會注意到該應用沒有顯示來自天氣 API 的任何數據。若是你打開 Chrome DevTools，則會看到跨域資源共享錯誤。

瀏覽器不容許 Flutter Web 服務器向 Node.js 服務器發出請求，由於它們運行在不一樣的端口上。你能夠經過在服務器上啓用跨域資源共享或安裝 Chrome 插件來禁用 CORS 來解決此問題。

咱們如今將忽略這個錯誤，由於在下一步中，咱們將直接在 Node.js 服務器上運行預編譯的 Flutter Web 代碼，從而徹底消除跨域請求。

嘗試修改 main.dart 文件中的某些代碼，而後讓 Flutter 從新編譯你的程序。你會發現所作的修改不會當即顯示在瀏覽器中。這是由於 Flutter Web 尚不支持熱重啓。但願不久後可以提供這種支持。

提示：本節中每一個 Flutter 命令的詳細說明均可以在 flutter.dev 上找到。

步驟3：在 Node.js 上運行 Flutter Web 應用

如今你能夠用 Flutter 在瀏覽器中運行 weather app，下一步是構建並將其複製到 Node.js 服務器，以與 API 一塊兒運行。

要構建 Flutter Web 應用捆綁包，請運行如下命令：

flutter build web
複製代碼

build 命令將生成 build/web 文件夾，其中包含構整天氣應用的全部靜態文件。

把 weather_app_flutter/build/web 的內容複製到 weather-app-nodejs-server/public-flutter。若是你的 Node.js 服務器仍在運行，請從新啓動。

經過在的瀏覽器中訪問 http://localhost:3000 ，查看在Node.js上運行的程序。此次你的應用程序將會顯示從天氣 API 檢索到的天氣數據，而不會出現跨域資源共享錯誤。

最後的想法

取得現有 Flutter 應用並將其編譯爲可部署到 Web 服務器的 Web 應用如此簡單，真是使人難以置信。瀏覽器中呈現的用戶界面看起來幾乎與 Android 中的界面相同。

可是不能僅僅因爲 Flutter 的 Web 支持而將 Flutter 視爲跨平臺應用程序框架。 Flutter 團隊很是清楚， Web 支持缺乏功能，存在已知的性能問題而且還沒有徹底支持生產環境。

能夠確定的是：Flutter for Web 的將來看起來頗有但願。你能夠在這裏瞭解有關 Flutter Web 支持和 Hummingbird 項目更多的信息。

歡迎關注前端公衆號：前端先鋒，領取前端工程化實用工具包。