×
Namespaces

Variants
Actions
(Difference between revisions)

EWallet Cloud Storage - app showcase

From Nokia Developer Wiki
Jump to: navigation, search
chintandave_er (Talk | contribs)
(Chintandave er - resized gallery sceenshots)
chintandave_er (Talk | contribs)
(Chintandave er - removed Ads "for Sale". It is not allowed and should consider as spam.)
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Networking]][[Category:Symbian]]
+
[[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Networking]][[Category:Symbian]][[Category:3rdPartyProducts]]
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+
 
+
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= Source is not open, contains sensitive encryption
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
|installfile= See at Download section
+
|installfile= [http://cloud.resonance-studios.com/eWallet/promo/Symbian/eWallet_installer_selfsigned_belle_qt474.sis link]
|devices= Nokia 700 (on RDA), Nokia X7, Nokia N8, Nokia C7 (partially), Nokia E6 (needs some changes don't install yet)
+
|devices= Nokia 700 (on RDA), Nokia X7, Nokia N8, Nokia C7 (partially)
As WebApp: Nokia Lumia 800 and browsers Mozilla Firefox 9, Internet Explorer 9, Google Chrome (latest on 10th March 2012), Opera 10
+
|sdk= [http://qt.nokia.com/downloads/ Qt SDK 1.2]
iOS5: Safari on iPad
+
Android: default browser and Opera Mobile on Samsung Galaxy S
+
|sdk= SDK(s) built and tested against (e.g. [http://qt.nokia.com/downloads/ Qt SDK 1.2])
+
 
|platform= Symbian Anna, Belle and later, Qt 4.7.4 or later
 
|platform= Symbian Anna, Belle and later, Qt 4.7.4 or later
 
|devicecompatability= Symbian^3 devices
 
|devicecompatability= Symbian^3 devices
 
|dependencies= Qt Quick Components 1.1
 
|dependencies= Qt Quick Components 1.1
|signing= Nokia Signed / Self-signed before Nokia Store  
+
|signing= Nokia Signed / Self-signed before Nokia Store
 
|capabilities= NetworkServices
 
|capabilities= NetworkServices
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
Line 29: Line 24:
  
 
== Introduction and Summary ==
 
== Introduction and Summary ==
This is a cloud based personal data storage app. It offers a really nice GUI that uses lots of prebuilt QML elements, mixed with customized ones. To make sure your data won't leak anywhere, the app only transfers and reveives the data encoded (multiple times, multiple methods)
+
{{Abstract|EWallet is a cloud based personal data storage app. This article showcases the app design.}}
This page is created to introduce the user interface the app, to 1) show my tricks and solutions to others, and 2) to clarify things or answer possible questions in the Qt Quick competition.
+
 
 +
EWallet offers a really nice GUI that uses lots of prebuilt QML elements, mixed with customized ones. To make sure your data won't leak anywhere, the app only transfers and retreives the data encoded (multiple times, multiple methods)
 +
 
 +
This page is created to introduce the user interface the app, to:
 +
# show my tricks and solutions to others, and  
 +
# clarify things or answer possible questions in the Qt Quick competition.
  
 
== Main Screen ==  
 
== Main Screen ==  
 
The screen uses a slowly fading cloudy background, because it's a nice background and, obvious for the cloud-based services. The login and password buttons are having a small animation. The first time someone opens the app and fills in that information, can register there. An easy-to-fill webpage somes in an embedded WebView that I tried to design as they were QML Components. After the registering, the system keeps the entered data, so the users can log in directly. A fancy loading indicator is fading in and out, with 3 circles rotating in different directions. After signing in, the app downloads and decrypts the entries from the cloud, then shows them in a two-columned list.
 
The screen uses a slowly fading cloudy background, because it's a nice background and, obvious for the cloud-based services. The login and password buttons are having a small animation. The first time someone opens the app and fills in that information, can register there. An easy-to-fill webpage somes in an embedded WebView that I tried to design as they were QML Components. After the registering, the system keeps the entered data, so the users can log in directly. A fancy loading indicator is fading in and out, with 3 circles rotating in different directions. After signing in, the app downloads and decrypts the entries from the cloud, then shows them in a two-columned list.
  
<gallery widths=600px heights=390px>
+
<gallery widths=250px heights=390px>
 
File:startscreen2.png|Starting screen
 
File:startscreen2.png|Starting screen
 
File:mainscreen2.png|Welcome screen after login
 
File:mainscreen2.png|Welcome screen after login
Line 44: Line 44:
 
The toolbar remains simple in this app, (it would be too much t put everything in it) so it only offers an exit button and a help button that opens another page (using PageStack). On that page, the toolbar chanes: the help button disappears and the exit button becomes a back button.
 
The toolbar remains simple in this app, (it would be too much t put everything in it) so it only offers an exit button and a help button that opens another page (using PageStack). On that page, the toolbar chanes: the help button disappears and the exit button becomes a back button.
  
 
+
<gallery widths=250px heights=390px>
<gallery widths=600px heights=390px>
+
 
File:Ewalletnewentry.png|Adding a new entry
 
File:Ewalletnewentry.png|Adding a new entry
 
File:Ewalletsearch.png|Using quicksearch
 
File:Ewalletsearch.png|Using quicksearch
Line 53: Line 52:
 
== Controls on the entry-viewer popup ==
 
== Controls on the entry-viewer popup ==
 
There is the title of the entry written on top of everything, then a white divider line, and the entry data itself. There is a button row, too, with 4 buttons, with only icons, following the iconography rules strictly:
 
There is the title of the entry written on top of everything, then a white divider line, and the entry data itself. There is a button row, too, with 4 buttons, with only icons, following the iconography rules strictly:
1. Back - closes the popup
+
# Back - closes the popup
2. Delete - deletes the entry
+
# Delete - deletes the entry
3. Edit - Flips the entry data over and shows an input textarea and a save button. The entry data is precopied into the area.
+
# Edit - Flips the entry data over and shows an input textarea and a save button. The entry data is precopied into the area.
4. Share - Sends the entry data in e-mail. Just a function for comfort.
+
# Share - Sends the entry data in e-mail. Just a function for comfort.
  
<gallery widths=600px heights=390px>
+
<gallery widths=250px heights=390px>
 
File:Ewalletpopup.png|Viewing an entry
 
File:Ewalletpopup.png|Viewing an entry
 
File:Ewalletanim.png|Animating...
 
File:Ewalletanim.png|Animating...
Line 65: Line 64:
  
 
== Download ==
 
== Download ==
{|
+
* [[file:eWallet-icon.png]] - Waiting for Nokia Store distribution. (Expected: 25th of April)
|-
+
| [[file:eWallet-icon.png]]||
+
Here is the download link: [http://cloud.resonance-studios.com/eWallet/promo/Symbian/eWallet_installer_selfsigned_belle_qt474.sis link]
+
The sis is self-signed, was built for Symbian Belle using Qt 4.7.4. The app will install using Smart Installer. The app is going to be a premium app on 1st April and will be available for 2€.
+
|}
+
  
 
== Multiplatform compatibility ==  
 
== Multiplatform compatibility ==  
 
I admit this is not connected to the QML Application at all, but I think the article is finished if I tell you some words in this topic. I'm (We are) planning to support some other platforms, too. To temporarily allow access from everywhere, I have created an eWallet Web App:
 
I admit this is not connected to the QML Application at all, but I think the article is finished if I tell you some words in this topic. I'm (We are) planning to support some other platforms, too. To temporarily allow access from everywhere, I have created an eWallet Web App:
[http://http//cloud.resonance-studios.com/eWallet/webapp/ eWallet Web App]
+
[http://cloud.resonance-studios.com/eWallet/webapp/ eWallet Web App]
 
The Webapp might still have bugs, but the general functionality is working and the interface is finalized.  
 
The Webapp might still have bugs, but the general functionality is working and the interface is finalized.  
 
We are planning to support:
 
We are planning to support:
- Nokia N9, Android and iPhones with an app that is web based and runs in a WebView.
+
* Nokia N9, Android and iPhones with an app that is web based and runs in a WebView.
- Windows Phones, especially the Lumia family, with a native C# app, as well as future Windows 8 Nokia tablet PCs
+
* Windows Phones, especially the Lumia family, with a native C# app, as well as future Windows 8 Nokia tablet PCs
- Desktop PCs, both Windows and Mac, C# for Windows, and I don't have an idea yet for Mac machines.
+
* Desktop PCs, both Windows and Mac, C# for Windows, and I don't have an idea yet for Mac machines.
  
 
I hope I still fits the topic even with this porting planning.
 
I hope I still fits the topic even with this porting planning.
 +
 +
== Changelog ==
 +
=== From 0.9 (first published) to 1.0 ===
 +
* Fixed help text not showing issue
 +
* Fixed toolbar on the top issue
 +
* Fixed wrong UID
 +
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}

Revision as of 14:12, 14 August 2012

Article Metadata
Code Example
Installation file: link
Tested with
Devices(s): Nokia 700 (on RDA), Nokia X7, Nokia N8, Nokia C7 (partially)
Compatibility
Platform(s): Symbian Anna, Belle and later, Qt 4.7.4 or later
Symbian
Device(s): Symbian^3 devices
Dependencies: Qt Quick Components 1.1
Platform Security
Signing Required: Nokia Signed / Self-signed before Nokia Store
Capabilities: NetworkServices
Article
Created: molbal (04 Mar 2012)
Last edited: chintandave_er (14 Aug 2012)

Contents

Introduction and Summary

EWallet is a cloud based personal data storage app. This article showcases the app design.

EWallet offers a really nice GUI that uses lots of prebuilt QML elements, mixed with customized ones. To make sure your data won't leak anywhere, the app only transfers and retreives the data encoded (multiple times, multiple methods)

This page is created to introduce the user interface the app, to:

  1. show my tricks and solutions to others, and
  2. clarify things or answer possible questions in the Qt Quick competition.

Main Screen

The screen uses a slowly fading cloudy background, because it's a nice background and, obvious for the cloud-based services. The login and password buttons are having a small animation. The first time someone opens the app and fills in that information, can register there. An easy-to-fill webpage somes in an embedded WebView that I tried to design as they were QML Components. After the registering, the system keeps the entered data, so the users can log in directly. A fancy loading indicator is fading in and out, with 3 circles rotating in different directions. After signing in, the app downloads and decrypts the entries from the cloud, then shows them in a two-columned list.

Controls on the main screen

On the top of the screen, just below the statusbar, there is a button row with three buttons, without text, only icons: refres (obvious), quicksearch (animates a text-field out that filters the entries), and new entry (Opens up a new layer on the top of everything, slightly fades out the things behind it) The toolbar remains simple in this app, (it would be too much t put everything in it) so it only offers an exit button and a help button that opens another page (using PageStack). On that page, the toolbar chanes: the help button disappears and the exit button becomes a back button.

Controls on the entry-viewer popup

There is the title of the entry written on top of everything, then a white divider line, and the entry data itself. There is a button row, too, with 4 buttons, with only icons, following the iconography rules strictly:

  1. Back - closes the popup
  2. Delete - deletes the entry
  3. Edit - Flips the entry data over and shows an input textarea and a save button. The entry data is precopied into the area.
  4. Share - Sends the entry data in e-mail. Just a function for comfort.

Download

  • EWallet-icon.png - Waiting for Nokia Store distribution. (Expected: 25th of April)

Multiplatform compatibility

I admit this is not connected to the QML Application at all, but I think the article is finished if I tell you some words in this topic. I'm (We are) planning to support some other platforms, too. To temporarily allow access from everywhere, I have created an eWallet Web App: eWallet Web App The Webapp might still have bugs, but the general functionality is working and the interface is finalized. We are planning to support:

  • Nokia N9, Android and iPhones with an app that is web based and runs in a WebView.
  • Windows Phones, especially the Lumia family, with a native C# app, as well as future Windows 8 Nokia tablet PCs
  • Desktop PCs, both Windows and Mac, C# for Windows, and I don't have an idea yet for Mac machines.

I hope I still fits the topic even with this porting planning.

Changelog

From 0.9 (first published) to 1.0

  • Fixed help text not showing issue
  • Fixed toolbar on the top issue
  • Fixed wrong UID

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

166 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.

×