Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Nokia Asha Web Apps Tutorial - from SDK installation through to store publishing

From Wiki
Jump to: navigation, search

Read this tutorial to learn how to install all needed developing tools, build your first Web App for a Nokia phone and distribute it in the Nokia store.

Article Metadata
Tested withCompatibility
Platform(s): Series 40 Developer Platform 2.0 and later
Series 40
Series 40 DP 2.0
Device(s): All
Created: Thomas Tursics (31 Jul 2012)
Last edited: hamishwillee (09 May 2013)

Note.pngNote: This is an entry in the Asha Touch Competition 2012Q3


Step 1: Install the developing tools

To start developing a Series 40 Web App, install the Nokia Web Tools. The tools are available for Windows, Mac OS X and Linux. The tools contain a full development environment with which you are able to create, edit, package and deploy your Web App. An integrated simulator lets you preview your App and helps you debugging. To develop Web Apps for Nokia Series 40 smartphones, it is required to install version 2.0 of the Nokia Web Tools.

Go to the Nokia Web Tools section on the Nokia developer page and follow the Download Nokia Web Tools link.

Webtoolsinstaller a.PNG

Choose your developing platform (Windows, Mac or Linux) in the right column and click Download.

Webtoolsinstaller b.PNG

Read the EULA (End User Licence Agreement) carefully and confirm it with clicking on the I accept and want to download button. Download and save the file NokiaWebTools_2.0.0.exe (the name differs on other platforms than Windows) to your local disk.

Webtoolsinstaller c.PNG

Execute the downloaded file. After the welcome screen showed up, you can start installing via the Next button.

Webtoolsinstaller 1.PNG

To develop Web Apps for Nokia Series 40 smartphones it is required to install version 2.0 of the Nokia Web Tools. So yes, continue the wizard and click Next.

Webtoolsinstaller 2.PNG

Accept the displayed agreement. Please be not confused by the agreement being labelled License Agreement once, then Software Agreement another time. And be not confused because you accepted the same agreement some minutes ago (being called EULA). Check the mark and continue with Next.

Webtoolsinstaller 3.PNG

Choose your region (China or Rest of the world) and continue with Next.

Webtoolsinstaller 4.PNG

Choose an install folder or just use the default one. Start the installation process with Install.

Webtoolsinstaller 5.PNG

After the installation has finished, click Next.

Webtoolsinstaller 6.PNG Webtoolsinstaller 7.PNG

That is it. Yeah :-) Click Finish to close the install wizard and open the installed tools.

Webtoolsinstaller 8.PNG

Step 2: Launch the developing tools

The Nokia Web Development Environment (short Nokia WDE) sets up the workspace folder the first time you start the tool. The workspace is the root folder for all your Web App projects.

SetupWDE 1.PNG

Do you remember the EULA? No? Please read and accept this agreement the third time before continuing with Accept.

SetupWDE 2.PNG

Your WDE is now successfully installed, set up and waiting for further actions.

SetupWDE 3.PNG

Step 3: Create your first Web App

Go to the menu File -> New -> Series 40 web app (wgt) to create your first Nokia Web App.

Select the RSS feed project template from the list and click Next.


Enter a project name, display name and short name. E.g., I named my app Developer News. Enter a valid version number (like 1.0) and a unique identifier. The unique identifier should contain your own company or personal domain with the name of the project appended. E.g., I used http :// Continue with Next.

Warning.pngWarning: Do not name it Nokia Developer News. You mustn't use not owned brandings like Nokia.


Leave the name of the main HTML page untouched (index.html) and change the project settings to your individual requirements. Enter in RSS feed URL. Click Finish when done.


Confirm remembering your author detail for future projects.


Your first Web App project for the Nokia smartphones is created. Have a look at the Project Explorer in the upper left corner. Expand the tree view to see all contained files.


Choose the menu Run -> Debug to package your project and start the included Web App Simulator. The simulator is organized in three panels: A menu panel, a device panel and a powerful web inspector.


Click on the Device menu. Choose a Full Touch device type like the Asha Touch smartphone and click Apply.


Debug your first Web App by clicking in the simulators device panel. Take a screenshot of your hard work for further use. Close the simulator by clicking the x in the menu panel in the upper right corner.


It is time for creating an application icon. Open this site in your browser, download the template and follow the instructions to make a wonderful icon. You can e.g. use the free tool Inkscape to create it. Please export two PNG files with 80x80 pixels and 256x256 pixels.


Rename the 80x80 pixels icon to icon.png and replace the icon.png file in your project root directory. Go back to the WDE and open the config.xml. Change the src path of the icon to icon.png.


Go to the menu Project -> Package Web app to prepare the distribution. Notice the new file Developer News.wgt in the Project Explorer. This .wgt file must be uploaded to the Nokia store.


Step 4: Distribute your first Web App

Click on the shopping bag icon in the panel on the left side. The Nokia Publish website opens in your browser.

DistWebApp 1.PNG

You must register yourself as a Nokia publisher. If you already have an account, just sign in. Click on Sign In in the upper right corner to open the sign in page.

DistWebApp 2.PNG

Enter your email address and password and click Sign in.

DistWebApp 3.PNG

Nokia welcomes you. Click on Create new content.

DistWebApp 4.PNG

Select the Series 40 Web App icon from the list of App content types.

DistWebApp 5.PNG

Fill the questions form:

  • your Web App has no encryption
  • yes, you will distribute the publicly available RSS
  • yes, the template complies with the guidelines

Click Continue.

DistWebApp 6.PNG

Fill the metadata form for you Web App. E.g., type in Developer News in Content item name and Display name. Please fill out every item thoroughly. This is the business card for your Web App. The user finds your App based on the entered metadata. At this point, you need the screenshot from the simulator and your 256x256 pixels icon. Continue with Create.

DistWebApp 7.PNG

You have successfully created your first content item. Continue with Upload file.

DistWebApp 8.PNG

Browse for your .wgt file and upload it. Select no for unused in-app analytics functions. Continue with Upload and continue.

DistWebApp 9.PNG

Select the featured phone types for which your Web App works. You have tested the Web App in the simulator with Full Touch device types. These devices are in S40 Developer Platform 2.0. Please select Fully tested for this device group and Not compatible for the rest. Continue with Next.

DistWebApp 10.PNG

Choose your distribution countries. Simply mark the first check box to choose the world wide option. Continue with Next.

DistWebApp 11.PNG

Choose your distribution languages. Mark the first check box again and click Save.

DistWebApp 12.PNG

You are just one click ahead from completing your work. Move your mouse to the Submit to QA button and hit it.

DistWebApp 13.PNG

Finished. You have done your best.

Now it is Nokia's turn. Please wait up to 7 business days and watch your mail income. Also check your spam mails. Nokia will (hopefully) mail a success message and your first Web App appears automatically in the Nokia store.

You can hardly wait? I couldn't either. Check your mails immediately. You have received the first mail already ...

Once you had received the success mail by nokia open Nokias Ovi Store and view your own App entry.


What's next? Check the performance of your App. Reopen the Nokia Store publishing tool.


Choose Reports in the web site main menu and have a look at your story of success.


Keep trying build and publish your own Series 40 Web App. May you do well!

This page was last modified on 9 May 2013, at 10:32.
168 page views in the last 30 days.