Ryan Harijanto I have developed few mobile apps throughout my career. Some are native apps, some are hybrid apps.
Native apps are apps written using the target platform’s native programming language. For example, Objective C and Swift for iOS; Java for Android.
Hybrid apps are apps that are written using a different language than then target platform’s native programming language. Examples: Cordova, PhoneGap, Ionic Framework, React Native, Appcelerator Titanium, Sencha Touch, Adobe AIR, jQuery Mobile, and many more.
One of the biggest challenges my team faced while developing hybrid apps is not having the ability to view runtime logs produced by our application. Not all hybrid platforms/IDE offer the ability to stream application logs back to the developer.
VorlonJS
The folks at Microsoft made an awesome tool called VorlonJS. VorlonJS captures all the console.log()s and other outputs then stream all the data back for developers to view in a convenient dashboard.
Installation
Getting started is easy!
1. Setup your own instance of VorlonJS
One of the easiest way is to use Microsoft Azure by clicking the Deploy on Azure button on VorlonJS’ Github Repo page:
You will then be redirected to this page:
Click Next, then Next again. You will receive the URL for your own VorlonJS installation.
If you need to activate your Azure subscription:
- Visit the Subscriptions center
- Click the
button - Select Pay-As-You-Go.
- Complete the form
- Logout, log back in, retry step 1 (click the “Deploy on Azure” button on Github)
2. Insert the javascript tag into your hybrid application
Insert this tag in the <head> tag of the html files of your hybrid application.
The javascript tag can be found on the front page of your VorlonJS installation:
Into your HTML page:
3. Run your application and begin seeing logs on Vorlon.JS!
What you can do with Vorlon.JS
Using VorlonJS with with multiple people or projects
You can append an arbitrary identifier to separate one Vorlon “Session” from another. By adding “/ryan” to the end of the script tag src:
<script src="https://YOURSITE.azurewebsites.net/vorlon.js/ryan"></script>
the data is now only viewable at
https://YOURSITE.azurewebsites.net/dashboard/ryan
This is a good way to use the same VorlonJS installation with multiple people or projects. This method separates different VorlonJS sessions so your dashboard does not appear cluttered.
In my own team, the convention for session identifier naming is username-projectname. If my username is ryan and the project name is helloworld, then my VorlonJS session identifier becomes ryan-helloworld.
Happy debugging!
Never miss new posts
Get the latest tech innovation news from Ryan delivered straight to your inbox!
Ryan Harijanto
Head of Engineering. Former Sr. Engineer @Netflix , @HotelTonight , @Shutterstock. Previously a Senior Systems Engineer at Netflix, currently technology advisor and board member for emerging companies. Diverse technological knowledge and understanding of various industries.
%20Mobile%20Applications%20with%20VorlonJS){kind=link}