For someone who doesn't write code for a living, creating even the simplest Android app can be a daunting proposition. However, for those of us with modest coding skills, there is Jasonette [1]. This ingenious solution makes it possible to create a full-featured Android app using a single JSON file that defines the app's basic structure and behavior. A generic Jasonette Android app pulls this JSON file and renders it as native Android components.

Creating a Jasonette-based app still requires some basic coding skills, but writing a JSON file is significantly easier than writing Java or Kotlin code. Also, building the Jasonette app in the Android Studio IDE requires only a few simple steps. Better still, because the JSON file controls the app's appearance and behavior, you can easily update and improve it by editing the JSON code instead of rebuilding the entire app.

Preparatory Work

Before you start, you need to do some preparatory work. First, download and install Android Studio [2] on your machine. If you happen to use openSUSE, installing Android Studio is a matter of running the following commands:

sudo mv android-studio-xx-xxx-xxx.zip /opt
cd /opt
sudo unzip android-studio-xx-xxx-xxx.zip
sudo chown -R root:root android-studio
sudo ln -s /opt/android-studio/bin/studio.sh /usr/local/bin/android-studio

You don't need to use Android Studio to build an app just yet, though. To preview your JSON files directly on your Android device and test your app's basic functionality without building it in Android Studio first, you can use the Jason browser [3].

Instead of a regular text editor, you can use a dedicated tool for JSON code, such as JSON Editor Online [4], which runs directly in the browser, or the Elegant JSON Editor [5] Firefox add-on (Figure 1).

Figure 1: Elegant JSON Editor adds JSON editing capabilities to Firefox.

Creating a JSON File

To get a basic understanding of what makes Jasonette tick and how JSON code works, take a look at the simple Jasonette app in Listing 1.

{
  "$jason": {
    "head": {
      "title": "Random Monkey",
      "description": "Display a random monkey photo",
      "actions": {
        "$pull": {
          "type": "$reload"
        }
      },
      "styles": {
        "caption": {
          "font": "Roboto",
          "size": "13",
          "align": "center",
          "spacing": "15"
        },
        "image": {
          "width": "100%"
        }
      }
    },
    "body": {
      "header": {
        "title": "Random Monkey",
        "style": {
          "font": "Roboto",
          "size": "25"
        },
        "menu": {
          "text": "Unsplash",
          "href": {
            "url": "https://unsplash.com",
            "view": "web"
          },
          "style": {
            "font": "Roboto",
            "size": "19"
          }
        }
      },
      "sections": [
        {
          "items": [
            {
              "type": "image",
              "url": "https://source.unsplash.com/random/800x600/?monkey",
              "class": "image"
            },
            {
              "type": "label",
              "text": "Here is a random monkey photo",
              "class": "caption"
            }
          ]
        }
      ]
    }
  }
}

This simple JSON code defines the basic structure and behavior of the app that fetches and displays a random photo of a monkey. Similar to an HTML page, the JSON file's head section (Listing 2) specifies general properties such as the app's title, description, and actions:

  "$jason": {
    "head": {
      "title": "Random Monkey",
      "description": "Display a random monkey photo",
      "actions": {
        "$pull": {
          "type": "$reload"
        }
      },
      "styles": {
        "caption": {
          "font": "Roboto",
          "size": "13",
          "align": "center",
          "spacing": "15"
        },
        "image": {
          "width": "100%"
        }
      }
    },
  ...
 {

The $pull action in the header enables the pull-to-refresh action. The styles section is used to specify styling for various interface elements. In this example, it is caption for image text, and image for the image element. The body section (Listing 3) includes the three main elements of the app's interface: header, menu, and sections.

    "body": {
      "header": {
        "title": "Random Monkey",
        "style": {
          "font": "Roboto Bold",
          "size": "25"
        },
        "menu": {
          "text": "Unsplash",
          "href": {
            "url": "https://unsplash.com",
            "view": "web"
          },
          "style": {
            "font": "Roboto",
            "size": "19"
          }
        }
      },
      "sections": [
        {
          "items": [
            {
              "type": "image",
              "url": "https://source.unsplash.com/random/800x600/?monkey",
              "class": "image"
            },
            {
              "type": "label",
              "text": "Here is a monkey photo",
              "class": "caption"
            }

The header section in Listing 3 defines the app's header (the fixed bar at the top of the screen). In this case, the header contains a title and a menu item that opens the specified URL in the default browser. Note that in addition to the global styles, it's also possible to define inline styles for individual elements. For example, an inline style right after the title element defines the appearance of the header title. The sections part contains an array of items. In this example, the array consists of two items: The first one is the image, and the second one is its text label. And that's all there is to it.

To test your first app, you don't have to host the JSON file on your own server. Instead, you can use the jasonbase [6] JSON hosting service. Create a new file, give it a name, paste the code, and save the changes. Make note of the created JSON file's URL, launch the Jason app on your Android device, enter the JSON file's URL, and press Go. This adds a new entry, and you can launch the app by tapping on it (Figure 2).

Figure 2: Random Monkey Android app in action.

Building a Photo Portfolio App

With a few simple tweaks, you can transform the simple example app into a portfolio for displaying photos stored on your server. For this app, you need a web server for hosting a JSON file and photos. To keep things tidy, create a dedicated directory on the server for storing photos and the JSON file (e.g., photoapp). Before you copy photos into that directory, you should resize and recompress them. This will make your app run faster and reduce the amount of data that needs to be transferred. The perfect tools for the job are jpeg-recompress [7] and ImageMagick's mogrify. With these two tools installed on your system, you can use the following command to recompress or resize all JPG files in the current directory:

for file in *.jpg; do jpeg-recompress --quality high $file $file; done
mogrify -resize "1600>" *.jpg

With all the pieces in place, you are ready to start working on the JSON file. At first glance, all you need to do is to change the appropriate properties and add image and label items for each photo. This quick-and-dirty solution has serious drawbacks, though. All URLs are hard-wired into the JSON file, so every time you add a new photo, you need to create another item in the JSON file manually.

One way to solve this problem is to replace the JSON file with a PHP script that generates JSON data on the fly. Listing the entire PHP script is not very practical, so instead, use the command

git@gitlab.com:dmpop/jasonette-tokyo-taxi.git

to grab the source code of the Tokyo Taxi Lights [8] app. Then open the json.php script that powers the app.

The script is not particularly difficult to parse. It starts by reading all files with the specified file extension (by default it's JPEG) into the $files array:

$files = array();
foreach (glob($ext) as $file) {
  $files[] = $file;
}

To pick a specified number of random photos, the script uses the shuffle() function:

shuffle($files);
$files = array_slice($files, -$number);

The script then checks whether each photo has an accompanying .txt file. If the text file is detected, its content is used as a caption; otherwise, the file name is used as the caption:

$txt = pathinfo($file, PATHINFO_FILENAME).".txt";
  if (file_exists($txt)) {
    $caption = rtrim(file_get_contents($txt));
  } else {
    $caption =  rtrim(pathinfo($file, PATHINFO_FILENAME));
  }

Finally, the obtained and assembled data is used to generate a complete JSON file.

If you have a working knowledge of PHP, you can modify the script to fit your particular needs. Otherwise, you can modify the user-defined values only. Copy the resulting PHP script to the web server and start building your first Android app in Android studio.

Use the command

git clone https://github.com/Jasonette/JASONETTE-Android.git

to clone the JASONETTE-Android app's source code. Launch Android Studio by running the android-studio command in the terminal and import the JASONETTE-Android project. Next, open the app/res/values/strings.xml file, locate the <string name="app_name">Jasonette</string> line, and replace Jasonette with the desired name (Figure 3). Then, replace the default URL in

<string name="url">https://jasonette.github.io/Jasonpedia/hello.json</string>

with the actual URL to your JSON file.

Figure 3: Editing default Jasonette values.

Now prepare an image file in the PNG format for use as an app icon. In Android Studio, right-click on the app | res folder and choose New | Image Asset. Use the prepared PNG file to create and add an app icon (Figure 4).

Figure 4: Creating an app icon.

Open the Gradle Scripts | build.gradle(Module:app) file, locate the applicationId "com.jasonette." line, and replace com.jasonette with the desired app ID. Press the Sync Now link to synchronize the changes. Now, choose Build | Build APK(s) to build the app.

To install the resulting app-debug.apk package on an Android device (Figure 5), switch to Settings | Security and enable the Unknown Sources option.

Figure 5: Tokyo Taxi Lights app.