mercredi 3 février 2016

Ember.js with Cloudkit JS

I have built a small prototype project using CloudKit JS and am now starting to build the next version of it and am wanting to use Ember as I have some basic experience with it. However, I am not too sure where to place the CloudKit JS code. For example where should I add the configure part and the auth function? I think that once I find the spot for the auth code, I could then add some of my query functions into the individual views and components, right?

Here is my configure code (with the container and id removed):

CloudKit.configure({
containers: [{

  containerIdentifier: '###',

  // @todo Must generate a production token for app store version
  apiToken: '###',

  auth: {
    persist: true
  },

  // @todo Must switch to production for app store version
  environment: 'development'
}]
});

Here is the auth function:

function setupAuth() {

  // Get the container.
  var container = CloudKit.getDefaultContainer();

  //Function to call when user logs in
  function gotoAuthenticatedState( userInfo ) {

    // Checks if user allows us to look up name
    var userName = '';
    if ( userInfo.isDiscoverable ) {
      userName = userInfo.firstName + ' ' + userInfo.lastName;
    } else {
      userName = 'User record name: ' + userInfo.userRecordName;
    }

    //Calls out initialization function
    init();

    //Sets up UI for logged in users
    setAuthenticatedUI( userName );

    //Register logged out function
     container
      .whenUserSignsOut()
      .then( gotoUnauthenticatedState );
  }

  //Function to call when user logs out
  function gotoUnauthenticatedState( error ) {

    //Checks if error occurred
    if ( error && error.ckErrorCode === 'AUTH_PERSIST_ERROR' ) {
      displayError( logOutError, 'Error code: AUTH_PERSIST_ERROR' );
    }

    // Sets up the UI for logged out users
    setUnauthenticatedUI();

    //Register logged in function
    container
      .whenUserSignsIn()
      .then( gotoAuthenticatedState )
      .catch( gotoUnauthenticatedState );
  }

  // Check a user is signed in and render the appropriate button.
  return container.setUpAuth()
    .then( function( userInfo ) {

      // userInfo is the signed-in user or null.
      if ( userInfo ) {
        gotoAuthenticatedState( userInfo );
      } else {
        gotoUnauthenticatedState();
      }
    });
}

The init() then calls functions to setup the queries to adds a chart to the page using records. The setAuthenticatedUI() and setUnauthenticatedUI() functions simply apply and remove classes once the user has been authenticated.




Aucun commentaire:

Enregistrer un commentaire