Getting Started with Intel’s App Framework
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 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 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.
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,
|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
- 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.
- Using the web based App Starter
- Downloading the Intel XDK “studio”.
If you are planning to use the browser interface, you can click on “App Starter” on the home page
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
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
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
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.
Thanks for reading! Do comment.