Instant Android Apps
Instant Android Apps
Jasonette makes it supremely easy to build simple and advanced Android apps with a minimum of coding.
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).
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.
Listing 1
Simple Jasonette App
{ "$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:
Listing 2
head Properties
"$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
.
Listing 3
body Properties
"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).
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.
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).
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.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Direct Download
Read full article as PDF:
Price $2.95
News
-
Deepin 23 Preview Release is Available For Testing
The developers of Deepin have made a preview release of their latest offering available with three exciting new features.
-
The First Point Release For Ubuntu 22.04 is Now Available
Canonical has released the first point upgrade for Jammy Jellyfish which includes important new toolchains and fixes.
-
Kali Linux 2022.3 Released
From the creators of the most popular penetration testing distributions on the planet, comes a new release with some new tools and a community, real-time chat option.
-
The 14" Pinebook Pro Linux Laptop is Shipping
After a considerable delay, the 14" version of the Pinebook Pro laptop is, once again, available for purchase.
-
OpenMandriva Lx ROME Technical Preview Released
OpenMandriva’s rolling release distribution technical preview has been released for testing purposes and adds some of the latest/greatest software into the mix.
-
Linux Mint 21 is Now Available
The latest iteration of Linux Mint, codenamed Vanessa, has been released with a new upgrade tool and other fantastic features.
-
Firefox Adds Long-Anticipated Feature
Firefox 103 has arrived and it now includes a feature users have long awaited…sort of.
-
System76 Refreshes Their Popular Oryx Pro Laptop with a New CPU
The System76 Oryx Pro laptop has been relaunched with a 12th Gen CPU and more powerful graphics options.
-
Elive Has Released a New Beta
The Elive team is proud to announce the latest beta version (3.8.30) of its Enlightenment-centric Linux distribution.
-
Rocky Linux 9 Has Arrived
The latest iteration of Rocky Linux is now available and includes a host of new features and support for new architecture.