Monday, February 20, 2017

Building Web apps with R Language - Part 1

 R language is open source with a huge number of developers. It has a great arsenal of great stuff already accomplished. It is a language that you should get exposed to yourself. You just install R Gui and you are ready.


Shiny is an enterprise-grade web application framework targeted for those who want to develop with R using the familiar HTML5, CSS and JavaScript. Using R you can turn terrific analytic solutions you have developed/developing into interactive web applications.

Go to this site (https://shiny.rstudio.com/) directly and learn more.

 
Rshiny-00

If you have R Studio you have Shiny because Shiny is a package that you can download.

In this first part we only talk about the very basics.

I assume you have read my previous hands-on R examples in my blogs.

http://hodentekhelp.blogspot.com/2015/09/what-is-good-way-to-learn-r-language.html
http://hodentekhelp.blogspot.com/search?q=R+language

Here I just show a very basic (aka Hello World) example of creating content for a web page using R GUI. More will come later in my blogs.

Launch R Gui as shown and provide reference to the shiny "library" as shown by typing in the three lines of code (The four lines of code in red).


 HelloWorld_00

When you hit Enter after the third line where you define the shiny app, a browser window will open as shown displaying the apps output as shown at a port of the local host.



HelloWorld_01

You also get a response (the last line) in the R GUI as shown.




HelloWorld_02
That is all there is to create a content.

The ui summarizes your user interface, the server is something like a web server and shinyApp is your web response. No fuss, very simple.

Friday, February 17, 2017

Before you create a database based app on Appery.io read this

In creating a mobile app based on back-end data in Appery.io, server code that accesses a collection can be used as shown here.

In this post we start with a collection we created by importing a CSV file, FFD.csv.

We now create a Server Side script to access this collection.

In the appery.io platform  click on Server Code tab to open the user interface as shown.  In the script editor there may be some default code. Remove this script.



ApperyIO7_00.PNG

From the Snippets side click and add Retrieve all Objects. This inserts a line of code into the editor as shown below:

var result = Collection.query("dbId", "collectionName"); 

You need to insert correct values for the arguments. The JsonTest was the database in which the imported collection was saved. The imported CSV file was named as a collection with the name 'Custo'. The dbId parameter was found from the Settings tab for the JsonTest database


ApperyIO7_02.PNG

If the script is properly formulated you could Run the script. If there are errors you would see it in Trace info.

ApperyIO7_03.PNG

After the first line of code click return for a new line. In the Script Editor add another line of code to appear below the first line. For this choose the snippet, responseSuccess.

This inserts this code:

Apperyio.response.success({"param1":"value1"}, "application/json");

Modify this code as shown below:

Apperyio.response.success(result, "application/json");

Click Save.



ApperyIO7_05.PNG

Click Save and Run. You should the response to the script in the panel as show below.


ApperyIO7_06.PNG

Monday, February 13, 2017

Building a jQuery Mobile App with back-end data using Appery.IO

Apps without data are not very useful. 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) 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!

.

Thursday, February 9, 2017

Importing sample text into Appery.io

Web based appery.io has both front-end designer as well as back-end database support for both relational and NoSQL databases. The front-end can be used to create mobile apps, both web and hybrid applications. For creating a simple app to look at data from the back-end, a sample data can be prepared by importing a text files saved as a CSV file.

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

Using a relational database with Apppery.io

In a previous post creating a back-end NoSQL database on the Appery.io platform was described. Herein attempting to connect to a SQL Server 2012 is described.

It is quite straight forward connecting to a relational database.

Here is the procedure described on the site:

Login to the Appery.io site and click on API Express tab.

ApperyIO3_0.PNG

The API Express page opens as shown.


ApperyIO3_1.PNG

In this case we just make a connection to SQL Server 2012. Make sure you have started SQL Server from Windows Services panel.

Click Create new DB connection.
The New connection page is displayed.


ApperyIO3_2.PNG

Provide a Name and click Create. It looks like you can also connect to a backup.
Page related to the connection name you provided opens (herein SQL2k12).



ApperyIO3_2.PNG

Fill in all the fields needed to make connection.

Connection name: SQL2k12
Connection type: Relational database (the other option is appery.io database)
Database type: SQL Server
Host: Hodentek\RegencyPark
Port: 1433 (default)
Database name: Northwind
database schema: dbo
username:
password:
Pool Settings:  accept defaults

Click Test.

Connection fails with the message credentials not accepted. However the SQL Server is running and the authentication information is correct.

Although Appery.io is supposed to connect to SQL Server, it appears the support for named instance is in the works at this point. However, it can connect to an Azure SQL Database and other relational databases such as MySQL. While conneting to a database on the web appears to be straight forward, connecting to a database server behind a router requires (local Network)  tweaking of the connectivity to the Internet.


Saturday, February 4, 2017

Creating a back-end database with Appery.io

Apps with database back-end are at the center of enterprise applications. Appery.io provides means to create a database as well as work with many other databases as well.

In this post the procedure to create a simple database followed by adding a column and couple of columns is described. In so far as database is accessed by client using server side code, the Appery.io's interface is used to create server side code and testing it using the same interface,

You can start here if you like. You may have to insert your credentials.

https://appery.io/database/

This opens the Appery.io page as shown.



ApperyIO2_0

 Creating a database:

Click Create new database.
 In the Create new database window provide a name such as the one shown and click Create.

 ApperyIO2_1

After a little while you should see this web page.

 ApperyIO2_2

Creating a Collection:
Jay4_2017 database data will be held in a Collection.
Click Create new collection.



ApperyIO2_3.PNG

Enter a name for the collection, say Goods and Click Add.

The Collection page for Goods is displayed as shown.


 ApperyIO2_4.PNG

The new collection has a user interface for adding,deleting, columns, rows and editing them

Creating a Column:

Click +Col to display the Add new column dialogue as shown.

ApperyIO2_5.PNG 

For Name enter Item and keep Type as string. You can also choose any of the other available type.

ApperyIO2_6

Click Create column.

Column gets created as shown. The collection has no data but has a column named Item.

 ApperyIO2_7

Populate the column with data by adding a row:
Click +Row 
 ApperyIO2_8

The pages is refreshed to show an interface to add a row. For item field insert Cold drink. Click +Row to add more columns.

 ApperyIO2_9

 This is all for now. The database has one column containing 3 rows of data of type String.
The database is accessed by clients using Server Code.

This is how you create server code:

Click Server Code button to open the interface as shown.

 ApperyIO2_10


Presently there are no scripts. Click Create script button to open the following page:


 ApperyIO2_11

Provide a name for the script- loadGoodsScript

 ApperyIO2_12

Click Save.

Under Snippets on the right hand side locate retrieveAllObjects as shown.


 ApperyIO2_13

 Click insert to insert the snippet (template code) as shown (you may have remove the existing code in the script editor).

 ApperyIO2_14

dbId and collectionName are place holders and you need to find these to provide.
Click Save.

Finding dbID:

Go to Database and click Jan4_2017 database. In the Databases page locate Settings as shown here.

 ApperyIO2_15

 Click Settings.

Database settings will be open as shown.

ApperyIO2_16 

Read the Session expiration information.
copy the API keys
APIKey: xXXXXXXXXXXXX

The loadGoodsScript should appear as shown.


ApperyIO2_17 

Insert responseSuccess snippet from Snippets. The script editor should appear as shown.


 ApperyIO2_17b

Click Save.

You are ready to test the database.

Testing the Collection:

In the Server Code page click Save and Run  and return. You get the following response.


 ApperyIO2_18

It returns the entire collection in JSON format as shown above.