使用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 HealthPoints
    packageName 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/we