MIT App Inventor 2 JSON data on the Android mobile with App Inventor 2

JSON data on the Android mobile with App Inventor 2

Recently I have been experimenting with MIT app inventor 2 on the Web to check the development cycle and production time. It turns out that the platform is extremely productive and offers numerous features for Android app development.

In a day I have been able to develop a relatively simple app and in two hours I have produced a second version (had to include some error control).

THE APP SCENARIO
The app reads JSON data from a web server (user’s choice) and presents them in a typical listview. Each item in the list is clickable and activates a secondary screen with detailed info and social sharing functionality. This app scenario can be applied in numerous cases where various data or measurements are online and need to be presented in mobile devices.

THE CASE STUDY
The case study for this app development was eHealth. I have already developed an eHealth app for iOS and I wanted to see how this app could be developed for Android.

THE DEVELOPMENT PLATFORM
I have been experimenting with Android development for some years and I had to stick with the typical Eclipse-Andoid SDK solution. I did not yet had the time to experiment with the MIT app inventor platform so since the 2nd version has been made available this was a good time to do it. The rest of this post includes details on how to develop an app with the specified scenario on the app inventor 2 platform and publish it easily on Google Play Store.

HERE GOES
Lets suppose we have an app inventor account and we are already logged in.
We create a new project and give a name.
What we need for our application scenario is 2 screens. One for a listview (master) and one for the details. Lets start by developing Screen1 as is the master screen named by default.

Here is a complete view of the master screen and the components included:
Pin It
The interface is a typical visual programming interface with Components and Properties and is extremely easy and intuitive, so there is no need to explain anything more here. All components have been dragged-dropped from the Palette on the left side under the tabs “User Interface”, “Layout” and “Connectivity”.

Moving to the Blocks section (top-right screen button) we are able to do the actual programming using the Scratch Programming paradigm.

First of all we have to define some Global Variables for easy access throughout the app:
Pin It

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Then we move on to define the main app procedure, what we need our app to do:
Pin It

Ok we are now done with this simple app and we just need to define what goes on in various cases that something happens, i.e. to handle the events in this app.
First we need to define what happens when the app loads:
Pin It

Then we define that at each Timer tick we want to check new JSON data from the server in case the user needs to get live feed of the data:
Pin It

In addition, we have to define what happens when the user uses the controls (the Go button and the live checkbox):
Pin It

Two more things need to be defined: what happens in case of errors, and what happens in case the user clicks on a list item:
Pin It
Pin It

It should be noted that the Detail Screen (the 2nd screen in this project) has already been defined and named as “DetailScreen”.

The final touch is to program what happens when the app receives JSON data from the server and how the listView is actually populated:
Pin It
It should also be noted that the JSON parsing algorithm presented in the previous figure is valid only for JSON data in the form shown in the following figure and should be carefully changed in other cases:
Pin It
This concludes the Master Screen named “Screen1”.

We then move to develop the Detail Screen named here “DetailScreen”.
Here is a complete view of the master screen and the components included:
Pin It
Again, there is no need to go into detail, since the Properties are more than obvious. Only one explanation that the “Share” and “Tweet” images are typical Buttons with their face changed using images.

Lets move to the “Blocks” section, again and take a look at the programming.
Here is the definition of Global Variables and the main Procedures:
Pin It
It should be noted that the “get start value” Component is what the Master Screen passes to this Screen, and the the main Procedure creates a simple listView with the passed data from Master Screen and some additional data (here just some mobile device sensor data for reference).
Here are the Screen initialization methods, including what happens when the user requires to return to the Master Screen (presses “back”):
Pin It
Please note that the CustomerKey and CustomerSecret are to be defined by each developer.
Here are the Social Media methods:
Pin It
And finally a simple error handling method:
Pin It

[출처] http://georgepavlides.info/json-data-on-the-android-mobile-with-app-inventor-2/