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.

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.

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.

Jun 21 2012
Jun 21

Increasingly our web pages are being bookmarked on iOS devices.  This is a good thing, however we had traditionally been using long titles on our pages and these were clumsy for end users when trying to store bookmarks.  Like 90,000 other websites we have chosen Page Title to solve this issue.  It works well with Tokens and Views and is probably one of those modules you should just install.

Here’s your 1:30 video http://www.youtube.com/watch?v=DMvXVJ2mbGQ

and a couple of screen shots for the really curious types.  It’s a simple module to install and use. Made by several of Drupal giants robertDouglass, JohnAlbin, and nicholasThompson.

Turn on page titles in the content type area

Turn on page titles in the content type area

Enjoy refreshing page titles independent of your content title

Enjoy refreshing page titles independent of your content title

Feb 13 2012
Feb 13

If you've ever needed to assemble an iPhone or iPad-ready Drupal site on short notice, you know that it's easy to miss some of the details. Once you've finished a responsive design and figured out how to avoid burying mobile users in heavy images, it's easy to forget the high-res Web Clip Icon used by iOS when a user saves your site to their device's home screen. Without one, a squeezed-down screenshot of your site will be displayed on their home screen. It's possible to hard-code a Web Clip Icon into your theme's markup, but with the Touch Icons module, it's as easy as uploading a custom favicon or logo image.

Screenshot of administration screen

Installing and enabling Touch Icons adds two additional checkboxes to every theme's settings page. Like the Favorite Icon and Site Logo options, activating them lets you upload a custom image file that should be used as your site's iOS home screen icon. That's it -- there's nothing more to configure or set up!

Screenshot of a site's touch icon

Technically, nothing prevents you from customizing your site's theme and embedding these touch icons yourself. If you're using an out-of-the-box Drupal theme, however, it's easy to forget. If you need to add a bit of extra polish for iOS users, this is an easy way.

Touch Icons is simple and problem-free based on our testing, but only the Drupal 6 version has an "official" release available for download on Drupal.org. The Drupal 7 version of the module is only available as a "developer release." If you're interested in helping maintain the module or want to keep track of its status for Drupal 7, check out the module's issue queue.

*/

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