Slibro Codemagic 构建状态

Slibro 是一个功能齐全的故事写作和发布平台,支持短篇和长篇故事。它使用了 FlutterAppwriteRapyd 来创造令人惊叹的跨平台体验。尽管我主要专注于移动端 UI 的构建,并确保它在小尺寸设备上使用起来很方便。

从这里 在 Android 上试用该应用程序。

用法

要在您的系统上运行此应用,您应该

  1. 在您的系统上安装并配置了 Flutter SDK

  2. 使用 Docker 设置 Appwrite。

  3. 使用 ngrok 在本地托管服务器。

  4. lib 目录下,创建一个 secrets.dart 文件,并将服务器 URL 和 Appwrite 项目 ID 添加到其中。例如:

    class Secrets {
      static String hostname = 'https://127b-203-163-244-125.in.ngrok.io/v1';
      static String projectID = '6276341092e81e829ab0';
    }
  5. 创建一个 Rapyd 开发者账户。

  6. 获取 Rapyd Sandbox API 密钥和密钥。

  7. 将它们添加到 secrets.dart 文件中,并在 Rapyd Flutter SDK 中使用它们。

  8. 使用以下命令运行

    flutter run

** Flutter 应用的 Dart 代码位于 lib 目录中(如果您想查看或审查代码)。

应用概览

该应用程序现在拥有功能齐全的故事编辑器(富文本 - Markdown)、故事阅读器故事管理系统(用于管理已发布/未发布的故事以及探索其他发布者的故事)。

Slibro 的用户界面的一些截图如下

Slibro Auth Screens

以上四个屏幕展示了应用中通过电子邮件/密码进行身份验证的流程。这些屏幕帮助用户创建新账户或使用现有账户登录。用户注册后,应用将导航到故事创建流程。

注册成功后,会在 Appwrite 上创建一个新用户,并在 Rapyd 上创建一个相应的客户。

Slibro Story Detail Screens

成功认证后,有两种选择——立即开始写新故事,或者导航到应用的仪表板。

如果用户选择“开始写作”——接下来的两个屏幕将帮助用户在 Slibro 应用中创建第一篇草稿。用户还可以按照流程发布故事。

Slibro Editor and Reader Screens

该应用包含四个主要屏幕

  • 主页:显示 Slibro 应用中所有已发布故事的列表。

  • 我的故事页面:它有两个部分,第一部分显示您购买的故事(如果有),下一部分显示您写的故事(如果有)。

  • 购物车页面:显示您特别添加到购物车中待购买的故事列表。您可以从此页面继续结账。

  • 个人资料:允许您查看个人资料信息以及编辑信息的选项。您还可以在此页面找到退出登录按钮。

Slibro Dashboard Screens

以下页面显示用户尝试结账购物车项目。它使用 Rapyd Checkout Toolkit 在应用内打开嵌入式 WebView——Dart 和 JS 之间设置了双向通信。

用户的卡信息和账单信息是在此过程中收集的。一旦付款成功,发票将通过 SendGrid 自动发送到用户的电子邮件。还有一个下载发票的选项。

Slibro Dashboard Screens

Rapyd API

本项目使用了以下 Rapyd API

  • 客户 API:用于创建和检索客户信息——主要用于存储保存的卡信息。

  • 结账 API:用于生成和检索用户想要购买的产品的结账 ID——在应用内加载嵌入式结账工具包时也需要。

Appwrite API

使用了三个主要的 Appwrite API

  • 账户 API:用于实现用户认证和用户数据管理。
  • 数据库 API:用于存储与故事和章节相关的应用数据。
  • 存储 API:用于以 JSON 格式存储富文本故事文件。

Flutter 包

许多社区成员一直在寻找一个 Flutter SDK 来访问 Rapyd API,所以我开始开发一个Rapyd Flutter SDK。该包仍处于开发早期阶段,API 有限,但具有一些主要的 API 功能,例如计算执行有效 API 调用所需的头部的 salt 和签名。

这个 SDK 应该能让 Rapyd API 调用非常容易。下面是一个使用 SDK 创建新客户的小例子

// Initializing
final rapydClient = RapydClient('<access_key>', '<secret_key>');

try {
  // Creating a new customer
  final customer = await rapydClient.createNewCustomer(
    email: '[email protected]',
    name: 'User',
  );
  print('Created customer successfully, ID: ${customer.data.id}');
} catch (e) {
  print('ERROR: ${e.toString()}');
}

本项目使用 Rapyd Flutter SDK 执行 API 调用!

以下 Flutter 包用于构建此应用程序

许可证

版权所有 (c) 2022 Souvik Biswas

兹授予获得本软件及相关文档文件(“软件”)的任何人免费使用的权利,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利,并允许接收软件的人这样做,但须满足以下条件:

以上版权声明和本许可声明应包含在软件的所有副本或实质性部分中。

本软件按“原样”提供,不附带任何形式的保证,无论是明示的还是暗示的,包括但不限于对适销性、特定用途的适用性和非侵权性的保证。在任何情况下,作者或版权持有者均不对任何索赔、损害或其他责任负责,无论是在合同、侵权或其他诉讼中,因本软件或使用或处理本软件而引起或与之相关的。

GitHub

查看 Github