firelamp:用于withcenter后端v3的Withcenter Flutter API

  • t9_946157
    了解作者
  • 74.4KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-13 20:53
    上传日期
火灯 Flutter软件包,用于支持CMS(内容管理系统)功能,例如用户管理,论坛管理等,用于构建社交应用程序,购物应用程序之类的应用程序。 它基于Firebase和LAMP堆栈。 一个故事 我们一直在开发Flutter软件包,以支持每个应用程序所需的基本功能。 我们首先使用LAMP(或LEMP)堆栈在Firebase上工作了一段时间,我们决定删除LAMP堆栈,因为维护两个堆栈很麻烦。 几个月后,我们成功构建了第一个没有LAMP堆栈的flutter软件包版本,名为fireflutter 。但是我们对firestore上的复杂查询不满意。然后,我们毫不犹豫地使用Firebase返回LAMP堆栈。 这就是FireLamp 。 参考 在Wordpress上的LAMP堆栈 我们已经在Wordpress上构建了后端。 安装 将最新版本添加到pubspec.yaml 在项目上设置Firebase设置。
firelamp-main.zip
内容介绍
# FireLamp A flutter package to support CMS(Content Management System) functionalities like user management, forum management, and more for building apps like social apps, shopping apps. It is based on Firebase and LAMP stack. ## A story We have been working on a flutter package to support the basic functionalities that every app needs. We first worked on Firebase with LAMP(or LEMP) stack for a while and we decided to remove LAMP stack since it is a hassle to maintain two stacks. After a couple of months, we had successfully built the first version of flutter package without LAMP stack named `fireflutter`. But we were not satisfied with the complex query on firestore. Then, without hesitate, we went back to LAMP stack with Firebase. And here it is, `FireLamp`. ## Reference ### LAMP stack on Wordpress - We have built the backend on Wordpress. - [sonub](https://github.com/thruthesky/sonub) # Installation - Add latest version into pubspec.yaml - Set the Firebase settings on the project. - Add iOS `GoogleServices-info.plist` and Android `google-serfvices.json`. - The instance of FireLamp `Api` is a signleton. ## Put WithcenterApi instance as GetX controller - Put the instance as `GetX` controller as early as possible on the app start-up like below. Root screen page would be a good place. - And, intialize `Api` like below. `apiUrl` is the backend api url. ```dart class _MainAppState extends State<MainApp> { final Api a = Get.put<api rel='nofollow' onclick='return false;'>(Api.instance); @override void initState() { super.initState(); a.init(apiUrl: 'https://flutterkorea.com/wp-content/themes/sonub/api/index.php'); a.version().then((res) { // print('res: $res'); }); a.translationChanges.listen((trs) { // print('trs: $trs'); }); } ``` ## Language Settings - First, add `language codes` in `Info.plist` on iOS. For android, it work out of the box. ```xml <key>CFBundleLocalizations</key> <array rel='nofollow' onclick='return false;'> <string>en</string> <string>ch</string> <string>ja</string> <string>ko</string> </array> ``` - Then, code like below. ```dart class _MainAppState extends State<MainApp> { final Api a = Get.put<api rel='nofollow' onclick='return false;'>(api); @override void initState() { super.initState(); a.init(apiUrl: 'https://flutterkorea.com/wp-content/themes/sonub/api/index.php'); a.translationChanges.listen((trs) { updateTranslations(trs); setState(() {}); }); } @override Widget build(BuildContext context) { return GetMaterialApp( locale: Locale(Get.deviceLocale.languageCode), translations: AppTranslations(), getPages: [ /// ... ], ); } } ``` ## App Settings - When admin updates settings in admin page, `Api.instance.settings` will be automatically updated and [settingChanges] event will be posted. ```dart final Api a = Get.put<api rel='nofollow' onclick='return false;'>(api, permanent: true); a.init(...); a.settings = {'forum_like': 'Y', 'forum_dislike': 'Y', 'search_categories': ''}; a.settingChanges.listen((x) => setState(() {})); ``` ## User ### Display user login information - with stream builder ```dart StreamBuilder( stream: api.authChanges, builder: (_, snapshot) { if (snapshot.hasData) return Text('User nickname: ${api.nickname}'); else return Text('loading...'); }, ), ``` - or with getx ```dart GetBuilder<api rel='nofollow' onclick='return false;'>( builder: (_) { if (api.loggedIn) return Text('Session Id: ${api.sessionId}\n' 'User nickname: ${api.nickname}'); else return Text('Not logged in'); }, ), ``` ## Forum - Example of Forum List ```dart import 'package:dalgona/screens/forum/widgets/no_more_posts.dart'; import 'package:scrollable_positioned_list/scrollable_positioned_list.dart'; import 'package:dalgona/services/globals.dart'; import 'package:dalgona/widgets/app.end_drawer.dart'; import 'package:dalgona/widgets/spinner.dart'; import 'package:firelamp/firelamp.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; class ForumListScreen extends StatefulWidget { ForumListScreen({Key key}) : super(key: key); @override _ForumListScreenState createState() => _ForumListScreenState(); } class _ForumListScreenState extends State<ForumListScreen> { /// Declare forum model(setting) ApiForum forum; @override void initState() { super.initState(); /// Initialize the forum model forum = ApiForum( category: Get.arguments['category'], render: () { // print("no of posts: ${forum.posts.length}"); setState(() => null); }, ); /// Attach the forum model to the api controller and let the controller handle /// all the forum settings. api.attachForum(forum); /// Load the first page api.fetchPosts(forum: forum).catchError((e) => app.error(e)); /// Load next page on user scroll forum.itemPositionsListener.itemPositions.addListener(() { int lastVisibleIndex = forum.itemPositionsListener.itemPositions.value.last.index; if (forum.loading) return; if (lastVisibleIndex > forum.posts.length - 4) { api.fetchPosts(forum: forum).catchError((e) => app.error(e)); } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Forum list'), ), endDrawer: AppEndDrawer(), body: Column( children: [ Expanded( /// Use ScrollablePositinoList instead of ListView. /// It can scroll by the item(post). child: ScrollablePositionedList.builder( itemScrollController: forum.listController, itemPositionsListener: forum.itemPositionsListener, itemCount: forum.posts.length, itemBuilder: (_, i) { ApiPost post = forum.posts[i]; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'title: ${post.title}', style: TextStyle(fontSize: 34), ), RaisedButton(child: Text('Button'), onPressed: () {}), ], ); }, ), ), Spinner(loading: forum.loading), NoMorePosts(forum: forum), ], ), ); } } ``` ### 글 목록, 글 수정 예제 - 아래의 예제를 살펴보면, 글을 가져오고, 목록하고, 글 생성, 수정하는 방법을 잘 알 수 있다. ```dart class _ProductInquiryScreenState extends State<ProductInquiryScreen> { String inquiryCategory = ''; bool edit = false; ApiPost editPost; // 1. Forum 모델 정의(선언) ApiForum forum; @override void initState() { super.initState(); // 2. Forum 모델 초기화 forum = ApiForum( category: 'inquiry', render: () { if ( mounted ) setState(() => null); }, ); // 3. 첫 페이지 목록 가져오기 () async { try { await api.fetchPosts(forum); } catch (e) { app.error(e); } }(); // 4. 스크롤을 하면, 다음 페이지 글 목록 가져오기. 주의: 5 번에서 스크롤에 연결해야 함. forum.itemPositionsListener.itemPositions.addListener(() async { int lastVisibleIndex = forum.itemPositionsListener.itemPositions.value.last.index; if (forum.loading) return; if (lastVisibleIndex > forum.posts.length - 4) { try { await api.fetchPosts(forum); } catch (e) { app.error(e); } } }); } @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ RaisedButton( child: Text('문의 쓰기'), onPressed: () => setState(() => edit = true), ), if (edit) ...[ ShoppingMallInquiryCategory(onChanged: (value) => this.inquiryCategory = valu
评论
    相关推荐