Find Jobs
Hire Freelancers

PhoneGap Mobile App With Html5, Css3 and JQuery

$500-800 USD

Cancelled
Posted about 12 years ago

$500-800 USD

Paid on delivery
The app is a mobile companion for users of [login to view URL] website, a fashion website focused on fashion looks and related activities, like shopping check-ins, voting, etc. It needs to be developed with PhoneGap, using HTML5, CSS3, JQuery and some external library. The app is not difficult because you mainly have to call web services. Timing is crucial. Please read detailed description below before posting your bid. After you placed your bid, we'll provide you an iPhone UDID and you have to send us back an "hello world" app compiled with PhoneGap and with source code so that we can check your real ability to work on this project or not. Immediately after your bid has been accepted, you have to provide us a list of the webservices you need. We already developed some of them, but depending on the way you develop the front-end, some more need to be added on the backend. Because we need time to develop them, is crucial that you provide us a list of all web services you need so that we don't miss the release date. ## Deliverables You have to develop a mobile application, using PhoneGap, to be able to work on multiple platforms: iOS and Android are mandatory, other platforms are optional. You also have to integrate at least one external library to read barcodes. All interactions with our server will be with standard POST Json calls, using base64 encoding. The app could be considered a mix of [login to view URL] and [login to view URL], with some added functionalities. [login to view URL] is currently under active development to add more functionalities and launch a public beta soon. The development of the mobile app should be aligned with these developments and will be launched probably before all new functionalities will be available on the website. This means that you can't mimic something that is already available on the Web but you have to create everything from scratch. Anyway, we will provide you screenshot and wireframes of the various pages of the app and a full description of the web services you need to call. We will also give you all the graphic elements like buttons, icons, etc. The app is not difficult to create, because all business logic is on the backend and it has only to call some web services and display results in a beautiful way using, in some cases, maps. We currently have two native iPhone applications that we used to test user acceptance and interaction. We will provide full source code to the developer whose bid will win, even if there are some bugs in it and there are new functionalities to be added. The app has one opening screen and nine views: 1. Friends 2. Looks 3. Check-in 4. Wardrobe 5. Profile 6. Camera 7. Barcode 8. Search 9. Friend Details Opening screen The opening screen is displayed only if the user has not registered yet to Styloola. The first time a user run the app, it has to reply to the two "traditional" questions: ? Styloola wants to know your location... ? Styloola wants to send you push notifications... Then the screen displays a set of looks (vertical photos) in a coverflow mode. There's an overlay button, in the bottom part of the screen, with an invitation to register. If the user swipes, you display another picture, as in a normal coverflow display. If the user tap anywhere (on the button or elsewhere), then you have to display a box with three buttons in the top half ("Connect With" Facebook, Twitter and Google) and a box for email and password in the bottom half. If the user decide to not use the connect buttons then ha has to provide a email and a password and press a "register" button. While the user types, you have to validate his input and display a green checkbox or a red "X". Validation rules are: valid email address and password longer than 6 chars. The box should have a close button (this returns to the normal coverflow display of the opening screen). If the user tap outside of the box, you have to close it as if he had pressed the close button. After the account has been created you display another box where user has to complete a profile form (see below in the profile View). After the profile has been accepted and validated, you have to direct user to the "Looks" view. Next time user launch the app, he will be sent directly to the "Looks" view. If he wants to access the app with another account, he has to go to "Profile" view and click on "Log out". You then have to display the "Register/Connect" box, with a "Login" section added. In this "Login" section you have to display one button for each account a user has registered on this device, just like the Facebook app does. If the user clicks on one of these buttons you have to ask for the password and then let him to access the app, going directly to the Looks view. Top Bar The top bar has to be displayed in all views. It has a logo in the middle, a camera icon on the right and two icons on the left: barcode and search. When you tap on the camera icon you'll go to the camera view (see below). When user taps on the barcode icon he'll go to the barcode view (see below). When user clicks on the search icon, a search box appears (with a slide in effect from below the top bar). People can then type something in the search box and the results will be displayed in the Search View (see below) Bottom Bar Is a traditional bottom bar with just five buttons linked to the related views. From left to right they are: Friends, Looks, Check-in, Wardrobe, Profile. Camera When a user clicks on the camera icon in the top bar a box appears saying if you want to take a new photo right now or if you want to select it from the camera roll. It's almost identical to the way the Facebook App behaves. If the user chooses the camera roll, you have to let him select the image from the library. If the user decides to take a photo, you have to display the "traditional" camera view and let him see a preview of the picture taken. During the preview the user can decide to move forward or take another shot to replace the last one taken. After that, the app displays a form where user can: ? Decide to post the photo as a look or a product (pre-selected depending on the views where the user pressed the camera icon) ? Add a comment (max 100 chars, will be displayed on social networks) ? Specify a location (optional) ? Select social networks where he wants to share (like instagram) ? Add a full description (optional) The location should be pre filled, if he has authorized our app to know his location, with nearby locations taken from our database, If the user recently checked-in, and location has not changed that much, you have to display this location as the default one (leaving option to change it in any case). Selecting social networks works in the same way as Instagram does. If the social network connections have already been setup, they are selected by default and user can decide to disable sharing for this specific item (they will be pre-selected again for next item). If social network connections need to be configured, you have to display a configure button, that send to appropriate configuration screen (see below - profile section). Social networks are: ? Facebook ? Twitter ? Google+ ? Pinterest ? Tumblr ? FourSquare If the photo is for a product (see above), you have to display one button and three more fields, just below the product/look switch: ? Scan barcode button ? Price ? Add to Wish List ? Add to Wardrobe Pressing the scan barcode button send user to the Scan Barcode view (see below). Returning from the scan barcode view you could have to fill some fields (comment and price) if the product has been found. Both "Add to" fields works in the same way. They have a list of "wishlists" or "drawers" you can select from. They have to display last used choice by default. When the user selects any choice, the other one should become "none" (a product can't be added at the same time to the wardrobe and in a wish list). Of course a user can decide to not add the product to any list (wardrobe or wish list), selecting "none" in both fields. At the end of the options there should be a "New drawer..." or "New wish list..." option, which obviously allow people to create a new list. If the photo is for a look (see above), the button below all fields is marked as "Tag look", otherwise should be "Share". Pressing "Tag look" leads user to a new screen where the look photo is displayed with a small overlay "Finished" button on the top right corner and an overlay "Tap on a item to tag your look" text in the bottom of the screen. The picture could be zoomed-in and out in a traditional way. When the user tap on the picture, you have to display a "Tag" box where user has to specify: ? Item type ? Brand ? Price (optional) ? Comment (optional) ? Color At the bottom of the box there are two buttons: "Cancel" and "Done". There is also a "X" icon at the top right corner that acts exactly like the cancel button. Item type is a standard selection from list of options with two levels. Brand is an autocomplete text box. Price and comment are simple text box with number validation for price. Color is a square solid color box (whose color is derived from the one just below the point where the user tapped) that displays a color wheel picker when the user taps on it. Clicking on the "Done" button returns the user to the display of the picture with an added icon with a number on the place the user tapped. It is a progressive number starting from one: if the user added 6 tags, you have to display 6 small icons numbered 1 to 6. If the user taps on one of the icons you have to display the tag box filled with the date related to the tag to allow editing of it. Clicking on "Finished" sends the user back to previous screen with two buttons: "Share" and "Review tags". When the user press the Share button, you have to call a web service and display the message returned (in a standard way) while returning the user to the view he was using before clicking on the camera button. Wardrobe The wardrobe view is basically a list viewer using a simple two-levels accordion, that has to work in a traditional way (even to arrange list orders, dragging and dropping them). At the top of the view there are two tabs marked "Wardrobe" and "Wish Lists", aligned on the left and a "+" button on the right". When the user clicks on the "+" button, it appears a small overlay box where he can type the name of a new drawer or wish list (the type is determined by the selected tab). On the selected list there is an "Edit" button that allow people to change the name or delete the list altogether (obviously there is a "are you sure?" message to confirm deletion). When the user tap on a product, you have to display the product in a way similar to the one used to insert a product in the Camera View. There is an "edit" button and all sharing possibilities, even if the product has already been shared. Friends Friends page is almost identical to the Friends page in the foursquare app for iPhone. It displays a map that shows your friends location. Map should work as usual with panning and zooming. Tapping on an icon of a friend displays an overlay box with details of last checkin. Tapping again on the friend icon sends the user to the Friend Details view. A button in the map gives access to a list of friends checkin. In this screen there two tabs ("Recent" and "Nearby") and a button to go back to the map view. Both tabs display a list of friends checkin sorted in a different way. Tapping on a friend checkin will show a Friend Details view. Profile Profile page has two tabs: "Me" and "Settings" Me page is similar to the Me page in the foursquare app for iPhone. It displays your photo, your last checkin, how many badges you have collected and a menu. The menu is: ? Checkins ? Friends ? Add friend The difference between this screen and that from Foursquare is that we don't have mayorships and tips. The list of badges should not be hard coded, but instead read with a webservice which returns a list of all badges, icons and user status. In the settings page, you have a button to log out and you can add and edit details for: ? Social networks ? Start view (Looks by default") ? Language Social networks configuration basically means to get approval from the user to access their social networks using the standard authorization mechanism for the specific social network. Supported social networks are: ? Facebook ? Twitter ? Google+ ? Pinterest ? Tumblr ? FourSquare Language selection should give by default the hosting phone language or English if it's not available. Looks The Looks view is really simple, almost identical to the opening screen: it displays a set of looks (vertical photos) in a coverflow mode. Tapping on a photo gives access (with a slide in effect) to a page where details for that look are displayed. Search results TheSearch results view displays a list of items grouped by: ? Friends ? Venues ? Products ? Looks Clicking on one of these items will display the detail of it. There is an "advanced" button that gives access to an advanced search form where the user can specify more parameters to refine the search. Shop The shopping page displays by default a list of "hot deals" retrieved from the web site based on users, users' friends, hour of the day and location of the user. If the user taps on an item in the list, the deal appears, with a scroll left, displayed full screen with all the details. In the top bar there is a map button at the top and a "share it" one. The map displays the location of the deal and user location. User can also click on a map button in the main screen and see all the deals at once placed on a map. On the screen map there is a button that allows adding friends' location on the map too (see Friends). In the top bar there is also a search box. When the user writes something in it, the app displays a list of related products. These are not "real" deals, but user can browse the catalogue, with descriptions and photos and tap on them to see full details. Here ha can of course share those products on social networks. At the same time can click on a map button to see on a map the shops where the product is available. Check-in The check-in view is almost identical to the mechanism implemented by foursquare and Facebook Places. It displays a list of nearby places and allow user to search for a specific venue or add a new one if what is looking for is missing. Them you can review the details for the venue and click on a "Check-in here" button. This gives access to another screen where you can add a comment and a picture and select on which social networks you want to share this check-in. If the check-in is successful, we have to display a screen reporting the points and badges gained and the ratings list of friends. Multi language support The app needs to be available in both italian and english. Your responsibility is to create the English version of it. You have to put in place a simple method to translate all app strings. Web Services All web services are called by the application sending or receiving a Json object. Authentication is implemented through Oauth, similar to that implemented by Twitter and Facebook. Local storage Even if the app needs to be connected to the Internet to give its best, it should provide a decent user experience when there is no Internet connection available. This means that you have to cache on the mobile phone ALL the results from last web services calls. In this way, when you select the Friends view, you can show the map with last know location for friends when the app was connected the last time to the Internet. The same should happen for all the views. Testing We will give you the UDID of an iPhone 3GS which we will use as testing platform: you have to create ad-hoc releases on a daily basis to let us check your progress toward completion on time.
Project ID: 2715999

About the project

Remote project
Active 12 yrs ago

Looking to make some money?

Benefits of bidding on Freelancer

Set your budget and timeframe
Get paid for your work
Outline your proposal
It's free to sign up and bid on jobs

About the client

Flag of ITALY
Cusano Milanino, Italy
5.0
5
Payment method verified
Member since Dec 11, 2005

Client Verification

Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759) & Freelancer Online India Private Limited (CIN U93000HR2011FTC043854)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.