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

Question

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

andaqui opened this issue 9 years ago · comments

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?

Joshua Skrzypek · Answer 1 · Sat Oct 17 2015 07:43:19 GMT+0800 (China Standard Time)

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.

Joshua Skrzypek · Answer 2 · Sat Oct 17 2015 07:45:34 GMT+0800 (China Standard Time)

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.

Andrés Aquino · Answer 3 · Sat Oct 17 2015 13:14:45 GMT+0800 (China Standard Time)

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

Andrés Aquino · Answer 4 · Thu Oct 22 2015 18:19:37 GMT+0800 (China Standard Time)

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?

Joshua Skrzypek · Answer 5 · Thu Oct 22 2015 18:22:25 GMT+0800 (China Standard Time)

Can you give me a screenshot of the error?

Joshua Skrzypek · Answer 6 · Thu Oct 22 2015 18:26:17 GMT+0800 (China Standard Time)

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?

Andrés Aquino · Answer 7 · Thu Oct 22 2015 19:05:46 GMT+0800 (China Standard Time)

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?

Joshua Skrzypek · Answer 8 · Thu Oct 22 2015 19:20:17 GMT+0800 (China Standard Time)

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

Andrés Aquino · Answer 9 · Fri Oct 23 2015 00:30:54 GMT+0800 (China Standard Time)

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).

Joshua Skrzypek · Answer 10 · Fri Oct 23 2015 15:17:36 GMT+0800 (China Standard Time)

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

Andrés Aquino · Answer 11 · Tue Oct 27 2015 18:14:40 GMT+0800 (China Standard Time)

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.)

Joshua Skrzypek · Answer 12 · Tue Oct 27 2015 19:35:45 GMT+0800 (China Standard Time)

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 :/

Joshua Skrzypek · Answer 13 · Tue Oct 27 2015 19:36:02 GMT+0800 (China Standard Time)

I'll push another change in about an hour

Joshua Skrzypek · Answer 14 · Thu Oct 29 2015 23:48:42 GMT+0800 (China Standard Time)

Ok so good things are actually coming, I promise

Andrés Aquino · Answer 15 · Fri Oct 30 2015 02:20:36 GMT+0800 (China Standard Time)

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

Tobias · Answer 16 · Wed Nov 04 2015 16:25:18 GMT+0800 (China Standard Time)

I would also like to try this.

Joshua Skrzypek · Answer 17 · Thu Nov 05 2015 01:22:01 GMT+0800 (China Standard Time)

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

Andrés Aquino · Answer 18 · Thu Nov 05 2015 20:22:18 GMT+0800 (China Standard Time)

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:

Joshua Skrzypek · Answer 19 · Thu Nov 05 2015 20:23:35 GMT+0800 (China Standard Time)

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

Joshua Skrzypek · Answer 20 · Thu Nov 05 2015 20:28:21 GMT+0800 (China Standard Time)

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

Joshua Skrzypek · Answer 21 · Thu Nov 05 2015 21:24:20 GMT+0800 (China Standard Time)

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

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

Andrés Aquino · Answer 22 · Fri Nov 06 2015 07:34:22 GMT+0800 (China Standard Time)

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:

Avi Haiat · Answer 23 · Fri Nov 06 2015 07:48:21 GMT+0800 (China Standard Time)

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

Andrés Aquino · Answer 24 · Fri Nov 06 2015 12:15:12 GMT+0800 (China Standard Time)

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!

Avi Haiat · Answer 25 · Fri Nov 06 2015 12:19:36 GMT+0800 (China Standard Time)

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

Joshua Skrzypek · Answer 26 · Fri Nov 06 2015 16:53:42 GMT+0800 (China Standard Time)

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

Andrés Aquino · Answer 27 · Fri Nov 06 2015 18:08:09 GMT+0800 (China Standard Time)

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.

Andrés Aquino · Answer 28 · Sat Nov 07 2015 03:15:25 GMT+0800 (China Standard Time)

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:

yo mcfly:myapp --mobile
log into https://apps.ionic.io and create "new app"
from the new app created you take the ID (found in the first page), the key (found in settingsOfApp/keys) and name
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"
run "gulp ionic:platformcopy --target=myapp"
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
comment out the script include of cordova.js in client/index.html:22, since the ionic.io.bundle.min.js

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);
});

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

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."
```

Andrés Aquino · Answer 29 · Thu Nov 12 2015 00:37:55 GMT+0800 (China Standard Time)

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. :)

Joshua Skrzypek · Answer 30 · Thu Nov 12 2015 00:43:46 GMT+0800 (China Standard Time)

Nice catch! 👍 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.

Avi Haiat · Answer 31 · Fri Nov 13 2015 05:26:00 GMT+0800 (China Standard Time)

done and deployed

ujjal008 · Answer 32 · Mon May 16 2016 15:42:54 GMT+0800 (China Standard Time)

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

Joshua Skrzypek · Answer 33 · Mon May 16 2016 17:38:21 GMT+0800 (China Standard Time)

@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.

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.
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.
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.