September 8, 2011 at 13:58Program for sending SMS for mobile devices (iOS, Android) in HTML5
I am a developer in a company that deals with SMS mailing and mobile marketing. My responsibilities include developing desktop applications on Adobe AIR. But after Ipad appeared at our office, with a light feed from Arsenichev , I wanted to port the application to him. In view of the fact that AIR seems to allow you to create mobile applications, but in the process of deeply studying the features, it turned out that porting all the functionality to mobile platforms will take a lot of time. This is due to the speed of the platform, as well as to the huge difference in the interface in Desktop and Touch-applications for mobile platforms.
The mobile application was not required to match the functionality of the " big brother ", so we decided to develop it in HTML5.
About choosing a development language
The program by default should not be loaded with huge functionality and should work at least on iOS and Android - it was decided to make it on HTML5. This implies both its pros and cons.
Pros:
+ you write one application - it works on both iOS and Android, and everything else that supports JS and HTML5 (at least send directly from the browser);
+ high speed of development;
+ ease of development;
+ availability of ready-made frameworks;
+ does not require any accounts in the appstore and android market.
Cons:
- low speed on Android;
- it is impossible to use platform APIs;
-no access to the address book;
- it is impossible to completely translate the application offline, using only the data transfer to our server for work (more on this below).
- Unusual installation of the application, due to the lack of it in the appstore and android market. The application is “installed” by adding it to the homescreen from the address bar. Icons are present.
Under katom pictures and a lot of text.
About choosing a framework
The jQuery Mobile framework turned out to be the easiest and most understandable for development. At first, it was taken as the basis of the application. But in the process of writing the application, it turned out that it only works correctly on the iPad, on the iPhone it pretty much slowed down when changing screens, for some reason it was awry. The Androyd phone generally froze for a long time and it was not possible to send SMS from it normally. Maybe this is due to the then early version of jQmobile, or we did something wrong (but did something by the manual). It is not clear to the end, in general.
The same problems encountered when testing jQtouch . The same ease of use, similar components, styles. Everything worked correctly on the iPad and iPhone. Androyd fell into a stupor, the animation (say a cube) refused to play and generally do not recommend using it.
Take a single framework, spinning to it, say iScroll , Slablet , inserting individual components like iToggle or TouchWipe to simulate actions with a touchscreen - you can not only run into conflicts in the code and in the interaction, but also pretty much strain your head. And I want one thing, all at once, plus versatility.
Shurstya on the hub in search of similar topics, accidentally stumbled upon 3 posts from the eDissideNT habilitator . In them, he spoke in detail about Sencha Touch , for which I am especially grateful to him.
For me, as a flash developer, all the object tweaks in JS were slightly incomprehensible, so I reviewed the lessons, delved into the structure. I wrote the same thing on Sencha as on jQmobile - it works many times faster on all devices. So we stopped at Sencha, on which a bunch of ready-made applications have already been written, and there is also good documentation directly with examples and source codes in it.
About the structure of the program
In this part I will give screenshots of the program, I will talk about the main functionality.
Our program uses OTP authorization. This is done in order to save users from registering by entering mail, contact details and everything else.
Just entered the number, clicked "Get Key":
They confirmed the code sent to SMS (so that no one would register via your mobile phone):
And you can start sending SMS right away:
By default, your phone number is entered in the "From" field. That is, the subscriber to whom the SMS is cooling down will receive a message from you. If desired, you can add any sender’s name through the support service for free:
Settings panel:
When password protection is turned on, operation after starting the application will be impossible without entering a password.
If you have definitely decided not to use the program anymore, or give your phone or tablet to someone for temporary use, you can reset the settings so that someone from your account does not accidentally spend all the money on "free" SMS.
To replenish the balance, we use interaction with a QIWI wallet:
Issue an invoice for the required amount, indicating the phone number for authorization on the QIWI website, pay the invoice and money in a second on the balance. It is possible to replenish through WM, but not automatically so far.
In this part of the story, a couple of important points should be noted:
- under no circumstances the entered phone numbers are used for advertising and other spam;
- Phones are not transferred to third parties;
- no SMS subscription is issued to the numbers;
The phone is only needed to confirm that it is you who are registering, and not Petya from the neighboring entrance who knows your number. The advantage is that registering through the program in our system, an account is automatically created that can be used not only in this application, but also in the desktop and web interface in our system. The only thing you need to know is the secret key, which can be obtained through the support service.
A little about the technical part and known problems.
All data entered into the application, such as phone, password, secret key, is stored in LocalStorage on your device. If desired, they can be deleted through the program, resetting the settings or manually, for example, Safari in developer mode.
In the process of developing a seemingly simple application, I had to deal with some unusual features after other PLs. If the community has a desire to see its structure already from the point of view of the developer, look at an example of the implementation of this application itself, as well as its phased creation with code and comments, inform in the comments or in the lecture. Since the general principles in Russian have long been stated, and concrete examples are not enough.
If the program is interesting, in the future it is possible to screw PhoneGap to it to interact with everything, transfer the application completely offline, as well as adjust the styles and layout for each platform (from which the next paragraph follows).
For the android, a phone with a screen of 3.7 + official firmware was used, the axis version is 2.2.
What can I say on the android (known errors and shortcomings):
- The interface is small, sometimes you have to zoom.
- In portrait mode - the page is just the height of the window, but in the landscape - scrolling down appears, about two more heights of the sending form. When you zoom in on a page to get at least somewhere with your finger - after the zoom it happens that it throws down into white space.
When developing the application, the following materials were used:
Sencha Touch Tutorial 1: First steps
Sencha Touch Tutorial 2: Ext.Panel - Layouting
Sencha Touch Tutorial 3: Events
Link to the program: iProfisender
The mobile application was not required to match the functionality of the " big brother ", so we decided to develop it in HTML5.
About choosing a development language
The program by default should not be loaded with huge functionality and should work at least on iOS and Android - it was decided to make it on HTML5. This implies both its pros and cons.
Pros:
+ you write one application - it works on both iOS and Android, and everything else that supports JS and HTML5 (at least send directly from the browser);
+ high speed of development;
+ ease of development;
+ availability of ready-made frameworks;
+ does not require any accounts in the appstore and android market.
Cons:
- low speed on Android;
- it is impossible to use platform APIs;
-no access to the address book;
- it is impossible to completely translate the application offline, using only the data transfer to our server for work (more on this below).
- Unusual installation of the application, due to the lack of it in the appstore and android market. The application is “installed” by adding it to the homescreen from the address bar. Icons are present.
Under katom pictures and a lot of text.
About choosing a framework
The jQuery Mobile framework turned out to be the easiest and most understandable for development. At first, it was taken as the basis of the application. But in the process of writing the application, it turned out that it only works correctly on the iPad, on the iPhone it pretty much slowed down when changing screens, for some reason it was awry. The Androyd phone generally froze for a long time and it was not possible to send SMS from it normally. Maybe this is due to the then early version of jQmobile, or we did something wrong (but did something by the manual). It is not clear to the end, in general.
The same problems encountered when testing jQtouch . The same ease of use, similar components, styles. Everything worked correctly on the iPad and iPhone. Androyd fell into a stupor, the animation (say a cube) refused to play and generally do not recommend using it.
Take a single framework, spinning to it, say iScroll , Slablet , inserting individual components like iToggle or TouchWipe to simulate actions with a touchscreen - you can not only run into conflicts in the code and in the interaction, but also pretty much strain your head. And I want one thing, all at once, plus versatility.
Shurstya on the hub in search of similar topics, accidentally stumbled upon 3 posts from the eDissideNT habilitator . In them, he spoke in detail about Sencha Touch , for which I am especially grateful to him.
For me, as a flash developer, all the object tweaks in JS were slightly incomprehensible, so I reviewed the lessons, delved into the structure. I wrote the same thing on Sencha as on jQmobile - it works many times faster on all devices. So we stopped at Sencha, on which a bunch of ready-made applications have already been written, and there is also good documentation directly with examples and source codes in it.
About the structure of the program
In this part I will give screenshots of the program, I will talk about the main functionality.
Our program uses OTP authorization. This is done in order to save users from registering by entering mail, contact details and everything else.
Just entered the number, clicked "Get Key":
They confirmed the code sent to SMS (so that no one would register via your mobile phone):
And you can start sending SMS right away:
By default, your phone number is entered in the "From" field. That is, the subscriber to whom the SMS is cooling down will receive a message from you. If desired, you can add any sender’s name through the support service for free:
Settings panel:
When password protection is turned on, operation after starting the application will be impossible without entering a password.
If you have definitely decided not to use the program anymore, or give your phone or tablet to someone for temporary use, you can reset the settings so that someone from your account does not accidentally spend all the money on "free" SMS.
To replenish the balance, we use interaction with a QIWI wallet:
Issue an invoice for the required amount, indicating the phone number for authorization on the QIWI website, pay the invoice and money in a second on the balance. It is possible to replenish through WM, but not automatically so far.
In this part of the story, a couple of important points should be noted:
- under no circumstances the entered phone numbers are used for advertising and other spam;
- Phones are not transferred to third parties;
- no SMS subscription is issued to the numbers;
The phone is only needed to confirm that it is you who are registering, and not Petya from the neighboring entrance who knows your number. The advantage is that registering through the program in our system, an account is automatically created that can be used not only in this application, but also in the desktop and web interface in our system. The only thing you need to know is the secret key, which can be obtained through the support service.
A little about the technical part and known problems.
All data entered into the application, such as phone, password, secret key, is stored in LocalStorage on your device. If desired, they can be deleted through the program, resetting the settings or manually, for example, Safari in developer mode.
In the process of developing a seemingly simple application, I had to deal with some unusual features after other PLs. If the community has a desire to see its structure already from the point of view of the developer, look at an example of the implementation of this application itself, as well as its phased creation with code and comments, inform in the comments or in the lecture. Since the general principles in Russian have long been stated, and concrete examples are not enough.
If the program is interesting, in the future it is possible to screw PhoneGap to it to interact with everything, transfer the application completely offline, as well as adjust the styles and layout for each platform (from which the next paragraph follows).
For the android, a phone with a screen of 3.7 + official firmware was used, the axis version is 2.2.
What can I say on the android (known errors and shortcomings):
- The interface is small, sometimes you have to zoom.
- In portrait mode - the page is just the height of the window, but in the landscape - scrolling down appears, about two more heights of the sending form. When you zoom in on a page to get at least somewhere with your finger - after the zoom it happens that it throws down into white space.
When developing the application, the following materials were used:
Sencha Touch Tutorial 1: First steps
Sencha Touch Tutorial 2: Ext.Panel - Layouting
Sencha Touch Tutorial 3: Events
Link to the program: iProfisender