Cross-Plat­form Mo­bile App De­vel­op­ment Us­ing the Me­teor Frame­work

To­day, the In­ter­net is be­ing ac­cessed more via the mo­bile phone rather than desk­top plat­forms. How­ever, the mul­ti­plic­ity of de­vices and plat­forms makes app de­vel­op­ment on mo­bile phones a dif­fi­cult and ex­pen­sive task. The so­lu­tion to this prob­lem lies in u

OpenSource For You - - Contents - By: Dr Gau­rav Ku­mar The au­thor is the MD of Magma Re­search and Con­sul­tancy Pvt Ltd, Am­bala. He is as­so­ci­ated with var­i­ous aca­demic and re­search in­sti­tutes, where he de­liv­ers lec­tures and con­ducts tech­ni­cal work­shops on the lat­est tech­nolo­gies and tools. Y

There are so many plat­forms and op­er­at­ing sys­tems for mo­bile phones avail­able in the global mar­ket to­day that in­ter-de­vice in­stal­la­tion and the com­pat­i­bil­ity of mo­bile apps has turned into a huge chal­lenge. Most of the Web based ser­vices for bank­ing, billing, so­cial me­dia, ed­u­ca­tion, games, ad­min­is­tra­tion, gov­er­nance, etc, are avail­able as mo­bile apps for dif­fer­ent mo­bile plat­forms. So a prime chal­lenge is to de­velop apps that can run on mul­ti­ple mo­bile op­er­at­ing sys­tems (OSs).

Dif­fer­ent mo­bile OSs func­tion on di­verse pro­gram­ming par­a­digms with their own soft­ware de­vel­op­ment kits (SDKs) in­clud­ing An­droid, iOS, Black­Berry, Win­dows, MeeGo, Sym­bian, Tizen, Bada, we­bOS, Fire­fox OS, Palm OS,

Sail­fish OS, ZenUI, MIUI, HTC Sense, LineageOS, EMUI, Cyanogen, and many oth­ers. All these op­er­at­ing sys­tems have their own pro­gram­ming model, struc­ture and ar­chi­tec­ture.

Porta­bil­ity as well as com­pat­i­bil­ity of mo­bile apps on all these op­er­at­ing sys­tems is a chal­lenge. In the cur­rent sce­nario, the de­vel­op­ment of a sin­gle mo­bile app that can run on all these op­er­at­ing sys­tems is very ex­pen­sive, be­cause for each op­er­at­ing sys­tem there is a dif­fer­ent pro­gram­ming lan­guage and script­ing tech­nol­ogy. A mo­bile app de­vel­oped us­ing the An­droid SDK can­not be ex­e­cuted on Black­Berry, Sym­bian or any other op­er­at­ing sys­tem. For this rea­son, there is a need to de­velop mo­bile apps us­ing cross-plat­form pro­gram­ming ap­proaches.

There are many pro­gram­ming lan­guages and tech­nolo­gies that can be used to de­velop cross-plat­form mo­bile apps. These plat­forms have ex­cel­lent fea­tures to help you code us­ing the ‘Write once, use any­where’ strat­egy, which means that the mo­bile app will work on all mo­bile de­vices ir­re­spec­tive of the OS and ar­chi­tec­ture. De­vel­op­ers are now cre­at­ing apps that can be launched on any mo­bile OS with­out any com­pat­i­bil­ity and per­for­mance is­sues.

Phone Gap, Ac­cel­er­a­tor, Xa­marin, Sen­cha Touch, Monocross, Co­de­name One, Kony, Con­ver­tigo, Na­tive­script, RhoMo­bile, iFactr, FeedHenry, Co­cos2d, Unity 3D, Corona, Qt, Al­pha Any­where 5App, etc, are all tools for cross­plat­form mo­bile app de­vel­op­ment.

Free and open source tools for cross-plat­form mo­bile app de­vel­op­ment

There are a num­ber of plat­forms and tech­nolo­gies that help to de­velop cross-plat­form mo­bile apps, but many of them are pro­pri­etary. Thank­fully, there are suf­fi­cient free and open source tools avail­able, us­ing which a cus­tomised mo­bile

app can be de­vel­oped and de­ployed as per the func­tions and fea­tures re­quired.

Some prom­i­nent open source tools for cross-plat­form app de­vel­op­ment are:

• Me­teor

• Apache Cor­dova

• Ap­pcel­er­a­tor

• Qt

• Xa­marin

In this ar­ti­cle, we look at how to use the Me­teor frame­work for de­vel­op­ing apps.

Me­teor

Me­teor is a JavaScript based Web frame­work for mo­bile app de­vel­op­ment. Its URL is https://www.me­teor.com, and the cur­rent ver­sion is 1.4.

Me­teor or Me­te­orJS is a free and open source frame­work writ­ten in C, C++ and JavaScript. The source code repos­i­tory of Me­te­orJS is avail­able on https://github.com/me­teor/me­teor. The de­vel­op­ment of code for mo­bile apps can be done eas­ily in the JavaScript pro­gram­ming model.

Me­teor fol­lows the re­ac­tive pro­gram­ming model, in which the client ap­pli­ca­tion/browser is not only used to dis­play the data, but the re­ac­tions on real-time changes and up­dates are also done in par­al­lel. Me­teor es­ca­lates the per­for­mance of the mo­bile app as it works in real-time, by de­fault.

Mo­bile apps for dif­fer­ent OSs in­clud­ing An­droid, iOS and many oth­ers can be de­vel­oped us­ing Me­te­orOS. This frame­work has ex­cel­lent fea­tures to in­te­grate Mon­goDB for Big Data and high per­for­mance com­put­ing in mo­bile ap­pli­ca­tions.

In­stal­la­tion of Me­teor on Linux/OSX

To in­stall Me­teor on Linux/OSX, give the fol­low­ing com­mand: $ curl https://in­stall.me­teor.com/ | sh

The above com­mand per­forms the fol­low­ing tasks:

1. Con­nects with in­stall.me­teor.com.

2. Down­loads the lat­est sta­ble re­lease of Me­teor.

3. In­stalls the re­quired Me­teor ver­sion.

In­stal­la­tion of Me­teor on Win­dows

The in­stal­la­tion of Me­teor in Win­dows is quite straight­for­ward. Sim­ply down­load the in­staller from https:// in­stall.me­teor.com/win­dows. The in­stal­la­tion wiz­ard will in­stall the Me­teor frame­work.

Once the Me­te­orJS frame­work is in­stalled, the ver­i­fi­ca­tion of the in­stalled ver­sion can be done us­ing the fol­low­ing com­mand:

PathToMe­teor\> me­teor --ver­sion

The fea­tures of Me­te­orJS are:

ƒ Cross-plat­form na­tive mo­bile app de­vel­op­ment. Gen­er­a­tion of apps for mul­ti­ple work­ing en­vi­ron­ments in­clud­ing Web browsers and mo­bile plat­forms. Enor­mous pack­ages are avail­able for dif­fer­ent types of func­tions and mod­ules.

In­te­gra­tion of Me­teor Gal­axy for com­pat­i­bil­ity with the cloud.

The apps cre­ated us­ing Me­teor work in real-time, as de­fault.

The pro­gram­ming struc­ture of JavaScript is re­quired for both client side as well as server side de­vel­op­ment.

Cre­at­ing apps us­ing Me­teor

To cre­ate a new app in Me­teor, the com­mand me­teor cre­ate is ex­e­cuted in the in­stal­la­tion folder.

To cre­ate the app, run the me­teor cre­ate com­mand from the com­mand prompt. Any name can be as­signed to the app.

PathToMe­teor>me­teor cre­ate FirstMe­te­orApp

Run­ning the app

In the app folder, the com­mand me­teor is ex­e­cuted as fol­lows: FirstMe­te­orApp >me­teor

Out­put

Started proxy.

Started Mon­goDB

Started you app.

App run­ning at: http://lo­cal­host:3000/ Type Con­trol-C twice to stop

The re­sults of the app can be viewed on the Web browser at the URL http://lo­cal­host:3000/.

Tags and lev­els in Me­teor

There are three tags in Me­teor—head, body and tem­plate. These are used to in­te­grate HTML and JavaScript.

MyMe­te­orApp.html

<head>

<ti­tle>MyMe­te­orApp</ti­tle> </head>

<body>

<h1>Me­teor Pro­gram­ming</h1>

{{> myAp­pPara­graph}}

</body>

<tem­plate name = “myAp­pPara­graph”>

<p>{{my­text}}</p>

</tem­plate>

MyMe­te­orApp.js if (Me­teor.isClient) {

// Code for Client-Side Tem­plate.myAp­pPara­graph.helpers({

my­text: ‘Hello to All’

}); }

Us­ing forms and get­ting dy­namic user data

The form el­e­ments are cre­ated in the HTML page, as fol­lows:

me­te­orForm.html

<head>

<ti­tle>me­te­orForm</ti­tle>

</head>

<body>

<div>

{{> myFor­mTem­plate}}

</div>

</body>

<tem­plate name = “myFor­mTem­plate “>

<form> Name <in­put type = “text” name = “UserForm”> <in­put type = “sub­mit” value = “Click Here”> </form>

</tem­plate>

The JavaScript code is in­te­grated with sub­mit event, as shown be­low:

me­te­orForm.js if (Me­teor.isClient) {

Tem­plate. myFor­mTem­plate.events({

‘sub­mit form’: func­tion(event){ event.pre­ven­tDe­fault(); var my­text= event.tar­get. UserForm.value; con­sole.log(my­text); event.tar­get.UserForm.value = “”; } }); }

Ses­sions han­dling in Me­teor

Ses­sions are used to store the data when the app is in use.

The va­lid­ity of this data is tra­di­tion­ally up to the brows­ing of the app by the user. Once the user leaves the app, this data is re­moved with the de­struc­tion of the ses­sion.

In Me­teor, ses­sions han­dling is easy to in­te­grate us­ing the ses­sion ob­ject and, fi­nally, re­turn­ing the stored data:

me­te­orSes­sion.html

<head>

<ti­tle>me­te­orSes­sion</ti­tle> </head>

<body>

<div>

{{> myMe­te­orTem­plate}}

</div>

</body>

<tem­plate name = “myMe­te­orTem­plate”> </tem­plate>

To store the data, the Ses­sion.set() method is used. The Ses­sion.get() method can be called to re­trieve the stored data in the ses­sion, as fol­lows:

me­te­orSes­sion.js

if (Me­teor.isClient) { var mySes­sionData = { mykey1: “Pa­ram­e­terValue1”, mykey2: “Pa­ram­e­terValue2” }

Ses­sion.set(‘myMe­te­orSes­sion’, mySes­sionData); var my­ses­sion­dat­a­log = Ses­sion.get(‘myMe­te­orSes­sion’); con­sole.log(my­ses­sion­dat­a­log); }

On ex­e­cu­tion of the scripts, the log of stored data can be viewed:

Ob­ject{mykey1: “Pa­ram­e­terValue1”, mykey2: “Pa­ram­e­terValue2”}

Ex­tend­ing Me­teor with smart pack­ages

Me­teor apps can be in­te­grated with a num­ber of APIs and smart pack­ages to ex­tend the ex­ist­ing fea­tures. Me­teor smart pack­ages can be down­loaded with the re­lated in­stal­la­tion in­struc­tions from https://at­mo­spherejs.com.

The main rea­son for adopt­ing and work­ing with Me­te­orJS is that de­vel­op­ers can code the en­tire app in one lan­guage, which is JavaScript. While in other plat­forms the in­te­gra­tion of mul­ti­ple lan­guages may be re­quired, this is not an is­sue in Me­teor. In ad­di­tion, the apps de­vel­oped in Me­teor are in real-time and based on the re­ac­tive pro­gram­ming model, by de­fault; so they work in high per­for­mance mode with­out any de­lays. A num­ber of smart pack­ages and mod­ules are avail­able with Me­teor to in­te­grate Google Apps, Face­book, Twit­ter and other plat­forms with­out any com­plex­i­ties.

Fig­ure 2: In­stal­la­tion Web page of Me­teor

Fig­ure 3: In­stalling Me­teor on Win­dows

Fig­ure 1: Web page of Me­teor or Me­te­orJS

Fig­ure 4: Dis­play­ing the out­put us­ing Me­te­orJS

Fig­ure 5: Dis­play­ing the form out­put us­ing Me­te­orJS

Fig­ure 6: Ex­plor­ing At­mo­sphereJS for pack­ages of Me­teor

Fig­ure 7: Search­ing the pack­age for Twit­ter ac­counts on At­mo­sphereJS

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.