I did a new iTabbar CSS who look like the new IOS 6 tab bar desing
Today i wanted to create a real native app with Phonegap
After looking for all download sdk files from all device to create a native app for all devices and trying to make it work is a pain. If you want to compile for ios you need a Mac. But i find a easy way to create a Native app, PhoneGap build.
I read a lot about it in the last few days and i wanted a fast easy way to create a real Native app. I found that you can compile your app in the cloud with adobe PhoneGap build. You can create a real Native app out of your web app in minutes for almost all devices.
On the build PhoneGap web page, ask for a new Adobe id because sign in with Github didn’t work for me. To test it, i started with the Phonegap-start kit. Here the doc on Build Phonegap. I forked the project to my Github page and process it in Phonegap build page. By the way, i just find a new software to manage your Github account and project. Thank’s Github i waited a year to have this kind of software i wanted to easly manage your project. (Read how to manage your Github project to go to the next step)
After setting all thing for my test app, i clicked the build button and in 2 minutes i add 6 Native apps from the PhoneGap start kit. In build PhoneGap, they give you the QR Code to get a link to download your new app, i scanned it from my Android phone and download it the my device, open the app and wow, it work right away.
Now i wanted to test it with my iTabbar web app. (iTabbar on Github – Read about iTabbar and download it) I open my iTabbar files from my computer and copied all files and folders to the ‘www’ folder where Github sync my repo files, usualy in Window -> User -> my documents-> Github-> and for this project in the phonegap-start folder.
I renamed my demo.html file to index.html. After that i commit the new files and sync all files and new folders to Github with the Github window software.
Here on Github, a basic iTabbar for PhoneGap-start on Github (it may only be a very basic version that i have to update)
Now just return to the Build PhoneGap web page and click the Update code and rebuild button, It will compile all your new project from the new Github files.
I scanned the QR code to download my lattest version on my Android phone, at first the update didn’t work well, i don’t know if it was because i dindn’t click the Update code button from Build Phonegap, i did just click Rebuild all. I uninstalled the app from my Android phone, clicked the Update code on Build PhoneGap page, it automatically Rebuild after clicking Update code. Scanned the QRcode again, download the app, install it and open the app and…… Yeah! it’s worked Youhou, i was so happy snif…
Some importants update was done on iTabbar and the script in general.
- Now iTabbar hide address bar on IOS (iPhone/iPod/iPad) and Android on browser navigation.
- Fix the fixed tabbar position to bottom when address bar is hided.
- New add to home popup in 10 language to encourage users to add your web app to home screen.
- Some new css in apple.css to show differents content.
it’s not easy to hide the address bar on Android and harder when your web app support history navigation. Android want to show the address bar and with some actions and setTimeout you can hide it. But every time you load another page or div via ajax with a new hash, the address bar will show and you have to hide it again.
For hidding the address bar i found this excellent script who work well for Android and IOS but doesn’t work if you are using ajax navigation.
I added some code to it to force Android to hide the adress bar when a new hash in the url is called. (fullscreen.js) and another version standalone who may work without jQtouch and need jQuery or Zepto (fullscreen-standalone.js)
A new pop up to invite users to add your web app to their iPhone home screen.This great script come from cubiq.org, the same guy who make iScroll.
When user add the web app to home screen on iPhone, iPod and iPad, everything is fullscreen and really look like a native IOS application.
iTabbar full screen after beeing added on home screen
Working on iTabbar was a personal project to develop native app look and feel. I am a creator and have many applications ideas but i’m not a premium developer and i’m not interested in C++ and complex coding.
I create create my own bottom bar and called it iTabbar. I want now to make it better and share it with everyone and if people like it and want to contribute and make iTabbar better and more versatile, make it work with other project like jQuerymobil or any others mobile app projects.
Here a iPhone/Android emulator i created for fun and testing mobile web app. (inspired from testiphone)
With the right option, you can see the real mobile page from any website. This emulator fake a iphone user agent and this way, we can see the real mobile page from the url website you enter.
The nexts posts will be about iTabbar and other mobile web app creation subject.