Monday, January 11, 2016

App Prototyping using appery.io . Which shortcuts work and which do not


appery.io had a great idea. Let`s make the next Wix/Webydo, but for apps.
Their solution tries to cover (almost) all aspects of app development, but it is lacking in many of them.

  • The app itself is based of JQueryMobile.  It contain a really great UI Editor (drag&drop components with properties editor) and a simple way to add events to it.
    This is a great feature, and it works fine for small apps prototyping.  
    • Problem:  JQueryMobile has it`s limits and although you can use Cordova, there are many things which are pain/impossible to do , like using native Facebook login intent.
    • Problem: Once you get to a bit more complex things, which is not part of the well defined components, it becomes messier.
  • Great tool (similar to curl) to test REST services, and to visually map properties from the REST result to the UI properties. This works very well, for most of the REST calls, as most services result JSON is  quite simple.
  • Built-in database, exposing REST api.  This one similar (maybe equal) to MongoDB.
  • Server code:  Most apps will require extra code on the server. You can write a hosted REST service quite easily (using js code) and schedule it.
  • Simple testing (on the browser) and exporting to .apk/iOS.
See a cool sample here.

Let`s prototype an app together. It will be "kickstarter" for events.
UI:
  • login&user-profile
  • create new event
  • search events and get event list
  • event details & add-me-to-event
  • push-notifications on kick-started event


Create event:
  • Input text for event-image-url (assuming the user knows how to click copy-image-url in the browser).
  • open-text for event data.
  • time-picker for start time. Date and time
  • event-type radio-buttons (sport / lecture /food)
  • "save event" button.
not MVP: add option to upload file from the phone and save it to appery.io FileAPI.
allowed age range (20-30). allowed gender (5 men, 5 women ... or any-gender)

Implementation issues:
  • There is a JQueryMobile date-picker , but not time (hour/min) picker. The forum recommends mobiscroll.com (195$ for few controllers). For now, I used open text.
  • During development, I added new columns to the database, after it was already created. Sadly the database-service does not get refreshed automatically and you have to re-create it (maybe to add parameters manually, didn`t try)
  • Create-service need to map the date+hour input fields into one date db field. This required custom js.
    //look at the date-format, currently it is yy-mm-dd , we convert to yyyy-mm-dd
    return "20"+ value + " "+Apperyio("hour").val();




Login&Profile screen. In the upper part: "Login to facebook" button.
  • In the lower part, the user image (taken directly from facebook profile picture) , a text which can be edited by the user, and the user age.  gender/age. will be taken from facebook
Search event request: choose location in a text box (like , 5th street, SF, California), the box by default will show device location.
event-type radio-button
Search event response: a list of events (image, text, date), for each one,
  •  a status: Open/Full 
  • combo-box for GOING/Maybe/NO 
  • a list of profiles which actually going/maybe.
Push notifications when an event had been kick-started, with the phone number of the event creator


  • TBD...............My events:  a list of the events the user created, clicking on one allows to edit it (the image and text)

The limitations:
Facebook login will not use the native-facebook app which exists on the device and will instead use a rather ugly facebook web page. This is pure ugly stuff.
(this is not appery.io limitation, but any js based implementation. PhoneGap does not fully covers this either)

Abstractions problems (tedious things you still need to do)
Android generate certificate





















No comments: