Micro-expression APP based on technologies such as phonegap, html5, ratchet, and handlebars, and phonegaphtml5

Micro-expression APP based on technologies such as phonegap, html5, ratchet, and handlebars, and phonegaphtml5

This app is composed of many interesting micro-expressions, supports 40 types of expressions, and each type of expression has a different status, mainly including search expressions, sharing expressions, shake your face and change your emoticons. Currently, only the Android version is supported. From the preliminary conception, to the technical selection, to the interface design, to the coding test, and then to the release, the process still took a lot of thought...

 

App

Preliminary Conception

Objective: To create an interesting application on emojis, train and improve your abilities in various aspects, from conception to design, coding to testing, so that you can better understand the entire development process. So I searched for some emoticon apps on the market, such as my face, and compared some features and differences .... IEmoji was born because of its limited technology and experience. Therefore, the design features are relatively simple and there are mainly a set of emotices that describe different states of expressions, as shown in the following English expressions: 'blink', 'chill', 'bucket', 'confused', 'cry', 'drooling', 'drowsy', 'barrassed ', 'flushed', 'grimace ', 'grin', 'hellooo ', 'hotkiss', 'hybridged', 'inputark', 'laugh ', 'like', 'onfire', 'panic', 'pig ', 'pleased', 'pucker ', 'puke', 'scold', 'scowl', 'Scream', 'sick', 'silence ', 'skull', 'Sleep ', 'smile ', 'smug', 'sneer', 'sniffl E ', 'SOB', 'sobeye', 'strive', 'surprised', 'sweating ', 'wantmoney', 'wink', providing facial expression search and local download, social sharing, shaking a random expression (this is interesting) and other functions, the function of how server users interact is not done, it takes a lot of time and energy, some face-fighting software, such as face cute, was not implemented. The preparation of materials is quite painful. Because I have no design skills or cells, I mainly use my own php micro-expression generation system and can follow some defined rules, it is interesting to generate an expression based on the combination of different parts of the face. The image mainly uses svg images, which are small in size and not distorted in scaling. The external link download of images is mainly hosted on the github server. If you want to build your own image server, no money no talk. Having said so much, I feel that I haven't talked about the point yet. Ah, my language skills are getting worse and worse...

Technology Selection

PhoneGap mainly depends on webkit browser kernel parsing, so it runs less efficiently than native. However, to improve APP performance, it is particularly important to select a small and flexible framework. In fact, phonegap can be used together with many mobile frameworks. However, if a suitable framework is not considered in the early stage, the maintenance cost in the later stage will be high, and more pitfalls will occur. Let's look at the following frameworks:

JQuery Mobile: Slow resource loading and high traffic loss

Sencha Touch: Relatively old, relatively high learning costs, and heavy

Jqmobi: Intel's app framework is smaller than jQuery Mobile and has good compatibility.

Ratchet ui: Lightweight ui, Quick Start

Handlebarsjs: Front-end template engine, an upgraded version of Mustache, recommended

Ionic: Small size, html5-based hybird app framework, never used

Features and Solutions

The main problems and solutions encountered during the development process are as follows:

• Data initialization and drop-down loading: iscroll5.js, also used for partial content scrolling
• Switching page flashes: define different page templates and render templates based on the defined routing rules
• Conversion of Chinese characters to PinYin: expression search and Chinese-English recognition. This is not done yet.
• Emoticon resource preparation: svg vector image, small size, no distortion in scaling, localized and hosted on github Server
• Social sharing: umeng phonegap platform, not supported. Convert svg to png
• Location acquisition: html5 geolocation, Baidu map api
• Image Upload/download: phonegap FileTransfer plug-in. image resources are external links.
• Android mobile phone SD card location acquisition: generate a directory for saving images
• Shake: html5 devicemotion, phonegap accelerometer plug-in
• Local Storage: localStorage? Web SQL? Ajax json? , Index db?
• Front-end dependency package management: bower
• Front-end automated build tool: gulp

Summary

In fact, there are a lot of functional points can be done, but limited time, Apple version will not do, first come an Android version v1.0.0 it, app: http://pan.baidu.com/s/1i3HyRrf github code (full version): https://github.com/hcy2367/iEmoji/

Years of peace!