[ad_1]
You have used variables in your apps to store individual pieces of data. Now you will learn about creating JSON (JavaScript Object Notation) objects.
To write your own permanent data records in App Lab.
o Collect the data fields from the user using screen elements (text boxes, dropdowns, radio buttons, checkboxes) or behind the scene (user location, user id, time, mouse movements, keyboard clicks, timers) or calculated values based on user responses.
o Create the JSON object with a fields and the collected values (you will see how to do this below).
o Use createRecord to write the JSON object record to your app’s data table, callback function needed.
Step 1 (2 points): Create an object (record), insert a record and create a table.
We need to learn how to make a new object. It’s easy, you do this:
var myData = {};
once we do that we can add our own field/value pairs and then store it in a database. Make an app with a single button and the following code. Fill in your name instead of “Enter Your Name”, run the app and click the button. Run it multiple times! Watch the console and use the ‘View Data” button to see how the table is updated.
button(“submitButton1”, “Click Me!”);
onEvent(“submitButton1”, “click”, function() {
var myData = {};
myData.name = “Enter Your Name”;
createRecord(“myTable”, myData, function(record){
console.log(“new record inserted”);
});
});
Review that code and use the “view data” button to answer the following questions:
1a) What is the name of the table? Where do you find this?
1b) What are the attributes (columns) of the table? Where do you find these?
1c) What values are being inserted? Can you make changes to the program to insert different values?
Because of the delay to update the table in remote storage, or app needs to wait before executing more commands. The callback function is called after the record is successfully added.
1d) What code is in the callback function? What is the argument of the callback function?
1e) Change the code in the callback function to write additional data to the console about the record inserted. You can access specific columns in the table by using record.columnName.
1f) When your classmates click the submit button on their version of the app why do you not see their data inserted into your table?
Step 2 (2 points): Collect user text data to Insert in a table.
2a) Add a text label (“What is your name?”) and textbox to the previous app, and update the event handler to pull the data from the textbox, update the object, and add the object to the table
2b) Run the app and click the button multiple times and see what happens. It would be nice to clear the textbox before another click of submit. What code is needed and where should that code go? Update your app.
Step 3 (2 points): Collect user dropdown data to Insert in a table. Extend the attributes in a table.
Your app may need other types of user data to be saved other than just text boxes. Add a label and drop down box, maybe for year in school, to your app and save the data to your JSON object and add it to your table. Make sure to reset the dropdown box between submits. Maybe think about a default value you want the drop down box to start on. Run your app multiple times testing both the text box and drop down box and checking the data table.
What values do the previous records in the table get for the new field?
Step 4 (2 points): Collect user radio button or checkbox to insert in a table. Extend the attributes in a table. Additional screen elements that are available in design mode are radio buttons and checkboxes. Add one of these screen elements to collect some additional data to load in the database. Use the help files in App Lab if necessary. You use if statements to check which radio button or checkbox is clicked.
Step 5 (3 points): Organizing your app with functions.
We saw in earlier lessons in unit 3 that it is a good idea to create functions for logical pieces of code that go together for each screen. We do not want our “onEvent” callback function to be so long that it is hard to read and debug.
The high level tasks necessary in your “onEvent” callback function are:
• create the object with data from the current screen elements
• store the object in a table
• clear the screen elements for the current screen.
Since you will need to access the object you create in multiple functions the object variable needs to be declared and initialized as a global variable, at the top of your program
Update your app to create those three functions listed above. It might be good to name two of them createObjectScreen1 and clearScreen1 so you remember which function goes with which screen, you may be adding more screens later. Storing the object in the table will only be called once and not dependent on the screen.
Step 6 (3 points): Add a second screen for additional data collection (multi-line textArea).
For your data collection app you may need to collect data over multiple screens. Use Design Mode to add a second screen to the sample app we have been building to capture user data from a multi-line textArea element, like “please leave a comment”. Return to screen 1 after the JSON object has been stored in the table.
Reading Data from Permanent Storage in App Lab
Step 7 (1 point): Reading Records
Assume you have a table as shown.
What do you think this code snippet will write to the console?
readRecords(“myTable”, {}, function(records) {
for (var i =0; i < records.length; i++) {
console.log(records[i].Name);
}
});
What are other things you could write to the console from that table?
readRecords returns and array of JSON objects. The array name is “records”. An array is an indexed collection of data, the first index is zero and you access elements in the array using [ ] notation. records.length is how many records are in the table.
Step 8 (1 point): Read Records
Add code to the event handler for the button on screen 2 to write out to the console the name and matching comment from your table, one to a line. For now you will just use console.log to display data read from the table, but you could also use textLabel (or other UI elements) to display the data fields in your app.
Step 9 (1 point): Read One Record
What if you wanted to only output the console the first record in the table whenever someone clicked the screen 2 button? Replace your previous readRecords with the loop with a readRecords without a loop.
Step 10 (1 point): Read a Random Record
What if you wanted to only output the console a random record in the table whenever someone clicked the screen 2 button? Replace your previous readRecords for the first record with a readRecords on a random record.
Step 11 (2 points): Reading Specific Records
Note the second parameter in the readRecords function, {}. You can use that second parameter to select certain records by what value they have.
readRecords(“myTable”, {Name: ‘Matt’}, function(records) {
will select any records in the table where the Name field has the value ‘Matt’.
Replace your previous readRecords on a random record to instead read all records where the year is ‘U1’. You will need to put the loop back in as more than one record might be returned
Sample Solution
The post Remote Data Storage appeared first on acestar tutors.
[ad_2]
Source link
