{"id":1084,"date":"2019-04-20T20:05:23","date_gmt":"2019-04-20T19:05:23","guid":{"rendered":"http:\/\/duskosavic.com\/blog\/?p=1084"},"modified":"2021-03-02T08:35:28","modified_gmt":"2021-03-02T07:35:28","slug":"how-to-rewrite-buzztouch-apps-in-flutter","status":"publish","type":"post","link":"https:\/\/duskosavic.com\/blog\/programming\/how-to-rewrite-buzztouch-apps-in-flutter\/","title":{"rendered":"How To Rewrite Buzztouch Apps in Flutter"},"content":{"rendered":"

This article is about rewriting Buzztouch apps using Flutter as the framework of choice. It will be highly technical in content, so if you only want an old app rewritten, without actually knowing how it is done, let me know here<\/a>.<\/p>\n

The Internal Structure of Buzztouch Apps<\/h2>\n

You define a Buzztouch app “in the cloud”, defining screens on special buzztouch server, then downloading the entire app to the desktop computer. The download consists of source code in Java for Android and Objective C for iOS. For 99% of the users, that source code is black box that is fed into Android Studio in case of developing for Android platform, or into Xcode for iOS. There usually are some warnings and errors and the majority of problems that the user would have in the development of an app is located there.<\/p>\n

\"json_in_the_buzztouch_cloud.png\"<\/a>

JSON based definition of Buzztouch apps in the cloud<\/p><\/div>\n

The source code of the app then reads the description of the screens you previously defined on the server and that “description” actually is in JSON. The Buzztouch server lets you copy all the JSON for the app at once through an option called JSON Data or Config Data, depending on the version you were using. Using JSON to get data from the server is nothing new and most apps will use JSON as well. What is unique about Buzztouch is that the entire app is defined through that JSON file so if we want to rewrite it in Flutter, JSON file is the starting point.<\/p>\n

Structure of Buzztouch JSON File<\/h2>\n

This is the global schema of a typical Buzztouch JSON file:<\/p>\n

\"elements_in_btconfig_json.png\"<\/a>

Element chierarchy in Buzztouch JSON file<\/p><\/div>\n

There is one config variable in the beginning and it contains, again, exactly one array of BT_items. If the app does not use themes or tabs, these subarrays would be empty. Each app must use menus for navigation and screen to which to navigate, so the variable BT_menus and — especially — BT_screens are never empty.<\/p>\n

I’ve seen apps with almost 8,000 BT screens and BT_items, all entered manually. Regardless of the size, if the JSON compiles properly, we shall be able to use it as starting point for regenerating the app with Flutter.<\/p>\n

This sounds easy and is easy… until you start pondering how would you do that on your own. Reading JSON with Dart is difficult to learn if you want to start from the very beginning<\/a>.<\/p>\n

What Does Reading JSON Files Look Like In Flutter?<\/h2>\n

Reading and parsing JSON files single-handedly gave me so much trouble that I wrote my own Dart generator code for JSON (technically, it’s a site in PHP)! Here is what the input would look like:<\/p>\n

\"flutter_childItem_class.png\"<\/a>

PHP code to generate ChildItem class in Flutter<\/p><\/div>\n

This would be the result:<\/p>\n

\"example_childitem_in_flutter.png\"<\/a>

Example ChildItem Class in Flutter, to read JSON<\/p><\/div>\n

This code I would copy and paste in the appropriate class for reading and parsing JSON data.
\nNow realize that for each plugin there would need to be one such class and the prospect of rewriting Buzztouch app have lost its appeal!<\/p>\n

After that I, luckily, found app.quicktype.io<\/a>, and reading Buzztouch JSON just became bearable. Here is how that looks like.<\/p>\n

How To Import Buzztouch JSON File Into Flutter and Dart<\/h2>\n

Flutter is the framework for creating mobile apps and Dart is the programming language underneath. Actually, we import that JSON into Dart and yes, it is up to the challenge — it will swallow the JSON and interpret without problems provided we use a site called QuickType<\/a> to generate Dart code for the JSON at hand.<\/p>\n

Off we go to app.quicktype.io and paste the entire JSON into the left side of the screen. Select Dart as the languge of choice in the upper right of the browser screen and you will get Dart code to read the entire JSON.<\/p>\n

\"app_quicktype_io_json_to_dart.png\"<\/a>

Turning JSON code into Dart with app.quicktype.io site<\/p><\/div>\n

Problems With Code Generated From App.Quicktype.Io<\/h2>\n

Although each BT JSON file has the same basic structure, the code that the site outputs will differ from app to app. It means that using this approach it is impossible to AUTOMATICALLY create a Flutter app from JSON file. Each variation of JSON will result in a slightly different Dart code because of the presence of plugin variables.<\/p>\n

When you enter data into a Buzztouch screen working on Buzztouch server, you actually enter value for a varible, which is held in the cloud until the app reads it from the JSON file. If the screen has, say, 8 fields to enter in total, but you enter only three insted of all eight, the JSON created will contain only the fields with values and will not contain code for non-values. So the Dart code generator will not know about the missing five fields, will not take them into account and the code generated would become different after a while.<\/p>\n

Here is what a JSON for a plugin looks like if no data were changed in the cloud:<\/p>\n

\"json_before_parameters.png\"<\/a>

JSON code before parameters were changed<\/p><\/div>\n

Let us now change the values:<\/p>\n

\"change_parameters_in_the_plugin.png\"<\/a>

Change parameters in the plugin fields<\/p><\/div>\n

This will be the resulting JSON:<\/p>\n

\"new_json.png\"<\/a>

New JSON has more fields than in the beginning<\/p><\/div>\n

To counter that, and because I wanted to have a general mechanism to interpret every possible Buzztouch app<\/strong>, I went ahead and entered all the fields in all the plugins I needed for the GibEnviro<\/a> app and submitted that for quicktype.io. The code generated was surprising, as it contained one large class of data instead of dozens of smaller classes for each plugin.<\/p>\n

There’s about 100 parameters in that class and the result is that I had only one (albeit that large) class to pass around all the plugin parameters in the Flutter app. So writing the classes that emulated Buzztouch plugins suddenly became a normal programming task. The input is just one class with all the parameters and the code in the JSON directs which screen is to be shown next.<\/p>\n

Interpreting Data for One BT Plugin<\/h2>\n

If you have ever looked into the source code for a buzztouch plugin, you have seen reading the parameter value and then interpreting it according to the size of the screen. Code in Flutter \/ Dart is no different. There will be only syntactical differences, let’s take Susan Metoxen’s<\/a> well-known plugin Menu With Image<\/em> as an example. The following line will read the value of parameter listRowBackgroundColor<\/strong> from the JSON file in this.screenData<\/strong> and will assign it to variable listBackgroundColor<\/strong> — this is in Java for Android:<\/p>\n

listBackgroundColor = BT_strings.getStyleValueForScreen(this.screenData, "listRowBackgroundColor", "#213E58");<\/pre>\n
Another such line, but this time from Objective C:<\/p>\n
\r\ndescriptionFontColor = [BT_color getColorFromHexString:[BT_strings getStyleValueForScreen:theParentMenuScreenData nameOfProperty:@"listDescriptionFontColor" defaultValue:@"#000000"]];\r\n<\/pre>\n
Finally, the code in Dart could look like this:<\/p>\n
\r\nimageHeight = returnValueDouble(widget.scr.headerImageHeightLargeDevice, 127.0);\r\n<\/pre>\n
Here scr<\/strong> denotes that large class with 100 parameters, and one of these parameters is headerImageHeightLargeDevice<\/strong>. The value returned will be a double<\/strong> — that’s Dart’s parlance for floating point variables<\/em>. Note that I wrote function returnValueDouble<\/strong> and that it looks like this:<\/p>\n