Nokia Asha Web Apps Tutorial - from SDK installation through to store publishing
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.
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.
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.
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
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!