Contacts API

• PhoneGaps Contacts API is an implementation of W3C's Pick Contacts Intent API
• https://www.w3.org/TR/contacts-api/
• Make sure cordova-plugin-contacts is in your config.xml
• To START interaction with device contacts, use either the create or find methods
• var myContact = navigator.contacts.create({"displayname" : "The New Contact"});
• navigator.contacts.find(fields, onSuccess, onError, options);
• ContactName object - store details of a contact's name including last name (familyName) givenName (first name), complete name (formatted)
• ContactField - used for generic items including type(string), value(string), and pref (boolean
• ContactAddress object has properties including streetAddress, region, postalCode, country, locality, type (home office), pref (preferred)
• ContactOrganization object includes name, type, department, title
• Contact object is contains all of the the details. It acn be samed, removed, and copied
• Contact properties (see page 100) include id, displayName, name (contactName), nickname, phoneNumbers(contactField), emails(contactField), addresses(contactAddresses), ims (an array of im accounts), organizations, birthday, note, photos,...
• See the code for contacts at samples.html
  http://cs.sru.edu/~whit/cpsc215/Notes/ContactList/index.js
  http://cs.sru.edu/~whit/cpsc215/Notes/ContactList/index.html

Reading Contacts:

• Phonegap 005 - How to read and list contacts from device's agenda?
• English HD https://youtu.be/V7ObBxKP4Gg
• Very nice description!
• One difference from what we have done – you would create an empty div on the page and simply add all the (inner)HTML for the unordered list

Writing Contacts:

• Continue, by watching: HTML5 Tutorial: Using PhoneGap to Create Mobile Contacts https://youtu.be/10vQTzfL9s8

Camera API

• Using the device to take and display a picture
• We will not be accessing your Gallery for class
• The picture will be saved in a temporary file.
• Base64 – recall that this would allow us to encode an image as text… a lot of text.
• We will simply use a file and its URL.
• Make sure cordova-plugin-camera is in config.xml
• Camera API has two methods in the navigator.camera object
  1. getPicture
  2. cleanup - only on IOS
• getPicture needs both a success handler and a failure handler
• getPicture has options including (see page 106)
  • quality
  • destinationType - DATA_URL, FILE_URI, NATIVE_URI
  • sourceType - PHOTOLIBRARY, CAMERA, SAVEDPHOTOALBUM
  • allowEdit - iOS only
  • encodingType (JPEG, PNG)
  • targetWidth and targetHeight
  • mediaType (PICTURE, VIDEO, ALLMEDIA)
  • correctOrientation
  • cameraDirection (BACK, FRONT)
  • popoverOption - iOS only
  • saveToPhotoAlbum

Try it

• Using the Cordova Camera Plugin https://youtu.be/jlL1RuW9Kiw
• onDeviceReady method should include adding an event listener for a camera click.
• Adding event listener to a button:

  document.addEventListener("deviceReady", onDeviceReady, false);
  
  function onDeviceReady() 
  { 
     console.log("Device ready...");
     document.getElementById('btn').addEventListener('click', getCameraImage, false);
     console.log("button active...");
  }
  

• Setup the camera

  function getCameraImage()
  {
  	let opts = {
  		quality : 20, 
  		allowEdit : false, 
  		destinationType : Camera.DestinationType.FILE_URI,
  		sourceType : Camera.PictureSourceType.CAMERA,
  		mediaType : Camera.MediaType.PICTURE,
  		encodingType : Camera.EncodingType.JPEG,
  		cameraDirection : Camera.Direction.BACK,
  		targetWidth: 300,
  		targetHeight : 400
  		};
  	
  	navigator.camera.getPicture(onCaptureSuccess, onCaptureError, opts);
  }
  

• Success function

  function onCaptureSuccess(ImageURI)
  {
  	var msg = document.getElementById('msg');
  	msg.textContent = ImageURI;
  	var smallImage = document.getElementById('cameraImage');
  	smallImage.src = ImageURI;
  }
  

• Error function

  function onCaptureError(message)
  {
  	var msg = document.getElementById('msg');
  	msg.textContent = 'Capture error: ' + message;
  	
  }
  

• make sure your html has the corresponding button and ids

  <button id="btn">Capture photo</button>
  <br />
  <img id="cameraImage" style="width:160px; height:160px;" src="img/logo.png" />
  <p id="msg"></p>