Micro-expression app based on Phonegap,html5,ratchet,handlebars and other technologies

The app is made up of a lot of interesting micro-expressions, support 40 kinds of expressions, and each expression has a different state, mainly search expression, share expression, shake a change of expression and other functions. Currently only supported on Android. From the pre-conception, to the technology selection, to the interface design, to the code test, then to release, the process is still spent a lot of thought ...

App

Pre-conceived

Purpose: Make an interesting app about emoticons, exercise and improve your abilities, from ideation to design to coding to testing to make yourself clearer about the entire development process. So look for some of the market on the expression app, such as the face of what, compared with some of the next functional points and differentiation .... Iemoji was born, because I have limited skills and experience, so the function of the design point is relatively simple, a set of expressions, describe the different states of expression, As shown in the following English expressions: ' blink ', ' chill ', ' chuckle ', ' confused ', ' cry ', ' drooling ', ' drowsy ', ' embarrassed ', ' flushed ', ' grimace ', ' Grin ', ' hellooo ', ' Hotkiss ', ' hypnotized ', ' inthedark ', ' laugh ', ' like ', ' onfire ', ' panic ', ' pig ', ' pleased ', ' pucker ', ' p Uke ', ' scold ', ' scowl ', ' Scream ', ' sick ', ' silence ', ' skull ', ' sleep ', ' smile ', ' smug ', ' sneer ', ' sniffle ', ' sob ', ' sobeye ' ', ' strive ', ' surprised ', ' sweating ', ' Wantmoney ', ' Wink ', provide expression search, this underground download, social sharing, shaking a random change of expression (this is more interesting) and other functions, the server-side user how to interact with the function did not do, the time and energy to spend relatively large, and like face Meng and some face-to-cheek software did not do. About the material preparation, this is compared to the egg pain, because they have no design skills and cells, mainly with their own a PHP micro-expression generation system, according to some of the rules defined, according to the combination of different parts of the face, the formation of a set of expressions, this is more interesting ha. Pictures mainly take SVG diagram, small size, scale is not distorted, image external link download mainly hosted on the GitHub server, to build their own picture server, no money no talk. Said so much, feel has not said the point, alas, their language expression ability is getting worse ...

Technology selection

PhoneGap relies mainly on the kernel parsing of the WebKit browser, so it runs less efficiently than the native. But in order to improve app performance, choosing a small and flexible framework is especially important. In fact, PhoneGap can be combined with a lot of mobile framework, but the early stage does not consider the appropriate framework, the cost of late maintenance is high, the more pits, look at the following some of the framework situation:

jQuery Mobile: Slow resource loading and high flow loss

Sencha Touch: Older, relatively high cost of learning, also more cumbersome

Jqmobi: Intel's app framework is smaller than jquery mobile and has a good compatibility

Ratchet UI: Lightweight UI, easy to get started

Handlebarsjs: Front-end template engine, the upgrade version of mustache, recommended

Ionic: Small size, HTML5-based Hybird app framework, no use

function points and Solutions

In the development process encountered problems and solutions mainly have the following points, the code is not posted:

• Data initialization and drop-down loading: Iscroll5.js, also used for local content scrolling
• Toggle Page Flicker: Define different page templates, render templates according to defined routing rules
• Kanji to pinyin: expression Search and recognition in Chinese and English, this has not been done
• Emoji resource preparation: SVG vectors, small size, scale undistorted, localized and hosted on GitHub servers
• Social sharing: Umeng PhoneGap platform, unsupported, SVG converted to PNG
• Location Access: HTML5 geolocation, Baidu Map API
• Image upload/download: phonegap filetransfer plugin, image resource is external link
• Android Phone SD card location get: Create picture saved Directory
• Shake a shake: HTML5 devicemotion,phonegap Accelerometer Plug-in
• Local storage: Localstorage? Web SQL? Ajax JSON? , Index DB?
• Front-End Dependency package management: Bower
• Front-End automation build tool: Gulp

Summarize

In fact, there are a lot of function points can be done, but the time is limited, the Apple version will not engage, first to an Android version of v1.0.0 Bar, APP:HTTP://PAN.BAIDU.COM/S/1I3HYRRF GitHub code (incomplete version): https://github.com /hcy2367/iemoji/

The years are well!

Micro-expression app based on Phonegap,html5,ratchet,handlebars and other technologies