jQuery based mobile app with back-end data using Appery.io

Apps without data are not very useful and for Enterprise mobile apps it is a must. Appery.io provides a platform to build apps with ease. Integrating with back-end data is as easy.

The example in this post is the same as the example at Appery.IO site although some names are different. You may find more details (screen shots) here than at the Appery.io site.

Here are steps to create apps which takes in data from the database.

Creating the App
Designing the APP UI
Import the Server Code script 
Mapping the Service to the UI
Invoking the Service
Testing the app 

Go to Apps on Appery.io platform. Create a new App called Bigbox.

 
ApperyIO5_00

Choose new blank template using jQuery Mobile in Create new app window.

ApperyIO5_01.PNG

Bigbox project page opens.
-------------

Designing the APP UI

Click Open Pages and click on startScreen.

 
ApperyIO5_03.PNG

The startScreen header is now reading Caption, the same in the Properties -Header window as shown.

ApperyIO5_04.PNG

Change Caption to My App in the Proprieties - Header. The startScreen header also changes.

Drag and drop List from the PALETTE to the startScreen which now appears as shown.

ApperyIO5_05.PNG

As seen above, the List component comes with 3 list items. Since the database is loaded to the list item, you need only one list item and the other two are not needed.

In the bread-crumb of UI above click on mobilecontainer

In the Properties - List shown here.




ApperyIO5_06.PNG

Change Items from 3 to 1 and click Apply. Now two of the Link items disappears from the startScreen.

You can also remove the icon for the List. Click on Buttons Icon and choose No Icon. 

ApperyIO5_07.PNG

Now the > icon is gone.

With this the UI is done.
The final design of UI is as shown.

ApperyIO5_08.PNG
------------------------
Import the Server Code script

Click Create New > Back-end Services > Server Code Service

ApperyIO5_09.PNG

Choose your script in the Import Server Code service as shown.

ApperyIO5_10.PNG

Click Import selected services.

The Services node in the Project folders gets the loaded service.

ApperyIO5_11.png

Click Test link on the left in the tabbed page loadGoodsScript_service.
 

ApperyIO5_12.png

Click Test button far right in the Response pane.

The Response pane gets populated with data from the back-end database as shown.

ApperyIO5_13.png

The above is the JSON response from the database replying to your request. Now port this response to your app by clicking Import as Response button.

You have successfully created the Service response.

ApperyIO5_14.png
---------------------------------
Mapping the Service to the UI:
This step involves associating the database items to the UI elements.

Go to startScreen and click  open the Data view.

ApperyIO5_15.png

Choose Service in the first drop-down box, the second automatically changes as shown.

ApperyIO5_16.png

Click Add and the UI changes as shown.

ApperyIO5_17.png
The Before Send events are not relevant and you can remove the Mapping button for the Before Send event.

For the Success event click the Mapping button.  Mapping items from Service to the App is opened as shown.

ApperyIO5_18.PNG

Map the items as shown by joining the items shown with your mouse.

ApperyIO5_19.PNG

Click Save and return at the right hand side of Mapping Editor.

The Data now looks like this.

ApperyIO5_20.PNG

Invoking the Service

Click DESIGN to open the Design View

Select startScreen in page bread crumbs

Open Events tab

ApperyIO5_21.PNG

For the EVENT choose Page show from this drop-down list.

ApperyIO5_22.PNG

For the ACTION choose Invoke service

ApperyIO5_23.PNG

Click Save.

Testing the app

Click Test at the top.

App gets launched as shown

ApperyIO5_24.PNG

In the Apps page you can see the details of this app.

ApperyIO5_25.PNG

That is all folks!

.

Get ArcGIS Explorer Desktop for free

ArcGIS stands for Geographic Information System. Using this you can work with maps and geographic information. You can use map data; analyze data in maps and you can share this data. You can also manage geographic information in a database.

ArcGIS_0.png

You can get the ArcGIS Explorer for free from here:
http://www.esri.com/software/arcgis/explorer-desktop

This is supported on the following platforms not including Windows Servers:

Windows 10 Pro and Enterprise (32 bit and 64 bit [EM64T])
Windows 8.1 Pro and Enterprise (32 bit and 64 bit [EM64T])
Windows 8 Pro and Enterprise (32 bit and 64 bit [EM64T])
Windows 7 Service Pack 1 Ultimate, Professional and Enterprise (32 bit and 64 bit [EM64T])

You will need:
Microsoft .NET Framework 3.5 Service Pack 1

ArcGIS has lots of capabilities when it comes to geographical data. Here it are some summarized from the ArcGIS site:

• It is a mapping and analytics platform
  Provides spatial analytics-
   Spatial analytics is the heart and soul of ArcGIS. You use it to find the best location for your business, plan for smarter communities, and prepare or respond faster in crucial situations.
  Mapping and Visualization
  Provides 3d GIS
  Real-time GIS
  Imagery and remote sensing
  Data Collection and Management

City of Seattle with ArcGIS can be seen in this video:


Download the following:

ArcGISExplorerDownload.exe (245549KB)

Run the executable file and the program finishes installing after three screens. Now you install accepting the license terms.

A 32bit ArcGIS Desktop Explorer will be added. When you try to launch it you may get a Kml File association message. Click to associate.

ArcGIS Desktop Explorer opens with My Default page as shown.

The ESRI site also has a tool to verify whether your computer has all the required items to run the ArcGIS Desktop Explorer. When run on my computer this is what the program discovered.

Importing a CSV file into an Appery.io Collection

Appery.io supports importing data files in CSV or JSON formats. In this post you will learn the procedure to import a CSV text file.

The file we are going to import is FFD.CSV saved on the files/folders of the local computer which has been imported recently into other data sources such as MS Access 2016 here and here; SAP SQL Anywhere 17; and Power BI. The data file is created by exporting the data from a Query on SQL Server 2012 using the Export/Import Wizard.

Log in to Appery.io and Click on Databases tab.

ApperyIO4_0.PNG

There are already two databases under my account. Click Create new database.

Create new database window appears. Insert name, herein it is Jan8_2017.

ApperyIO4_1.PNG

Click Create and the database is created as shown. The database is empty and has no collection.

ApperyIO4_2.PNG

Importing a collection: A Collection in Appery.io is like a table in a relational database.
Now we can either create a collection or import one.

Since we are importing the data we click on the link, import a collection.

The Import data screen is displayed as shown. Provide a name for this collection - SQLServerData. Click on Browse... and locate the file FFD.CSV on your computer.

ApperyIO4_4.PNG


Click Import.
Data in the FFD.CSV file is now in the appery.io collection in the database Jan8_2017

ApperyIO4_5.PNG

Note that some of the letters in the ProductName came with a ? mark as these are not characters in the English language set.

Here is a sample of the data in the FFD.CSV file

ApperyIO4_6.PNG







http://hodentekmsss.blogspot.com/2017/02/importing-csv-text-file-into-ms-
access.html
http://hodentekmsss.blogspot.com/2017/02/importing-text-file-into-ms-access.html
http://hodentekmsss.blogspot.com/2017/01/importing-csv-file-into-sapss-sql.html
http://hodentekmsss.blogspot.com/2016/12/report-based-on-text-file-using-power-bi.html

Start developing a ionic mobile app with Appery.io Cloud Platform

In my previous post, I described some details of the Appery.io platform for developing hybrid and web apps.

In this post, I show details of creating a mobile app and viewing it on iPhone 6S. The details are also available on the Appery.io site but here in you will get to see the step by step screen shots.

If you have followed my posts on Intel XDK (http://hodentekmobile.blogspot.com/search?q=intel+xdk) , you will have no trouble in following this post. With Intel XDK not supporting some of the editing features Appery.io editor seems to fill in the void. I will explore it a little further to see how far this is taken.

First come first.

You need to first sign up here:
https://appery.io/account/signup

Go to your email and confirm your account. Once you have the account you can build.

Go here to get to the developer platform:

https://appery.io/app/projects

Click on Apps. I have found the server to be very slow and you may have to wait a considerable time.



You may get error messages regarding this.




Click Create New App.



Provide a name for the app after choosing IONIC (do you see the similarity to Intel XDK?). Appery.io uses 3 of the discontinued frameworks in Intel XDK.

Your project is created with necessary folders etc. as shown.



Click on Pages | Index



The DESIGNER is opened as shown above. Change the Header text as shown in Properties|Header on the right. It is immediately changed in the DESIGNER.



Click on Screen1 as shown below.






 Now you are working in the body of the app.

Now drag and drop a CARD from the PALETTE. Change the Header to read Hello World Ionic in the Properties - Card ITEM as shown. |



For the Item text of the field we create a link to a variable. Click on the SCOPE.

 

In the Enter variable name type in a variable message. This gets entered into the program as 'message' of type String as shown.

 

 Click Functions and enter Init. It has no arguments.
 

Click on Edit to open the interface shown.

 You are now going to write the details for the function as shown. You can see the options available for you. Click message.
Complete the code: $scope.message=""; //My First Ionic app. That was easy";

Click save after completing $scope.message

Open the DESIGNER to complete the Item text which is now just a place holder.

 

Highlight Item text field in DESIGNER and in the properties insert {{message}} in its place as shown. The binding of the field to the variable is now complete.



Test the app
 It is built in click on Test to open a new window with your app getting displayed. You can choose Portrait|Landscape as well as three different foot prints as shown.



At this point you can share this or view it on your phone. For viewing on the phone you need to download a viewer app from Google Play / Apple Store. The app as (appery.io tester) seen on Apple Store is shown here. Download the app to your phone. It seems to respond faster than Intel XDK app viewer.




Launch the app and provide the username / password that you used to register for appery.io and your app will be displayed. Double click on the app and the contents will be displayed as shown.

Developing mobile apps, check out Appery.io

It is a cloud based mobile app developer platform with full back-end support. You can build both hybrid as well as web apps with API support. The apps (iOS / Android) run in the browser using appery.io's visual App Builder.

Apps built using appery.io communicate with server / back-end that consists of:

Database
Server code
API Express- a tool exposing enterprise databases such as SQL Servers via REST APIs
Support sending push notifications.

Before installing on the device you can even test using the Appery.io Tester app.

This video shows platform features:



There is free trial you may want to sign up. Once signed in you will have a dashboard which has all of these:

    Apps
    Databases
    Server Code
    API Express
    Plugins
    Resources
    Account

Here are some example apps (covers most of the common ones you may be interested in) that you may want to peruse before working on your own.

    Weather API and Geo-location App.
    Ionic Components Example.
    Clickable List App.
    Create-Read-Update-Delete App.
    Todo App.
    Login-Registration App.
    Picture Upload App.
    Charts App.
    Email with SendGrid.
    SMS with Twilio.
    Email with Mailgun.
    OAuth Login with Google App.
    Stripe Payment App.
    Facebook App.
    PayPal App.
    Barcode Scanner with Database App.

Well, to test it out is free and it does not hurt. Why not test drive and see for yourself.