Ionic with Intel XDK


#1

I am attempting to use Ionic (starting from the seed using v. 0.9.27) with the Intel XDK. I’m new to the XDK so I’m still figuring things out. My app works great when I don’t reference anything related to the XDK except for one issue: API calls. After reading up on this, I found that you need to include the following line to avoid CORS:

<script src="xhr.js" type="text/javascript"></script>

I add this line and everything breaks. My view does not load (but the index page renders, just not the view portion). My assumption is that the XDK is stepping on the toes of Angular or Ionic but I can’t figure out where. Does anyone else have experience with this that could point me in the right direction? I did try adding the reference to the Intel XDK library (instead of Cordova) like so:

<script src="intelxdk.js" type="text/javascript"></script>

That still does not work. Like I said, if I don’t include any of Intel’s js files, everything except the API calls works. Can anyone help me figure out the next step? Thanks.

Edit:

I forgot to add that I’m using the XDK app on my iPhone 4s to test my app. My app works fine in Ripple with either configuration.


#2

Check your config.xml for a line that says :

<access origin="?????" />

You can whitelist everything with a * or URL by URL such as :

<access origin="http://192.168.1.109:8080" />

In Xcode, do you get a whitelist rejection warning in the console?


#3

That seems to have done it. I had a stray character in that url. Thanks so much.


#4

@tcorey any updates on your experience with Ionic and XDK?


#5

I have been using Ionic exclusively with the Intel XDK for months now and have no complaints. The two work well together. The only tricky bit is when there is a problem, it is a bit more difficult to identify who is causing the problem because there are two systems operating together. Tracking down who or what is responsible takes an extra step or two but the debugging capabilities are pretty good.


#6

Thanks for the response @tcorey. I recently stumbled on XDK and nice to hear it’s working well for you.


#7

Hi,

Can someone please tell me how to use ngCordova plugins on Intel XDK?

Thanks in advance :wink:

Naveen


#8

Depending on the plugin, it can be fairly easy to do. However, this is fairly off-topic for the Ionic forums since it is strictly an Intel XDK question (doesn’t matter if you are using Ionic or not). My suggestion would be to post your question (with more detail on which plugins specifically) on the Intel XDK forum: https://forums.html5dev-software.intel.com/viewforum.php?f=34


#9

i thinked about this too, but i guess there is just no point on this… because ionic looks great and xdk work great and is easy to build, but in the end they are the exactly same thing, there xdk is almost angular + ionic, so would be redundant…

they are both a framework for GUI
what made me thing about using both :
ionic looks great, xdk easy to build, lots of platforms, the xdk creator tool is just awesome…

but the work that you would have for build with ionic alone and then fix for blackberry, WP, and etc…
or the work for make xdk look as beautiful as ionic (implement sass + adjust one great theme)

would be lot less than work with both together

if you aim use phonegap or cordova or ngcordova, i would suggest to pick only one, there’s a recommendation by adobe (i say in a max conference by some one from phonegap), to don’t use frameworks, or use the less you can, because it will help you get started, but the last 20% of the job will be a great mess, the recommendation was lightweight libraries like zeptos.js not even jquery…

maybe this post is big, stupid, full of english errors, and not provide any solution to your question, but IMHO, you shouldn’t use two frameworks that are supposed to do the same thing,

sorry english is not my native language and i didn’t checked for errors, there must be a lot of those…


#10

I’m not sure that I agree. Ionic is great for developing the code for an app using Angular and the Ionic Framework. The Intel XDK is mostly about all of the stuff surrounding building an app. I think the two work hand in hand very nicely. The XDK tooling allows me to test my app locally and on a device, it manages my builds and does cloud building for production. There are XDK-specific additions to the standard Cordova foundation but mostly these are just to add functionality. So basically, Ionic handles the coding and the XDK handles the app configuration, testing and building. Two (mostly) separate worlds.


#11

sorry i guess i miss interpreted your reference to xdk, i thought you was talking about using http://app-framework-software.intel.com/ (afui, xdk “native language” for the drag and drop builder") with the xdk https://software.intel.com/pt-br/html5/tools tool it self… but if you want debug / build why don’t you simple go with phonegap?

http://app.phonegap.com/
once you update your code, the server make a hotcode push to your cellphone( which only need to be in the same network, not usb connected like unity…) and allows you to check phonegap plugins (i’m not sure about using cordova and ngcordova, but i guess it can be made)

for me debug on some device always > debug on emulator

the really advantage using xdk is profile, phonegap build is really great too…


#12

Well, there are similarities to app.phonegap.com but I would recommend you look into the Intel XDK. It does have a drag and drop builder but you don’t have to use it (I don’t). Where the Intel XDK tool really excels is in the fact that it is an end-to-end solution. If you want to build your phonegap app, you need to instal the Android SDK and maintain all of that for Android apps. For IOS, you need to be on a Mac and use XCode to build your app. If you want to use PhoneGap Build, you can but it will cost you (after your first app). The Intel XDK, however, handles builds in the cloud for Android, IOS and others without the need to maintain the tooling on the machine (and I can use Windows to build an IOS app).

Again, not really the place for this discussion but I would encourage you to try out the Intel XDK. There is a lot there and it is free (completely).


#13

May be you can write some tutorial how to combine ionic with intel xdk? - it’ll be great, because it avoid you to use separate os or virtual machines to build apps for all platform remotely for free.


#14

Hi bobrov1989, to work with ionic through intel xdk, all you need to do is:

  1. Open Intel Xdk
  2. Go To Projects - Start New Project
  3. Import Your Html 5 Code Base (choose your app folder)
  4. That’s it! , just check the “Develop” tab, and you will see the brackets code editor, which is the built in code editor of intel xdk software. Press the “Emulate” tab, and you can see your app realtime.

Also, you can download their app, and it syncs your projects and you can check them on your phone, kind of like the ionic view app but more mature, but connected to the intel xdk software. check it out and you will see what i mean (you will have to go to the “Test” tab and press “Push Files”, for your project to sync with intel’s app.

Also, Intel xdk let’s you build with crosswalk without any much setup, which is a bit quicker than ionic’s cli, though ofcourse the cli gets better every day , so i am sure the ionic team have some more surprises for the android branch.

Hope it helps :slight_smile:


#15

Hi Guys,

I got ngCordova working on Intel XDK.

How to include ngCordova on Intel XDK:

A. Projects Tab ->Third Party Plugins
->Get Plugin from the Web
->Url, ID (from.xml), assign a Name

B. Index.html -> Include in the following order:

                <script src="lib/ionic.bundle.min.js"></script>
                <script src="lib/ng-cordova.min.js"></script>
                <script src="cordova.js"></script>    !important

            ->Make sure to download and include "ng-cordova.min.js" in the directory

C. App.js -> Include ‘ngCordova’ dependency injection.

D. Controller.js ->’$ionicPlatform,’$cordovaPlugin’ dependency injection

             -> wrap the plugin code inside $ionicPlatform like this:

                     $ionicPlatform.ready(function() {
                        $cordovaPlugin.someFunction().then(success, error);
                    });

E. Build the App

Hope this helps. :wink:


#16

You can use this Ionic & AngularJS starter for Intel XDK. All it does is get you started in few seconds, just unzip and open the project file in intel xdk. It allows you to take full advantage of Intel XDK’s design tool, Ionic Framework and AngularJS. https://github.com/Reinsys/Intel-XDK-Ionic-Starter


#17

There’s even an Ionic starter template in XDK.