In this part of the article, I will explain and demonstrate to you on how to create your first mobile application.
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.
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.
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
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.
- Open XDK and in the Project Menu select “Import an Existing app”
- Write the name of your App in the Project Name
- Browse to the inner directory that has your html files that you have changed and click ok as depicted in figure 1.2
Click the button “Create” and a dialog box will appear as depicted in 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
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
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
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
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