Many mobile applications pull in a lot of data from some source when they are live, usually some database hosted somewhere on the Internet. If the data isn’t being pulled from the Internet, it’s probably coming from the users device where they have built up data from using the application over time. When you’re building your application though you don’t have access to these hoards of data, so how can you go about testing and building your application?
In this post I’m going to specifically look at how to add some test data to a Sencha Touch mobile application, but the JSON Generator in the second part of this post could be used in any situation.
Adding test data the quick and easy way
The easiest way to add some test data to a Sencha Touch application is to define the data directly on the store. Under the config options of your store, you can add something like the following:
data: [
{ firstName: 'John', lastName: 'Smith' },
{ firstName: 'Jack', lastName: 'Smith' },
{ firstName: 'George', lastName: 'Smith' },
{ firstName: 'David', lastName: 'Smith' },
];
Of course, the problem with this method is that it’s going to take you quite a while to write out useful data.
Adding test data the flexible and scalable way
Alternatively, you can use an Ajax proxy and JSON data to pull in some test data into your application. First you’ll have to generate some JSON data in the following format:
{
"data": [
{
"lat": 138.161267,
"lng": -34.418743
},
{
"lat": 138.863518,
"lng": -35.277562
}
]
}
You can just type this out manually as we did for the last example, but that’s hardly more efficient. What you can do is use JSON Generator – an awesome tool developed by Vazha Omanashvli – to create a ton of random data for you.
Essentially what this tool does is allow you to specify a format for your data and the types of values you want generated and then it will generate as many data sets as you want.
The default data provides a good example of how to generate different types of data, for example if I want to generate random names:
name: '{{firstName()}} {{surname()}}',
Numbers:
numbers: '{{integer(2, 50)}}',
Choose randomly from a defined set of values:
fruit: function (tags) {
var fruits = ['apple', 'orange', 'banana'];
return fruits[tags.integer(0, fruits.length - 1)];
},
At the top you will notice:
{{repeats(5,7)}}```
change this to however many data sets you want to create.
Now that you have your gigantic list of randomly generated JSON data, you're going to have to pull that into your application. Save the JSON data into a file called '**my_data.json**' in the root directory of your projects folder. Open up your store, and add in the following proxy:
```javascript
Ext.define('MyApp.store.Things', {
extend: "Ext.data.Store",
requires: ['MyApp.model.Thing'],
config: {
autoLoad: true,
model: 'MyApp.model.Thing',
storeId: 'Things',
proxy: {
type: 'ajax',
url: 'my_data.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
This will load in all the data to your store (make sure the JSON fields match up to your model). Not only do you not have to worry about manually creating data now, you also have a much more expansive set to test against so you can catch some more defects that might otherwise have gone live.