Program for sending SMS for mobile devices (iOS, Android) on HTML5
I am a developer in a company that deals with SMS messaging and mobile marketing. My responsibilities include developing desktop applications on Adobe AIR. But after appearing in our office Ipad'a, with a light feed Arsenichev , I wanted to port the application under it. In view of the fact that AIR seems to be able to create mobile applications, but in the process of in-depth study of features, it turned out that it would take a lot of time to port all the functionality on mobile platforms. This is due to the speed of the platform, as well as with the huge difference in the interface in Desktop and Touch applications for mobile platforms.
From the mobile application did not require compliance with the functionality of the " big brother ", so we decided to develop it in HTML5.
About the choice of development language
The default program should not have been loaded with huge functionality and should work at least on iOS and Android - it was decided to make it in HTML5. This implies both its pros and cons.
Pros:
+ you write one application - it works both on iOS, and on Android, and on everything else that supports JS and HTML5 (at least send directly from the browser);
+ high development speed;
+ ease of development;
+ availability of ready-made frameworks;
+ does not require any accounts in the appstore and the android market.
Minuses:
- low speed of work on Android;
- it is impossible to use API platforms;
- no access to the address book;
- it is impossible to completely transfer the application to offline, using for work only directly sending data to our server (more on that below).
- unusual installation of the application, in the absence of it in the appstore and the android market. The application is “installed” by adding it to the homescreen from the address bar. Icons are present.
')
Under the cut pictures and a lot of text.
About choosing a framework
The easiest and most understandable to develop was the jQuery Mobile framework. 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 at random. The Androydovsky phone generally died away for a long time and normally sending SMS from it was not possible. Maybe this is due to the then early version of jQmobile, or we did something wrong (but did something according to the manual). Not clear until the end, in general.
We encountered the same problems when testing jQtouch . Same ease of use, similar components, styles. Everything worked correctly on the iPad and iPhone. Androyd fell into a stupor, the animation (cube, say) refused to play and in general there is not recommended to use it.
You can take some kind of framework, winding up to it, say iScroll , Slablet , inserting separate components like iToggle or TouchWipe to imitate touchscreen actions - you can not only run into conflicts in the code and in interaction, but also pretty much load your head. And you want something one, that all together and immediately, plus versatility.
Shursty on Habra in search of similar topics, accidentally stumbled upon 3 posts from eDissideNT . In them, he spoke in detail about the Sencha Touch , for which I am especially grateful to him.
For me, as a flash developer, all object twists 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 right with examples and source codes in it.
About program structure
In this part I will provide screenshots of the program, I will tell you about the main functionality.
Our program uses OTP authorization. This is done in order to save users from registering by entering mail, contact information and everything else.
Just enter the number, click "Get the key":
Confirmed sent in SMS code (so that no one registered through your mobile):
And you can start sending SMS right away:
By default, your phone number fits into the "From" field. That is, the subscriber who cools the SMS will receive a message from you. If desired, you can add any name of the sender for free via the support service:
Settings panel:
When password protection is enabled, operation after launching the application will be impossible without entering a password.
If you have decided to no longer use the program or give your phone or tablet for temporary use to someone, you can reset the settings so that someone accidentally does not spend all your money on free SMS from your account.
To replenish the balance, we use the interaction with the QIWI wallet:
You 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 via WM, but not yet automatically.
In this part of the story, a couple of important points should be noted:
- under no circumstances, the entered phone numbers are not used for advertising and other spam;
- phones are not transferred to third parties;
- no SMS-subscription is made to the numbers;
The phone is only needed to confirm that it is you who are registering, and not Peter from the next door who knows your number. The advantage is that registering through the program in our system - an account is automatically created, which can be used not only in this application, but also in the desktop, as well as the web interface in our system. The only thing you need to know is the secret key that 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 removed through the program, resetting the settings or manually, for example Safari in developer mode.
In the development process, a seemingly simple application had to face 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, see an example of the implementation of this application itself, as well as its step-by-step creation with code and comments - report it in comments or in a patch. Since the general principles in Russian have long been set out, but concrete examples are not enough.
If the program is interesting - in the future it is possible to attach PhoneGap to it to interact with everything and transfer the application completely offline, as well as adjusting the styles and design for each of the platforms (from which the next item follows).
For android phone with a screen 3.7 + official firmware was used, the version of the axis - 2.2.
What can be said about the android (known errors and omissions):
- The interface is small, sometimes you have to zoom.
- In portrait mode - the page is just the height of the window, but in Landscap - scrolling down appears, about two more heights of the sending form. When you make a zoom page, at least somewhere with your finger to get - after the zoom happens that throws down into the white space.
When developing the application materials were used:
Sencha Touch Tutorial 1: First Steps
Sencha Touch Tutorial 2: Ext.Panel - Layouting
Sencha Touch Tutorial 3: Events
Link to program: iProfisender
From the mobile application did not require compliance with the functionality of the " big brother ", so we decided to develop it in HTML5.
About the choice of development language
The default program should not have been loaded with huge functionality and should work at least on iOS and Android - it was decided to make it in HTML5. This implies both its pros and cons.
Pros:
+ you write one application - it works both on iOS, and on Android, and on everything else that supports JS and HTML5 (at least send directly from the browser);
+ high development speed;
+ ease of development;
+ availability of ready-made frameworks;
+ does not require any accounts in the appstore and the android market.
Minuses:
- low speed of work on Android;
- it is impossible to use API platforms;
- no access to the address book;
- it is impossible to completely transfer the application to offline, using for work only directly sending data to our server (more on that below).
- unusual installation of the application, in the absence of it in the appstore and the android market. The application is “installed” by adding it to the homescreen from the address bar. Icons are present.
')
Under the cut pictures and a lot of text.
About choosing a framework
The easiest and most understandable to develop was the jQuery Mobile framework. 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 at random. The Androydovsky phone generally died away for a long time and normally sending SMS from it was not possible. Maybe this is due to the then early version of jQmobile, or we did something wrong (but did something according to the manual). Not clear until the end, in general.
We encountered the same problems when testing jQtouch . Same ease of use, similar components, styles. Everything worked correctly on the iPad and iPhone. Androyd fell into a stupor, the animation (cube, say) refused to play and in general there is not recommended to use it.
You can take some kind of framework, winding up to it, say iScroll , Slablet , inserting separate components like iToggle or TouchWipe to imitate touchscreen actions - you can not only run into conflicts in the code and in interaction, but also pretty much load your head. And you want something one, that all together and immediately, plus versatility.
Shursty on Habra in search of similar topics, accidentally stumbled upon 3 posts from eDissideNT . In them, he spoke in detail about the Sencha Touch , for which I am especially grateful to him.
For me, as a flash developer, all object twists 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 right with examples and source codes in it.
About program structure
In this part I will provide screenshots of the program, I will tell you about the main functionality.
Our program uses OTP authorization. This is done in order to save users from registering by entering mail, contact information and everything else.
Just enter the number, click "Get the key":
Confirmed sent in SMS code (so that no one registered through your mobile):
And you can start sending SMS right away:
By default, your phone number fits into the "From" field. That is, the subscriber who cools the SMS will receive a message from you. If desired, you can add any name of the sender for free via the support service:
Settings panel:
When password protection is enabled, operation after launching the application will be impossible without entering a password.
If you have decided to no longer use the program or give your phone or tablet for temporary use to someone, you can reset the settings so that someone accidentally does not spend all your money on free SMS from your account.
To replenish the balance, we use the interaction with the QIWI wallet:
You 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 via WM, but not yet automatically.
In this part of the story, a couple of important points should be noted:
- under no circumstances, the entered phone numbers are not used for advertising and other spam;
- phones are not transferred to third parties;
- no SMS-subscription is made to the numbers;
The phone is only needed to confirm that it is you who are registering, and not Peter from the next door who knows your number. The advantage is that registering through the program in our system - an account is automatically created, which can be used not only in this application, but also in the desktop, as well as the web interface in our system. The only thing you need to know is the secret key that 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 removed through the program, resetting the settings or manually, for example Safari in developer mode.
In the development process, a seemingly simple application had to face 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, see an example of the implementation of this application itself, as well as its step-by-step creation with code and comments - report it in comments or in a patch. Since the general principles in Russian have long been set out, but concrete examples are not enough.
If the program is interesting - in the future it is possible to attach PhoneGap to it to interact with everything and transfer the application completely offline, as well as adjusting the styles and design for each of the platforms (from which the next item follows).
For android phone with a screen 3.7 + official firmware was used, the version of the axis - 2.2.
What can be said about the android (known errors and omissions):
- The interface is small, sometimes you have to zoom.
- In portrait mode - the page is just the height of the window, but in Landscap - scrolling down appears, about two more heights of the sending form. When you make a zoom page, at least somewhere with your finger to get - after the zoom happens that throws down into the white space.
When developing the application materials were used:
Sencha Touch Tutorial 1: First Steps
Sencha Touch Tutorial 2: Ext.Panel - Layouting
Sencha Touch Tutorial 3: Events
Link to program: iProfisender
Source: https://habr.com/ru/post/127986/
All Articles