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

Comments

Hamishwillee - Initial thoughts

Hi Thomas

Thanks for competing in the competition!

I haven't yet read this properly, but it looks like you've done a pretty thorough job of introducing the tools. My first concerns are:

• Title "Building and distributing modern Web Apps for Nokia smartphones". As this article ages, this will no longer be "modern", and also this is specific to Series 40, which largely consists of "feature phones". I suggest you rename to "Series 40 Web Tools 2.0 Tutorial - from SDK installation through to app deployment" - or similar. That way when this ages it is still clear what SDK and process you used
• Similarly, worth adding the SDK you used and any other information in the ArticleMetaData

Regards

Hamish

hamishwillee 09:53, 1 August 2012 (EEST)

Thomas Tursics -

Good suggestions. I specified the title and renamed it to timeless "Series 40". Also added some artical meta data.

Thanks,

Thomas

Thomas Tursics 00:34, 2 August 2012 (EEST)

Hamishwillee - Thomas - thanks

Fixes look good.

Regards

Hamish

hamishwillee 09:57, 8 August 2012 (EEST)

Thomas Tursics - Additions

I amended the ovi store and the look at download report

Thomas

Thomas Tursics 01:37, 1 September 2012 (EEST)

Hamishwillee - Thank you

Much appreciated. The judges will be looking at all the entries over the course of this week.

hamishwillee 10:38, 3 September 2012 (EEST)

Sangam KS - Is this app a Dynamic S40 app?

Is this app Dynamic or Simple and Static?

Regards

Sangam

Sangam KS 17:43, 25 March 2013 (EET)

Hamishwillee - Sangam - what does it matter?

The article doesn't have an accompanying app and the instructions are generic. On that basis I don't understand your question - can you please explain your problem / question in more detail.

Regards

H

hamishwillee 02:28, 26 March 2013 (EET)

Sujay M - Hamishwillee - Is App developed following this article dynamic?

I am planning to develop apps but a necessary condition is it should be dynamic. Are similar apps developed following this article (different RSS) dynamic or are they static in working?

Please provide some Dynamic generic app articles, it would be helpful for starting off S40 development?

Sujay M 07:56, 26 March 2013 (EET)

Sujay M - Will the feeds get refreshed automatically?

I want to know if the feeds get refreshed automatically. If yes, what is the refresh interval and where can we change it?

Sujay M 07:58, 26 March 2013 (EET)

Hamishwillee - I don't know - suggest you try it

Hi Sujay

I don't know - I suspect not, but why don't you just try it? As a rule its not usually a good idea on a resource constrained device to keep data flowing all the time.

However if you really need it to be updated automatically and it is not then it should be relatively simple to use a javascript timer to trigger an update.

In any case this question really has very little to do with this article. I suggest a better place to ask your question is the discussion boards because that will get more "eyes" on it.

Regards

Hamish

hamishwillee 03:02, 27 March 2013 (EET)

Sujay M - Thanks Hamish

Thanks Hamish

Sujay M 12:11, 27 March 2013 (EET)

Log in or Join to leave comments.

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 with

SDK: Nokia Web Tools 2.0

---

Compatibility

Platform(s): Series 40 Developer Platform 2.0 and later

Device(s): All

---

Article

Created: Thomas Tursics (31 Jul 2012)

Last edited: hamishwillee (09 May 2013)

Note: 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.

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

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.

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

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.

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.

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

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

After the installation has finished, click Next.

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

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.

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

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

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

Warning: 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 http://www.developer.nokia.com/Community/Blogs/rss.php?blogId=300129&profile=rss20 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.

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.

Enter your email address and password and click Sign in.

Nokia welcomes you. Click on Create new content.

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

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.

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.

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

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

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.

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

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

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

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!