keskiviikko 22. lokakuuta 2014

Starting Android developement with Linux and Phonegap / CocoonJS, Sign and zipalign. Upload to Google PlayStore.

Installing Phonegap, creating HelloWorld project and running it on Android emulator.

Links related:
http://phonegap.com/
http://developer.android.com/index.html
http://nodejs.org/

1. Start by downloading Android SDK from https://developer.android.com/sdk/index.html?hl=i



2. Unzip the file and move it under /opt/adt-bundle

Instructions for unzipping: http://www.cyberciti.biz/tips/how-can-i-zipping-and-unzipping-files-under-linux.html

$ sudo mv adt-bundle-linux-x86_64-20140702 /opt/adt-bundle
3. Configure SDK to terminal by giving command nano ~/.bashrc and add lines to the end of file:

#Android stuff  
export ANDROID_HOME=/opt/adt-bundle/sdk
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH




4. Give command android to terminal and download all required files. For example tools, android api and extras.



5. Install some libraries needed for developing (notice that these are needed also in 64bit system): sudo apt-get install libstdc++6:i386 libgcc1:i386 zlib1g:i386 libncurses5:i386
6. Install NodeJS, ANT and NPM: sudo apt-get install npm ant nodejs nodejs-legacy
7. Install PhoneGap: sudo npm install -g phonegap
8. Install Cordova: sudo npm install -g cordova

9. Then create new folder for your project for example /home/username/phonegap
10. Cd to that folder
11. Create new project by typing: phonegap create helloworld
12. Give command: android avd and install virtual Android emulator

HINT: create custom project: $ phonegap create hello com.example.hello HelloWorld



13. Run the emulator with command: phonegap run android to run the HelloWorld project in android emulator. Notice that this may take very long. 10 minutes even.



14. After successful run, type  phonegap build android to build your project which can then be imported to Eclipse and Android phone.
15. You may need to install "Android Development tools" from the marketplace.


16. Setup your SDK location to Eclipse. In this tutorial SDK is set to /opt/adt-bundle/sdk


17. Import your HelloWorld project to eclipse. File -> Import -> Android -> Existing Android Code Into Workspace. Select your generated HelloWorld root folder to import. I have selected another project here.


18. Project loaded to Eclipse and ready for Developing.


19. To run your project right click it and select "Run as -> Android Application" You can also find SDK and AVD Managers in Eclipse menu.

20. If you need to run your project again in emulator, DO NOT CLOSE IT. Android emulator may take even 10 minutes to load and therefore you don't need to re-open it every time. You can just run your project again while emulator is running and it installs the app on it.

To use a real  physical Android phone


1. Log in as root and create this file: sudoedit /etc/udev/rules.d/51-android.rules.

2. Insert line SUBSYSTEM=="usb", ATTR{idVendor}=="0bb4", MODE="0666", GROUP="plugdev"

3. Check your phones Vendor ID from the list: http://developer.android.com/tools/device.html
and paste it to Vendor {idVendor}=="YOUR PHONE CODE HERE"

4. Execute command: chmod a+r /etc/udev/rules.d/51-android.rules

5. Enable Developer Options from your phone and activate USB-debugging
(How to enable developer options http://www.androidcentral.com/how-enable-developer-settings-android-42)


6. Connect your phone to computer with usb and now if you run the project from Eclipse, it will ask if you want to run it with your phone or emulator. If you use terminal Phonegap run android it will launch the project on your phone. What this actually does is that it installs the app on your phone. It will stay there even if you unplug the cable. You need to uninstall it to get rid of it. This should do no harm to your phone and should be safe to test applications. Unless you are trying to manipulate your android software itself.

Signing the application


To be able to upload your application to Google Play you need to Sign and zipalign your app.
Google link: http://developer.android.com/tools/publishing/app-signing.html

In Eclipse:

1. Right click your project and select Export 

2. Search for Android application



3. Click next


4. Select create a "new key store" as you are making a key for the first time. Next time onwards you can use the same key to sign all of your projects.
Now you have to save the key to a file, so click browse and type a file name and click save.
You have to give a password for the key, you have to remember it, as it will be asked when next time an APK is signed. Type the password again to confirm.



5.
Alias name: you can give your name
Password: just the same password you typed before
Validity: Give a big number like 100 Years.
Organisational Unit: Give any name like your family name
Organisation: Give some name as above.
Country code: Search for it in Google.


6. On the next screen click browse and save your signed APK file in to a folder or desktop. Click finish to complete the setup.Congrats!! You can now publish it in Google Play.


To build from terminal type: cordova build android --release inside the project folder. Then you will find under platforms/android/ant-build/HelloWorld-release-unsigned.apk for example.

CocoonJS: Build your HTML5 crossplatform app in cloud and skip all the hazzle with phonegap.


"CocoonJS is a platform to test, accelerate, deploy and monetize your HTML5 apps and games on all mobile devices with many interesting features to help you deliver great web products faster:"


What CocoonJS actually does, it converts your HTML5 app to mobile ready file. You can upload a ZIP file containing your HTML5 project to CocoonJS and it will convert it for you almost ready to deploy on Google Play. CocoonJS also has use full application in play store to install on your phone. https://play.google.com/store/apps/details?id=com.ideateca.cocoonjslauncher You can upload your app to a web-server and try your app straight from the phone. Just copy paste the web address to CocoonJS launcher and see how your app works.

1. Sign up at CocoonJS

2. Click Dev Portal


3. Select "New Project"

If I understood correctly "TYPE": CocoonJS: if you want to create game running with HTML5 or Canvas, Application that doesn't need any sensors from the phone. Cordova: if you want to access your phones sensors, like proximity sensor, GPS, etc. However this is just a guess. I am not sure what is the difference between these. I also think that CocoonJS somehow accelerates the app so it should work faster theoretically compared to Cordova build.  


4. Type in your project Name, Bundle Id and Version. Especially Bundle Id is important. If your package name start with com.example, com.google or com.android they will not accept your file. better you can give a starting name as "com.yourname" because it is to be unique in Google Play. Version number should start from 0.1 and always grow up. It can also start from 1.0.0 and grow but I prefer versioning from 0.1


5. Select phone orientation, in which orientation it can be used and scaling method how it should show up on the phone screen. Then click Create Project

6. Next head up to Configuration tab. Select the minimum Android version needed to run your app and Max version should be set to All versions of course. Before you update the configurations go ahead and upload your app icons. Notice that Android needs different sized images, because the screen sizes vary. You can also add your splash screen if wanted.

7. Go to compile project window. Now it is time to zip your project. Open your project folder which contains the index.html file, select all and create a zip file. (If you want to upload your phonegap project select everything from "www" directory. Upload it. Then select "Compile project for" for which platforms you want to compile. Pick Google PlayStore (Android) for this project. And run using your preferred type mentioned earlier. Pick newest compiler version and accept the terms.


8. After you click "Compile Project" it may take 5-10 minutes before your project is compiled, because this is a free service. You will receive email containing the download link when your project is ready. Click the Android icon to download your .APK file.


9. The apk comes in a zip file. Unzip it and you will end up with two different files
a. Debug_signed
b. Release_unsigned
If you want to try your app before going online you can allow your phone to run applications from untrusted sources (Link how to allow untrusted sources: http://www.tech-recipes.com/rx/22616/android-allow-installation-of-non-market-apps/) Then connect your phone to computer and copy paste the Debug_signed.APK to your phone.

10. Find your Debug_signed.APK file with file manager (For example: https://play.google.com/store/apps/details?id=com.rhmsoft.fm)

11. Install and try how it works.

Signing CocoonJS apk with command line, ready to publish on Google Play


To upload your CocoonJS file to Google Play, you need to sign and zipalign it also. Now the file is in APK format and you can't export it straight from the Eclipse.


To sign apk:

1. Create new folder and put your Release_signed.APK there

2. Open terminal and use command:

$ keytool -genkey -v -keystore my-release-key.keystore
-alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Where my-release-key is your key name and alias_name is your name . For example "androidkey" and "shnigi". REMEMBER to keep your signature key in safe place and password also. If you want to update your app in future you need to sign it with this same key file and password. Also if you want to sign other projects, you can use this same key as well.

$ keytool -genkey -v -keystore androidkey.keystore
-alias shnigi -keyalg RSA -keysize 2048 -validity 10000

Answer some questions to generate the file.



3. Then sign your APK with command (modify your key name and alias):

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1
-keystore androidkey.keystore Release_signed.apk shnigi

Example of signing process:


4. Now your .APK is signed but it needs to be zipaligned also.

You can try to zipalign your file with: $ zipalign -v 4 your_project_name-unaligned.apk your_project_name.apk But if you get "Command not found" continue.

5. Head over to your SDK folder and find zipalign file under build-tools
(In my case /opt/adt-bundle/sdk/build-tools/21.1.1/)

6. Copy it and paste to the folder whre your .APK file is

7. Execute command:

$ ./zipalign -v 4 Release_unsigned.apk release_signed.apk




8. Congrats! Your CocoonJS file is now ready to be deployed on Google PlayStore!

Publishing your app to Google Play


1. Go to https://play.google.com/apps/publish/ and login with your Google account. If you don't have one go ahead and register to Google. 

2. You have to give a one time developer fee of $25/- for publishing in Google play. 


3. Before publishing you have to make screenshot of any of these types 320x480,480x800,480x854,1280x720,1280x800 , PNG or JPEG. Also a high resolution Application icon of 512x512, Max.1024KB You may also create optional youtube promotional videos. All these optional items will make your app more attractive.


Important! Once your App is published you can NEVER delete it. You can only "cancel publish" but Google will keep all apk files in the store. You can use filters to hide these canceled publishes. You can delete apps that are not yet published. To update your app just upload new .APK file. And now if I understood correctly, the version number must be higher than previously. Otherwise Google won't accept it.

maanantai 24. maaliskuuta 2014

keskiviikko 22. tammikuuta 2014

How To Create A Custom 404 error page

If you have LAMP installed and your website is in /var/www or public_html folder check if you already have .htaccess file by typing command

ls -a to see hidden files. If the htaccess file is not there create it by typing
nano .htaccess

insert
ErrorDocument 404 http://www.domain.com/404page.html
where you can also use local path /404page.html and also rename the 404page if you want.

Then give access to your htaccess file with chmod 644 .htaccess

Thats it. Now navigate to yourdomain.com/thispagedoesntexist.html and see your 404 error page.

Explained here more specifically: http://www.htmlgoodies.com/beyond/reference/article.php/3472591