App Inventor Chart Components: Project Summary

Overview

Throughout the last 3 months, I have worked on implementing Chart Components for App Inventor. Now, this project is in a relatively finished state, and is in review process.

With this post, I would like to summarize the project by providing links to my work, as well as some remarks.

General

The main, general links are listed below:

• App Inventor Pull Request
• GitHub Project Board
• Pull Request history
• Issue history
• Documentation & Tutorial
• Google Summer of Code Project Link

Project Summary

Briefly, the project that I have worked on implements drag and droppable Charts for use in App Inventor. The Chart components can be customized to the user’s liking, and supports five different types - Line, Area, Scatter, Bar and Pie Charts. An intuitive workflow has been implemented in the web editor, which quite accurately depicts the Chart component that will be visible in the applications made with App Inventor.

In addition, a system was created for importing data into the Chart, both manually, and via pre-defined Data Sources. The system implemented is fully and quite simply extendible to add support for many more Data Sources.

Challenges

Initially, I expected the project to be relatively straight forward and rather simple. However, there were quite a few challenges that occurred during the project. I would outline these 3 points to be hardest challenges faced during the project:

1. Making use of a library that is not thread safe in asynchronous methods; The Charts library used on the Android side (MPAndroidChart) was not fully designed to support dynamic, asynchronous data importing. Crashes would often occur, and it took a while for me to pinpoint the issue. Exploring possible solutions without modifying the library itself took more time than any other individual feature, and this was a challenge that I had to postpone a few times in order to keep up with my schedule. In the end, I found a workaround which made copies of the data. Two pull requests cover the fix – Refresh, Chart Legend and t value fix and Refresh fixes

2. Getting the hang of documenting and designing features for the project. This was the first real-life larger scale project that I have been involved in that was not a personal project, and not a university assignment. In a real setting, I felt the need to document and design features in such a way that they would be accessible to the entire open source community, and that future developers could understand the code that I have written and the features I have implemented. Initially, I found this to be quite an overwhelming task, however, as time went by, I got more comfortable with it. Generally, I made sure to write JavaDocs on all methods, and clarify the more difficult to understand implementations. Moreover, I made sure to leave detailed comments on code which is not instantly apparent, and left TODOs on features which I think should still be worked on further in the future.

3. Keeping up with the schedule of writing documentation. Generally, I found writing blog posts to be quite time-consuming process which required full attention and a lot of focus. There have been quite a few weeks where I could not make a blog post in time due to various other matters to take care of, and somewhere around the 5th week I have simply dropped the idea of having a weekly blog post. In the end, however, I have written all the blog posts that I have planned to write.

What I Learned

Overall, the project was a great learning experience, and has really helped me to sharpen my skills as a programmer and as a Software Engineer.

The main points that I would outline that I have learned during the project are as follows:

1. Multithreading. Before the project, I was completely unfamiliar of the sheer amount of tools available to handle various multithreading scenarios. My general experience with multithreading before was simply usage of Threads, synchronized methods and Coroutines (in C#). However, throughout the project I have gained a lot of knowledge about various Java utilities available for concurrent usage handling and multithreading, such as Latches, Executors, AtomicReferences, Timers and Handlers. Moreover, I have deepened my understanding of AsyncTasks, and how they work internally.

2. Interface-based pattern implementations. During the project, I have deepened my understanding in patterns which are based on interfaces. The one which I would outline is the Observer pattern, which has one object, observable, store a collection of observers, and then notifies them manually via an interface method. Throughout code examples both outside and inside the repository, I felt like I gained a better understanding of such design patterns overall.

3. Working around large repositories. During the project and my first contributions to App Inventor, I have gotten the hang of navigating around projects as large as App Inventor. Generally, whenever I need to find how or where a certain feature is implemented, I search for keywords related to the feature, and then follow the method usages in the found classes or methods. With practice, eventually I felt that I became much more efficient in working around large projects.

Posts

During the project, a series of blog posts were made which provided status updates and covered the implemented features throughout the project in depth, mostly from a technical point of view.

The list of posts can be found here:

• GSoC 2019 Announcement
• Community Bonding
• First Steps
• Prototype
• Chart Workflow Preview
• Chart Workflow Implementation
• MPAndroidChart Concentric Pie Charts (the following post was not included in the series of GSoC posts, but the concepts presented in the post were used in the project)
• Data Importing from Tuples
• Chart Type Selection, Area and Scatter Charts
• Data Source Concepts & Database Importing
• CSV, JSON and Web importing
• Real Time Data Importing
• Pie Charts
• Bar Charts & Chart Customization

Pull Requests

While working on the project, I have divided the problem into smaller subtasks, and focused on implementing features, one at a time. As such, quite a lot of pull requests were made and checked through manually on each feature implementation.

The complete list can be found here:

• Line Chart Prototype
• Mock Line Chart Prototype
• Bar Chart Prototype
• Pie Chart Prototype
• Chart Data Core
• Data Core Properties
• Mock Chart Data
• Data Core Refactor
• Chart Core Tests
• Chart List Import & Data Operations
• Charts Component Redesign (Type property)
• Chart CSV Importing
• Component redesign update
• Area Chart
• File component refactor
• CSV Importing Designer Workflow
• Scatter Chart & Mock Tuple Concepts
• Mock Chart Data Model Tuple Concepts
• Chart Type refactor
• Chart Data CRUD
• Data Source Core Concepts
• TinyDB Importing & Data Source observing
• CloudDB Import
• TinyDB & Data Source observing (update)
• Mock Chart attachment fix
• Real Time Data Importing
• Pie Chart
• JSON Importing
• Bluetooth Data Importing
• Refresh, Chart Legend and t value fixes
• Bar Chart
• Web Import
• Data Source Changing
• Chart Customization
• Refresh fixes
• Sensor Compatibility
• Finalizing

Stay tuned!

This post concluded the project that I have worked on as part of Google Summer of Code 2019. Right now, the project that I am working on is still in review, and hence I am still putting quite a lot of attention into the project, especially in terms of formal matters.

However, at some point, I will get around to posting more blog posts on various projects that I am working on.

Stay tuned!

• 2019 16