LogKeeper (Flutter & Firebase)
这是一个用于在开发团队中保存和共享日志快照的日志快照管理解决方案。
支持 iOS/Android/Web,并使用 Dart 后端 API(带有客户端-服务器共享代码)。
日志存储在 Firestore 中,Firebase Auth 用于访问部分数据。
默认使用模拟存储库。所以只需运行项目即可尝试使用模拟数据。
使用场景
- QA 工程师或团队成员在应用中发现错误
- 无论是错误弹窗还是可疑行为,都应该有一个按钮将日志上传到 LogKeeper
- 此按钮读取日志文件并发出 POST 请求,将日志保存在服务器上,进行分析,然后返回链接。
- 现在,该人员拥有上传日志的链接,可以将其共享到 Bug 报告或直接发布到聊天中。
链接的格式类似于: https://[your_hosting_url]/#/details?id=[log_id]
链接重定向到此日志,如下所示:\
| 日志内容 | Web 视图中的日志内容 |
|---|---|
![]() |
![]() |
所有日志之后都可以在首页找到,首页只有授权用户才能访问\
| 身份验证屏幕 | 主屏幕 | 日志删除弹出窗口 |
|---|---|---|
![]() |
![]() |
![]() |
| 设置屏幕 | 上传日志屏幕 | 主屏幕抽屉 |
![]() |
![]() |
![]() |
结构
此工具使用
- Flutter Bloc
- Firebase Firestore & Firestore 缓存
- Firebase 认证
- Dart 后端(使用 shelf 和 Firebase)
- 共享 Dart 代码项目使用 Docker
- Firebase Flutter 应用托管
- 使用 proviso 进行条件渲染
- 嵌入 Web 浏览器
- 主题及其动态切换、抽屉、弹出窗口、渐变边缘滚动视图,
ModelBinding、Hive、流、服务定位器 getIt 等
包含以下部分
- log_keep_back(一个用于上传日志和检索链接以共享它们的 API)
- log_keep(用于查看日志或手动上传日志的客户端部分)
- log_keep_shared(在其他两个项目之间共享的代码)
- 用于将日志发送到 API 的代码(下方提供 Unity C# 的示例)
文件夹结构基于 https://hub.docker.com/r/google/dart-runtime-base
为了在客户端和服务器端使用 log_keep_shared 中的共享代码。
如何设置
Firebase 账户
- 在 https://firebase.google.com/ 创建一个
- 添加您需要的应用(iOS/Android/Web)
- 启用 Firestore 并创建空的集合(“projects”和“logs”)
将 Firebase 附加到您的本地副本
在 log_keep 中
- 为 Android 添加 google-services.json
- 为 iOS 添加 GoogleService-Info.plist
- 在 index.html 附近添加 firebaseConfig.js,其中应包含类似以下代码
var firebaseConfig = {
apiKey: "..",
authDomain: "..",
projectId: "..",
storageBucket: ".",
messagingSenderId: "..",
appId: "..",
measurementId: ".."
};
firebase.initializeApp(firebaseConfig);
从模拟数据迁移到 Firebase 数据
默认使用模拟存储库。当您的 Firebase 帐户准备就绪后,请转到 app.dart 并取消注释 Firebase 存储库
firebaseApp = await Firebase.initializeApp();
getIt.registerSingleton<AuthRepository>(
FirebaseAuthRepository(),
signalsReady: true);
getIt.registerSingleton<LogsRepository>(
FirestoreLogsRepository(FirebaseFirestore.instance),
signalsReady: true);
要构建和托管 Web 客户端,请使用
- cd log_keep
- flutter build web
- 使用 Firebase CLI 初始化并登录
- firebase deploy --only hosting
Google 服务账户
后端运行需要 Google 服务账户 https://cloud.google.com/iam/docs/service-accounts。
服务账户凭据可以通过 .env 文件传递给 log_keep_back
- private_key_id
- client_email
- client_id
- private_key
- databaseParentPath="projects/[PROJECT_ID]/databases/(default)/documents"
- serverLogUrlFormat="https://[PROJECT_ID].web.app/#/details?id={0}"
有关如何构建和部署服务器的说明也可以在此处找到:https://hub.docker.com/r/google/dart-runtime-base
注意事项
待办事项
- 空安全
- 摆脱某些基类中特定于项目的解析代码。
它位于 log_contents_bloc.dart。
请参阅 mock_logs_repositories.dart 以获取它所期望的日志示例。
已知问题和限制
- Web 浏览器强制其上方的所有小部件忽略所有点击。
作为临时解决方案,在这种情况下,浏览器将被隐藏。 - Firestore 将其实体限制为 2MB,因此这是上传日志文件的限制。
计划使用 Firebase Storage 来存储日志。 - Flutter Web 文本渲染性能似乎存在一些问题。这是某些研发的目标。目前已添加 Web 浏览器作为备用日志查看器。
将请求发送到 LogKeeper 的示例代码
Unity, C#
var form = new WWWForm();
// Prepare log data
form.AddField("title", title);
form.AddField("author", author);
form.AddField("project", project);
form.AddField("contents", contents); // the log contents
// Send
var uwr = UnityWebRequest.Post("your_url" + "/save", form);
yield return uwr.SendWebRequest();
if (uwr.isNetworkError || uwr.isHttpError)
{
// error
return;
}
// Read result
var raw = Encoding.UTF8.GetString(uwr.downloadHandler.data);
var id = JSON.Parse(raw)["body"]["id"].Value;
var urlFormat = JSON.Parse(raw)["body"]["url_format"].Value;
// Get the link to the log
var link = string.Format(urlFormat, id);
_clipboardService.SetText(link);
ShowNotifications("Report link copied to clipboard");
贡献
随时 报告错误,请求新功能
或 贡献给此项目!







