Integrating Sencha Touch 2.0 application with PhoneGap/Cordova

April 23, 2012 All Day Happenings No comments

Integrating Sencha Touch 1.1 with PhoneGap was real easy with the available guide by James Pearce. Although the whole guide is still relevant to Sencha Touch 2.0 SDK but you will find application root file (app.js) structure trivial.

In this post I will share my solution to run Sencha Touch 2.0 application with PhoneGap making sure the PhoneGap stuff are all loaded prior to showing UI to end user for interactions.

Here’s my live example http://www.senchafiddle.com/#qws9d. You can also look at the below gist.

Question: How did you make IU app without having their database?

April 14, 2012 All Day Happenings, Application Development, Mobile, Sencha, Sencha Touch, Solution 3 comments

A question that every folk at my university asks me is now taking his way into boredom.

No matter to whoever I talk about IULMS mobile app the first question they ask is “Where did you get their database?”. I finally got time to write this down for those who are still stayed unanswered and for my future laugh.

IULMS is a website. A website works on HTTP protocol. You need to first understand the protocol to use it and thus to understand the IU app back end.

When you visit iulms.edu.pk, the first thing you do is log into your account with reg. no and password. With the help of Chrome Inspector I was managed to see what HTTP call/request is being made when you hit login after entering your reg. no. and password. I figured the URL was http://iulms.edu.pk/login/index.php and the method was POST with your reg. no. and password. I found that if the result of the request has status code 200 OK, it means you had wrong reg. no or password but if otherwise it was 303 See Other, then it was successful login.

After login, similarly I visited http://iulms.edu.pk/sic/StudentAttendance.php to inspect what request is bringing your attendance data and I found what I needed. I wrote quick PHP code that was doing the job of scrapping this data as requested.

Disclaimer: This post is only for educational purposes and is not in any way meant for hacking.

Phonegap iOS and Android YouTube Video Uploader

March 26, 2012 All Day Happenings No comments

I was needed for a job where I had to write an application for iOS and Android which allows user to upload video from their phone to specific YouTube channel. Because this app was needed for both iOS and Android I thought it’s better to write it with Sencha Touch and Phonegap.

The major thing I needed to do was to write Phonegap plugin for iOS and Android which will actually take file path as input and upload the video to YouTube.

Here’s Android plugin source code.

And here’s iOS source code.

Let me know in comments what do you think.

My First Windows Program

February 17, 2012 All Day Happenings, Solution One comment

When I was kid, I didn’t have my own computer. It was my father’s computer which me and my siblings were time sharing after getting permission from my father each day.

As my passion with programming was increasing day by day, I was getting addicted to it more and more. We were time sharing like 15 minutes/user basis. You think it’s enough for writing a program that solves a problem? I didn’t think so that time and cheated my father by using the computer in the day time when he was at work. By doing this, I used to get around 8 hours in the day plus 60 minutes (4 * 15 min) in evening.

My siblings were envious looking at me while I was enjoying computer in day time so they started to use the computer in day time too. But unfortunately we started to fight to use it in day time as I figured this is no more 8 hours/day now which somehow lead to a de-facto rule of starting a computer in the early morning to use the computer whole day all by yourself and if you do so, no one will ask or force you to stop using it. That fact sucked because I used to wake up later than when my brother was used to so I ended up many days not using computer and just dying of boredom.

Because this sucked, because this was my problem, I planned to solve it by the same computer. I wrote a quick program in VB which was letting me on/off the computer via my GPRS enabled phone. After a week, the program was bug free and was working like a charm! Now no matter who took the computer first in the morning but if that’s other than me, it won’t start. Nice? That was my first program written for Windows which had really solved my problem until I was allowed to use the computer in the day officially.

Sencha Touch 2.0 Two Way List Paging

February 6, 2012 All Day Happenings, Extension/Plugin, Sencha, Sencha Touch 4 comments

I’ve been using Sencha Touch since its first release and found it very interesting. In recent few days I encountered a problem with Ext.List component twice and finally decided to knock this down. I was required to use Ext.List component for huge set of records (approx. 5000-10,000) with each record occupying many elements in the DOM which left the component in its weird state of use. I read here and there people using things like Ext.FastList which I tried too but because it doesn’t have healthy maintainer, I ended up having too many issues to use.

I decided to go with a Sencha Touch built-in ListPaging plugin but found that it does the same thing but in a different way. Initially the paging loads “n” number of records and then add “n” more to the list populating the list which just grows the list and beside it never shrinks.

What am I doing then? I have developed the same ListPaging plugin but with little modification naming it TwoWayListPaging plugin. It adds two buttons to the list of names Previous (at the top) and Next (at the bottom) which lets you page through all records in a list maintaining List and DOM sustainability.

Fork the github repository and grab the source code and tell me if you had a chance to write something similar.

IQRA University Smartphone Apps

January 31, 2012 All Day Happenings, Application Development, Sencha, Sencha Touch, Solution No comments

I had just taken my hands on the forsaken task and managed to put my extra weekend time for my own other self to keep me safe on attendance. I have written an application for iOS and Android for IQRA University students so me and they can check their attendance on the go with their phone(s).

I have kept it under GPL license which allows you to use it for free plus being CS student, a right, to modify and contribute to the application. So if you know HTML, CSS and JavaScript or PHP (not altogether), you can easily grab the code, set it up, modify it, test and contribute. The application is totally based on iqra.edu.pk website for mine and your data retrieval and is developed with Sencha Touch and Phonegap tools.

You can download the app for your phone from buttons at the bottom. You can find the source code from here.

You can always tell me in comments how do you feel about this. If you’re one of teacher at IU, you can comment to ask me to add features for your stuff too.

IQRA University iPod, iPhone, iPad App IQRA University Android App

Hacker News Social Reader

December 13, 2011 Uncategorized 2 comments

I am a big fan of Hacker News and I love reading what helpful hackers post. While I was using Washington Post’s facebook social reader for quite a while I realized there has to be something similar for Hacker News and yes I am going to be the one to create this facebook social reader for Hacker News and would like if you could help me.

I want you to read and let others know what are you reading making news potentially great. This way news and posts we post would get more votes and comments. It would be nice for those also who don’t wish to leave facebook while reading hacker news and for those who wants to turn two browser tabs into one.

Make sure you give your thoughts in comments to let me know about how it feels and to check out the github page or the facebook app directly.

The app is still to start development and you can contribute doing however you would like to.

Sencha Fiddle – Sencha Touch IDE is live

December 9, 2011 All Day Happenings, Application Development, Mobile, Sencha, Sencha Touch, Solution 2 comments

Sencha Fiddle is a Sencha Touch IDE that lets you start building smartphone applications on the web browser quickly. The fiddle aims to ease the process of building mobile apps using Sencha Touch SDK. It’s difficult for everyone to ask for help or to help others without showing where one is stuck at the code. This releases the pain involved in showing code examples online.

I have a list of features I plan to add in the app gradually and the features are written below in sequence of their development occurrence.

  1. CSS & SCSS support
  2. Few template apps
  3. Keyboard Shortcuts
  4. User based authentication
  5. To allow web services cross domain calls
  6. Sencha Touch v 2.0 support
  7. Intellisense
  8. Collaborations and Team development
  9. iOS, Android and Blackberry apps to let you test your apps on your phones quickly.
  10. Sencha Ext JS support

If you think I am missing anything, please ping back in the comments to let me know. I would be glad to include your requirements in the list.

Cheers!

IMDB Watch Trailer On YouTube Extension Is In Chrome App Store Now

November 29, 2011 Chrome, Extension/Plugin, Solution No comments

With the approval of my Google Wallet and Chrome App Store account, I was able to publish Chrome Extensions and Apps. It took me 10 minutes to publish the same extension I had published in past month at chromeextensions.org to Google Chrome Store.

Get linked to the extension I have just published to the Chrome App Store.

Cheers!

iPhone like Checkbox with CSS3

November 8, 2011 Uncategorized No comments

I google’d for a simple and decent example on CSS3 iPhone like checkboxes but I ended up with many complex examples which I either didn’t like or was too complicated to understand. Below I am writing my own CSS3 iPhone like checkboxes which can be modified with any color and is very simple to use and understand.

HTML

<div class="checkbox">
   <input type="checkbox" id="toggle_button">
   <span></span>
</div>

CSS

.checkbox
{
    position: relative;
    display: block;
    width: 40px;
    height: 20px;
}
.checkbox input
{
    -webkit-appearance: textarea;
    -webkit-border-radius: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transition: left .15s;
    background-color: transparent;
    background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
    position: absolute;
    left: 0%;
    border: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.checkbox span
{
    position: absolute;
    left: 0%;
    width: 50%;
    height: 100%;
    border-radius: 10px;
    background: white -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white));
    -webkit-transition: all 250ms ease-in-out;
}
.checkbox input:checked + span
{
    left: 50%;
}

Happy Replication

« Older Entries