my little beginning adventure in building a build dashboard.
Picture this, you are starting out wanting to build a cool mobile app that runs on iOS and Android devices. But, you do have cash to pay for a CI build server service and all the free tier plans only give about 15 build minutes per day and yet you need about 120 to 200 build minutes per day. The obvious solution is to re-use the fact that you will be building and hot-reloading your app all the time on both your IDE and emulators and or devices.
If you piece together come feedback and automation you can than have that right now while you are learning dart and flutter. And, have that in the future when you have money to pay for the CI build service minutes and can re-use with your CI set-up. Experienced developers generally nickname this a build dash. Let me show you how to get one for your flutter app projects.
If you remember only one thing I tell you remember this. While the artifacts we produce are software and apps it’s humans that we program as front-end developers. In this case the dev-ops I am putting together in the form of a build dash board allows me to get feedback to the developer(me) earlier in the app development process which makes me more efficient as I am developing several mobile apps while I write developer articles and some developer books.
We have some software engineering processes as practices that require effective generation of feedback early in the app development cycle or sprint. Those are Test Driven development(TTD originated by Kent Beck), Behavior Driven Development(BDD, Dan North came up with one of the first BDD frameworks), and Acceptance Test Driven Development(ATDD). All these practices and processes fall under eXtreme Programming and Agile Programming but are useless unless the reports from these processes and practices are not generated somewhat automatically and have some dash board type display to view.
Now you know my motivations for creating a build dash board that I can use equally well with an IDE and a CI server service when I have the money to pay for that accessory in my developer workflow. Now you know that let me give you a peak into what I have now and what I will have in the next few weeks.
Pre Build Dash
My UML diagram output gives me a set of UML diagrams like this through using the DCDG dart plugin and PlantUML to convert it to a png format:
And my test reports look like:
And notice that I get the goldens tests in the same unit test report. Next, I have a metric report that measures graph edges of code based on topography which has the nickname of McCabe cycles because he came up with that math formula that computes this:
And last but not least I have the code coverage report which looks like this:
am not worried too much on how each individual report or image looks as far as company header, etc as that comes later. But, I do need some type of index html dash that will display a summary of lines of code covered by the unit tests, unit tests ran and number of failures, number of golden tests ran and failures, etc.
What I Did Right
Part of this is making an immediate choice to get something in short term such as me using the Derry Dart plugin to automate as it’s based on using dart to execute shell commands. It’s an ideal short-term choice as right now I do not have extra time to write dart code as part of my devops process and yet as it’s basically using a dart executable to run shell commands it can fit in my IDE as a run configuration setting and yet when I start using a CI server service can be included in that devops workflow as well.
I also know that due to past developer experience that using scripting to process xml and transform it into specialized summaries in html form is easier to do in strongly typed scripting languages like dart.
Future Build Dash
The next steps involve figuring out how to write a dart executable that takes the xml and html data and combines it into a summary panel of cards that display how many widget tests, golden tests, percentage of code covered in tests, etc. I also know I want to reduce my dependencies as I depend on a perl script and a python script to transform xml reports to html which I want to switch to dart scripts to have the same functionality all in dart scripting.
I wanted to give you the beginning flutter mobile app developer a taste of what is that I create and come up with only a daily basis. This came together in the past few days as I dug into how things work together and what can be tied together via scripting to automate some of it. In the next few weeks, I get to figure out how to write a dart script to process the xml and produce a summary set of cards that show up in a html page. And, if you follow me, you get that dart code to re-use in your projects workflow for free.
Specific to the articles:
Test Driven Development(TDD)@wikipedia https://en.wikipedia.org/wiki/Test-driven_development
Behavior Driven Development(BDD)@wikipedia https://en.wikipedia.org/wiki/Behavior-driven_development
Acceptance Test Driven Development(ATDD)@wkipedia https://en.wikipedia.org/wiki/Acceptance_test%E2%80%93driven_development
General Flutter and Dart resources:
Flutter Community Resources https://flutter.dev/community
Flutter SDK https://flutter.dev/docs/get-started/install
Android Studio IDE https://developer.android.com/studio
MS’s Visual Studio Code https://code.visualstudio.com/
Flutter Docs https://flutter.dev/docs
Dart Docs https://dart.dev/guides
Google Firebase Mobile Device TestLab https://firebase.google.com/docs/test-lab
Google LLC owns the following trademarks; Dart, Flutter, Android, Roboto, Noto. Apple Inc owns the trademarks iOS, MacOSX, Swift, and ObjectiveC. Apple Inc owns trademarks to their fonts of SF Pro, Sf Compact, SF mono, and New York. JetBeans Inc owns the trademarks to JetBeans, IntelliJ, and Kotlin. Oracle Inc owns the Java trademark. Microsoft Inc owns the trademarks to MS Windows OS and Powershell. Gradle is a trademark of Gradle Inc. The Git Project owns the trademark to Git. Linux Foundation owns the trademark to Linux. SmartPhone OME’s own trademarks to their mobile phone product names. To the best of my ability I follow the brand and usage guidelines with the above mentioned trademarks.
About Fred Grott
I’m the crazy SOB who as a former android mobile developer is starting to write about flutter mobile app development, design, and life(see Eff COVID and GOP https://fredgrott.medium.com/eff-covid-and-the-gop-e912db0548b8). Will I reach the pivotal One Million Medium monthly viewers mark? Sit-back and watch it happen. Find me on these social platforms:
Fred Grott - Android Software Engineer - Fred Grott
Berufserfahrung, Kontaktdaten, Portfolio und weitere Infos: Erfahr mehr - oder kontaktier Fred Grott direkt bei XING.
Fred Grott - CEO-CPO-Designer - GrottUX | LinkedIn
View Fred Grott's profile on LinkedIn, the world's largest professional community. Fred has 3 jobs listed on their…
fredgrott (Fred Grott) on Keybase
What the heck is Keybase? Keybase comes with everything you need to manage your identity, create secure chats, and…