Google-verse Development

+1 Doug Fresh · December 5, 2014
I am not an expert in google design, I'd just like to attempt to inspire people to try it out and show what can be done with the software

Google has added many new features to the development of applications both mobile based and browser based. Beginning with the introduction of Android 5.0, some changes have been brought on in order to better link all these medias, and reach the most possible users, while also creating a new API to facilitate that change. 

Google's Material design can be outlined here: 

http://www.google.com/design/spec/material-design/introduction.html


To go along with these new changes, a few new Development kits have been released. These include the use of, but not limited to-- Dart, Javascript (with or without polymer), and Standard Web Design with Boilerplate and tooling included. The easiest way to obtain this kit is through this Chrome App:

https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?utm_source=chrome-ntp-icon


To go along with this Dev kit, google has also included a web designer kit stand-alone. Currently, this is an advertiser's wet dream, built to design gorgeous web ads to drive us average users nucking futs. Google seems intent on taking on the Adobe design suite (three cheers for open source). This Dev creation tool is available here:

https://www.google.com/webdesigner/


Keep in mind, all of these tools allow for programmers to bridge gaps between all platforms. Following these new design conventions allows for programs to reach every user. Hopefully, in the near future, we can all learn from each other about cool new ways to use these new tools to produce phenomenal products. 
 
~As more info is dug up, it (hopefully) will be updated in within this post.

Post a Reply

Replies

Oldest  Newest  Rating
-1 Doug Fresh · December 11, 2014
Creating a google form, then using that info to create a document. 



I was tasked with creating a reservations form. Having limited expertise in Javascript, this would be a good learning experience. The form was created through google forms within about 10 minutes. 

Now comes the hard part. I wanted the reservation to be confirmed and sent  to the person making the reservation via email. I created a simple reservation confirmation doc with google docs.
/images/forum/upload/2014-12-11/7866a426c30241092717dd2dfa3d8198.PNG


 then began the scripting process to take the data, and insert it into the newly created document. You will need the template's doc id, here's how to get it:


/images/forum/upload/2014-12-11/5b333b9b1dbb136190aa0d5f069320a1.PNG


and the script:


// This will be the id from your Template
var docTemplate = "1lTL2Wf_kTtvSOblwk3-NHrFCAWaog1Ls_ADqtWfqvRc";

// now here is the submittion function
function onFormSubmit(e) {
  //Get information from form and set as variables
  var dateMade = new Date();
  var tableName = e.values[1];
  var numberOfPeople = e.values[2];
  var dateForReserve = e.values[3];
  var timeForReserve = e.values[4];
  var emailAddress = e.values[5];

  
 // This bit opens the template, copies it and saves it
 // this prevents overwriting of the template.
 // you can name the new doc anything you like since the new id 
 // will be used, rather than the name. 
 var copyId = DocsList.getFileById(docTemplate)
 .makeCopy("Reservation for: "+ tableName + " at "+ dateForReserve)
 .getId();

 //the script sees everything from the var call, to the semi-colon as one line.,

 // Open the new doc, assign it to a variable
 var newReserve = DocumentApp.openById(copyId);
 var newReserveBody = newReserve.getActiveSection();

 // This searches the document, finds the text placeholders
 // that were included in the template and replaces it with 
 // the e.values pulled from the form.
 newReserveBody.replaceText('keyToday', dateMade);
 newReserveBody.replaceText('keyTableName', tableName);
 newReserveBody.replaceText('keyTableCount', numberOfPeople);
 newReserveBody.replaceText('keyTableTime', timeForReserve);
 newReserveBody.replaceText('keyTableDate', dateForReserve);


 // Save and close, refer to the file, not the body here.
 newReserve.saveAndClose();

 // Converts the new document to a pdf
 var pdf = DocsList.getFileById(copyId).getAs("application/pdf");

 // attaches and sends an email with the following subject line and body:
 var subject = ("Reservation for: "+ tableName + " at "+ dateForReserve);
 var body = "test";
 MailApp.sendEmail(emailAddress, subject, body, {htmlBody: body, attachments: pdf});

 // deletes the file. Does 2 things, 1. Problem Solving, if the script fails to run the email send, 
 // the doc will be saved in drive properly filled out. If it fails and the placeholders
 // are not changed, you know you have an issue with your e.values, either out of range,
 // or a syntax error. If everything is filled correctly, but not sent, you have an issue with the email or
 // you are missing/fudged-up the newReserve.saveAndClose();.
 // 2. keeps clutter out of my personal drive.  
 DocsList.getFileById(copyId).setTrashed(true);
 }



finally, a trigger needs to be made to run the function upon submission of a form.


/images/forum/upload/2014-12-11/6b90c8f48cd4f0e8020ef30a3c1f3e34.png
/images/forum/upload/2014-12-11/270a6d5ddbf9b0f8dadf8ed1570f58a1.PNG


Now I embed the form wherever it is needed, and people who make a reservation get a lovely confirm email:


/images/forum/upload/2014-12-11/a76a2a8bdd1fe3e9b0cac28db1e7d832.PNG
  • 1

Google / YouTube

107,091 followers
About

For news, announcements and discussion related to all Google services and products.

Links
Moderators
Bucky Roberts Administrator