Getting Started with Intel’s App Framework and XDK

---

First impression, “A Comprehensive Hybrid Mobile App development kit!“.

The guys at Intel have done an awesome job in packing everything we need to build a Hybrid Mobile app in most convenient workflow possible. In this post, we will take a look at the App framework, its components, theme’s and the invaluable XDK to build Hybrid mobile apps.

App Framework

App Framework is comprised of three parts

App Framework – a query selector library
UI – a UI/UX library for smartphone and tablets
Plugins – plugins built on top of App Framework

App Framework was built from the ground up to excel on mobile devices by being light and fast. It takes advantage of new browser features and supports valid W3C CSS selectors. User generated performance tests at jsperf.net have shown it to be faster than every other JavaScript* library available.

App Framework UI, also known as AFUI, is the only mobile framework that treats Android*, iOS*, Blackberry* and Win8* the same. In other words, AFUI does not degrade features or performance in order to resolve conflicts or bugs. For example, most frameworks consider Android* to be “broken” and ignore specific versions of that operating system or take shortcuts that perform poorly. App Framework solves these key issues to provide a clean and responsive HTML5 user interface.

Plugins are separate JavaScript libraries created to augment apps written using App Framework App Framework. Plugins provide useful features or functionality that may be outside the scope of basic applications. App Framework UI harnesses a few of the core plugins like af.scroller.js and af.css3animate.js.

Getting Started

First, Navigate to the Intel’s App f/w home page. We will explore a couple of things before digging into the code. Around mid-way in the page, you will see a section, where you can customize the app.

Out of box, you can get device specific styles, which is a pretty cool option. You can also customize your styles by clicking on “Style Builder”.If you go back to the top of the page, you can see the download button. Click on download and unzip the contents. If you have Python installed, you can open new terminal/prompt inside the unzipped folder and trigger Python’s http server. This will host the current folder on port 8000. Run,

Windows	Mac/*nix
python -m http.server	python -m SimpleHttpServer

PS : This is the simplest way to host any folder locally!

And you can launch http://localhost:8000 to see kitchen sink app. Alternatively you can also launch the   index.html  from the unzipped folder. But this way, AJAX features would not work.

The launched page would look like

As you can see, you will find everything you need to develop an app using Intel’s app f/w. The menu bar on the left hand side and the tabs at the bottom segregate the complete app components into styles, structure and plugins.

You can play around with the features and check out how easy it is to use the f/w.

Now that we have a decent idea about the app f/w, let us build a “Hello World” app. There are 3 ways you can do it

1. Create a new folder for your app, copy paste the related code from Kitchen sink folder and build the app, by authoring HTML/CSS and JS.
2. Using the web based App Starter
3. Downloading the Intel XDK “studio”.

If you are planning to use the browser interface, you can click on “App Starter” on the home page

Then you can login/create a new account into the “Web” XDK. Once you are in, you can either create a new app, or upload your own app. I have dragged and dropped a few things and built the app below

You can click on the preview icon above the layout canvas and you can see a live preview of the app. Once you are happy with the design, you can download the zip. You can find links below that shows how to use the App Starter. 

With the zip downloaded, you can use the Intel’s App Center to manage your app on the web. Once you are logged in, you can click on “Start a new app”. Then you can select “Create your own from scratch” as shown below and click next

In the next screen, you can select the project bundle we just downloaded and upload it here

Once the upload is successful, You can click next till you see the home screen again with the project added. Here you will have a  bazillion options to manage your app

You can make changes to your code and upload the bundle back and issue builds.

The second method is to download XDK on your machine and I would recommend this approach. Navigate to Intel XDK home page and you can download the XDK for your OS.

Once you have downloaded, installed and launched the app, you will be asked to login. Once you are logged in, you will be shown a page, where you can create a new project

You can pick any of the templates and get started. I am going to choose “Use App Starter” and create an App. I am going to name it “helloWorldXDKApp”

and click on create (bottom righthand corner).  Once the project is successfully created, you will be shown a tour of XDK. I recommend taking it. And then you will see something like

This window has practically everything you need to develop a Hybrid App. Once you are done with the development, you can click on the “Emulate” tab on the top.

As you can see, the emulation environment is pretty comprehensive. You can emulate your app locally and then following the instructions on “Test” tab, you can test on an actual device as well!

And when you click on “Build” tab, you issue a build to the generate the selected platform installer

And then you can manage all your builds and releases right from here!! Pretty sweet right?!!

Next steps

I would highly recommend watching this 9 part series by Connie Berardi to get well acquainted with developing apps with Intel’s App F/W & XDK.

I would also recommend checking out XDK’s app designer, which you can find when you create a new project in XDK

This can be used to design and develop apps using other Mobile Web frameworks like Bootstrap, Topcoat etc.

You can find a good tutorial on the same below

Hope this post has provided you a decent idea on how to get started with Intel’s XDK.

---
copied from: http://thejackalofjavascript.com/getting-started-with-intels-app-framework-and-xdk/
---