Distributing your App: Difference between revisions
C185driver (talk | contribs) |
No edit summary |
||
(27 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
Apps created with | Apps created with AppStudio can be installed and run by anyone who has an internet connection. Once they are running on a device, apps can be saved locally on the device and will be available even when there is no internet connection available. | ||
AppStudio web apps are not sold in Apple's App Store. However, they can be used on any iOS device, jailbroken or not, without going through any review by Apple. They are normal HTML5 apps, and as Steve Jobs has said, "HTML5 -- it's a completely open, uncontrolled platform. And we fully support it." | |||
If you want to sell your app, there are a few strategies. | If you want to sell your app, there are a few strategies. | ||
Line 8: | Line 8: | ||
# Have a registration code input field in your program. The correct code has to be entered the first time the program is run. | # Have a registration code input field in your program. The correct code has to be entered the first time the program is run. | ||
# Use a third party web app store. It will handle billing and downloads, and give you a percentage of the revenue. Samples of such stores are OpenAppMkt and the Chrome Web Store. | # Use a third party web app store. It will handle billing and downloads, and give you a percentage of the revenue. Samples of such stores are OpenAppMkt and the Chrome Web Store. | ||
# Make your app into a native app [[Submitting_to_the_iOS_App_Store|using | # Make your app into a native app [[Submitting_to_the_iOS_App_Store|using VoltBuilder and submit it to Apple]]. There is an option on the Run menu for this. | ||
Line 17: | Line 17: | ||
Your app needs to be deployed to a web server so that it can be loaded and run. There are several choices for web servers you can use. | Your app needs to be deployed to a web server so that it can be loaded and run. There are several choices for web servers you can use. | ||
=== | === VoltServer === | ||
This is the default and will work without any extra setup. | This is the default and will work without any extra setup. VoltServer can be used for testing and as a permanent location for your app, so long as you have a [[Subscriptions|subscription]] in place. It also has a number of features which add to AppStudio's abilities. No PHP. If you are using the demo, you can only deploy to VoltServer. | ||
If you | |||
=== Local test server === | === Local test server === | ||
Line 29: | Line 24: | ||
=== A server of your own === | === A server of your own === | ||
This is the most powerful and permanent solution. It involves getting a website of your own with the appropriate settings. Select "Deploy to | This is the most powerful and permanent solution. It involves getting a website of your own with the appropriate settings. Select "Deploy to local server" or "Deploy to FTP Server" in Deploy options and fill in the Server, Path, Username and password. | ||
There are a variety of own servers that you can use, for example Microsoft WebMatrix (IIS), Apache, Nginx, GWS to mention a few. | |||
==== Using Microsoft WebMatrix ==== | |||
''Set Up WebMatrix'' | |||
1. Install Microsoft WebPlatform Installer | |||
2. Install WebMatrix using WPI | |||
3. Install PHP from using WPI | |||
''Setting Up IIS Express to serve the Offline.appcache'' | |||
You will do this once fortunately. | |||
Open the command prompt (run as administrator), and change the directory to where your IIS Express folder is, | |||
this might be "c:\Program Files (x86)\IIS Express", in your DOS prompt | |||
Type the following: | |||
cd "Program Files (x86)" and press the <Enter> key | |||
cd "IIS Express" and press the <Enter> key | |||
Then type the following | |||
'''appcmd set config /section:staticContent /+[fileExtension='.appcache', mimeType='text/cache-manifest']''' | |||
and press the <Enter> key | |||
Usually WebMatrix stores all your sites on the "My Documents\My Web Sites" folder of your profile. | |||
''Set Up AppStudio to deploy to WebMatrix'' | |||
4. In AppStudio, go to Tools > Preferences of your project | |||
5. Select Deploy to local server | |||
6. On Local Path, select Browse and select My Documents\My Web Sites | |||
7. Click Ok | |||
8. On the Run Menu, ensure you are in Deploy to local server | |||
9. Run your application, a prompt should pop up asking if you want to visit your site, click No. A folder will be created with your application files under My Documents\My Web Sites using your NSB project id. | |||
''SetUp Your Site to run PHP (ability to serve ajax)'' | |||
Now, back to WebMatrix | |||
11. Start WebMatrix | |||
12. Click My Sites, if your site is not listed, select See All My Sites | |||
13. Select your site from the list | |||
14. Select the Site tab and then select Settings, | |||
15. Select None as .Net Framework | |||
16. On PHP settings, select Enable PHP and select the version you want of PHP | |||
17. Restart your site | |||
18. Select Run and select the browser that you want | |||
19. Test your site if all runs well. | |||
Because a folder has already been created using your App id from AppStudio, you can also select Open > Folder in WebMatrix to open your site. With PHP installed, all your Ajax calls made within your app will execute well and you can test your application. | |||
'''Testing your Mobile Application with MITE: 2200 emulated smartphones & tablets''' | |||
Before distributing mobile apps, you might want to test their performance and their delivery on "virtual" devices. Whilst Microsoft WebMatrix has functionality to install and test your mobile site using virtual packs for devices, there is also MITE, available at this website link, http://www.keynote.com/solutions/monitoring/mobile-web-monitoring-scripting-tool. | |||
== Getting your project ready == | == Getting your project ready == | ||
An important thing to remember is that you need to keep your app on the server, even after it is deployed to a device. When an app starts, it attempts to contact its original download location to see if there is an update. If there is no internet connection, the app continues normally. But if there is a connection and the app cannot be found on the server, the app is marked obsolete and is cleared from the device. The | An important thing to remember is that you need to keep your app on the server, even after it is deployed to a device. When an app starts, it attempts to contact its original download location to see if there is an update. If there is no internet connection, the app continues normally. But if there is a connection and the app cannot be found on the server, the app is marked obsolete and is cleared from the device. The AppStudio Server clears all projects that have not been used for a while, so it is not a good place to permanently host your apps. | ||
When you deploy your app, it is transferred using passive ftp to your site. The ftp account information and directory are set in Deploy Settings. You may need to narrow the port range for passive ftp. | When you deploy your app, it is transferred using passive ftp to your site. The ftp account information and directory are set in Deploy Settings. You may need to narrow the port range for passive ftp. | ||
Line 52: | Line 125: | ||
| Optional. Not supported on all devices. Set in Project Properties. This image is displayed when the app is started from the Home screen on the device. The image should be in .png format and be exactly 320x460 (1004x768 on iPad). If you don't supply a filename of your own, a default file will be used. If you save your app to the home screen, you will need to delete and resave it t if you want to change the splash screen. Important! Do not change the image (or any file) in the nsb folder. | | Optional. Not supported on all devices. Set in Project Properties. This image is displayed when the app is started from the Home screen on the device. The image should be in .png format and be exactly 320x460 (1004x768 on iPad). If you don't supply a filename of your own, a default file will be used. If you save your app to the home screen, you will need to delete and resave it t if you want to change the splash screen. Important! Do not change the image (or any file) in the nsb folder. | ||
|- | |- | ||
| | | nsb/ | ||
| Required. This directory contains all the files that | | Required. This directory contains all the files that AppStudio itself needs at runtime. Do not make any changes to the contents of this directory. | ||
|- | |- | ||
| images and js files | | images and js files | ||
Line 62: | Line 132: | ||
|- | |- | ||
|databases | |databases | ||
|SQLite databases can be included with your app. Simply put the name of the database in | |SQLite databases can be included with your app. Simply put the name of the database in ''extraFiles'' in Project Properties. AppStudio will take care of encoding the data and the schema and deploying it. When the app is loaded on the device, the database will be automatically reconstituted and will be usable right away. | ||
|} | |} | ||
=== Including Images with your project made simple === | === Including Images with your project made simple === | ||
# Put the images in your project folder. It's easiest to put them in a folder called images. | # Put the images in your project folder. It's easiest to put them in a folder called images. Do not add them to the "nsb" folder, since that folder gets wiped out during compilation. | ||
# In the | # In the ''extraFiles'' property, put 'images'. Then all the images in that folder will be deployed with your app. | ||
# In your app, refer to the images by the simple pathname: | # In your app, refer to the images by the simple pathname: | ||
<pre> | <pre> | ||
Line 74: | Line 144: | ||
</pre> | </pre> | ||
=== | === extraFiles === | ||
extraFiles is in Project Properties. It contains a list of all the files in your app. You can maintain its contents in the IDE: it is in the top level of the Project Explorer, in the property ''extraFiles''. These files must be located in the project's directory. | |||
Here is a sample ''extraFiles'': | |||
Here is a sample | |||
<pre> | <pre> | ||
mario.jpg | mario.jpg | ||
</pre> | </pre> | ||
''extraFiles'' should have a list of file names, one name per line. Folder names can also be included: they will automatically be expanded recursively. Subfolders are allowed. | |||
You can put most types of files that HTML can use into it. The app file, icons, background and splash screen are automatically included | You can put most types of files that HTML can use into it. The app file, icons, background and splash screen are automatically included. You do not need to add them to ''extraFiles''. Remember add your image files! | ||
To add an SQLite database, simply add its name to ''extraFiles''. An SQLImport() function will be automatically be invoked when you start your app to load the database the first time. If you want to use some of the options of [[SqlImport]], use the same format as that function: | |||
<pre> | <pre> | ||
customers.db,DB,loadComplete,NSB.overwriteAlways | |||
</pre> | </pre> | ||
=== Installing your App on a device === | === Installing your App on a device === | ||
Line 112: | Line 171: | ||
On Android, it's a little more complicated. Up till Android 4, the browser was call Android Browser and used a similar process to add the the Home screen. In Android 4, the Mobile Chrome browser was introduced. On some devices, usually those branded as Google, only Mobile Chrome is available. Mobile Chrome is not complete: it is still missing some cosmetic features. See https://code.google.com/p/chromium/issues/list?can=2&q=OS:Android&sort=-stars&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary%20Stars | On Android, it's a little more complicated. Up till Android 4, the browser was call Android Browser and used a similar process to add the the Home screen. In Android 4, the Mobile Chrome browser was introduced. On some devices, usually those branded as Google, only Mobile Chrome is available. Mobile Chrome is not complete: it is still missing some cosmetic features. See https://code.google.com/p/chromium/issues/list?can=2&q=OS:Android&sort=-stars&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary%20Stars | ||
Latest revision as of 15:34, 25 February 2021
Apps created with AppStudio can be installed and run by anyone who has an internet connection. Once they are running on a device, apps can be saved locally on the device and will be available even when there is no internet connection available.
AppStudio web apps are not sold in Apple's App Store. However, they can be used on any iOS device, jailbroken or not, without going through any review by Apple. They are normal HTML5 apps, and as Steve Jobs has said, "HTML5 -- it's a completely open, uncontrolled platform. And we fully support it."
If you want to sell your app, there are a few strategies.
- Set up a web site which requires a sign on code to access the download info. Give the sign on code to people who have paid.
- Have a registration code input field in your program. The correct code has to be entered the first time the program is run.
- Use a third party web app store. It will handle billing and downloads, and give you a percentage of the revenue. Samples of such stores are OpenAppMkt and the Chrome Web Store.
- Make your app into a native app using VoltBuilder and submit it to Apple. There is an option on the Run menu for this.
Distributing Web Apps
For a good background into how this all works, there is a great chapter in Mark Pilgrims's book Dive Into HTML5. The chapter on Offline Apps is here.
Your app needs to be deployed to a web server so that it can be loaded and run. There are several choices for web servers you can use.
VoltServer
This is the default and will work without any extra setup. VoltServer can be used for testing and as a permanent location for your app, so long as you have a subscription in place. It also has a number of features which add to AppStudio's abilities. No PHP. If you are using the demo, you can only deploy to VoltServer.
Local test server
You can set up a local server on your own system. This is good for testing, but not usually very good for outside users who want to run your app. To use it, select "Deploy to a local or DropBox public folder" in Deploy Options and put the appropriate path into Local Path.
A server of your own
This is the most powerful and permanent solution. It involves getting a website of your own with the appropriate settings. Select "Deploy to local server" or "Deploy to FTP Server" in Deploy options and fill in the Server, Path, Username and password.
There are a variety of own servers that you can use, for example Microsoft WebMatrix (IIS), Apache, Nginx, GWS to mention a few.
Using Microsoft WebMatrix
Set Up WebMatrix
1. Install Microsoft WebPlatform Installer
2. Install WebMatrix using WPI
3. Install PHP from using WPI
Setting Up IIS Express to serve the Offline.appcache
You will do this once fortunately.
Open the command prompt (run as administrator), and change the directory to where your IIS Express folder is,
this might be "c:\Program Files (x86)\IIS Express", in your DOS prompt
Type the following:
cd "Program Files (x86)" and press the <Enter> key cd "IIS Express" and press the <Enter> key
Then type the following
appcmd set config /section:staticContent /+[fileExtension='.appcache', mimeType='text/cache-manifest']
and press the <Enter> key
Usually WebMatrix stores all your sites on the "My Documents\My Web Sites" folder of your profile.
Set Up AppStudio to deploy to WebMatrix
4. In AppStudio, go to Tools > Preferences of your project
5. Select Deploy to local server
6. On Local Path, select Browse and select My Documents\My Web Sites
7. Click Ok
8. On the Run Menu, ensure you are in Deploy to local server
9. Run your application, a prompt should pop up asking if you want to visit your site, click No. A folder will be created with your application files under My Documents\My Web Sites using your NSB project id.
SetUp Your Site to run PHP (ability to serve ajax)
Now, back to WebMatrix
11. Start WebMatrix
12. Click My Sites, if your site is not listed, select See All My Sites
13. Select your site from the list
14. Select the Site tab and then select Settings,
15. Select None as .Net Framework
16. On PHP settings, select Enable PHP and select the version you want of PHP
17. Restart your site
18. Select Run and select the browser that you want
19. Test your site if all runs well.
Because a folder has already been created using your App id from AppStudio, you can also select Open > Folder in WebMatrix to open your site. With PHP installed, all your Ajax calls made within your app will execute well and you can test your application.
Testing your Mobile Application with MITE: 2200 emulated smartphones & tablets
Before distributing mobile apps, you might want to test their performance and their delivery on "virtual" devices. Whilst Microsoft WebMatrix has functionality to install and test your mobile site using virtual packs for devices, there is also MITE, available at this website link, http://www.keynote.com/solutions/monitoring/mobile-web-monitoring-scripting-tool.
Getting your project ready
An important thing to remember is that you need to keep your app on the server, even after it is deployed to a device. When an app starts, it attempts to contact its original download location to see if there is an update. If there is no internet connection, the app continues normally. But if there is a connection and the app cannot be found on the server, the app is marked obsolete and is cleared from the device. The AppStudio Server clears all projects that have not been used for a while, so it is not a good place to permanently host your apps.
When you deploy your app, it is transferred using passive ftp to your site. The ftp account information and directory are set in Deploy Settings. You may need to narrow the port range for passive ftp.
Setting up your files
There are a few files which need to be present in your project's directory for deployment. The Deploy option on the Run menu makes this easy: the files and folder are copied into your directory automatically.
myProject.htm | Your app. This is created by the IDE: the actual name of the file is set in the IDE. This needs to be a valid UNIX filename - no spaces or special characters. After being copied to the server, it is renamed index.html. |
LauncherIcon.png | The icon for the app, set in Project Properties. This has to be in .png format, and be 114x114 pixels in size. If you don't supply a filename of your own, a default file will be used. Important! Do not change the image (or any file) in the nsb folder. |
SplashScreen.png | Optional. Not supported on all devices. Set in Project Properties. This image is displayed when the app is started from the Home screen on the device. The image should be in .png format and be exactly 320x460 (1004x768 on iPad). If you don't supply a filename of your own, a default file will be used. If you save your app to the home screen, you will need to delete and resave it t if you want to change the splash screen. Important! Do not change the image (or any file) in the nsb folder. |
nsb/ | Required. This directory contains all the files that AppStudio itself needs at runtime. Do not make any changes to the contents of this directory. |
images and js files | Any images and additional JavaScript (.js) libraries your app uses. Images can be anything that a browser can display: .gif, .jpg, .bmp, .png and more. Filenames should be good UNIX names: no spaces or slashes. |
databases | SQLite databases can be included with your app. Simply put the name of the database in extraFiles in Project Properties. AppStudio will take care of encoding the data and the schema and deploying it. When the app is loaded on the device, the database will be automatically reconstituted and will be usable right away. |
Including Images with your project made simple
- Put the images in your project folder. It's easiest to put them in a folder called images. Do not add them to the "nsb" folder, since that folder gets wiped out during compilation.
- In the extraFiles property, put 'images'. Then all the images in that folder will be deployed with your app.
- In your app, refer to the images by the simple pathname:
images/myImage1
extraFiles
extraFiles is in Project Properties. It contains a list of all the files in your app. You can maintain its contents in the IDE: it is in the top level of the Project Explorer, in the property extraFiles. These files must be located in the project's directory.
Here is a sample extraFiles:
mario.jpg
extraFiles should have a list of file names, one name per line. Folder names can also be included: they will automatically be expanded recursively. Subfolders are allowed. You can put most types of files that HTML can use into it. The app file, icons, background and splash screen are automatically included. You do not need to add them to extraFiles. Remember add your image files!
To add an SQLite database, simply add its name to extraFiles. An SQLImport() function will be automatically be invoked when you start your app to load the database the first time. If you want to use some of the options of SqlImport, use the same format as that function:
customers.db,DB,loadComplete,NSB.overwriteAlways
Installing your App on a device
If you have everything set up, your app will actually run your device right after you deploy. Go into your browser (Safari on iOS), and enter the URL for your app.
http://www.nsbapp.com/myProject
You're running as an online app right now. Its appearance will be like a web page. But if you add it to the Home Screen, an icon will be created in the Launcher and the app will look like you intended and not part of the browser.
To do this in iOS, tap on the plus (+) sign at the bottom of mobile Safari and choose "Add to Home Screen". The app is now installed as an offline app, no different than any other app in the Home Screen.
On Android, it's a little more complicated. Up till Android 4, the browser was call Android Browser and used a similar process to add the the Home screen. In Android 4, the Mobile Chrome browser was introduced. On some devices, usually those branded as Google, only Mobile Chrome is available. Mobile Chrome is not complete: it is still missing some cosmetic features. See https://code.google.com/p/chromium/issues/list?can=2&q=OS:Android&sort=-stars&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary%20Stars