javascript
使用React Native和Spring Boot构建一个移动应用
“我喜歡編寫身份驗證和授權代碼?！??從來沒有Java開發人員。 厭倦了一次又一次地建立相同的登錄屏幕？ 嘗試使用Okta API進行托管身份驗證，授權和多因素身份驗證。
React Native是使用React構建移動應用程序的框架。 React允許您使用聲明式編程風格來描述UI外觀。 它使用嵌入式HTML（稱為JSX）來呈現按鈕，列表，可滾動視圖和許多其他組件。
我是一位經驗豐富的Java和JavaScript開發人員，喜歡Spring和TypeScript。 有人可能稱我為Java趕時髦的人，因為我喜歡JavaScript。 在本文中，我將向您展示如何構建與PostgreSQL數據庫對話的Spring Boot API。 您將使用Elasticsearch使數據可搜索。 您還將學習如何使用Kubernetes將其部署到Cloud Foundry和Google Cloud Platform。
真正很酷的部分是您將看到如何使用React Native構建移動應用程序。 React Native允許您使用已知和喜愛的Web技術構建移動應用程序：React和JavaScript！ 我將向您展示如何在設備仿真器上對其進行測試并將其部署到手機中。 Giddyup！
創建一個Spring Boot應用
在我最近的開發人員生涯中，我構建了一個應用程序來幫助我跟蹤和監視我的健康狀況。 我在編寫JHipster Mini-Book時想到了這個主意。 我的靈感來自Spring Boot的執行器，它可以幫助您監視Spring Boot應用程序的運行狀況。 該應用程序名為21-Points Health，您可以在GitHub上找到其源代碼 。
21點健康系統使用21點系統來查看您每周的健康狀況。 它的規則很簡單：由于以下原因，您每天最多可以賺取三分：
- 如果您飲食健康，那么您會有所收獲。 否則為零。
- 如果您運動，就會有所收獲。
- 如果你不喝酒，你會得到一點。
我將在本教程中作弊。 與其逐行編寫每個組件，不如使用JHipster和Ignite JHipster 生成 API和應用程序。
什么是JHipster？
我很高興你問！ 這是一個Apache許可的開源項目，可讓您生成Spring Boot API以及Angular或React UI。 它包括對生成CRUD屏幕和添加所有必要管道的支持。 它甚至生成微服務架構！
Ignite JHipster是JHipster的補充功能。 這是Ignite CLI項目的藍圖模板。 Ignite CLI是開源的，并由MIT許可，由Infinite Red的好伙伴制作。 通過Ignite CLI，您可以在幾秒鐘內生成預集成了許多組件的React Native應用程序。 第一次看到Gant Laborde的演示時，我被震撼了 。
為了使事情Swift發展，我運行了jhipster export-jdl來從21點健康導出一個實體定義。 導出實體定義后，我使用JDL-Studio為我的項目創建了一個應用程序定義。 然后，我單擊下載圖標以將文件保存到硬盤。
您在下面看到的代碼稱為JDL或JHipster域語言。 它最初是為JHipster設計的，以允許多個實體并指定其所有屬性，關系和分頁功能。 最近對其進行了增強，可以從一個文件生成整個應用程序！ 💥
application {config {applicationType monolith,baseName HealthPointspackageName com.okta.developer,authenticationType oauth2,prodDatabaseType postgresql,buildTool gradle,searchEngine elasticsearch,testFrameworks [protractor],clientFramework react,useSass true,enableTranslation true,nativeLanguage en,languages [en, es]}entities Points, BloodPressure, Weight, Preferences }// JDL definition for application 'TwentyOnePoints' generated with command 'jhipster export-jdl'entity BloodPressure {timestamp ZonedDateTime required,systolic Integer required,diastolic Integer required } entity Weight {timestamp ZonedDateTime required,weight Double required } entity Points {date LocalDate required,exercise Integer,meals Integer,alcohol Integer,notes String maxlength(140) } entity Preferences {weeklyGoal Integer required min(10) max(21),weightUnits Units required }enum Units {KG,LB }relationship OneToOne {Preferences{user(login)} to User } relationship ManyToOne {BloodPressure{user(login)} to User,Weight{user(login)} to User,Points{user(login)} to User }paginate BloodPressure, Weight with infinite-scroll paginate Points with pagination創建一個新目錄，其中包含jhipster-api目錄。
mkdir -p react-native-spring-boot/jhipster-api將上面的JDL復制到react-native-spring-boot目錄內的app.jh文件中。 使用npm安裝JHipster。
npm i -g generator-jhipster@5.4.2在終端窗口中導航到jhipster-api目錄。 運行下面的命令以生成具有大量可用功能的應用程序。
jhipster import-jdl ../app.jh運行您的Spring Boot應用
此應用程序在其應用程序配置中指定了許多技術和功能，包括OIDC身份驗證，PostgreSQL，Gradle，Elasticsearch，量角器測試，React和Sass。 不僅如此，它甚至還涵蓋了大多數代碼的測試范圍！
為了確保您的應用程序正常運行，請為Elasticsearch，Keycloak，PostgreSQL和Sonar啟動一些Docker容器。 以下命令應從jhipster-api目錄運行。
docker-compose -f src/main/docker/elasticsearch.yml up -d docker-compose -f src/main/docker/keycloak.yml up -d docker-compose -f src/main/docker/postgresql.yml up -d docker-compose -f src/main/docker/sonar.yml up -d這些容器可能需要一點時間才能下載，因此您可能想要喝杯咖啡或一杯水。
在等待時，您還可以將項目提交到Git。 如果安裝了Git，JHipster將在jhipster-api目錄中運行git init 。 由于您將Spring Boot應用程序和React Native應用程序放在同一存儲庫中，因此請從jhipster-api刪除.git并在父目錄中初始化Git。
rm -rf jhipster-api/.git git init git add . git commit -m "Generate Spring Boot API"使用聲納確保測試覆蓋率
JHipster生成具有高代碼質量的應用程序。 使用SonarCloud分析代碼質量，SonarCloud由JHipster自動配置。 “代碼質量”度量標準由測試覆蓋的代碼百分比確定。
一旦所有Docker容器啟動完成，請運行以下命令以證明代碼質量為👍（來自jhipster-api目錄）。
./gradlew -Pprod clean test sonarqube| 如果您不將項目提交給Git，那么sonarqube任務可能會失敗 。 |
此過程完成后，您可以在Sonar儀表板上的http://127.0.0.1:9001上獲得對項目的分析。 進行檢查-您的應用程序獲得了AAA評級！ 還不錯吧？
為您的Spring Boot API創建一個React Native應用
您可以使用Jon Ruddell創建的Ignite JHipster為Spring Boot API構建React Native應用。 喬恩（Jon）是最多產的JHipster貢獻者之一 。 ??
安裝Ignite CLI：
npm i -g ignite-cli@2.1.2 ignite-jhipster@1.12.1確保您位于react-native-spring-boot目錄中，然后生成一個React Native應用程序。
ignite new HealthPoints -b ignite-jhipster當提示您輸入jhipster-api項目的路徑時，輸入jhipster-api 。
項目完成生成后，將HealthPoints重命名為react-native-app ，然后將其提交給Git。
mv HealthPoints react-native-app rm -rf react-native-app/.git git add . git commit -m "Add React Native app"您可能會注意到，兩個新文件已添加到您的API項目中。
create mode 100644 jhipster-api/src/main/java/com/okta/developer/config/ResourceServerConfiguration.java create mode 100644 jhipster-api/src/main/java/com/okta/developer/web/rest/AuthInfoResource.java這些類為您的項目配置資源服務器（以便您可以傳遞帶有訪問令牌的Authorization標頭），并通過REST端點公開OIDC頒發者和客戶端ID。
修改React Native App以進行OAuth 2.0 / OIDC登錄
您將需要對React Native應用程序進行一些更改 ，以便OIDC登錄有效。 我在下面總結了它們。
為iOS更新文件
如果您想在iOS上運行您的應用，則需要修改react-native-app/ios/HealthPoints/AppDelegate.m以在頂部添加openURL()方法和導入。
#import <React/RCTLinkingManager.h>然后在文件底部的@end之前添加方法。
- (BOOL)application:(UIApplication *)applicationopenURL:(NSURL *)urloptions:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {return [RCTLinkingManager application:application openURL:url options:options]; }您還需要配置iOS URL方案。 運行open ios/HealthPoints.xcodeproj以在Xcode中打開項目。 導航到“ 項目” >“ 信息” >“ URL類型”，然后指定healthpoints如下面的屏幕截圖所示。
如果您不想使用Xcode，也可以修改ios/HealthPoints/Info.plist 。
<key>CFBundleSignature</key><string>????</string> + <key>CFBundleURLTypes</key> + <array> + <dict> + <key>CFBundleTypeRole</key> + <string>Editor</string> + <key>CFBundleURLName</key> + <string>healthpoints</string> + <key>CFBundleURLSchemes</key> + <array> + <string>healthpoints</string> + </array> + </dict> + </array><key>CFBundleVersion</key>Android更新檔案
為了讓Android方面了解您的URL方案，請將其添加到android/app/src/main/AndroidManifest.xml 。 以下XML應該位于現有的<intent-filter> 。
<intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /><data android:scheme="healthpoints" /> </intent-filter>您還需要將android:launchMode屬性添加到主要的<application>元素。 Android需要此功能以在現有MainActivity接收深度鏈接響應，而不是新響應。
<applicationandroid:name=".MainApplication"android:launchMode="singleTask"更新Keycloak的重定向URI
您還需要更新Keycloak才能知道您應用的URL方案，因為它用作重定向URI。 在瀏覽器中打開http://localhost:9080/auth/admin ，然后使用admin / admin登錄。 導航到客戶端 > web_app并添加healthpoints://authorize作為有效的重定向URI。
在iOS上運行您的React Native App
要運行React Native應用程序，您需要首先啟動Spring Boot應用程序。 導航到jhipster-api目錄并運行./gradlew 。 在另一個終端窗口中，導航到react-native-app并運行react-native run-ios 。
| 如果出現錯誤Print: Entry, ":CFBundleIdentifier", Does Not Exist ，請運行rm -rf ~/.rncache試。 |
單擊左上角的漢堡菜單，然后單擊登錄，驗證您可以登錄 。 使用“ admin”作為用戶名和密碼。
| 要在iOS Simulator中啟用代碼的實時重載，請先單擊模擬器，然后按? + R 。 |
在Android上運行您的React Native App
要在Android模擬器上運行您的應用，請運行react-native run-android 。 如果您沒有插入電話或沒有運行Android虛擬設備（AVD），則會看到錯誤消息：
Could not install the app on the device, read the error above for details.要解決此問題，請打開Android Studio，選擇打開現有項目 ，然后在項目中選擇android目錄。 如果系統提示您“安裝構建工具并同步項目”，請執行此操作。
要創建新的AVD，請導航至工具 > Android > AVD Manager 。 創建一個新的虛擬設備，然后單擊播放。 從下面的設置中可以看到，我選擇了Pixel 2。
為了使Keycloak和您的API在模擬器中與Android一起使用，您必須將所有localhost鏈接更改為計算機的IP地址（例如192.168.0.2 ）。
這意味著您需要將JHipster應用src/main/resources/config/application.yml中的src/main/resources/config/application.yml更新為以下內容。
security:oauth2:client:access-token-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/tokenuser-authorization-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/authclient-id: web_appclient-secret: web_appscope: openid profile emailresource:user-info-uri: http://{yourIPAddress}:9080/auth/realms/jhipster/protocol/openid-connect/userinfo您還需要在React Native應用程序的App/Config/AppConfig.js更新apiUrl 。
export default {apiUrl: 'http://{yourIPAddress}:8080/',appUrlScheme: 'healthpoints' }再次運行react-native run-android 。 您應該能夠像在iOS上一樣登錄。
| 要在Android上實時重新加載代碼，請先在模擬器上單擊，然后按Ctrl + M （在MacOS上為? + M ）或搖晃具有正在運行的應用程序的Android設備。 然后從彈出窗口中選擇“ 啟用實時重新加載”選項。 |
在本教程的其余部分中，我將展示iOS上的所有示例，但您可以根據需要使用Android。
在React Native App中生成CRUD頁面
要在Spring Boot API中生成用于管理實體的頁面，請在react-native-app目錄中運行以下命令。
ignite generate import-jdl ../app.jh運行react-native run-ios ，登錄，然后單擊“ 實體”菜單項。 您應該會看到類似下面的屏幕。
單擊點 ，您應該可以添加點。
調整React Native Points編輯屏幕以使用Toggles
我的21點健康應用程序的目標是計算一周內您獲得的健康點總數，最大值為21。因此，我認為更改運動，進餐，和酒精可以切換，而不是原始整數。 如果用戶將其打開，則應用程序應將值存儲為“ 1”。 如果他們關閉它，它應該記錄為“ 0”。
要對React Native應用程序進行此更改， App/Containers/PointEntityEditScreen.js在您喜歡的編輯器中打開App/Containers/PointEntityEditScreen.js 。 更改formModel以將t.Boolean用于運動，進餐和飲酒。
formModel: t.struct({id: t.maybe(t.Number),date: t.Date,exercise: t.maybe(t.Boolean),meals: t.maybe(t.Boolean),alcohol: t.maybe(t.Boolean),notes: t.maybe(t.String),userId: this.getUsers() }),然后，根據用戶的選擇，更改entityToFormValue()和formValueToEntity()方法以保存1或0。
entityToFormValue = (value) => {if (!value) {return {}}return {id: value.id || null,date: value.date || null,exercise: value.exercise === 1 ? true : false,meals: value.meals === 1 ? true : false,alcohol: value.alcohol === 1 ? true : false,notes: value.notes || null,userId: (value.user && value.user.id) ? value.user.id : null} } formValueToEntity = (value) => {return {id: value.id || null,date: value.date || null,exercise: (value.exercise) ? 1 : 0,meals: (value.meals) ? 1 : 0,alcohol: (value.alcohol) ? 1 : 0,notes: value.notes || null,user: value.userId ? { id: value.userId } : null} }在使用它時，您可以將默認的Points實體更改為具有默認日期的今天日期和true日期。 您可以通過修改componentWillMount()并更改formValue 。
componentWillMount () {if (this.props.entityId) {this.props.getPoint(this.props.entityId)} else {this.setState({formValue: {date: new Date(), exercise: true, meals: true, alcohol: true}})}this.props.getAllUsers() }使用? + M在Simulator中刷新應用。 創建新點時，應該會看到新的默認值。
調整React App的使用要點復選框
由于您的JHipster應用程序也具有React UI，因此有必要將點輸入/編輯屏幕更改為使用類似的機制：復選框。 打開jhipster-api/src/main/webapp/…?/points-update.tsx并用以下三個字段替換TSX（T表示TypeScript）。 您可能會注意到trueValue和falseValue屬性處理將檢查轉換為true，反之亦然。
jhipster-api / src / main / webapp / app / entities / points / points-point.update.tsx
<AvGroup check><AvInput id="points-exercise" type="checkbox" className="form-control"name="exercise" trueValue={1} falseValue={0} /> // (1)<Label check id="exerciseLabel" for="exercise"><Translate contentKey="healthPointsApp.points.exercise">Exercise</Translate></Label> </AvGroup> <AvGroup check><AvInput id="points-meals" type="checkbox" className="form-control"name="meals" trueValue={1} falseValue={0} /><Label check id="mealsLabel" for="meals"><Translate contentKey="healthPointsApp.points.meals">Meals</Translate></Label> </AvGroup> <AvGroup check><AvInput id="points-alcohol" type="checkbox" className="form-control"name="alcohol" trueValue={1} falseValue={0} /><Label check id="alcoholLabel" for="alcohol"><Translate contentKey="healthPointsApp.points.alcohol">Alcohol</Translate></Label> </AvGroup>在jhipster-api目錄中，運行npm start （或yarn start ）并驗證您的更改是否存在。 下面的屏幕快照顯示了編輯React Native應用輸入的記錄時的外觀。
使用Okta的API進行身份識別
借助Spring Boot和Spring Security，在JHipster應用程序中從Keycload切換到Okta以獲得身份很容易。 首先，您需要一個Okta開發人員帳戶。 如果您還沒有，請訪問developer.okta.com/signup進行注冊。 Okta是像Keycloak這樣的OIDC提供程序，但它始終處于打開狀態，因此您不必對其進行管理。
登錄到您的Okta Developer帳戶，然后導航到Applications > Add Application 。 單擊“ Web” ，然后單擊“ 下一步” 。 給應用程序起一個您會記住的名稱，并指定http://localhost:8080/login和healthpoints://authorize作為登錄重定向URI。 單擊完成 ，然后再次對其進行編輯以選擇“隱式（混合）” +允許ID和訪問令牌。 請注意客戶端ID和密碼，您需要在一分鐘內將它們復制/粘貼到文件中。
創建一個ROLE_ADMIN和ROLE_USER組（“ 用戶” >“ 組” >“ 添加組” ）并將用戶添加到其中。 我建議將您注冊時使用的帳戶添加到ROLE_ADMIN并創建一個新用戶（“ 用戶” >“ 添加人” ）以添加到ROLE_USER 。
導航到API > 授權服務器 ，然后單擊一個名為default的名稱進行編輯。 點擊索賠標簽，然后添加索賠 。 將其命名為“角色”，并將其包含在ID令牌中。 將值類型設置為“ Groups”，并將過濾器設置為.*的正則表達式。 單擊創建以完成該過程。
在硬盤驅動器上創建一個名為~/.okta.env的文件，并在其中指定應用程序的設置。
#!/bin/bash export SECURITY_OAUTH2_CLIENT_ACCESS_TOKEN_URI="https://{yourOktaDomain}/oauth2/default/v1/token" export SECURITY_OAUTH2_CLIENT_USER_AUTHORIZATION_URI="https://{yourOktaDomain}/oauth2/default/v1/authorize" export SECURITY_OAUTH2_RESOURCE_USER_INFO_URI="https://{yourOktaDomain}/oauth2/default/v1/userinfo" export SECURITY_OAUTH2_CLIENT_CLIENT_ID="{yourClientId}" export SECURITY_OAUTH2_CLIENT_CLIENT_SECRET="{yourClientSecret}"| 確保您的*URI變量中沒有-admin 。 這是一個常見的錯誤。 |
在運行Spring Boot應用程序的終端中，終止進程，運行source ~/.okta.env ， ./gradlew再次運行./gradlew 。 您應該能夠在瀏覽器和React Native應用程序中登錄http://localhost:8080 （刷新或重新啟動后）。
調試React Native Apps
如果您遇到問題，或者只是想看看正在執行什么API調用，可以使用Reactotron 。 Reactotron是一個桌面應用程序，用于檢查您的React和React Native應用程序。 它應該可以與iOS一起使用，而無需進行任何更改。 對于Android，在運行AVD之后，您需要運行adb reverse tcp:9090 tcp:9090 。
一旦運行，您就可以看到正在進行的API調用以及日志消息。
如果您想將自己的消息記錄到Reactotron，可以使用< console.tron.log('debug message') 。
打包您的React Native App進行生產
最后，我想向您展示將應用程序部署到生產環境。 由于將React Native應用程序安裝到物理設備上有很多步驟，因此我將參考React Native的“在設備上運行”文檔 。 它應該像通過USB插入設備，配置代碼簽名以及構建/運行應用程序那樣簡單。 您還需要配置API所在的URL。
您知道Spring Boot有什么很棒的功能嗎？ 有很多支持它的云提供商！ 如果平臺支持Spring Boot，則應該可以在其上運行JHipster應用程序！
請按照以下說明使用Kubernetes將您的API部署到Pivotal的Cloud Foundry和Google Cloud Platform。 Cloud Foundry和Kubernetes都有多個提供程序，因此即使您未使用Pivotal或Google，這些說明也應適用。
將Spring Boot API部署到Cloud Foundry
JHipster具有Cloud Foundry子生成器 ，可以輕松部署到Cloud Foundry。 它只需要您運行一個命令。 但是，您已經在API中配置了Elasticsearch，并且子生成器不支持自動為您配置Elasticsearch實例。 要解決此限制，請修改jhipster-api/src/main/resources/config/application-prod.yml并為Spring Data Jest查找以下配置：
data:jest:uri: http://localhost:9200將其替換為以下內容，這將使Elasticsearch以嵌入式模式運行。
data:elasticsearch:properties:path:home: /tmp/elasticsearch由于我在JHipster中發現了一個問題 ，您還需要刪除幾個屬性。
@@ -30,15 +30,12 @@ spring:url: jdbc:postgresql://localhost:5432/HealthPointsusername: HealthPointspassword: - hikari: - auto-commit: falsejpa:database-platform: io.github.jhipster.domain.util.FixedPostgreSQL82Dialectdatabase: POSTGRESQLshow-sql: falseproperties:hibernate.id.new_generator_mappings: true - hibernate.connection.provider_disables_autocommit: truehibernate.cache.use_second_level_cache: truehibernate.cache.use_query_cache: falsehibernate.generate_statistics: false要使用Pivotal Web Services在Cloud Foundry上部署所有內容，您需要創建一個帳戶，下載/安裝Cloud Foundry CLI并登錄（使用cf login -a api.run.pivotal.io ）。
| 登錄“ No space targeted, use 'cf target -s SPACE'后，您可能會收到警告。 如果這樣做， 請在瀏覽器中登錄https://run.pivotal.io ，創建一個空格，然后根據建議運行命令。 |
然后在jhipster-api目錄中運行jhipster cloudfoundry 。 您會在下面的提示中看到我選擇的值。
CloudFoundry configuration is starting ? Name to deploy as? HealthPoints ? Which profile would you like to use? prod ? What is the name of your database service? elephantsql ? What is the name of your database plan? turtle當提示您覆蓋build.gradle ，鍵入a 。
| 第一次運行jhipster cloudfoundry ，它沒有用。 第二次運行成功。 |
覆蓋Spring Security的默認OIDC設置后，您需要在Okta OIDC應用程序中添加https://healthpoints.cfapps.io/login作為重定向URI。
然后...您將可以進行身份??驗證。 瞧！ 😃
將您的React Native應用程序的apiUrl （位于App/Config/AppConfig.js ）修改為https://healthpoints.cfapps.io/并將其部署到您的手機中。 提示：使用我前面提到的“在設備上運行”文檔。
export default {apiUrl: 'https://healthpoints.cfapps.io/',appUrlScheme: 'healthpoints' }我在Mac上使用Xcode（ open react-native-app/ios/HealthPoints.xcodeproj ）并將其部署到open react-native-app/ios/HealthPoints.xcodeproj 。
| 當我在Xcode中遇到構建問題時，我運行rm -rf ~/.rncache并修復了它們。 我還使用了一些rm -rf node_modules && yarn 。 |
以下是顯示其工作原理的屏幕截圖！
使用Kubernetes將Spring Boot API部署到Google Cloud Platform
JHipster還支持將您的應用程序部署到生產中最熱門的東西：Kubernetes！
要進行嘗試，請在jhipster-api目錄旁邊創建一個k8s目錄。 然后在其中運行jhipster kubernetes 。 出現提示時，請指定以下答案：
- 應用類型： 整體應用
- 根目錄： ../
- 哪些應用程序： jhipster-api
- 設置監控： 否
- Kubernetes命名空間： 默認
- Docker存儲庫名稱：<您的Docker Hub用戶名>
- docker push命令： docker push
- Kubernetes服務類型： LoadBalancer
將打印出許多您需要運行的命令。 在jhipster-api目錄中運行以下jhipster-api 。
docker login export USERNAME=<your username> ./gradlew bootWar -Pprod jibDockerBuild docker image tag healthpoints $USERNAME/healthpoints docker push $USERNAME/healthpointsGoogle Cloud Platform（又名GCP）是基于Google核心基礎架構的PaaS（平臺即服務）。 它自然是云中Kubernetes的良好提供商。 完成以下步驟，將JHipster API部署到Google Cloud。
要查看可能的區域列表，請運行gcloud compute zones list 。
您可以使用kubectl get pods和kubectl logs -f {podName}來查看日志。
$ kubectl get pods NAME READY STATUS RESTARTS AGE healthpoints-6b56d9d646-h9cn2 1/1 Running 0 3m healthpoints-elasticsearch-84cf759984-vwhv8 1/1 Running 0 18m healthpoints-postgresql-56ddd4bfc9-mptch 1/1 Running 0 18m運行kubectl get pods來監視pods的啟動。
NAME READY STATUS RESTARTS AGE healthpoints-6b56d9d646-5lmjk 0/1 Running 0 14s healthpoints-6b56d9d646-h9cn2 1/1 Running 0 7m healthpoints-6b56d9d646-vsm4r 0/1 Running 0 14s healthpoints-elasticsearch-84cf759984-vwhv8 1/1 Running 0 23m healthpoints-postgresql-56ddd4bfc9-mptch 1/1 Running 0 23m結果？ 在GKE上的生產環境中運行的Spring Boot API！ 哇！
在GCP上反應Native + Spring Boot
要使您的React Native應用程序與GCP實例一起使用，您只需要修改其AppConfig.js文件以指向其URI，然后打包并部署即可。
export default {apiUrl: 'http://<external-ip>:8080',appUrlScheme: 'healthpoints' }秘訣：更改不同環境的API URL
您可能認為必須為不同的環境（本地開發與Cloud Foundry與Google Cloud）更改API URL感到很痛苦。 我同意！
幸運的是，Ignite JHipster已經內置了react-native-config 。 這個項目允許您將配置變量暴露給React Native中JavaScript代碼。 您可以將API密鑰，URL和其他敏感信息存儲在.env文件中。
API_URL=https://production-is-awesome.cfapps.io要在您的應用程序中使用react-native-config，請使用以下步驟：
探索React Native，Spring Boot和JHipster
本教程向您展示了如何僅使用幾個命令即可構建安全的Spring Boot API（由JPA，PostgreSQL和Elasticsearch驅動）。 然后，您學習了如何使用Gradle運行應用程序，如何使用Docker運行外部服務以及如何使用Sonar驗證高質量的代碼。 那僅僅是開始！
我再次向您展示了如何構建React Native應用程序，僅需幾個命令。 哎呀，甚至部署到云中也只用了一些有趣的CLI命令。
本教程的源代碼位于GitHub @ oktadeveloper / okta-react-native-spring-boot-example上 。
您不覺得所有這些一流的技術都在嬉戲嗎？ 我確定！ 🤓
想保持臀部？ 查閱其他一些關于React Native，Spring Boot和JHipster的教程。
- 構建一個React Native應用程序并使用OAuth 2.0進行身份驗證 –使用React Native AppAuth，它是Ignite JHipster的計劃集成 。
- 使用OAuth 2.0和JHipster開發微服務架構 -包括有關如何部署到Heroku的說明。
- 使用React和Spring Boot來構建一個簡單的CRUD應用程序 –當您計劃JUG Tours時，CRUD應用程序會很酷！
- 使用React，Spring Boot和JHipster構建照相館PWA –使用JHipster和React構建Flickr克隆。 使其成為PWA。
- 使用Ionic for JHipster來創建具有OIDC身份驗證的移動應用程序 –不在React Native中嗎？ 離子呢？
關注我們 ， 觀看我們的視頻 ，如果您想了解更多關于最好的開源技術的信息，請與我們聯系 。 我們是開源的忠實擁護者。 💙
使用React Native和Spring Boot構建移動應用程序''最初于2018年10月10日發布在Okta開發者博客上。
“我喜歡編寫身份驗證和授權代碼?！??從來沒有Java開發人員。 厭倦了一次又一次地建立相同的登錄屏幕？ 嘗試使用Okta API進行托管身份驗證，授權和多因素身份驗證。
翻譯自: https://www.javacodegeeks.com/2018/11/build-mobile-app-react-native-spring-boot.html
總結
以上是生活随笔為你收集整理的使用React Native和Spring Boot构建一个移动应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 捷尼赛思汽车宣布全球销量超过 100 万
- 下一篇： 钞能力：Xbox 负责人斯宾塞曾考虑收购