SS Menu: A simple orders mgt. app for restaurants

Posted on Leave a comment
SS Menu logo

More than 2 years ago, I created a lightweight point of sale system (POS) for our restaurant in Jalandhar called SkewerSpot (SS). I wrote the thing in under a week (cowboy coding, yodlee yodlee youdoo) in Ionic/Angular. Essentially, it’s a collection of hybrid mobile apps that allows a restaurant to manage orders in real-time via Firebase. The 3 apps in this collection are:

  1. SS Menu — to take orders
  2. SS Orders — to manage orders
  3. SS Stats — to view sales data

Nothing too complicated. The thing has been running quite reliably since 2.5 years. So why the rewrite?

Recently, Dad asked me to change a few things in SS Menu. When I got to working on the changes, I realized that my Ionic tooling had somehow become broken. I just couldn’t create new builds. I left it as is and informed Dad I didn’t have sufficient time to fix things around. But he insisted. So much that I finally decided to just rewrite the entire thing in a more modern mobile SDK — Flutter.

I donned my cowboy hat again and sat down to create the menu app from scratch using a skill I had just recently acquired. I think I was able to spit out a functional version of the app in 4-5 non-contiguous days. Creating in Flutter is such a blissful experience. I loved every bit of it.

Flutter makes it infinitely easy to create 100% custom interfaces inspired by designs at Dribbble. You are never crippled by the difficulty of customizing platform’s underlying UI controls. You are always in the driver’s seat.

— Me, after having created several Flutter apps based on designs at Dribbble

Unlike the last time, I created the app from day 1 with open-sourcing in mind. I also made sure that my git history was readable enough to help others starting in the world of Flutter learn quickly from my development experience.

But due to a lack of time, I had to make certain trade-offs: the code lacks automated tests, i18n, l10n and accessibility options. There’s also no iOS version as of now. What a bummer!

Check out the code and more details about the app on GitHub:

https://github.com/anuragbhd/ss-menu-app

Help me, if you can, take it to the next level by fixing the caveats and implementing TODOs.

Some screenshots to feast your eyes on:

Flutter is riding the adoption curve

Posted on Leave a comment

It’s getting serious everyday. It’s not just the internet, a lot of people around me are talking about it. So, it did not come as a surprise when I found that a popular Indian app was built in Flutter. Dream11 is what people are talking about this IPL season. Given the massive fan following of IPL and the craze for safe online betting, one thing is sure — Flutter can damn well handle scalability. I do not use the app myself, but it sure looks pretty on friends’ phones.

I am getting more and more impatient now to build my next mobile app in Flutter. Until that happens and I have stories to tell about my time with Flutter, watch Dream11’s Flutter story:

Mobile App Development: Lessons Learned

Posted on 1 Comment
  1. Sencha Touch is a great framework, but requires a LOT getting used to. The officials Docs do not always have the answer you’re looking for. ST forums and stackoverflow are excellent resources to consult when in need.
  2. If you are a web developer, DO NOT waste time learning Objective-C or Java for creating native iOS and Android apps. Instead use something like ST to develop a mobile web app, and then convert it into a native app using Cordova / PhoneGap.
  3. Cordova is the renamed, open-source version of PhoneGap.
  4. If your app is data-centeric, most probably it will depend on a webservice / API. If the API and the app are hosted on the same server, no problemo. In case of native apps, that are basically web apps PhoneGapped into native apps, that’d mean calling a remote API, and that is the problem. See same origin policy.
  5. Most googled solutions will point to making the service JSONP supported; but JSONP works only for GET requests. CORS is a recent W3C standard that supports all HTTP methods, but it still doesn’t work for PhoneGapped apps. ASP.NET Web API provides an easy CORS implementation.
  6. The perfect solution is to keep making Ajax calls normally, but using the full URL of the remote API. That will work because a PhoneGapped app doesn’t render in a browser but in a WebView (through a file:// URL). So it’s not restricted by browser’s same origin policy.
  7. ASP.NET MVC 5 and Web API are awesome!
  8. You may frequently encounter annoying cache issues with PhoneGapped apps. Just place a super.clearCache() in your Android app’s main activity’s onCreate().
  9. A PhoneGapped iOS app will run in fullscreen mode, by default, such that the status bar in iOS 7+ will appear over it. A fix is right here!
  10. One can create an IPA archive for testing on iOS devices via Build > *.app > iTunes > ?*.ipa. Believe me, it’s one of the most stupid things you will ever do. This is the correct way to create IPA archives for ad hoc distribution.
  11. Here’s how to create an animated splash screen in Android (though I have yet to figure out how to correctly use this in a ST-PhoneGapped app).
  12. If your device has Android 4.4+, you can remote debug your WebView-based Android apps using Chrome.
  13. JavaScript is yummy!

The Making-of an Android App

Posted on 4 Comments

UnJumble
I have been developing mobile web apps since quite some time now, mostly using popular JavaScript frameworks, like Sencha Touch, which give a native look & feel to the app. Web apps have their merits, but using a platform’s SDK in order to develop a true native app is is inevitable in cases where you exclusively want your app to be available offline and also leverage some OS niceties that are unavailable to plain JS apps.

I recently got into developing a small, simple, but useful app for Android using using their latest API (level 16). The app — UnJumble — takes as input a jumbled English word, searches through a database of 58,000+ words for possible matches, and displays unscrambled word suggestions based on matches. As an added bonus, UnJumble fetches meanings for each unjumbled suggestion from Wordnik. Of course, the user gets to enable or disable the fetching of meanings as querying Wordnik requires an Internet connection, and this process may be a bit slow in some cases.

I’m currently in the process of giving finishing touches to UnJumble to prepare it for publishing on Google Play store. UnJumble is now available on Google Play. Throughout the journey of its development, I learned a lot of cool things about developing Android apps. In this article, I’ll share what all I learned by methodically teaching you how to build your own Android app using the several “components” I used to create UnJumble. But I’ll assume you’ve read at least a couple of tutorials on the Android Developers website, and that you are fairly familiar with a handful of Android SDK’s major terms and components.

Get ready to read about the journey of an Android app from its development to publishing.

Complete source code for UnJumble can be found at its github page.

Continue reading The Making-of an Android App