Strapi助力Flutter開發國際化App - 搭建專案結構

nasawz發表於2021-10-10

搭建專案結構

第一步、使用get cli生成基礎的專案結構

https://pub.dev/packages/get_cli

專案型別為Flutter Project,iOS語言選swift、Andoid語言選Kotlin,並且啟用null safe特性,Getx的模板選擇“GetX Pattern”。

get create project:strapi_flutter_internation_poc
  1) Flutter Project
  2) Get Server
1
? What is your company's domain?  Example: com.yourcompany  com.nasawz.strapi_flutter_internation_poc

what language do you want to use on ios?

  1) Swift
  2) Objective-C
1

what language do you want to use on android?

  1) Kotlin
  2) Java
1

Do you want to use null safe?

  1) Yes!
  2) No
1

do you want to use some linter?

  1) no
  2) Pedantic [Deprecated]
  3) Effective Dart [Deprecated]
  4) Dart Recommended
1

Running `flutter create D:\poc\strapi_flutter_internation_poc` …

$ flutter create --no-pub -i swift -a kotlin --org com.nasawz.strapi_flutter_internation_poc D:\poc\strapi_flutter_internation_poc
Creating project ....
  lib\main.dart (created)
  pubspec.yaml (created)
  README.md (created)
  test\widget_test.dart (created)
  .gitignore (created)
  .idea\libraries\Dart_SDK.xml (created)
  .idea\libraries\KotlinJavaRuntime.xml (created)
  .idea\modules.xml (created)
  .idea\runConfigurations\main_dart.xml (created)
  .idea\workspace.xml (created)
  .metadata (created)
 .......
 ........
Wrote 81 files.

All done!
In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in .\lib\main.dart.


Running `flutter pub get` …

$ flutter pub get
Running "flutter pub get" in strapi_flutter_internation_poc...      2,666ms
$ dart migrate --apply-changes --skip-import-check
Migrating D:\poc\strapi_flutter_internation_poc

See https://dart.dev/go/null-safety-migration for a migration guide.

Analyzing project...
All sources appear to be already migrated.  Nothing to do.
✓  File: analysis_options.yaml created successfully at path: analysis_options.yaml
  1) GetX Pattern (by Kauê)
  2) CLEAN (by Arktekko)
1

Your lib folder is not empty. Are you sure you want to overwrite your application?
 WARNING: This action is irreversible

  1) Yes!
  2) No
1
✓  'Package: get installed!
✓  File: main.dart created successfully at path: lib\\main.dart
✓  File: home_controller.dart created successfully at path: ./lib\app\modules\home\\controllers\\home_controller.dart
✓  File: home_view.dart created successfully at path: ./lib\app\modules\home\\views\\home_view.dart
✓  File: home_binding.dart created successfully at path: ./lib\app\modules\home\\bindings\\home_binding.dart
✓  File: app_routes.dart created successfully at path: lib\\app\\routes\\app_routes.dart
✓  File: app_pages.dart created successfully at path: lib\\app\\routes\\app_pages.dart
✓  home route created successfully.
✓  Home page created successfully.
✓  GetX Pattern structure successfully generated.

Running `flutter pub get` …

$ flutter pub get
Running "flutter pub get" in strapi_flutter_internation_poc...

至此 我們已經有了一個Flutter基礎的專案結構。

接下來,讓我們將Strapi融入到專案中。

第二步、融入Strapi

https://strapi.io/

進入專案目錄

 cd .\strapi_flutter_internation_poc

使用"create-strapi-app"來初始化專案

npx create-strapi-app strapi
npx: installed 146 in 14.856s
? Choose your installation type Quickstart (recommended)
? Would you like to use a template? (Templates are Strapi configurations designed for a specific use case) No
Creating a quickstart project.
Creating a new Strapi application at D:\poc\strapi_flutter_internation_poc\strapi.
Creating files.
Dependencies installed successfully.

Your application was created at D:\poc\strapi_flutter_internation_poc\strapi.

Available commands in your project:

  yarn develop
  Start Strapi in watch mode.

  yarn start
  Start Strapi without watch mode.

  yarn build
  Build Strapi admin panel.

  yarn strapi
  Display all available commands.

You can start by doing:

  cd D:\poc\strapi_flutter_internation_poc\strapi
  yarn develop


> strapi@0.1.0 build D:\poc\strapi_flutter_internation_poc\strapi
> strapi build "--no-optimization"

Building your admin UI with development configuration ...

√ Webpack
  Compiled successfully in 27.43s

Running your Strapi application.

到這裡 Strapi安裝成功並啟動在本地的 http://localhost:1337 埠上。
微信截圖_20211009150439-20211009150710-govdypc.png

能看到這個介面後可以先暫停下,先修改下Strapi的配置。將Strapi中預設的Sqlite資料庫的地址指向到Flutter專案的assets資料夾中。

先將對應的資料夾建立好 assets/db

修改 [project_root]/strapi/config/database.js

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'sqlite',
        filename: env('DATABASE_FILENAME', '../assets/db/data.db'),
      },
      options: {
        useNullAsDefault: true,
      },
    },
  },
});

修改完成後重新啟動Strapi專案

npm run develop

註冊一個管理員賬號

admin@poc.com
nrVABVAAYq9geTY

image-20211009152528-42y7qll.png

修改Flutter專案的配置檔案 pubspec.yaml將資料庫的路徑放到assets下

flutter: 
  assets: 
    - assets/db/
  uses-material-design: true

在之後的開發中 Flutter 就可以利用Strapi的資料庫檔案了。

現在看到專案結構如下圖
image-20211009153140-npnc6t0.png


上一篇:技術選型

相關文章