Posted on Leave a comment

Are You A Front End Web Developer? Congrats, You Are Also An Android Developer.

front end web developer to android developer

Mobile Development and Web Development Are Merging

Progressive web apps (PWAs) are pretty mainstream now and most web developers are aware of their existence. The Android platform and the Google Play store has been around for going on 13 years and developers are aware of its existence. What many are unaware of is how much the two platforms have been merging in the background. Last year I had the most wonderful epiphany. If you are a front end web developer, then by default you can publish Android applications, making you an Android developer as well.

Subscribe to my YouTube for more Tech Talks

What Are The Benefits?

You might be wondering what the benefits of turning your PWA into an installable Android application. Some of the main ones include:

  • Increased visibility
  • Increased revenue
  • Better brand reputation

Increased Visibility

When you turn your progressive web application into an Android application and upload it to the Google Play Store, you are opening yourself to a new realm of SEO called App Store Optimization. This is the search engine that powers the Google Play Store search. Your app will now be available to all Android users (unless otherwise specified). Your app store listing is the gateway to all of these new potential users.

Increased Revenue

When you upload an Android application you can set it to be paid or free. In addition to increased ad revenue (if that is your monetization model) that will grow proportionally with app download and usage; but what about apps that don’t make any money on the web? Those could be one-time paid downloads on the Google Play Store.

Better Brand Reputation

Just by turning your PWA into an Android app, you are increasing your brand reputation! Users trust brands that are on multiple platforms and see it as more established, whether or not this is true for that brand is debatable. Definitely worth the $25 to get a Google developer license.

PWAs and WebAPKs

When Google added PWA support to Chrome on Android they added this cool feature called WebAPK. When a user clicks the “Add To Homescreen” button on the mobile browser, the Android operating system actually creates a special APK on the fly, sign and install it. This feature is powerful and can lead to easy accessibility for web apps now and in the future. When I first heard of this, I immediately went to work converting all of my web applications into progressive web applications. Thinking this is the pinnacle I told myself I bought my Android developer license for nothing I will just push installs this way; but then I found something better.

Android Trusted Web Activities

Android now has this cool new way of working with your PWA inside of your app called Trusted Web Activities. TWAs have a lot of benefits but my top two are:

  1. Content in a Trusted Web activity is trusted — the app and the site it opens are expected to come from the same developer. (This is verified using Digital Asset Links.)
  2. The content rendered in a Trusted Web Activity comes from the web: they’re rendered by the user’s browser, in exactly the same way as a user would see it in their browser except they are run fullscreen. Web content should be accessible and useful in the browser first.

Let’s say you already built your PWA and you need an Android application but you need to do some extra things that are beyond the current scope of web apis but everything else is in the PWA. Using Trusted Web Activites you can interact with your application and the native APIs provided by Android. The PWA has to come from the same developer who is creating the Android application and is done using Digital Asset Links. This is a file proves you are the owner and once you upload this file to your server, Google will verify. This ensures security and that you aren’t ripping off someone eles’s PWA for your own profit. Also by uploading an Android app that is based on your PWA you don’t have to worry about updates (as much). Once you update the PWA, your application will reflect those updates, thus reducing code time.

But wait….doesn’t that require me to first write an Android app that calls the TWA?

Yes however AUTOMATION BABY! There are tools that I use that make generate the source code and the APK so all I have to do is upload it to the Google Play Console as a new app. I never touch any Java/Kotlin code. I created a course that shows you how to take ANY non PWA web application and turn it into a PWA and APK in under 30 minutes! Expand your visibility and earn more income by diversfying your platforms!

Posted on Leave a comment

Writing A Real Time Location Service – Models and Migrations

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Overview

In this programming series I am going to show you how to create a real time Laravel app that shows the location of an android device on a Google map in real time. This design can easily be applied to iOS and I will cover it at a later date. This project will be constructed of three parts:

  • Laravel app that handles registration/login, saves coordinates and timestamps
  • Node Application that talks to Laravel application and android devices
  • Android application that talks to node application

In this post I will create the Laravel + Node apps and I will write the Android app at a later post. The Laravel app is a run down version of my new application SocketDroid, an application that allows you to control android devices from a web panel. click a button and alert the Android device to send geolocation information back to the server and push it to the browser. The application will store the geolocation information in a database for later analysis if you so choose (in a later post I will expand upon the admin panel). The Laravel app will communicate with the Node app via Redis using the built-in Event system. From there the Node app will communicate with our devices via Socket.io. The Android device will listen on a websocket connection in a background service and listen for an event to start grabbing and posting GPS data, and another event to stop listening. Make sense so far? Good, let’s get started!
 

Scaffolding The Laravel Application

If you have followed any of my Laravel tutorials in the past, you know the drill, create a new application, and scaffold the authentication routes and views:


laravel new real-time-gps
cd real-time-gps
php artisan make:auth

Now we have a basic Laravel application with registration and login logic established. Let’s talk about database design for a moment shall we? This application is going to have 3 really important tables they are:

  • Users (Already made for us be default)
  • Devices
  • Locations
  • ActivationCodes

A user can have many devices, a device can have many locations and belongs to one user, and a location belong to one device, that is the basic relationship structure. Activation codes are for you guessed it activating devices to use the app. Go ahead and create the relations and models for devices and locations using the following commands:


php artisan make:model -m Device
php artisan make:model -m Location
php artisan make:model -m ActivationCode

Device Model

Open up the devices migration file and add the following content to the up() function:


Schema::create('devices', function (Blueprint $table) {
$table->increments('id');
$table->string('uuid');
$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
$table->timestamps();
});

The only things we need to know about devices are who they belong to and what channel they are listening on. We also want to make sure that when a user account is deleted from the database, that all of their devices are also removed from the database.  Now open up the Device model (app/Device.php), there are three things we need to do with this model, the first is tell it which parameters to accept when inserting into the database. The second thing is to tell the model about its relation to the User model, while the third is to tell the model about it’s relation to the Location model. The finished version should look like this:


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Device extends Model
{
//
protected $guarded = [];
public function user(){
return $this->belongsTo('App\User');
}
public function locations(){
return $this->hasMany('App\Location');
}
}

The Device model and migration is now complete, now on to the Location model and migration.

Location Model

Open up the location migration file and in its up() function we are going to add the following:


Schema::create('locations', function (Blueprint $table) {
$table->increments('id');
$table->string('lat');
$table->string('long');
$table->integer('device_id')->unsigned();
$table->foreign('device_id')->references('id')->on('devices')->onDelete('cascade');
$table->timestamps();
});

Hopefully by now you understand what is going on, we are saving the lat/long acquired from the device, as well as its id. Using this information we can associate geolocations with independent devices. Next we will open up the Location(app/Location.php) model, tell it which properties to fill, and it’s relation to the Device model.


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Location extends Model
{
//
public $guarded = [];
public function device(){
return $this->belongsTo('App\Device');
}
}

User Model

The only thing we need to do the user model is make it aware of it’s new device relation open up the User(app/User.php) model and add the following function:


public function devices(){
return $this->hasMany('App\Device');
}

ActivationCode Model

The activation code model is responsible for storing the activation code given from the Android device on app installation to register the device with your account. It will take in the UUID of the device and the activation code, open up the migration file and add the following:


public function up()
{
Schema::create('activation_codes', function (Blueprint $table) {
$table->increments('id');
$table->string('uuid');
$table->string('code');
$table->timestamps();
});
}

Now open up the ActivationCode(app/ActivationCode.php) model and add the following:


<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class AuthCode extends Model
{
//
public $guarded = [];
}

That’s all that’s needed you can now run your migrations!


php artisan migrate

In the next lesson we will be creating the views and front end logic needed to visualize the devices on a Google map!