Simple Steps Tutorial for beginners to learn developing mobile apps using Intel XDK.

Intel XDK tutorial

FRIDAY, NOVEMBER 7, 2014

Intel XDK App Starter Tutorial (Official)

---

Official Intel XDK App Starter Tutorialhttps://software.intel.com/en-us/html5/xdkdocs#494691

Intel® XDK Overview

Lesson 1: Get Started

Summary

In this article we want to cover how to make a mobile application using App Starter and App Framework within the Intel XDK. AppStarter is great for multi-page simple applications that have a few pages of content and a footer at the bottom to quickly navigatebetween the pages. If you haven’t already downloaded the Intel XDK, go ahead and do so here. The idea behind this tutorial is toshow how a beginner can make an application using the Intel XDK even if they are not familiar with HTML, CSS, or JavaScript. We’llmake a very simple application that provides a landing page, about page, a list of content, and a resources page. If you are morefamiliar with these technologies, we suggest you try App Designer as your layout tool which is documented here. Let’s start.

Decide on an App Idea

When thinking of an idea for an application, try to think of an application that solves a problem. For this tutorial, our problem is thatwe have a yoga routine we can't remember when we travel so we want an app that walks us through our routine. When you arelearning to write apps, look through the app stores and try to emulate simpler versions of some common applications: a calculator, asimple game, a todo list, etc.

1-What is Intel XDK?

2-How to install Intel XDK?

3-Getting Started With Intel XDK

INTRODUCTION TO INTEL XDK

1-What Is App Starter?

2-Develop And Emulate Project

3-Pages and Page Elements4-Finalizing Pages and Footer

5-Build Package

6-Official App Starter Tutorial

USING APP STARTER AND APPFRAMEWORK

1-What Is App Framework?

2-Basic App Framework Concept

3-Online Editor (App FrameworkV.3)

APP FRAMEWORK

1-How To Test XDK Projects

2-How To Debug XDK Projects3-How To Use Cloud Manager

TEST AND DEBUG XDKPROJECTS

1-Intel XDK Camera Demo Project2-How Intel XDK Camera Demo

CAMERA API

0 Lainnya Blog Berikut» Buat Blog Masuk

Create a Project

Open up the XDK and select ’Start a New Project’ in the bottom left-hand side of the screen.

Under the ‘START NEW APP’ options in the left pane, select ‘Use App Starter’.

In the right pane we will name the project ‘YogaAppStaterApp’ and select a project location, in this case a folder with the samename on our desktop.

Click the ‘CREATE’ button in the bottom right corner of the screen.

If this is your first time using the Intel XDK, you may see the following prompt:

Project Works

3-Some Examples On XDKCamera Objects API

4-Apache Cordova Basic CameraAPI

1-Cordova Accelerometer

2-Cordova Camera

3-Cordova Capture

4-Cordova Compass5-Cordova Connection

6-Cordova Contacts

7-Cordova Device

8-Cordova Events9-Cordova Files

CORDOVA API 3.0

► 2015 (20)

▼ 2014 (40)

BLOG ARCHIVE

Feel free to take the Quick Tour or select ‘Don’t show this again’ to prevent this dialog from appearing again. TIP: Note that onceyou select ‘Don’t show this again’ you will not be able to get back to the Quick Tour later. For now we will click ‘No Thanks’.

Use the Develop Tab

Click on the ‘Develop’ tab at the top, if you are not there already.

You should see a blank screen with the following navigation pane on the left.

Double-click on ‘index.html’.

TIP: If you single click the file will load, but double clicking a file adds it to your ‘Working Files’ and makes it easier to come back tolater.

▼ November (23)APACHE CORDOVA API 3 0Files

APACHE CORDOVA API 3 0Events

APACHE CORDOVA API 3 0Device

APACHE CORDOVA API 3 0Contacts

APACHE CORDOVA API 3 0Connection

APACHE CORDOVA API 3 0Compass

APACHE CORDOVA API 3 0Capture

APACHE CORDOVA API 3 0Camera

APACHE CORDOVA API 3 0Accelerometer

INTEL XDK 1494 APPSTARTER TUTORIAL 4

Apache Cordova CameraAPI Basic Tutorial

Some projects using IntelXDK Camera Objects API

How Intel XDK SimpleCamera Sample Works

Intel XDK Camera DemoProject

How To Debug XDK Projects

How To Test INTEL XDKProjects

Intel App Framework (OnlineBasic Tutorial)

What Is Intel XDK AppStarter?

What Is Intel AppFramework?

Intel XDK App StarterTutorial (Official)

INTEL XDK 1494 APPSTARTER TUTORIAL 3

INTEL XDK 1494 APPSTARTER TUTORIAL 2

INTEL XDK 1494 APPSTARTER TUTORIAL 1

► October (17)

You should see two buttons at the top of the screen for CODE and DESIGN:

These buttons will let you switch between the code editor and the App Starter. Make sure the ‘DESIGN’ button is selected, and youshould see a pane like this:

You can toggle back and forth between 'CODE' to view and edit code in the Adobe Brackets* editor, and 'DESIGN' to work with AppStarter to drag and drop elements in a GUI (graphical user interface). For this project we will use App Starter in the 'DESIGN' view,but feel free to use the 'CODE' view to look at the HTML and CSS generated as you drag and drop elements into your application.

Lesson 2: Design

Design the App Layout

Typically a developer will get initial input from a designer on the layout of the application or storyboard. The most commondeliverable from a designer is a wireframe. For this project, I have provided the following wireframe which we will use to guide ourapplication layout. This wireframe or mock-up was created using Balsamiq*’s Web App and can be foundhere.

Click to enlarge the image above in a new tab.

Usually a wireframe like the one above is enough for a developer to get to work. Many developers will use temporary or placeholderimages while a designer or artist creates final images or ‘assets’ to make the application look professional. We are going to needsome placeholder images from the web. You don’t need to have an art degree to create a good looking application, there areseveral websites where you can collaborate with designers or public domain artwork libraries on the web.

TIP: It is a good idea to check all licensing on image files and make sure that any images you get from the web are license underthe CC0 or ‘No Copyright Creative Commons’ license which states:

"The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights tothe work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission."

Get Project Files

Today, we’re going to grab our images off of Pixabay* that generally serves up CC0 images. Remember to ALWAYS check yourlicense files on images you use. Even sites like Pixabay* often have featured or advertised content that is not CC0 licensed.

For this lab, I searched for keywords ‘meditation’ and ‘yoga’ and downloaded the following SVG images:

http://pixabay.com/en/enlightenment-buddhist-monk-154910/

http://pixabay.com/en/yoga-exercise-position-stretch-37267/

http://pixabay.com/en/man-sport-yoga-person-gymnast-37264/

http://pixabay.com/en/man-figure-yoga-person-sports-37262/

http://pixabay.com/en/figure-sport-person-gymnast-37268/

For your convenience, we've provided a zip file containing all the images. Click on the 'Download' button below:

Download – appstarter_images.zip.

Unzip the images, navigate to your desktop (or alternate path if you browsed to a different project location) to find the app folder,and place them in the YogaAppStarterApp folder as shown below.

TIP: The reason we used SVG images which have the file extension ‘.svg’ is because Scalable Vector Graphics are just that,scalable, and can resize without distorting the image. They are usually relatively small and good for line-art or clipart like we areusing here. It also prevents us from having to have very large images that will bloat the memory of our application or very smallimages that get distorted on a larger screen.

Add Files to the Project

Once you have the images in the correct folder, return to the Intel XDK and right-click on the file list to the left.

Select ‘Refresh File Tree’ to see your new files. You should see an ‘images’ folder appear and it will take a few seconds to load allyour files. The panel will turn a darker grey while the images load.

If you click on the the arrow to the left of the ‘images’ folder you will see your five files have loaded.

Now lets learn how to use these images!

Remove 'Hello World' Button

Every app has a page the user of an application sees first. We often call this the ‘home’, ‘main’ or ‘landing’ page. Sometimes you willhear the phrase ‘splash screen’ if the first page is only visible for a few seconds while the application loads. For our main page weare going to add an image and some welcome text.

In the App Starter, the first page has been created for us with a button for ‘Hello World’, which we don’t need, so we are going todelete it.

Click on the ‘Hello World’ button shown in the center of the screen.

You should see the ‘Page Properties’ turned into ‘Button Properties’ on the right-hand side of the screen.

Click on the ‘Delete’ button to delete the 'Hello World' button in the application. A dialog box will appear…

Click the blue button for ‘CONFIRM’ to delete the button and you will see the button disappear.

Lesson 3: Create Home Page

Add a Layout Element

Next we are going to add a layout.

Click the ‘Elements’ tab in the left toolbar to display some layout elements.

Drag and drop the first 'Container' element under 'Layout' onto your application canvas in the center of the screen.

You’ll notice the ‘Container Styles’ on the right has the width of 100%. We are going to add a height of 100% also so that our mainpage stretches to fill any screen size.

Type ‘height:100%;’ into the ‘Container Styles’ box and click the blue ‘Apply’ button to see your Container layout change size.

TIP: Any time you are writing styles be sure to add a semi-colon to the end of each style ‘;’ so that the browser knows to check thenext line for more styles.

Add an Image Element

Next we are going to add an ‘Image’ to the ‘Container’.

Drag the landscape icon or 'Image' element into the 'Container' or blue box in the center of the main application page.

In the right-hand ‘Image Properties’ pane set the following properties:

Title: Meditation Monk

Source: images/enlightenment-154910.svg

Width: 100%

Height: auto

If you hover your mouse over the image without clicking on anything you will see the title 'Meditation Monk' appear by your cursor.

TIP: The source tells the browser which image to load, in this case, the image of the monk from your ‘images’ folder. You alwaysneed to include the path from where your styles are, in this case the .html file which is in the root or top level folder. So to get to ourimages we need to look inside the images folder and need to prefix all file names with ‘images/’.

Apply Styles to an Image

We set the width to be 100% of the screen width, and using ‘auto’ for height will ensure our image scales proportionally to the widthand doesn’t stretch.

Click the blue ‘Apply’ button to see your image magically appear and resize to 100% of the application width.

Ommmmmmmm…

Behold! We have a meditating monk! Lets add a greeting.

Add a Text Element

In the ‘Elements’ tab and under the 'MEDIA' section, select the ‘Text’ element and drag it under the monkimage.

In the right-hand pane, change ‘Your text here’ to ‘Welcome!’. You’ll notice it is a bit off center. Lets center it!

In the ‘Text Styles’ pane to the bottom-right we are going to center the text by typing:

text-align: center;

Click the blue ‘Apply’ button to see the text center.

Set the Page Header

Before we move on we are going to set the page header so we don’t have to come back to it later.

Click on the left pane ‘Pages’ tab and select your ‘Main’ page so the ‘Page Properties’ appears in the top right pane.

Change the ‘Header’ to from 'default' to ‘header_0’ and click the blue ‘Apply’ button.

‘header_0’ is just the name of the another header (we can change the name later if we want) other than the default. ‘default’ onlyhas a ‘Home’ button and eventually we will want more navigation buttons to connect our new pages to. We will need to do this toevery new page we create.

That’s it for the main page!

Lesson 4: Create About Page

Create a New Page

Next we are going use what you just learned to make an About page.

Click from the toolbar show in the left-hand side of the Intel XDK to add a new page. You should see a ‘New Page’ created.

Click on ‘New Page’ to see the ‘Page Properties’ appear in the top right panel.

We are going to set the ‘Title’ to ‘About’ and click the blue ‘Apply’ button. You’ll see the title changed at the top of your application.

Add Content

Lets see what you can do on your own. Refer to the previous section if you get stuck:

Add a Container with 100% width and height.

Add another image of the monk with height of 40% and width set to 100%.

Add a ‘Text’ element with the following text:

Yoga is very healthy for you. You should try to do yoga every day. Try to focus on your breathing and with each movement breathin, and then breath out with the next movement. Try to breath down into your belly. Take it slow and never force your body. Let theenergy flow through the top of your head to your feet grounded on the yoga mat. If you do yoga every day, you will be more flexibleand live a long and fulfilling life. ~Namaste ~

At this point you should have something that looks like the following:

Add a Break Tag

Lets add the break tag “<br>” before “~Namaste~” to put it on a new line. Hit the blue ‘Apply’ button.

You can even add a second <br> to push it down the page.

For extra credit, you can center the text.

And last but not least, set your header to header_0 for the ‘About’ page.

Good job! Your second page is done!

Lesson 5: Create List Page

Create a List

Go back to the ‘Pages’ tab and add a new page with the title ‘Series’.

Go to the ‘Elements’ tab and drag a ‘List’ layout element onto the page.

We are going to have four yoga positions so click the plus sign in the ‘List Properties’ view twice.

You should see two more 'Item' entries appear.

Rename the List Items

Instead of ‘Items’ we will have ‘Positions’ so we need to rename what the user sees in the list. First copy the text inside ‘Item 1’ into‘Item 2’ and ‘Item 3’.

Then replace all mentions of the word “Item #” with “Position #” substituting # for a number and click the blue ‘Apply’ button.

Make sure your positions list counts from 1 to 4.

We now have our positions list to start from. We will need a separate page for each position. You should already know how to createa new page…

Lesson 6: Create Content Pages

Create Multiple Pages

Click on the Pages tab and add four new pages. You should have a pane that looks like the following:

Now select each page in the ‘Pages’ pane and in the ‘Page Properties’ on the right re-name each page 'Title' to “Position1”,“Position 2”, “Position 3”, and “Position 4” respectively. Remember to hit the blue ‘Apply’ button to save the ‘Title’ change.

Your right pane should look like the following:

Time to test what you remember. Refer to the previous sections if you get stuck.

We are going to repeat the previous section of instructions but we are going to use different images on each page and use the textfield to describe each image.

Add Position 1 Image

Click on ‘Position 1’ in the ‘Pages’ pane.

Now in the ‘Elements’ tab we are going to add a 'Container’ element from the ‘Layout’ options and set the width and height to 100%;

Next add an ‘Image’ element and in the ‘Image Properties’ pane we will set the following:

Title: Child’s Pose

Source: images/figure-37268.svg

Width: 100%

Height: auto

Now drag a ‘Text’ element onto the page and change the text to the following:

Add Position 1 TextPosition 1: <br>Kneel down with your arms outstretched in front of you.

In the ‘Text Styles’ pane set the text to be centered and ‘Apply’ your changes.

Position 1 page should look like the following:

Set the header to ‘header_0’.

Click save .

On to the next page…

Add Position 2 Image

Click on ‘Position 2’ in the ‘Pages’ pane.

Now in the ‘Elements’ tab we are going to add a 'Container’ element from the ‘Layout’ options and set the width and height to 100%;

Next add an ‘Image’ element and in the ‘Image Properties’ pane we will set the following:

Title: Bridge Pose

Source: images/man-37262.svg.svg

Width: 100%

Height: auto

Add Position 2 Text

Now drag a ‘Text’ element onto the page and change the text to the following:

Position 2: <br>Lye flat on your back and then slowly use your hands to arch your back into a bridge.

In the ‘Text Styles’ pane set the text to be centered and ‘Apply’ your changes.

Position 2 page should look like the following:

Set the header to ‘header_0’.

Click save .

On to content page 3…

Add Position 3 Image

Click on ‘Position 3’ in the ‘Pages’ pane.

Now in the ‘Elements’ tab we are going to add a 'Container’ element from the ‘Layout’ options and set the width and height to 100%;

Next add an ‘Image’ element and in the ‘Image Properties’ pane we will set the following:

Title: Twisted Back Stretch

Source: images/man-37264.svg

Width: 100%

Height: auto

Add Position 3 Text

Now drag a ‘Text’ element onto the page and change the text to the following:

Position 3: <br> Cross your right leg bent over your straight left leg. Try to place your left elbow on the outside of your right knee.Keep your posture straight and look behind you as you twist back.

In the ‘Text Styles’ pane set the text to be centered and ‘Apply’ your changes.

Position 3 page should look like the following:

Almost done! One more…

Set the header to ‘header_0’.

Click save .

Fourth content page…

Add Position 4 Image

Click on ‘Position 4’ in the ‘Pages’ pane.

Now in the ‘Elements’ tab we are going to add a 'Container’ element from the ‘Layout’ options and set the width and height to 100%;

Next add an ‘Image’ element and in the ‘Image Properties’ pane we will set the following:

Title: Quad Stretch

Source: images/yoga-37267.svg

Width: 100%

Height: auto

Add Position 4 Text

Now drag a ‘Text’ element onto the page and change the text to the following:

Position 4: <br>Sit in a V, then bring your right leg in and stretch towards your left, try to keep your back straight and reach for yourtoes.

In the ‘Text Styles’ pane set the text to be centered and ‘Apply’ your changes.

Position 4 page should look like the following:

Set the header to ‘header_0’.

Click save .

You now have some content! Lets connect it to our list…

Link to Content Pages from a List

Return to the ‘Position 1’ content page from the ‘Pages’ pane.

In the ‘Page Properties’ pane on the right you will notice the page has an ‘ID’. In this case ‘page_3’. This is the ID we need to link toto connect our list to this page.

Click on the ‘Series’ page and click on your ‘List’ element.

<a href=”#”> is an anchor tag element that hyperlinks to the reference given by the “=”. By using the ‘#’ symbol, we can link to otherIDs of other elements. So to link to the ‘Position 1’ page from the first ‘Item 0’ in our list, we need to have href= point to “#page_3”because “page_3” is the ID for our content page for “Position 1”. We can rename the ID, what matters is that they are the same inthe list for Position 1 and the actual ID name for the page for Position 1.

Likewise, we need to lookup the IDs for our other three position pages and link each page to the matching item in our list. Your ‘ListProperties’ pane should look like the image below:

Save your work.

Your list now connects to the appropriate Position page. Lets add one more page to wrap up our app.

Lesson 7: Create Resources Page

Create a New Page

Create a new page.

Change the ‘Page Name’ to ‘Resources’.

Create a layout ‘Container’ with width and height of 100%;

From the ‘Forms’ elements, drag a ‘Button’ onto the page.

Set the ‘Button Properties’ to the following:

ID: button1

Title: Intel XDK

Link: http://software.intel.com/en-us/html5/tools

Transition: Slide

Set the width in the ‘Button Styles’ to be 100%;

Add Two More Buttons

Add a second button to link to the App Starter Video with ‘Button Properties’:

ID: button2

Title: App Starter Video

Link: http://software.intel.com/en-us/html5/videos/make-a-quick-and-attractive-ui-for-your-app

Transition: Slide

And a button style with a width of 100%.

The last button you will add will be to App Starter documentation. Include ‘Button Properties’ for:

ID: button3

Title: App Starter Documentation

Link: http://www.html5dev-software.intel.com/amdocs/lib/Tutorial-CreateAppUsingAppStarter.pdf?r=8838

Transition: Slide

Set the ‘Header’ in ‘Page Properties’ to be ‘header_0’.

Save your app, and it’s time to create the footer and header!

Create a Footer

Click on the ‘Nav’ tab in the left pane.

Click on ‘header_0’ to see ‘Header Setup’ pane on the right.

Highlight and delete any text in the text field and hit ‘Apply’. The markup shown adds the Back button you see and displays the pagename.

Instead type:

<h1 class="apptitle">Yoga App</h1>

Click ‘Apply’ to rename every header of your application “Yoga App”.

Remember that earlier we set each page header to ‘header_0’ which is why if you click on any of our previous pages you will seethe change.

Click on Save.

Click on ‘defaultFooter’. This is the main footer we want to use for navigation on most of our pages. This is where we get to createthe buttons at the bottom of the screen and connect them to actual pages!

The defaultFooter should look like the image below with only a Home button with a House icon that links to the main page.

We want to add three more buttons to our footer navigation.

Add Footer Buttons

Add a ‘Title’ for ‘About’, give it an ‘Icon’ of “Info” and the ‘Page’ we want to link to is the ‘About’ page.

Add a ‘Title’ for ‘Series’, give it an ‘Icon’ of “Star” and the ‘Page’ we want to link to is the ‘Series’ page.

Add a ‘Title’ for ‘Resources’, give it an ‘Icon’ of “Question” and the ‘Page’ we want to link to is the ‘Resources’ page.

Your ‘Footer Setup’ should match the image below:

Save your work.

Lesson 8: Create Navigation

Create Custom Footers

Add four more footer items but clicking on the ‘+’ sign next to the ‘FOOTERS’ category title.

Your pane should now look like the image below.

Create Position 1 Footer

Click on ‘footer_1’ to see the corresponding ‘Footer Setup’ in the right pane. We will want to add a ‘Previous’, ‘Home’, and ‘Next’navigation.

Think about what we want to do here, from the first content page for “Position 1” we want to go back to the About page if a userselects the “Previous”, we want to go to Main for “Home” and we want to go to Position 2 for “Next”. To map that out we need to dothe following:

Add a navigation button with a ‘Title’ of “Previous”, an ‘Icon’ of “Left” and a ‘Page’ link to ‘About’ in the first row.

Add a navigation button with a ‘Title’ of “Home”, an ‘Icon’ of “House” and a ‘Page’ link to ‘Main’ in the second row.

Add a navigation button with a ‘Title’ of “Next”, an ‘Icon’ of “Right” and a ‘Page’ link to ‘Position 2’ in the third row.

Create Position 2 Footer

For ‘footer_2’:

Add a navigation button with a ‘Title’ of “Previous”, an ‘Icon’ of “Left” and a ‘Page’ link to ‘Position 1’ in the first row.

Add a navigation button with a ‘Title’ of “Home”, an ‘Icon’ of “House” and a ‘Page’ link to ‘Main’ in the second row.

Add a navigation button with a ‘Title’ of “Next”, an ‘Icon’ of “Right” and a ‘Page’ link to ‘Position 3’ in the third row.

Create Position 3 Footer

For ‘footer_3’:

Add a navigation button with a ‘Title’ of “Previous”, an ‘Icon’ of “Left” and a ‘Page’ link to ‘Position 2’ in the first row.

Add a navigation button with a ‘Title’ of “Home”, an ‘Icon’ of “House” and a ‘Page’ link to ‘Main’ in the second row.

Add a navigation button with a ‘Title’ of “Next”, an ‘Icon’ of “Right” and a ‘Page’ link to ‘Position 4’ in the third row.

Create Position 4 Footer

For ‘footer_4’:

Add a navigation button with a ‘Title’ of “Previous”, an ‘Icon’ of “Left” and a ‘Page’ link to ‘Position 3’ in the first row.

Add a navigation button with a ‘Title’ of “Home”, an ‘Icon’ of “House” and a ‘Page’ link to ‘Main’ in the second row.

Add a navigation button with a ‘Title’ of “Next”, an ‘Icon’ of “Right” and a ‘Page’ link to ‘Resources’ in the third row.

If you were not using the App Starter, you would probably just make a single footer for all four content pages and then useJavaScript to change what “Previous” and “Next” link to.

Apply Custom Footers to Pages

Now we need to go back to each of our four content pages and connect the footers we just made.

Select ‘Position 1’ page and in ‘Page Properties’ set the ‘Footer’ to ‘footer_1’.

For ‘Position 2’ use ‘footer_2’.

For ‘Position 3’ use ‘footer_3’.

For ‘Position 4’ use ‘footer_4’.

Lesson 9: Test, Debug, Build

Simulate Device

Now click on the ‘Emulate’ tab tab at the very top of the screen.

In the left ‘DEVICES’ pane, select ‘Lenovo K900’.

In the center of the screen you should see the simulation of your application running inside a skin for a Lenovo K900 phone.

Go ahead and click on ‘Home’, ‘About’, ‘Series’ and ‘Resources’ navigation buttons in the footer. You will notice your pages are nowhooked up.

Next, click on ‘Series’ then ‘Position 1’ and you will be able to move forward and backwards through your list of content.

Pretty neat, right? Feel free to play around with your app.

Test on Device

Now that our app is developed and it simulates the navigation we want in the ‘EMULATE’ tab, we can test our application on anactual device.

First we want to go to the ‘TEST’ tab at the very top of the screen.

You may get the following dialog box:

Go ahead and select the grey ‘DISMISS’ button for now.

Follow the ‘App Preview Device Testing Guide’ in the left-hand pane. Copied below for your convenience:

1) Install Intel App Preview on your testing devices(s). Search “Intel App Preview” to get it in the Apple* App Store, Google* PlayStore, or Windows* Phone Store.

2) Push your local files to the Testing Server to run your latest development files.

Debug on Device

If you want to debug, make sure you’ve pushed HTML files that include the Weinre script tag below.

For on device debuggin to work properly, you must:

Have your app running in App Preview, before clicking the debug button in the ‘TEST’ tab.Embed the tag below into your HTML files.

EMBED THIS WEINRE TAG IN YOUR HTML FILES”

<script src="http://debug-software.intel.com/target/target-script-min.js#6WuUE875lqFAExFAVLMC1yWZ7Rtk_Rg0TCW9wwiLvvc"></script>

App Preview Setup

3) Log into Intel App Preview on your device using your Intel XDK account credentials.

4) Either use the QR code reader (native or form within App Preview) to launch your app using the code to the right or Click theServer Apps tab located in the bottom nav bar of App Preview and navigate to your desired app product.

5) Click the Launch This App button and begin testing your app on device.

Scan the QR code provided in the ‘TEST’ tab to launch your app in App Preview.

Build for iOS

Click on the ‘BUILD’ tab at the top of the screen.

Here you can see all the stores you can build for. Click on iOS Production to build for Apple* iOS.

When the prompt below appears, select ‘USE EXISTING’ to prevent uploading your app again to the server without changes beingmade.

From the overview pane, you can easily see that your app will not build for iOS. You have to go through Apple* provisioning processand pay for certification to be an iOS developer before you can build or publish your app to the Apple* store. Links for walkthroughsare provided below. But for now we are going to move on and build for an Android* phone.

http://www.html5dev-software.intel.com/amdocs/lib/Walkthrough_v5_ExportP12.pdf

http://www.html5dev-software.intel.com/amdocs/lib/Walkthrough_v2_ObtainAppID.pdf

http://www.html5dev-software.intel.com/amdocs/lib/Walkthrough_v3_CreateDistProvProfile.pdf

Click on the ‘CLOSE BUILD’ button in the top left corner and then click on the blue ‘BUILD’ button for Android.

Build for Android

In this Overview you will see your app already build for Android without having to do anything. If a red X appears you can click onthat topic for a guided walkthrough of how to fix your application.

Click on the big green ‘Build App Now’ button on the right and hopefully you will see the screen below:

This means our application build for Android and we have the option of downloading an .apk file to submit to a store or load on ourphone or emailing it to ourselves. We recommend you enter an email address and open the email on an Android phone to install the.apk. You might need to enable apps from third-party sources in your phone settings.

Good luck and congratulations!

You just developed a mobile application, ran it in a simulator, tested it on your device, and built it for Android!

---

Newer Post Older PostHome

Subscribe to: Post Comments (Atom)

Posted by notarazi at 10:39 PM Recommend this on Google

Notify me

Sign out

Enter your comment...

Comment as: Unknown (Google)

Publish Preview

2 comments:

emmanuel dominick September 5, 2015 at 4:27 PM

thanks

Reply

emem umoh November 30, 2015 at 1:45 AM

Beautiful, very beautiful

Reply

Picture Window template. Powered by Blogger.