Stuck getting started

1

Hey there!

I’m totally new to Cordova/ PhoneGap so everything is quite confusing.
I followed these instructions to install everything and it kind of works. But I have no idea what the commands are actually doing.

However, the starter app showed up but after browsing a bit it crashed on my console but kept running inside the simulation. So I quit the simulation, tried to change some config, some texts and stuff and restarted. My config changes didn’t apply, text changes did. Do I always have to restart everything just to see changes?

I think I understand how Angular stuff works, but the tutorials use cordova commands. How do cordova and ionic commands work together?

Next is some more basic understanding stuff: which environment does everything run on? Is it a node environment? And how can I use “native” stuff like contacts and microphones?

Thanks (:

2

Ionic uses Cordova to create hybrid apps. So, you are going to need a bit of knowledge of Ionic, AngularJS, and Cordova to really know where things stand.

When you are editing, make sure you are NOT editing in the “platform” directory. Virtually all your work should be done in the root of your app directory in the www folder. Then, to see these changes on a device, you have to build it using either the Cordova or Ionic commands.

cordova build ios or ionic emulate ios or ionic run ios.

To use Contacts, Photos, etc, you need to use the Cordova plugins. You have to install these in the app directory and in some cases, configure them in your config.xml.

http://cordova.apache.org/docs/en/3.4.0/_index.html
http://cordova.apache.org/docs/en/3.4.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs

3

Thanks for your answer! Already got started and figured some things out myself.
I have worked with Angular some time so I know what the code does and how things work.

However, things I still don’t get: Why are there two config.xml files? Only the one outside the www folder seems to work.

I want to have a list of my contacts. So this returns all my contacts

function onSuccess(contacts) {
    alert(JSON.stringify(contacts));
  };

  function onError(contactError) {
      alert('onError!');
  };

  var options = new ContactFindOptions();
  options.multiple=true; 
  var fields = ["displayName", "name"];
  navigator.contacts.find(fields, onSuccess, onError, options);

but I can’t implement this in my service so that the list is available on startup … Any idea?

4

I’m assuming you are using Cordova 3.4.0…

The only config.xml you should edit is the one in your apps root directory. The other config.xmls are created by Cordova when you build the app. They are based on the device platform and the settings in you config.xml.

To access the contacts, you must wait until after Cordova fires the deviceReady event. In Ionic, you can wait for that to happen by using the ionic.Platform.ready event.

http://ionicframework.com/docs/angularjs/utils/platform/

5

I think I’m doing that. But it won’t work. This is what I tried. But when I do the count it gives me 0.

document.addEventListener("deviceready", function() {
  StatusBar.styleDefault();
  
  function onSuccess(contacts) {
    ContactService.add(contacts);
  };

  function onError(contactError) {
    alert('onError!');
  };

  var options = new ContactFindOptions();
  options.multiple = true; 
  var fields = ["displayName", "name"];
  navigator.contacts.find(fields, onSuccess, onError, options);
}, false);

angular.module('starter.services', [])

.factory('ContactService', function() {
  var contacts = [];

  return {
    add: function(result) {
      contacts = result;
    },
    all: function() {
      return contacts;
    },
    get: function(contactId) {
      return contacts[contactId];
    },
    count: function() {
      return contacts.length;
    }
  }
});
6

Are you running this in the simulator? If so, the simulator does not have contacts by default. Search online and you’ll find techniques (non very funny) for getting contacts into the simulator. I think there is even a GitHub repo for fake contacts.

Here’s a sample of how I find contact by id:

var findContactById = function(contactId) {

    var exactContact = {};

    var deferred = $q.defer();

    if(contactId === null) {
       deferred.resolve(formatContact(null));
    } else {

        contactId = parseInt(contactId,10);

        var options = new ContactFindOptions();
        options.filter = contactId.toString();
        options.multiple = true;

        var fieldsToSearch = ['id', 'displayName', 'name', 'emails', 'phoneNumbers'];

        navigator.contacts.find(fieldsToSearch,

            // Success function
            function (contacts) {

                var size = contacts.length;

                for( var i = 0; i < size; i++ ) {
                    if( contacts[i].id == contactId ) {
                        exactContact = contacts[i];

                        // Free up memory
                        contacts = [];
                        break;
                    }
                }

                var formattedContact = formatContact(exactContact);

                safeApply(function () {
                    deferred.resolve(formattedContact);
                });
            },

            // Failure function
            function (error) {

                safeApply(function () {
                    deferred.resolve(formatContact(null));
                });
            },

            options
        );



    }


    return deferred.promise;
};
7

How do you mean this? The code I posted will return an array with all the users I created on the simulated phone. I just don’t know how to get this array into my service. However, I’ll post this on StackOverflow as it’s pretty much an Angular.js question.

Thanks :slight_smile:

8

hey, how id you manage your issue ? I’m in the same situation :slight_smile:

9

Hey there,
I tried to manage this too, but I’m also stuck loading my contacts. I only get one empty contact back. I’m testing on a real android device, using version 4.1.2. Did anybody find a solution for that?