Oct 08 2015
FEM
Oct 08

Too many websites claim to be able to turn your website into a mobile app but not one of them deliver results as expected, the simple truth is you can’t automate the process, it will always leave something to be desired. Our software couple with custom implementation can turn your Drupal or WordPress website into a mobile feeling app. With native login functionality the user does not need to repeatedly login to the app giving the illusion of a 100% native mobile app from a website that lies behind a login.   After logging in once the user simply clicks the homescreen icon and will be taken to the authenticated/logged in website area. All viewed from within a native iOS or Android wrapper. Custom offline messages and native navigation can all be implemented out of the box with our software. The overall time to implement the basic service for your app is $3000, the source code is yours forever with no annual fees, and you publish directly from your developer account. This services service will get you better results than an automated do-it-yourself platform,and also authentication and login which platforms like Appresser can’t do. To convert a a website/webapp the one click homescreen icon app experience.  The API currently exists for Drupal 6 or Drupal 7 sites. App software is written in both native iOS (Objective C) and Android (Java) code.

Screenshot_2015-10-08-05-52-27

Sign up using your email or Facebook SDK, the app communicates via REST to your website.
Screenshot_2015-10-08-05-51-32

Choose to sign in with Facebook once and then sign in automatically by clicking your homescreen icon.

Screenshot_2015-10-08-06-07-38

App gets added to homescreen and login via one click.
Screenshot_2015-10-06-02-33-34

Preloader provides instant touch feedback for a native feel.

Screenshot_2015-10-08-06-09-41

Custom offline message instead of web browser “page not found”.

Screenshot_2015-10-06-02-32-41

Turn any responsive website into an app.

Jul 20 2015
Jul 20

Zoltan (Zoltanh721) recently blogged about WebRTC for the Fedora community and Fedora desktop.

https://fedrtc.org has been running for a while now and this has given many people a chance to get a taste of regular SIP and WebRTC-based SIP. As suggested in Zoltan's blog, it has convenient integration with Fedora SSO and as the source code is available, people are welcome to see how it was built and use it for other projects.

Issues with Chrome/Chromium on Linux

If you tried any of FedRTC.org, rtc.debian.org or meet.jit.si using Chrome/Chromium on Linux, you may have found that the call appears to be connected but there is no media. This is a bug and the Chromium developers are on to it. You can work around this by trying an older version of Chromium (it still works with v37 from Debian wheezy) or Firefox/Iceweasel.

WebRTC is not everything

WebRTC offers many great possibilities for people to quickly build and deploy RTC services to a large user base, especially when using components like JSCommunicator or the DruCall WebRTC plugin for Drupal.

However, it is not a silver bullet. For example, there remain concerns about how to receive incoming calls. How do you know which browser tab is ringing when you have many tabs open at once? This may require greater browser/desktop integration and that has security implications for JavaScript. Whether users on battery-powered devices can really leave JavaScript running for extended periods of time waiting for incoming calls is another issue, especially when you consider that many web sites contain some JavaScript that is less than efficient.

Native applications and mobile apps like Lumicall continue to offer the most optimized solution for each platform although WebRTC currently offers the most convenient way for people to place a Call me link on their web site or portal.

Deploy it yourself

The RTC Quick Start Guide offers step-by-step instructions and a thorough discussion of the architecture for people to start deploying RTC and WebRTC on their own servers using standard packages on many of the most popular Linux distributions, including Debian, Ubuntu, RHEL, CentOS and Fedora.

Apr 13 2015
Apr 13
The future of the web is inarguably mobile. Mobile use is clearly increasing as people spend more time on their phones, and the rate that people are using dedicated mobile apps rather than their mobile browser is also increasing. But with web services, mobile apps can integrate popular web-based content management systems and in the
Mar 13 2015
Mar 13
The services module comes built into core (standard issue), with Drupal 8, the next generation of Drupal. This shows incredible insight in the Drupal community as we had toward a RESTful web connected through APIs. There are a variety of methods to convert a Drupal or WordPress app to a native app that can be
Feb 11 2015
Feb 11

In this article I am going to show you how you can integrate Pushover with your Drupal site. I will illustrate a couple of examples of how you can use Pushover to notify yourself as soon as something happens on your site.

The code I write in this article is also available in this repository so you can just clone that if you want to follow along.

What is Pushover?

Pushover is a web and mobile application that allows you to get real time notifications on your mobile device. The way it works is that you install an app on your Android or Apple device and using a handy API you can send that app notifications. The great thing about this is that it happens more or less in real time (depending on your internet connection) as Pushover uses the Google and Apple servers to send the notifications.

The price is also very affordable. At a rate of $4.99 USD per platform (Android, Apple or desktop) paid only once, you can use it on any number of devices under that platform. And you also get a 5 day trial period for free the moment you create your account.

What am I doing here?

In this article I am going to set up a Pushover application and use it from my Drupal site to notify my phone of various events. I will give you two example use cases that Pushover can be handy with:

  • Whenever an anonymous user posts a comment that awaits administrative approval, I’ll send a notification to my phone
  • Whenever the admin user 1 logs into the site, I’ll send an emergency notification to my phone (useful if you are the only user of that admin account).

Naturally, these are examples and you may not find them useful. But they only serve as illustration of the power you can have by using Pushover.

Pushover account

First, a quick look at creating your Pushover account. To follow along, go on over to Pushover and sign up if you haven’t already and you can start your 5 day free trial. Then, go to Google Play or the App Store and install the app on your device. You’ll need to log in to your account and give the device a name. Mine is called simply Nexus (hint: I don’t have an iPhone).

Go back then to the Pushover website and you can already test it out by sending yourself a test notification to one or all of your active devices. You can even specify which sound it should make.

Next, if you want to use the API, you’ll need to create an application. This will generate for you an app_token to use later on. And that should be pretty much it.

Drupal

Now that the Pushover account creation is taken care of, the device app is installed (Android in my case) and I have my Pushover application, it’s time to see how I can achieve the goal set out in the beginning. As a brief roadmap, I will do the following:

  • Create a custom Drupal module
  • Add to it the Pushover class created by Chris Schalenborgh (a handy wrapper over the curl calls to the API)
  • Implement some hooks that will trigger the notifications based on certain conditions
  • Profit

The custom module I’ll be working with in this example is called pushover and it contains a pushover.info and a pushover.module file (as required). Additionally, I will create a lib/Pushover folder in it to store the external class I will use to connect to Pushover. There are other – more recommended ways – of importing external libraries into Drupal modules (see the Libraries API), but for the sake of brevity, this will work just fine.

The first thing I want to do in my pushover.module file is to import this external class. Based on my folder structure, I can do so with this line:

require_once(DRUPAL_ROOT . '/' . drupal_get_path('module', 'pushover') . '/lib/Pushover/Pushover.php');

Next, I want to create a reusable helper function that will return a pushable object. That is an object already populated with my own defaults (such as credentials) and that takes some parameters for the more common properties. But first, I want to put my Pushover account credentials into the settings.php file because they do not belong in my git repository:

$conf['pushover_credentials'] = array(
  'user_token' => 'uCpygdjfsndfi7233sdasdo33Yv',
  'app_token' => 'aKH8Nwsdasdanl342jmsdaBWgoVe',
);

Obviously neither of these tokens are now valid but if you are following along, you should replace them with yours: the user_token you get on the main page as you log in to the Pushover website and the app_token is the one generated for your application.

Then I can continue with my helper function I mentioned earlier:

/**
 * Helper function that returns a pushable object using the Pushover class
 * 
 * @param $vars
 * @return bool|Pushover
 */
function pushover_get_pushable($vars) {
  global $conf;
  if (isset($conf['pushover_credentials'])) {
    $push = new Pushover();
    $push->setToken($conf['pushover_credentials']['app_token']);
    $push->setUser($conf['pushover_credentials']['user_token']);
    $push->setTitle($vars['title']);
    $push->setMessage($vars['message']);
    if (isset($vars['url'])) {
      $push->setUrl($vars['url']);
    }
    if (isset($vars['device'])) {
      $push->setDevice($vars['device']);
    }
    $push->setTimestamp(time());

    return $push;
  }
  else {
    return FALSE;
  }
}

In this function I instantiate a new Pushover object if there are credentials in my settings.php file. Otherwise, I fail silently by returning false. The function takes some parameters that are set on the object: title and message are mandatory whereas the url and device are not. The device is actually the name of the device to which you want to restrict this notification.

Additionally, I set the current timestamp and then return the object.

Next, it’s time to use this function inside some hooks. The first one is going to be hook_comment_insert():

/**
 * Implements hook_comment_insert().
 */
function pushover_comment_insert($comment) {

  // Send a push notification if a new comment is created by an anonymous user
  // and it is not yet published.
  if ($comment->status == 0 && $comment->is_anonymous == TRUE) {
    global $base_url;
    $vars = array(
      'title' => 'New comment on ' . variable_get('site_name') . '!',
      'message' => 'Subject: ' . $comment->subject,
      'url' => $base_url . '/node/' . $comment->nid . '#comment-' . $comment->cid,
      'device' => 'Nexus'
    );
    $pushable = pushover_get_pushable($vars);
    if ($pushable) {
      $pushed = $pushable->send();
      if ($pushed == false) {
        watchdog('Pushover', t('A comment has been created but there was an error pushing that over.'), array(), WATCHDOG_ERROR, NULL);
      }
    }
  }
}

In here I check if the commenter is anonymous and the status is 0 (to be on the safe side). If that’s the case, I build the array of parameters for my helper function with some information about the site and comment and use the send() method to send the notification. You’ll notice that I restricted this to the Nexus device.

At the end, I check whether the notification went out successfully (the send() method returns false if the Pushover service does not return the success status code of 1. If something went wrong, I quickly log it to the watchdog.

So now if an anonymous user writes a comment, I get a push notification with the site name, comment subject and URL. Nifty.

Now let’s turn to the second example in which I implement an emergency notification if my admin user logs into the site. If it’s not me, I’ll know something is wrong and I probably got hacked. I do this inside a hook_user_login() implementation:

/**
 * Implements hook_user_login().
 */
function pushover_user_login(&$edit, $account) {
  // If the admin user logs in, send a push notification.
  if ($account->uid == 1) {
    $whitelist = array('1.1.1.1');
    if (!in_array(ip_address(), $whitelist)) {
      global $base_url;
      $vars = array(
        'title' => 'Admin user sign in',
        'message' => 'Admin user has logged into this site: ' . variable_get('site_name') . '!',
        'url' => $base_url,
      );
      $pushable = pushover_get_pushable($vars);
      if ($pushable) {
        $pushable->setPriority(2);
        $pushable->setRetry(30);
        $pushable->setExpire(60);
        $pushed = $pushable->send();
        if ($pushed == false) {
          watchdog('Pushover', t('An admin user has logged into the site but there was an error pushing this over.'), array(), WATCHDOG_ERROR, NULL);
        }
      }
    }
  }
} 

In here, I first check if the user logging in is the one with the id of 1 (the main admin user). Then I create an array with whitelisted IPs to check against the user logging in. I don’t want to get notified if I log in from home or from the office (1.1.1.1 is just an example ip address).

Then just like before, I get my pushable object with the usual variables (no device this time, I want this to go out to all my devices). On top of those, I set a priority of 2 (marking it an emergency notification), a retry value of 30 seconds and an expire value of 60 seconds. The latter 2 in combination with the priority make it so that if left unacknowledged by my phone, the notification gets resent every 30 seconds for a total duration of 60 seconds. For more information about the possible options you have with Pushover, make sure you check out their API docs.

And there it is. I will now get an emergency notification if someone logs in with my admin account. Of course, not very good if many people can log in with that account, but you get the point.

Conclusion

In this tutorial I showed you how you can use Pushover from your Drupal site to send notifications to your phone when certain events occur. I covered 2 examples but I’m sure you can find more. I would like to also mention that I found a contrib Drupal module called Pushover which uses Rules in order to send out Pushover notifications. I haven’t really used it, but make sure to check it out if you want to use Pushover and your site is already making use of the Rules module. Or, you know, you hate writing code.

Oct 12 2014
FEM
Oct 12

drupal-wordpress-ios-android copy

Too many websites claim to be able to turn your website into a mobile app but not one of them deliver results as expected, the simple truth is you can’t automate the process, it will always leave something to be desired. Our software couple with custom implementation can turn your Drupal or WordPress website into a mobile feeling app. With native login functionality the user does not need to repeatedly login to the app giving the illusion of a 100% native mobile app from a website that lies behind a login.   After logging in once the user simply clicks the homescreen icon and will be taken to the authenticated/logged in website area. All viewed from within a native iOS or Android wrapper. Custom offline messages and native navigation can all be implemented out of the box with our software. The overall time to implement the basic service for your app is $3000, the source code is yours forever with no annual fees, and you publish directly from your developer account. This services service will get you better results than an automated do-it-yourself platform,and also authentication and login which platforms like Appresser can’t do. To convert a a website/webapp the one click homescreen icon app experience.  The API currently exists for Drupal 6 or Drupal 7 sites. App software is written in both native iOS (Objective C) and Android (Java) code.

View sample apps Android, iOS

If you are a developer and want to try to do this for yourself or a client we can share some of our experience and code with you

Read about other more extensive options we offer for converting to a mobile app using REST

Screenshot_2015-10-08-05-52-27

Sign up using your email or Facebook SDK, the app communicates via a REST API. Screenshot_2015-10-08-05-51-32

Choose to sign in with Facebook once and then sign in automatically by clicking your homescreen icon.

Screenshot_2015-10-08-06-07-38

App gets added to homescreen and login via one click.
Screenshot_2015-10-06-02-33-34

Preloader provides instant touch feedback for a native feel.

Screenshot_2015-10-08-06-09-41

Custom offline message instead of web browser “page not found”.

Screenshot_2015-10-06-02-32-41

Turn any responsive website into an app.

Nov 05 2013
Nov 05

Felt Android MascotI’ve recently given in to temptation and bought myself a Google Nexus 7. Having come from a predominantly Apple/IOS background, I was bursting to try out an alternative mobile operating system. Especially one which seems to actively outperforming Apple’s product.

I won’t go into a feature for feature comparison right here. Suffice to say, when I wrote my guide to setting up an alarm clock on the Nexus, I suddenly realised I had no idea how to take a screenshot on the device!

Luckily, taking a screenshot on a Nexus (as with the iPhone/iPad) is a built-in function. However, it’s a little tricky to carry out. Here’s how to do it:

Press and hold the power and volume down buttons simultaneously. That’s it. Seriously.

It might take a second, but you’ll hear the sound of a camera shutter and a still image of your screen will shrink and disappear. The status bar at the top of your screen will say that your screenshot is currently being saved.

To retrieve your screenshot files, simply fire up the Gallery app on your Nexus and you should see a subfolder called Screenshot. There are plenty of sharing options for getting your pictures online, and I could have attempted to upload them directly to WordPress via Chrome. However, I opted to email them to myself via Gmail and then resize the images on a laptop instead.

Nov 03 2013
Nov 03

Google Nexus LogoIf, like me, you’re just starting to get into Android through Google’s fantastic Nexus products, you’ll probably have spent some time looking for the alarm clock functionality. Trust me, it’s well hidden! I initially went looking through the Nexus settings, but had no luck. Guess what? Once you discover where to look, setting up multiple alarms on the Nexus is actually a doddle. Let me talk you through it! These instructions should hold steady on any Nexus device, though I’m using a Nexus 7 with Android 4.3.

Set up your first alarm

The Nexus Clock App

Click on the clock at the top of your home screen. This should take you into the clock config screen. (Alternatively, click the “All Apps” button – the circle on the bottom of your home screen – and then open the Clock app from there.) Next, click on the alarm clock icon in the lower left corner.

This should bring up the following screen. It may contain a preconfigured alarm, or it may be empty.

Nexus: Empty Alarm Screen

Click on the + button in the top right corner to add a new alarm. You should then see the following screen:

Alarm app - setting the time

Simply use the numberpad to type in the exact time you want to be woken up at. There are a couple of shortcuts for :00 and :30 which might come in handy. Click OK when you’re done.

That completes the basic alarm setup, but you can choose the ringtone and the repeat settings for the alarm in the following screen:

Alarm repeat settings on Nexus

You may also set a label for the alarm, however unlike the IOS alarm app, this isn’t displayed prominently, so it may not be of much help to you. If you want to add a label anyway, click into that field and type a name for the alarm.

That’s it, you’re done!

Disabling an alarm

If you want to temporarily disable an alarm (say you’re on holiday for a week and you want to lie in), you can simply toggle the on-off switch at the right hand side of the alarm. See the photo below:

Alarm configuration screen on Android 4.3

Deleting an alarm

Deleting an alarm on the Nexus is easy – you simply hold your finger on the alarm you want to delete. This should highlight the entry in blue, then the top toolbar will display a trash can icon. Click the trash can and your alarm will be deleted.

How to select an alarm and delete it on Android

That’s it for my Nexus/Android alarm configuration guide. If you’re an IOS user, here’s a photo guide showing you how to set up your IPhone alarm clock.

Feb 07 2013
Feb 07

Recently, I had the opportunity to provide training on building Android apps at SandCamp in San Diego! I was excited to teach my first training class at a Drupal camp, because I like to teach, and I like Drupal. We built this app from scratch:

SandCampAndroidApp

Why Android apps? First, Android is open source, and the developer tools run on Windows, Mac, or Linux. Second, you can run the app you create in the class on your Android phone or tablet just by plugging it in, changing a simple setting on the phone, and then clicking “Play” in the Android Developer Tools. Third, a lot of the concepts for native mobile app development with Drupal (asynchronous networking, threads, list views, JSON/REST) are shared between the Android, iPhone/iPad, BlackBerry 10, and Windows Phone platforms.

I chose to teach how to build a Android 2.x style of application for this class – it was an intro class, with no expectations of knowing anything about app development or Java. Android 4 (Ice Cream Sandwich) has many new components, including the Action Bar, and Fragments, but they don’t work out of the box on Android 2.x, which is still running about 50% of Android devices.

We covered a lot of interesting topics – including Android layouts, Java classes, methods and exceptions, Android’s AsyncTask, Drupal’s Services and REST Server, Android ListViews, parsing JSON with Android, Android’s permissions, and last, loading an image off the web into an Android app.

I haven’t given a training class for a Drupal Camp before, but I found it to be very useful to me to create a training guide for the students that basically covered everything I spoke about, with lots of screenshots of how the app should look when you add this code, code listings, and discussion. It ended up being about 80 pages for a four-hour class, so it’s about half of a decent book right now.

The biggest request at the end of the class was – where should we go from here? There aren’t a lot of specific resources for building Android apps that talk to Drupal, but I can definitely recommend the Android Design web site:

http://developer.android.com/design/index.html

Before getting too deep into Android, it’s definitely important to understand how Google wants you to design apps. It’s definitely different from iOS app design, which is what you will usually find in when mobile design is discussed. Beyond that, I also highly recommend this book on Android development:

Android UI Fundamentals: Develop & Design by Jason Ostrander.

Google has an Android Developers web site, but I feel that it’s not well suited to beginning app development.

If you’re interested in Android or iOS mobile app development for Drupal, and you have any questions, feel free to contact me here through the Contact Form at the top.

  Android, Drupal Planet, Training
Jul 17 2012
rmo
Jul 17

Hello, Shadow is here!

Posted on: Tuesday, July 17th 2012 by Richard Mo

Have you ever felt that doing front-end web development for mobile web devices (i.e. Android, iOS) is a real pain, especially when you can’t do any inspections quickly? Designers or Themers would totally agree with me on this. Web developers, in general, would feel the same way but not as much as designers/themers do. And how about QA in general – manually pressing links or refreshing pages? It’s a lengthy process… Now, may I suggest to you that it is possible to shadow your actions across multiple devices?

I’ve recently been introduced to Adobe Shadow which addresses all the pain I mentioned earlier. A quote from Adobe Labs:

“Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.”

Basically, it allows you to sync all URL changes to every shadowed device and inspect HTML and CSS on each and every one of them.

Here are some features Adobe® Shadow provides:

  • Synchronized Browsing and Refreshing (Device Pairing) — Wirelessly pair multiple iOS and Android devices to your computer.
  • Remote Inspection —Target a device for remote inspection and using familiar development tools, make changes to your HTML, CSS and JavaScript and see your device update instantly.
  • URL Monitoring — Shadow monitors the Address Bar in Chrome, and sends updates to Shadow devices as they happen.

Setting the system up isn’t hard at all; there are, however, 3 things you must download to get things up and running:

  1. You need to download the Adobe® Shadow service which installs onto your desktop. It acts as a server then communicates with all your devices.
  2. Download and install the Chrome browser extension which you would use to control your Shadow devices.
  3. Finally, each device (Android or iOS) must install their respective Shadow app.

Combining all 3 pieces of the puzzle, hook them up, and there you go!

Adobe® Shadow is excellent for traditional websites, where every page is uniquely named (i.e. each page has a unique URL), because Shadow devices follow URL paths sent by the host and interact with the native browser. Most AJAX elements on the page, however, will not be compatible with Shadow for that reason. Web applications built purely using JavaScript, Sproutcore per se, will not work.

Then, what would Adobe® Shadow be used for? Drupal! Shadow is excellent for Drupal front-end development! It really speeds things up for designers and themers. The built-in HTML CSS inspector will let you see what’s going on with each device and you can take screenshots for all of them at once!

For further information, please visit Adobe Shadow.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web