Android application development using Intel XDK (free) IDE - Part II

Vuyiswamb
Posted by in Android category on for Beginner level | Points: 250 | Views : 6698 red flag
Rating: 5 out of 5  
 2 vote(s)

In this part of the article, I will explain and demonstrate to you on how to create your first mobile application.

Introduction


This is a part II of the series I promised to give you on mobile development using the xdk. In this part of the article I will show you step by step on how to create your mobile application.

Objective


In this part of the article, I will explain and demonstrate to you on how to create your first mobile application. Now in this article i will use my daughter as an example. The name of my daughter is Ophrah and after this article Ophrah will have an app. We will continue to publish the app on Google play and Amazon.

Start

XDK gave web developers a chance to develop mobile applications with the language they understand. Web Developers understand css, html, JavaScript etc... Using the XDK those skills are useful, you can create your website in html 5 and JQuery and also your css and compile that website into an app that can be installed. Now there are many Vuyiswa Maseko’ s out there , some dedicate their time in creating web templates and distribute them for free. In that case you don’t need to develop your website or mobile application from scratch but you can build from an existing exciting template that you can download on the net for free.  

Look for a Template 

The next step is to look for a nice template that we can use for our app. So the best way to get templates when googling is to use the key words “Responsive Html 5 mobile Template”.   

Now let us now edit our template, as I have mentioned, that I am going to build my daughter an app.

Change the template to suite your needs

The next step is to change the template to suite your needs. You can use any html editing tool to edit your HTML or you can use XDK, though it means to test you need to run the emulator that needs to load first. With Visual Studio its simple,  I can just refresh the page and make changes.  Figure 1.1 shows the template I have chosen

Figure 1.1

Now I am going to change this template to have my daughter and I can also change the menu items. You can use any html editor to change the html that you have downloaded. 

Testing the template against XDK

After you have edited your template and you are happy with your changes, you can now open XDK to view it on a mobile emulator to see how it looks in an emulator for any device that you want to target. Most of the responsive templates  are mobile friendly. They adjust to any kind of device which makes life easier when targeting all the devices. 

Create a Project in XDK

To test your project you need to open XDK and create a new project by selecting an existing project. Please follow these steps to create you’re your own app in SDK from an existing template that you just downloaded and edited. 

Step: 1
  1. Open XDK and in the Project Menu select “Import an Existing app” 
  2. Write the name of your App in the Project Name 
  3. Browse to the inner directory that has your html files that you have changed and click ok as depicted in figure 1.2 


    Figure 1.2
Step: 2

Click the button “Create” and a dialog box will appear as depicted in figure 1.3 

Figure 1.3

What the message mean in the dialog, is that you have successfully created a project from an existing html website template and XDK has added the project files in your project directory as depicted in figure 1.4 

Figure 1.4

You can click ok to close the dialog. The First tab that you will see on your left hand side, it’s a Develop tab. In this Tab you will be able to change your HTML code as depicted in figure 1.5 

Figure 1.5

When you are happy or you want to test the changes you have made in xdk or an external html editor, you can just select the “Emulator tab” In this first article I noted in passing that you need to register in the XDK side. If you are not registered you will be requested to enter your credential before you go to the emulator or Build tab as depicted below in figure 1.6 

Figure 1.6

3.   Emulate

This is the part where you test your app with different devices. As i have stated, you don’t need to install the emulators because they are built into the IDE. Below if my app template that I have edited for my daughter



Conclusion

In this part of the series I wanted a reader to be comfortable in building and emulating the changes. In the next part of the Series we are going to build the project and produce an apk (Installation file for Android supported phones). The reason I separated the build part is that it is more involved, we need to concentrate on it. Please be on the lookout for part III of the series.

Thank you for visiting Dotnetfunda

Vuyiswa Maseko


Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)