Adding Ionic.io platform, ionic-platform-web-client

[andaqui]

First off, nice generator! Now to business: I want to try out ionic push, deploy, analytics, users, even if its in alpha state but im having trouble adding ionic.io platform to a fresh mcfly install. Cant event get "ionic-platform-web-client" to work properly. Is it possible to get a short (or long) guidance on this issues?

[jskrzypek]

Hi @kumpanen, good timing! We just figured out how to get the ionic.io services working with the generator and our gulp system yesterday, since we wanted to start using deploy on our side as well. We'll have some instructions for you up this weekend some time.

[jskrzypek]

Part of the problem is how tightly coupled the ionic CLI tools are with their specific project structure. Hopefully in later versions of the platform and CLI they will be relying on npm and things will be a bit more accessible.

[andaqui]

Thats great. As soon as you have something i will check it out. Looking forward to it. Thanks.

[andaqui]

Now i had some time to try this out. I installed both generator-mcfly/feat-ionic-platform and generator-sublime/feat-ionic-platform globally. First off a small error, missing coma in /client/scripts/main.js line 17 after 'ionic.service.core'. Otherwise gulp browsersync gives error: [11:49:45] Browserify failed [11:49:45] Parse Error: Line 19: Unexpected identifier while parsing file: /test/client/scripts/main.js

Then im trying to use the ionic.io services but no luck. I always get errors like Unknown provider. Im not sure if im missing injecting or requiring somewhere or what, but i cant figure it out. Im guessing you got it working, maybe you could post a small example code or project files?

[jskrzypek]

Can you give me a screenshot of the error?

[jskrzypek]

Also can you check the script tags in your index.html and look to see if the script at lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js is actually available?

[andaqui]

Heres the screenshot of first error:

I cant find ionic.io.bundle.min.js in scripts bundle in index.html so basically thats the second error. Shouldnt the generator install it or do i have to install it manually?

[jskrzypek]

Oh, yes, of course! I know what's happening. You have the branch generator-mcfly#feat-ionic-platform, but since generator-sublime is now a dep and not a peer-dep, it's still installing the master branch and not generator-sublime#feat-ionic-platform.

You have to go into the global folder for generator-mcfly that's on the branch and run

npm install mcfly-io/generator-sublime#feat-ionic-platform

[andaqui]

Make sense but still i dont get ionic.io.bundle.min.js in index.html. This is a screenshot of npm list --depth=0 in the global mcfly package folder which seems right to me. gulp browsersync gives same error and scripts/bundle.js doesnt have ionic.io.bundle.min.js (ionic-service-core.js is there though).

[jskrzypek]

Hmm, odd, you should have gotten it. I will test the branches more fully on my side on Sunday.

[andaqui]

Hi again. Im not sure if you are done with the changes but i tried out the latest commit. I now see the script request src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js" in index.html. But that js file doesnt exsist in dist folder. (There isnt a lib folder neither.)

[jskrzypek]

I'm not done yet, some stuff is causing headaches in iOS on our side so I haven't been able to test fully. I'm putting together a generator-mcfly style of the deploy-tutorial repo to demonstrate how we're using stuff.

I just now caught that I had a stupid typo in the constant, making thetask look for the ionic.io bundle in node_modules/install-platform-web-client instead of node_modules/ionic-platform-web-client :/

[jskrzypek]

I'll push another change in about an hour

[jskrzypek]

Ok so good things are actually coming, I promise

[andaqui]

hah cool :) i will check it out when its up

[irhtml]

I would also like to try this.

[jskrzypek]

Ok, so I figured out a way to build the gulp tasks that simplifies a lot of how the generators were working. I should have something pushed in a little bit

[andaqui]

Hi again. I tried it out but first i got an error "<< << << < HEAD". Seems like a merge error. I removed it manually from the file but then i got another error "mkdirp" "SyntaxError: Unexpected string." Here are the screenshots:

[jskrzypek]

Yup, i'm about to push the finalized update to generator-mcfly, probably in 20 minutes or so.

[jskrzypek]

Oh whoops, you're right I missed that, thanks @kumpanen !

[jskrzypek]

Ok!! Finally we have something and tests are passing :)

@kumpanen @toppetoppe feel free to test the generators now.

[andaqui]

Nice work!! I managed to install, add keys etc and i see progress. Right now im trying to get a push token back form ionic but it seems that the cordova phonegap-plugin-push is not being added even though i have it under /client/cordova/myapp/hooks/010_install_plugins.js. Im probably missing something... Maybe you know at once what im missing?

Heres the error printscreen of desktop browser console:

[thaiat]

for cordova plugins to run you have to be an a real device

[andaqui]

Of course! Thanks @thaiat. So to get ionic push working in desktop browser I had to "add dev_push: true" to the gulp_tasks constants and then run "gulp ionic:platformcopy --target=targetname" again. Now i get dev push token in desktop browser and app is listening for new notifications! Very nice! Good work on this @jskrzypek!

[thaiat]

glad it worked @kumpanen could you write a small tuto of your experiment ? i think it could be very usefull

[jskrzypek]

Thanks @kumpanen :beers: a tutorial would indeed be great, and I'll remember to add a comment about dev_push to the readme and generator instructions.

[andaqui]

Sure i can make a small tut. All though, if you add dev_push to the readme i believe your instructions are pretty straight forward. I will test some more and then try to make a small tut of push.

[andaqui]

Here's a small tutorial to get dev push working with ionic. It has very similar steps to the Ionic.io platform readme with some ionic.io push code for testing. After having installed a yo mcfly project:

1. yo mcfly:myapp --mobile
2. log into https://apps.ionic.io and create "new app"
3. from the new app created you take the ID (found in the first page), the key (found in settingsOfApp/keys) and name
4. type the above in the file "gulp_tasks/common/constants.js" in section "ionic->app", if you want development push in desktop browser also add "dev_push: true"
5. run "gulp ionic:platformcopy --target=myapp"
6. uncomment the require('./ionic.io.bundle.min.js'); in client/scripts/main.js:14 as well as the module dependency for 'ionic.service.core' that follows it
7. comment out the script include of cordova.js in client/index.html:22, since the ionic.io.bundle.min.js

8. to get dev token from ionic.io you can for example add the following code after $ionicPlatform.ready(function() { in main.js

   Ionic.io();
   var push = new Ionic.Push({});
   push.register(function(token) {
    // Log out your device token (Save this!)
    console.log("Got Token:",token.token);
   });
   

9. run "gulp browsersync --target myapp" You should see a console.log of your token if everything is ok. Pretty much like:

   Ionic Core: init
   Ionic Core: searching for cordova.js
   Ionic Core: attempting to mock plugins
   Ionic Push: register
   Ionic Push (dev): registered with development push service
   Got Token: DEV-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
   

10. Now you can try to send a dev push from ionic control panel by using the dev token: in Push/"want to send a one-time notification?" If push worked you get a console.log

    "Ionic Push (dev): Ionic Push: Development Push received. Development pushes will not contain payload data."

[andaqui]

Fyi I reinstalled the generators from branch #feat-ionic-platform and noticed a small error which i didn't get before. Not sure if you changed something but in client/scripts/main.js i believe the require is missing quote marks now? In a fresh install i got:

require(./ionic.io.bundle.min);

which gives following error when runing gulp browsersync: "Parse Error: Line 14: Unexpected token . while parsing file: /test4/client/scripts/main.js"

Should be:

require('./ionic.io.bundle.min');"

The rest is still working fine. :)

[jskrzypek]

Nice catch! :+1: Thanks! We're working on overhauling the generators to be compliant with the latest yeoman generators and node versions so we'll work this fix in. Fortunately the require is commented out by default so it should get caught by the user when they uncomment it, and won't actually cause problems otherwise.

FWIW, the logic behind the change was that we need to dynamically write the require in the generator so we can include the suffix for the target, since each target might have different ionic.io app_ids and api_keys, so you'll need a pre-injected bundle file for each separate target as well.

[thaiat]

done and deployed

[ujjal008]

MY log: Ionic Core: init ionic.io.bundle.min.js:2 Ionic Core: searching for cordova.js ionic.io.bundle.min.js:2 Ionic Core: injecting cordova.js ionic.io.bundle.min.js:2 Ionic Core: plugins are ready ionic.io.bundle.min.js:2 Ionic Push: register

Code: var push = new Ionic.Push({ "debug": true });

Ionic.io();

var push = new Ionic.Push({});

push.register(function(token) {
// Log out your device token (Save this!)
console.log("Got Token:",token.token);
});

\ error: ionic.io.bundle.min.js:3 Uncaught TypeError: Cannot read property 'init' of undefined can not get device token plz help

[jskrzypek]

@ujjal008 it's likely that the ionic.io libs have changed since we implemented this integration. At the time Ionic.io services were still in alpha I believe and they likely have changed. I'm almost certain that the ionic-app-lib and ionic-cli APIs have changed since 6 months ago when we deployed this (though I haven't researched that). Unfortunately we're not currently developing with these tools, so we haven't been actively maintaining the features (they were only intended as experimental in the first place.)

I'd recommend one of three things.

1. Look at driftyco/ionic-app-lib/driftyco/ionic-cli and see what versions would have been the released versions on Nov 12, 2015. Roll the libraries you have back to those releases if you can and try again. If yes, you can experiment with later versions until it stops working again.
2. Look at the ionic.io docs and make sure that the services are actually getting called correctly, and then use their system for patching in the vendor code. You may need to change some of the script references in your index.html and your angular modules that use ionic.io services.
3. Look at the ionic gulp task in gulp_tasks/tasks/ionic.js and driftyco/ionic-app-lib/driftyco/ionic-cli. Maybe you can figure out the right way to build the gulp task to make it work again.