Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Revision as of 10:32, 9 May 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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
Article
Created: Thomas Tursics (31 Jul 2012)
Last edited: hamishwillee (09 May 2013)

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

Contents

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.

WGT RSS News 1.PNG

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 ://tursics.de/DeveloperNews. Continue with Next.

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

WGT RSS News 2.PNG

Leave the name of the main HTML page untouched (index.html) and change the project settings to your individual requirements. Enter http://www.developer.nokia.com/Community/Blogs/rss.php?blogId=300129&profile=rss20 in RSS feed URL. Click Finish when done.

WGT RSS News 3.PNG

Confirm remembering your author detail for future projects.

WGT RSS News 4.PNG

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.

WGT RSS News 5.PNG

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.

WGT RSS News 6.PNG

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

WGT RSS News 7.PNG

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.

WGT RSS News 8.PNG WGT RSS News 9.PNG

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.

WGT RSS News 10.PNG WGT RSS News 10.PNG

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.

WGT RSS News 11.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.

WGT RSS News 12.PNG

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.

Store01.png

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

Store02.png

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

Store03.png

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.
336 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×