Wyzpubs http://www.wyzpubs.com/wp Mobile, Content and Analytics Solutions Fri, 13 Oct 2017 01:03:36 +0000 en-US hourly 1 http://i0.wp.com/www.wyzpubs.com/wp/wp-content/uploads/2014/12/WyzLogo3-548e1983_site_icon.png?fit=32%2C32 Wyzpubs http://www.wyzpubs.com/wp 32 32 Interactive Google charts for reservation apps http://www.wyzpubs.com/wp/2016/04/14/interactive-google-charts4-reservation-apps/ http://www.wyzpubs.com/wp/2016/04/14/interactive-google-charts4-reservation-apps/#respond Thu, 14 Apr 2016 23:15:09 +0000 http://www.wyzpubs.com/wp/?p=764 It is possible to create much richer visualizations of data that is captured via an AppSheet app. In this post, I will describe the case for why it can be beneficial in the context of our latest project where we are working with a Golf Car Rental company who have many types of golf carts […]

The post Interactive Google charts for reservation apps appeared first on Wyzpubs.

]]>
It is possible to create much richer visualizations of data that is captured via an AppSheet app. In this post, I will describe the case for why it can be beneficial in the context of our latest project where we are working with a Golf Car Rental company who have many types of golf carts that they rent out. A customer can call the rental company and request (up to the maximum number of available carts) 8 different types of carts (standard or 2 passenger, four passenger, six passenger and utility) which may either be Gas or Electric for any length of time. Sometimes the bookings are made up to a year in advance by clients and it is hard for the owners to forecast if they are going to be in short supply of a certain type of cart in their inventory.

A typical booking view in a spreadsheet may look as shown in the graphic below.  There are 8 cart types that are tagged as SE, SG, FPG etc.

Screenshot 2016-04-14 15.00.29

While this table can be easily turned into an app, the issue of how best to view the bookings over a given period of time and how best to know how many carts of a given type would be available in order not to end up overbooking became an interesting challenge to do within the app. There were three main challenges:

  1. How to visualize the above tabular data as more of a timeline?
  2. How to shape the booking data into a table where the number of carts booked (or available) every single day can be depicted as a line or bar chart?  (Note: one can create bar and line charts in AppSheet only if the data to create these charts is in the right row/column format).
  3. How best to use the data created in 2 above to visualize the data?

Visualizing a timeline

There are many different kinds of charts supported by Google charts and a Timeline chart is one of them. The solution we came up with is to read the data from the spreadsheet that is attached to the app and use the Google Visualization API to create a chart as shown in the chart below. Color coding each booking as well as the distinct number of carts of a particular type helps to draw attention to key information that is needed to get a big picture view for a month, two months or whatever duration of interest. Adding a slider to control the start and end dates makes it easy to zero in on exactly the dates of interest.

Shaping data to create an expanded table

Whereas the booking table is simple and contains start and end dates and number of carts of each type booked, we need a table that shows for every day how many carts of each type have been booked. The desired table is shown below.

Screenshot 2016-04-14 15.44.57

Although it may be possible to create this table from the booking table using sheet formulas, the solution we came up with is to write a custom function using Google Apps Script (GAS).

Visualizing cart availability

A stepped area chart allows for plotting the number of carts of each type available on a given date or date range. Color coding each cart type and stacking the area chart for each on top of each other provides for a compact visualization of cart availability.  Adding a slider to control the start and end dates makes it easy to zero in on exactly the dates of interest. The chart that was linked to from within the app is shown below.

 


The post Interactive Google charts for reservation apps appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2016/04/14/interactive-google-charts4-reservation-apps/feed/ 0
Transforming AppSheet help docs to PDF etc. http://www.wyzpubs.com/wp/2016/03/09/appsheet-help-docs-to-pdf/ http://www.wyzpubs.com/wp/2016/03/09/appsheet-help-docs-to-pdf/#respond Wed, 09 Mar 2016 00:59:18 +0000 http://www.wyzpubs.com/wp/?p=751 Many times one wants a portable document that contains help pages for a product or platform and works both offline and online across all kinds of devices regardless of the OS. Despite claims that PDF is dead or is soon going to die, it continues to be a predominant format for creating and reading technical […]

The post Transforming AppSheet help docs to PDF etc. appeared first on Wyzpubs.

]]>
Many times one wants a portable document that contains help pages for a product or platform and works both offline and online across all kinds of devices regardless of the OS. Despite claims that PDF is dead or is soon going to die, it continues to be a predominant format for creating and reading technical documents.

I wanted to try and convert the ever growing volume of help pages for AppSheet which are published using Zendesk to PDF. Ideally, I envisioned that this would be totally automated whereby a script would run on my Mac every night which would collect all the new updates on Zendesk using wget and generate a PDF. Little did I realize that it is not always as simple to work with Zendesk HTML pages. In this blog post, I will provide a short summary of my journey and what I was able to accomplish.

Attempt 1

I first started to consider converting the HTML pages to markdown and started down this path. I chose markdown because of its simplicity and the fact that it doesn’t involve a steep learning curve for people to get used to. I thought I would simply download all the pages using wget, run html2text and get all the pages as markdown. I did not yet know how I was going to convert the markdown to PDF but luckily, I was reminded about the DITA-OT markdown plugin.  Although this method kind of worked, I was unable to really control the markdown files that were generated by html2text and also, since I could not leverage many DITA capabilities required for content reuse with this approach, I abandoned it.

Attempt 2

Having played with Beautifulsoup before, I thought I could use it to get the HTML, parse it and convert it to markdown using html2text. I found a python script that did something close to what I was attempting, so I used it as a guide and wrote some python code to fetch pages from Zendesk and markdownify them. To transform markdown to PDF, my idea was to use the DITA-OT markdown plugin. Although my script worked, and I was able to use the DITA-OT to transform a few pages, there were several issues with this approach because of differences in encoding and I had to do a lot of manual editing. Since there were over 120 pages, I decided to shelve it aside and look for some other way.

I should note that while I was trying this method, I also looked at Pandoc,

Attempt 3

I would have preferred to convert the HTML pages to DITA using one script but it would have involved a lot more work so I opted instead to clean up the HTML, create simpler HTML pages and run these pages through the XHTML to DITA transform that is available in my favorite XML editor, Oxygen.

I had to go through the process of modifying my python code, fixing validation errors in DITA and building the whole PDF document several times to fix numerous conversion errors but finally, I was able to accomplish most of what I set out to do. One thing I had to was to aggressively down size and change the DPI of a lot of the graphics files as they were too large and would not fit in a page. I used XnViewMP to do this as it has excellent batch conversion capabilities. It is possible that some graphics became way too small in this process.

What’s next

I still don’t have all the gotchas worked out to completely automate the process but I have posted my code and the generated files to a github repository. If anyone is interested in improving the scripts to benefit all the AppSheet users, I encourage them to please fork the repository and contribute whatever they can.

 

 

 

The post Transforming AppSheet help docs to PDF etc. appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2016/03/09/appsheet-help-docs-to-pdf/feed/ 0
Using Google viz and Plotly.js for charting http://www.wyzpubs.com/wp/2015/12/25/using-gviz-and-plotlyjs/ http://www.wyzpubs.com/wp/2015/12/25/using-gviz-and-plotlyjs/#respond Fri, 25 Dec 2015 19:26:41 +0000 http://www.wyzpubs.com/wp/?p=642 As I wrote in my previous blogs (Embedding google charts in a WordPress post, Yet another charting option – Highcharts Cloud ) if  data is being created in spreadsheets, one can create charts and link to them from within an app.  To embed the chart in an application or a web page (so that it can be linked […]

The post Using Google viz and Plotly.js for charting appeared first on Wyzpubs.

]]>
As I wrote in my previous blogs (Embedding google charts in a WordPress post, Yet another charting option – Highcharts Cloud ) if  data is being created in spreadsheets, one can create charts and link to them from within an app.  To embed the chart in an application or a web page (so that it can be linked to from an AppSheet app), the chart must be hosted on a server and preferably, it must not require any login or authentication to view it.

In this post, I will describe how to use the same Google Apps Script Service called Execution API that we used before to read the data and use the Google Visualization API and the Plotly.js graphing library to create a chart.

The graph is included below via an iframe – click here to view it in its own window. If you don’t see the graph, a one time authorization is required. Even though the spreadsheet that is serving the data is public, since it is owned by me, you need to click Authorize and enter your Google credentials to display the interactive chart.


Preparing Data for Plolty

There are several examples of charts at https://plot.ly/javascript/ and the type of chart we can use is the bubble chart. The complete reference for configuring and customizing this type of plot is here.

We need to prepare our spreadsheet data in a structure as shown below:

var trace1 = {
  name:'Europe',
  x: [79.84, 78.6, 80.05, 68.6],
  y: [1.36, 1.84, 2, 1.54],
  mode: 'markers',
  marker: {
  color: ['rgb(100,150,50)','rgb(100,150,50)','rgb(100,150,50)','rgb(100,150,50)'],
    size: [81.9, 5.52, 61.8, 141.85],
    sizemin: 4,
  },
  text: ['DEU','DNK','GBR','RUS'],
  hoverinfo:['text'],
  type: 'scatter'
};

To format the data returned by the Google visualization API in this structure, we can retrieve the spreadsheet data as a DataTable by using google.visualization.arrayToDataTable().Since we want to group the countries by Region, we can use getFilteredRows()to loop through the distinct ones in the Region column. Each region can have multiple countries, so, we need two for loops – the outer loop for the distinct regions and the inner loop for each country within that region. The listing for what goes on inside each of the loops is below:

for (var i = 0; i < regions.length; i++) {
  regrows[i] = data.getFilteredRows([{column:regcol,value:regions[i]}]);
  plotdata[i] = [];
  for (var j = 0; j < regrows[i].length; j++) {
    plotdata[i][j] = {le:data.getFormattedValue(regrows[i][j],lecol),
      fert:data.getFormattedValue(regrows[i][j],fertcol),
      pop:data.getFormattedValue(regrows[i][j],popcol)/1000000,
      cntry:data.getFormattedValue(regrows[i][j],cntrycol),
      }
  }
  x = _.range(regrows[i].length).map(function (j) { return plotdata[i][j].le });
  y = _.range(regrows[i].length).map(function (j) { return plotdata[i][j].fert });
  size = _.range(regrows[i].length).map(function (j) { return plotdata[i][j].pop });
  cntry = _.range(regrows[i].length).map(function (j) { return plotdata[i][j].cntry });
  
  trace[i] =  {
    name:data.getFormattedValue(regrows[i][0],regcol),
    x: x,
    y: y,
    mode: 'markers',
    marker: {
      color: _.range(regrows[i].length).map(function () { return colors[i] }),
      size: size,
    },
    text: cntry,
    hoverinfo:['text'],
    type: 'scatter'
  };
}

 

The post Using Google viz and Plotly.js for charting appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/12/25/using-gviz-and-plotlyjs/feed/ 0
Umpteen ways to visualize HTML tables http://www.wyzpubs.com/wp/2015/12/11/viz-html-tables/ http://www.wyzpubs.com/wp/2015/12/11/viz-html-tables/#comments Fri, 11 Dec 2015 01:59:26 +0000 http://www.wyzpubs.com/wp/?p=65 It is a very common thing to find web pages that contain tables. Sometimes the tables could be hundreds of rows and full of all kinds of information. While these tables are extremely helpful, sometimes one wants to visualize that same information in a different way just to gain better insight into what is not […]

The post Umpteen ways to visualize HTML tables appeared first on Wyzpubs.

]]>
It is a very common thing to find web pages that contain tables. Sometimes the tables could be hundreds of rows and full of all kinds of information. While these tables are extremely helpful, sometimes one wants to visualize that same information in a different way just to gain better insight into what is not immediately evident in the table.

Keith Schengili-Roberts, on his blog, DITAWriter, keeps many tables on his site updated whenever someone sends him new information. In particular, there are two tables that I keep referring to:

  1. The Companies using DITA table
  2. The DITA Tools table

Based on the first table, I had created some visualizations some time ago.

Where in USA are companies using DITA

A google map showing a snapshot of companies in USA using DITA

DITA usage across USA

A map inside Tableau showing a snapshot of companies in USA using DITA

DITA usage by Country

A visualization of companies using DITA based on Country in which the company headquarters is located.

However, the issue that I had (and the reason I did not publish these earlier) was that every time Keith updated his tables, I would need to look at what changed and update each of the visualizations.

Automatically Updated Visualizations

I had been seeking a less painful way to create and keep the visualizations updated. I recently found a way that I can do just that and it involves google spreadsheets and the Google visualization API. I will provide details of how I did that in a subsequent post but the main thing is that I used ImportHTML and cleaned up the data in the Google spreadsheet.

Of course, I still have to update the code if the the column structure changes in the source HTML tables but that is less likely to happen than rows changing.

I apologize for the cramped up format of the charts within the iframes on this page but please open just the frame in a new tab or window for a better user experience.

 

A collapsible tree visualization of industry, country, HQ location and companies using DITA.

 

A Sankey chart visualization of DITA product, company and category of DITA tools.

 

 

The post Umpteen ways to visualize HTML tables appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/12/11/viz-html-tables/feed/ 1
Table of contents visualization using d3.js http://www.wyzpubs.com/wp/2015/11/30/table-of-contents-visualization-using-d3-js/ http://www.wyzpubs.com/wp/2015/11/30/table-of-contents-visualization-using-d3-js/#respond Mon, 30 Nov 2015 22:02:59 +0000 http://www.wyzpubs.com/wp/?p=618 A way to transform DITA maps to a JSON representation suitable for consumption by d3.js was recently announced by Eliot Kimber. You can find the source for it in Eliot’s dita-community project repository on Github. I downloaded the plugin, installed all the required plugins in a DITA-OT tree and ran it on a simple ditamap […]

The post Table of contents visualization using d3.js appeared first on Wyzpubs.

]]>
A way to transform DITA maps to a JSON representation suitable for consumption by d3.js was recently announced by Eliot Kimber. You can find the source for it in Eliot’s dita-community project repository on Github.

I downloaded the plugin, installed all the required plugins in a DITA-OT tree and ran it on a simple ditamap that I had worked on for a Getting Started Guide for AppSheet. I successfully generated a .json file that looks something like this:

{
"name": "AppSheet User Guide",
"children": [

{ "name": "Concepts",
"children": [

{ "name": "Who should use AppSheet and what apps can it create?",
"size": 4000

},

{ "name": "Why cloud spreadsheets?",
"size": 4000

},

{ "name": "Structure from a spreadsheet",
"size": 4000

},

Collapsible tree visualization

Following the example posted in the d3.js gallery, I was able to create a collapsible tree visualization as shown below. You can scroll using the scrollbar on the right and bottom but it is not possible to pan.

Zoomable Partition Layout visualization

A slightly different visualization is the Zoomable Partition Layout also available in the d3.js gallery.

The same AppSheet table of contents is visualized in the frame below. You can click any of the sections in the middle to expand the sub-sections below. You can scroll using the scrollbar on the right and bottom but it is not possible to pan. One issue with this visualization is that the order of sections is reversed but that can be fixed by correcting the appropriate calculations in the code.

Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing

I then downloaded the source for the example, D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing to see how it would render. One major issue I have with this particular drag and drop, zoomable example is that the nodes are arranged alphabetically sorted so they don’t reflect the true table of contents.

The resulting visualization is shown below.

Dragging can be performed on any node other than root. Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

Zooming is performed by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. To Zoom out hold shift when double-clicking.

Expanding and collapsing of nodes is achieved by clicking on the desired node.

The tree auto-calculates its sizes both horizontally and vertically so it can adapt between many nodes being present in the view to very few whilst making the view managable and pleasing on the eye.

For a second example, I used the Apache Derby Getting Started Guide, the DITA source for which can be downloaded by following instructions available at this page.

Clearly, d3.js and the d3 visualization plugin open up many possibilities for generating many different kinds of visualizations of information contained within DITA maps and DITA topics.

Many thanks to the creator of d3.js, Michael Bostock, the creator of the drag and drop example, Rob Schmuecker and Eliot Kimber for the d3 transtype plugin.

The post Table of contents visualization using d3.js appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/11/30/table-of-contents-visualization-using-d3-js/feed/ 0
Bubble Menu for AppSheet using d3.js http://www.wyzpubs.com/wp/2015/11/24/bubble-menu-for-appsheet-using-d3-js/ http://www.wyzpubs.com/wp/2015/11/24/bubble-menu-for-appsheet-using-d3-js/#respond Tue, 24 Nov 2015 23:21:22 +0000 http://www.wyzpubs.com/wp/?p=612 I stumbled across what I thought was a neat visualization for providing links from concepts to more detailed documentation. It is called an interactive bubble menu and was developed by someone who used the wonderful d3.js library. I took the code and modified it only slightly to create a simple bubble menu for the functionality […]

The post Bubble Menu for AppSheet using d3.js appeared first on Wyzpubs.

]]>
I stumbled across what I thought was a neat visualization for providing links from concepts to more detailed documentation. It is called an interactive bubble menu and was developed by someone who used the wonderful d3.js library.

I took the code and modified it only slightly to create a simple bubble menu for the functionality available in AppSheet’s Advanced Editor. It shows the various tabs available under each main tab of the Advanced Editor, Data, UX and Settings. Hovering on each of the bubbles shows the sub-tabs under each main tab and a short description appears in the lower left. Clicking on any of the bubbles for each sub-tab takes you to the appropriate section of the AppSheet documentation on Zendesk.

The post Bubble Menu for AppSheet using d3.js appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/11/24/bubble-menu-for-appsheet-using-d3-js/feed/ 0
Yet another charting option – Highcharts Cloud http://www.wyzpubs.com/wp/2015/10/24/yet-another-charting-option-highcharts-cloud/ http://www.wyzpubs.com/wp/2015/10/24/yet-another-charting-option-highcharts-cloud/#comments Sat, 24 Oct 2015 18:08:13 +0000 http://www.wyzpubs.com/wp/?p=533 When I was starting out wanting to build a business, I had two criteria I was looking for in whatever technology I adopted for my purposes: Be easy to learn and use and allow me to be efficient (in my case, to create apps, visualizations and content quickly) Provide some hooks to add features and capabilities over […]

The post Yet another charting option – Highcharts Cloud appeared first on Wyzpubs.

]]>
When I was starting out wanting to build a business, I had two criteria I was looking for in whatever technology I adopted for my purposes:

  1. Be easy to learn and use and allow me to be efficient (in my case, to create apps, visualizations and content quickly)
  2. Provide some hooks to add features and capabilities over time that I would need

I first came across WordPress (if you want to start a business these days, the first thing you need is a website and almost a quarter of the sites worldwide are powered by WordPress) and then AppSheet (if you want to spend less time and run your business efficiently, the first thing you need is a set of apps).

AppSheet is great for building apps because it needs no coding knowledge at all. However it does require some data modeling and user interface knowledge to create a good and robust app.

For content management, there are many options to build a website with very little coding required and WordPress is one. However, some knowledge of HTML, CSS etc. is required to create good websites that provide required functionality to publish content.

For charting and visualization, I have blogged before about using Tableau, Google charts and sheetsee.js. However, the last two require knowledge of one or both of Javascript and Google apps script. I am yet to decide on what tool I prefer for visualization that satisfies the two criteria I have. However, I think I am a little closer to deciding which one would work best for ease of use after I came across this – Interactive charts for WordPress. I think that Highcharts Cloud may be an excellent option that makes it possible to create charts without any coding knowledge.

A great thing about Highcharts Cloud is that you can directly specify your Google spreadsheet as a data source, publish your chart and share it via your app or any other way you choose.

There are some drawbacks to highcharts as compared to Tableau but for creating a majority of the typical business charts, it offers a comprehensive list of chart types.

In this post, I will share how I used the same data as used in my earlier post to build a chart using Highcharts Cloud.  Highcharts Cloud allows one to input data in 3 ways:

  1. As a Data table – this is essentially like entering data into a table in a word processor – it is not a very efficient way to create tables since it must be done one row at a time.
  2. As a CSV data – one can copy/paste a csv file into the data entry window
  3. As a Google Spreadsheet – one can enter the URL to the sheet on drive. This is a licensed feature and with the free account, saving of data in your account is disabled.

I thought the last option was the easiest for me to use but when I tried to use my sheets file, I was dismayed to find out that Highcharts allows text in the first row, which is used for series names, and in the first column, that is used for category names. It does not like text anywhere else – all other data should be numbers. So, I had to export my sheet to a CSV, change the Region from text to a number (I changed ‘North America’ to 1, ‘Europe’ to 2 and ‘Middle East’ to 3) and use that instead.

Some chart types work better for visualizing correlations than others. One type of chart that made sense for the data I was trying to visualize that is supported in Highcharts (among many other types of charts) is a bubblechart.

The size of the bubble in the bottom row is proportional to the population and the size of the circle in the top row is proportional to the fertility. However, because the population numbers are much higher than the fertility numbers, the difference in size of the bubbles in the top row are not clearly distiguishable. Since the chart is interactive, this difference can be seen if you turn off the display of the bottom row by clicking on Region in the legend at the bottom of the chart in the published chart that is shown below.

 

The post Yet another charting option – Highcharts Cloud appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/10/24/yet-another-charting-option-highcharts-cloud/feed/ 2
Guidelines for AppSheet Beginners http://www.wyzpubs.com/wp/2015/10/15/guidelines-for-appsheet-beginners/ http://www.wyzpubs.com/wp/2015/10/15/guidelines-for-appsheet-beginners/#respond Thu, 15 Oct 2015 23:52:05 +0000 http://www.wyzpubs.com/wp/?p=559 You may have just come across AppSheet and have found a sample app that seems to meet a need that you have in your business or personal life. You have also browsed some of the AppSheet documentation pages and the Google AppSheet Community (and you feel that there is too much to read and absorb,) and you may be confused […]

The post Guidelines for AppSheet Beginners appeared first on Wyzpubs.

]]>
You may have just come across AppSheet and have found a sample app that seems to meet a need that you have in your business or personal life. You have also browsed some of the AppSheet documentation pages and the Google AppSheet Community (and you feel that there is too much to read and absorb,) and you may be confused but you are eager to get started.

If the above sounds like you, then you have come to the right place.

When using AppSheet, some things are easy to do, others are possible but difficult and yet others may not possible at the present time. If it is not possible to do exactly what you have in mind, there may be a workaround or you could contract with us to get it done.

In this post, I will try to provide some guidance on how you can get the most out of AppSheet. I have been reading most of the posts in the Google AppSheet Community and trying to answer users’ questions for many months now. I learn a lot about the kinds of apps users are building. I also try to pay attention to the common beginner types of questions and notice that the types of questions they ask are common.  The pattern is – “Wow, I have found AppSheet, How can I do this? (or Can I do this?)“.

This pattern is what prompted us (Julia and me) to formulate a recommended procedure to follow to get the most out of the online help available for AppSheet. I hope that that procedure together with some pointers in this blog post can help you. If you do find helpful tips or something missing or incorrect, please use the comment section below to add a comment.

There are two important things to keep in mind:

  1. The AppSheet editors allow you to configure three things – Data, UX and Settings. Without going into too much detail,
    • Data allows you to work with one or more spreadsheets,
    • UX allows you to create one or more “views” or screens in your app and
    • Settings allows many branding and customization options.
  2. By design, AppSheet allows (encourages) incremental development of apps.

Keep it simple

First of all, do not start with your entire dataset and do not start thinking about all possible views, and bells and whistles within each view that you would like in your app. Also, do not make the assumption that you should try to fit as much functionality in one app as possible. While featuring many views and rich functionality in each view may be requirements for you, you don’t have to build all of them in your app right away.This may seem like a no-brainer and you may already be doing this, but it is very important to start with a basic structure that will be stable during the design/test phase, and then add features incrementally. This will save you from having to re-configure the app definitions too often and breaking already configured views.

If this is the first app you are building, I suggest that you start with just one table and one view. Start with the most important table and view for your app. Simply focus on the most important reason or central problem or issue that you are building your app for and make sure that the first table is built around that.

If your app is for capturing orders, for example, start with a list of your products and their attributes that you think are important to your app users. If it is an inventory app, again, start with a list of what is being inventoried and attributes that you want to add to them. If it is a project tracking app, start with a list of people, assigned tasks, due dates. You get the idea. Look at the examples provided by AppSheet or by users who have shared their portfolios (at the time of this writing, it is not yet possible to see who has shared apps in their portfolio but that is coming soon.)

View the video below if you want to learn about the features of the Basic Editor.

Also, do not worry about switching from the Basic Editor to the Advanced Editor right from the start – switch to it if you find that there is something you have to configure in your app that is not possible to do in the Basic Editor. Note: if you copy a sample app and start modifying it, the app may be editable only in the Advanced Editor– some sample apps utilize features only the Advanced Editor can accommodate. Similarly, if you begin adding advanced features to your own apps, you may find the apps restricted to the Advanced Editor as well. It is helpful to note that in the Advanced Editor, you can accomplish all the same functionalities as the Basic Editor– plus more.

Consider your app users

After you have a simple app configured and one working view, consider your app users and features would be most helpful to them. Also, consider whether your users will have several different roles as they use your app or if they will all have the same role. Why this matters is that you may have to design your app in a way where the app looks different or provides different features for one role versus another. A common example is that you may have some roles who can see all the information that is in the spreadsheet in your app views while other roles can only see a subset of that information. If this is a requirement for your app, you will need to work in the Advanced Editor. Read up about slices and access control.

Here are some useful links:

If you need to track who made what change, you will definitely need to read the last link provided above. If you expect to release your app to a large number of users, make sure that you test your app with at least two or three different emails before releasing it to everyone.

Decide on the key and what fields belong together

Whether you copy an existing sample app or create one from your own spreadsheet, it’s good to begin thinking about how data will be recognized and displayed in your app. AppSheet needs a “key column” for each app– a column (or combined columns) that it uses to distinguish rows uniquely from each other. Here are some useful links to help you decide what column might make a good key:

If you happen to choose a key that is not unique, you will get warnings. Change the key to one which can be used to uniquely identify a row.

Note that AppSheet will always display the key column first in the app as it assumes that column is the most important. AppSheet then displays the first columns it identifies in the spreadsheet, from left to right, so it’s good to place your most important columns (usually these will be closely related to the key column) first in the spreadsheet.

Choose appropriate views

AppSheet supports several different kinds of presentation of the data in your tables. Choose the presentation that makes best use of the screen space. Use the slide browser below to review all the types of presentations possible.

To improve the appearance, know that some additional customizations are available for improving the aesthetics and branding.

Note: Terms related to presentation include Action, Control, View, UI, or UX

Make incremental changes and test

As mentioned at the outset, you should develop your app incrementally by adding new features via the editors and testing your app in the browser. You should also test the app on a mobile device if you are using mobile features such as scanners, photos, signatures etc.

If you are happy with how the app functions in the browser and on your mobile device, then it is time to deploy it to your entire user base.

If you follow these guidelines and get involved in the Google AppSheet Community , you will find that you can build quite useful and easy to use apps.

Happy Apping!!

The post Guidelines for AppSheet Beginners appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/10/15/guidelines-for-appsheet-beginners/feed/ 0
AppSheet usage survey results http://www.wyzpubs.com/wp/2015/10/11/appsheet-usage-survey-results/ http://www.wyzpubs.com/wp/2015/10/11/appsheet-usage-survey-results/#respond Sun, 11 Oct 2015 02:36:01 +0000 http://www.wyzpubs.com/wp/?p=540 I wanted to learn how to do the following tasks: Create a survey questionnaire in a Google form Collect responses and geocode locations Create a map using a couple of free services Create visualizations using Tableau I could have settled for a public dataset to achieve this. However, I wanted to try something new. I have known that AppSheet has […]

The post AppSheet usage survey results appeared first on Wyzpubs.

]]>
I wanted to learn how to do the following tasks:

  1. Create a survey questionnaire in a Google form
  2. Collect responses and geocode locations
  3. Create a map using a couple of free services
  4. Create visualizations using Tableau

I could have settled for a public dataset to achieve this. However, I wanted to try something new. I have known that AppSheet has a worldwide user base but I could never get a sense of how users are using AppSheet to build apps, whether for personal or business use. To learn more, I had to first set up a survey and invite members to take the survey.

Creating the survey

It is extremely easy to create questionnaires using google forms. I really did not want to make the form too complex since I was not intending to profile the entire AppSheet user base. My intent was to simply collect as much and as accurate data as possible to be able to create some useful visualizations.

Since I did not want respondents to feel overwhelmed by the questions, I decided to ask 5 simple questions in the form hoping that I would get a large number of responses. I posted a link to the survey in the AppSheet community.

I got a few responses soon after posting the request but even after waiting for two weeks, I only had 7 responses. Anyway, the responses end up in a google sheet with one row for each response. You can see the responses I got below:

Geocoding the locations

Map tools can work with addresses but a lot of them require coordinates (LatLong) in two column format. There are many options to geocode (determine the latitude and longitude) an address (the address needs to have enough details – usually city and country are the minimum requirements).

There is a google sheets add-on called Awesome Tables which needs a two column LatLong to draw a map. I made a copy of the response sheet since two extra columns will be created by awesome-tables. The resulting awesome-tables map can be seen here. Depending on your browser and platform, you may or may not see (clickable) markers on the map and controls below the map which allow you to filter the locations.

The other option I used to create a map is Google Fusion tables. Click on the link below and navigate to the Map 1 tab to see the map.

Google Fusion Tables

No Description

Visualizing using Tableau

Tableau is a powerful tool and one can create visualizations using the free Tableau Public tool.

I wanted to understand the responses I had to be able to draw some conclusions about correlations that may exist. For example, I thought these would be interesting questions to find answers to :

  1. Are the types of apps users are building correlated to the countries where they live?
  2. Are the number of users per app consistently high in any one country?
  3. Are the number of apps built by a single user consistently high in any one country?
  4. Are the benefits realized by app creators correlated to the countries where they live?

Of course, there are many other questions we can answer if we had more questions and more data. But the general idea is that answers to the above listed types of questions should ideally help any business better position their marketing and sales strategies.

I could write in detail about my findings but given the sample size, I hardly think it is worth it at this point in time. Instead, I will share here the two visualizations that I think are quite interesting.

In the above chart, two things stand out:

  1. App creators in Europe are developing apps that tend to have larger number of users per app (Finland and Sweden)
  2. Apps per App creator is higher in USA

In the above chart, two things stand out:

  1. App creators in Europe are developing apps that are for personal use and or sports
  2. App creators in USA are developing apps that are for Operations and Productivity

If you think that the charts convey any other information, feel free to add a comment below.

The post AppSheet usage survey results appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/10/11/appsheet-usage-survey-results/feed/ 0
Using sheetsee.js to visualize app data http://www.wyzpubs.com/wp/2015/10/09/using-sheetsee-js-to-visualize-app-data/ http://www.wyzpubs.com/wp/2015/10/09/using-sheetsee-js-to-visualize-app-data/#respond Fri, 09 Oct 2015 22:41:16 +0000 http://www.wyzpubs.com/wp/?p=528 As I wrote in a previous blog, data in spreadsheets can be rendered on your own website and viewed as a graph in AppSheet. Also in an earlier blog, I mentioned that there are many more options to creating and viewing data. One interesting library that is not listed there but one I came across […]

The post Using sheetsee.js to visualize app data appeared first on Wyzpubs.

]]>
As I wrote in a previous blog, data in spreadsheets can be rendered on your own website and viewed as a graph in AppSheet.

Also in an earlier blog, I mentioned that there are many more options to creating and viewing data. One interesting library that is not listed there but one I came across recently is sheetsee.js. Sheetsee.js is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables, maps and charts. As the author points out, one can use sheetsee.js along with D3.js to create a chart.

Using the same example as used previously, I was able to use sheetsee.js to create a somewhat simpler (as compared to the Google chart) bubble diagram for countries and their populations (as of 2010). You can view the diagram below.

Note that if data changes in the Google spreadsheet either by directly editing it or via the app that is linked to the sheet, this chart will automatically pick up the edits (a refresh of the page which embeds the chart may be required).

The post Using sheetsee.js to visualize app data appeared first on Wyzpubs.

]]>
http://www.wyzpubs.com/wp/2015/10/09/using-sheetsee-js-to-visualize-app-data/feed/ 0