Friday, February 24, 2017

Web page static elements using R Studio

We have seen that R Studio can be used to create Web Page using the 'Shiny' package. One of the first things to do is to create web content in HTML that can be rendered n a browser.

You can use a HTML wrapper function or use the individual wrapper functions of the various tags in formatting a web page. In most of the examples you can directly copy the code and paste it into the R studio console.

Here is an example of how you may wrap with HTML:

library(shiny)
ui <-fluidpage br="">  HTML("

Test

")
)
server <-function br="" input="" output="">
shinyApp(ui=ui, server=server)


This is how it gets rendered.


Static_00

In the following there are few more tags that are frequently used. I will try to get all of them in future posts.

Here are the tags a, h1 and br.

library(shiny)

ui <-fluidpage b="">a
(href="http://hodentek.blogspot.com",h1("Hodentek")),
               br(),a(href="http://hodentekMSSS.blogspot.com",
                      "Hodentek SQL Server Blog"))
server <-function br="" input="" output="">
shinyApp(ui=ui, server=server)

Static_01

Here are the tags h1 through h6, em and p:

library(shiny)
ui <-fluidpage br=""> h1("First Level"),
  h2("Second Level"),
  h3("Third Level"),
  h4("Fourth Level"),
  h5("Fifth Level"),
h6("Sixth Level"), p("some text"),em("italicized")
)
server <-function br="" input="" output="">shinyApp(ui=ui, server=server)


The rendered page is as shown:


Static_02

Look forward more of R Studio stuff here or 
here.







Workaround for this error in R Studio

You started your learning and some times you encounter this error in your RStudio console:

ERROR: [on_request_read] connection reset by peer
 
What are you going to do? 

What is described here is not a complete fix (unless you want to change your default browser)but a possible explanation of what is happening. It is most probably related to RStudio using the Microsoft Edge in Windows 10 operating system.

There are three modes that you can run to display in a viewer. This are shown in this image here:


ShinyError_000.png

Run in Window mode:

Run in Window opens a window ~ -Shiny as shown and runs the highlighted code to display the result.


ShinyError_00.PNG

Notice that the tab that is open is http://127.0.01:6170. Now if you change over the tab to 'Open in Browser', Microsoft Edge opens displaying the same URL. Now if you close the browser you see the error messages as shown. I am not sure why it repeats so many times.


ShinyError_02.PNG

However, if you copy the URL (http://127.0.0.1:6170) and paste it into a Firefox browser you will see 'Hello World' displayed again. But if you close this browser, no error is reported in RStudio console.

Hence in Run in Windows mode you can get away without producing error and stopping by pasting the code in Mozilla Firefox (assuming you want to see it in a browser).

Run External:

In this mode the Run result is displayed in the external browser which happens to be Microsoft Edge and you cannot avoid the error. Of course the code runs and displays the result but when you close the browser the error crops up in the console.

Run in Viewer Pane:

Viewer pane is one of the panes of RStudio. When you run the code in this mode the result will be displayed as shown.

The error crops up immediately as shown.


ShinyError_04.PNG

You need to click the Stop button to return to console prompt.

You can avoid this problem by choosing Mozilla Firefox as your default browser.


ShinyError_05.PNG

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.