Saturday 30 November 2013

Apps Created Using the Appery.io Platform

Apps Created Using the Appery.io Platform


Motorway Cam Watch





Motorway Cam Watch is available on all major app stores (Android, IOS, and Windows Phone).

The main function of the app is to allow the user to display camera feeds from the major UK road network. This includes motorways and major A Roads.  For a Live Demo, click HERE.




Main Features:
  • Motorways/Roads and junctions are all in order, so finding what you need is quick.
  • Where applicable, camera direction is displayed.
  • Save Favorites and have them either displayed individually or as a group for quick access.
  • A Traffic feed is available direct from the Highways Agency.  This is displayed on startups and can be selected again at any time simply by hitting the "Traffic" button.
  • A "Trip" or "Journey" view has been included, allowing the user to select any number of cams.  Once selected, these cams will be shown in sequence at an interval set by the user.  This gives the user the opportunity to see the road conditions before travelling for their whole journey.



ESC Mobile

ESC Mobile was created as a demo app for a business to allow their client's staff to contact the HR call centre direct from their mobile device.

It was compiled initially for IOS devices and was released as a B-2-B app in the IOS App Store.  The app was written using the Appery online development GUI and can be easily cross compiled for Android and Windows Phone.
This was a fairly basic app, as it was simplyl for a demonstration.  If approved, the app will be refined to allow the user to check on the status of their requests to the call centre, and communicate directly with their data stored on the customer database.


Motorway Cam Watch - a demo from an earlier version


Adding ADMOB to Appery iOS Projects

Admob in iOS Appery Apps

Step-by-Step



Adding Admob adverts to your Appery applications can be daunting.  Below you will find a walkthrough for adding the SDK, and modifying the source code to enable you to quickly and easily master this art.

Currently Appery is using Phonegap V2.4.0, so this guide relates to that version and will be updated if necessary when Phonegap is updated.



Exporting from Appery and Importing into Xcode - the first steps.


  • Firstly, please note, this code overlays the top 30px of the display, you should pad the header in your Appery application to make room.  The reason this is done is because when I generated the space in Xcode, the advert would not click  You will need to export your Appery project by clicking Export -> Xcode Project.
  • Once you have the project, unzip it a a folder, then open double click on the Xcode project file.
  • Right click on the Project and select Add Files to “app title” ,browse to your google admob ads sdk iosfolder until you reach the files. Select all the files (but not the add-ons folder) and add the files.
  • Click on the Target, then select Build Phases tab, then select Link Binary With Libraries, Click the +icon and add the following libraries: StoreKit, Audio, Toolbox, MessageUI, SystemConfiguration, CoreGraphics & AdSupport
  • Click on the Build Settings tab, then scroll down to Other Linker Flags Double click to the right to edit the setting of this flag, keep –objC and remove all load 



Source Code Changes






  • Open ApplicationDelegate.m and Scroll down to find the function:
    - (void) webViewDidFinishLoad:(UIWebView*) theWebView
    Under the following line: theWebView.backgroundColor = [UIColor blackColor];
    add
    //
    // - Ad Code Here
    // -------------- //
    // Add the view controller's view to the window and display.
    [self.window setRootViewController:self.viewController];
    [self.window makeKeyAndVisible];
    //
    // - End Ad Code
    // -------------
    //
  • Open MainViewController.h
    After #import <Cordova/CDVViewController.h> Add
    #import "GADBannerViewDelegate.h"
    @class GADBannerView, GADRequest;
    #define kSampleAdUnitID @"
    YourAdmobIDHere"
  • After @interface MainViewController : CDVViewController but before @end add
    <GADBannerViewDelegate>
    {
        GADBannerView *adBanner_;
    }
    @property (nonatomic, retain) GADBannerView *adBanner; - (GADRequest *)createRequest;







  • Open MainViewController.m
    After #import <AVFoundation/AVFoundation.h> add
    #import "GADBannerView.h" #import "GADRequest.h"
  • After @implementation MainViewController add
    @synthesize adBanner = adBanner_; 
  • Scroll down to function - (void)dealloc after { add
    adBanner_.delegate = nil; [adBanner_ release]; 
  • Scroll down to function - (void)viewDidLoad After [super viewDidLoad]; add
    // Ad Code here
    //-------------
    // Initialize the banner at the top of the screen.
    CGPoint origin = CGPointMake(0.0,0.0);
    // Use predefined GADAdSize constants to define the GADBannerView.
    self.adBanner = [[[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner origin:origin] autorelease];
    // Note: Edit SampleConstants.h to provide a definition for kSampleAdUnitID
    // before compiling.
    self.adBanner.adUnitID = kSampleAdUnitID;
    self.adBanner.delegate = self;
    [self.adBanner setRootViewController:self];
    [self.view addSubview:self.adBanner];
    self.adBanner.center = CGPointMake(self.view.center.x, self.adBanner.center.y);
    [self.adBanner loadRequest:[self createRequest]];
    //
    // End Ad Code
    //----------------









 

  • Scroll to the end of the routine, just before @end add
    //
    // - Ad Handling Code here
    // -----------------------
    //
    #pragma mark GADRequest generation
    // Here we're creating a simple GADRequest and whitelisting the application
    // for test ads. You should request test ads during development to avoid
    // generating invalid impressions and clicks.
    - (GADRequest *)createRequest {    GADRequest *request = [GADRequest request];      
    // Make the request for a test ad. Put in an identifier for the simulator as  
    // well as any devices you want to receive test ads.  
    request.testDevices =    [NSArray arrayWithObjects:  
    // TODO: Add your device/simulator test identifiers here. They are  
    // printed to the console when the app is launched.  
    nil];  
    return request;
    }
    #pragma mark GADBannerViewDelegate impl
    // We've received an ad successfully.
    - (void)adViewDidReceiveAd:(GADBannerView *)adView
    {
       NSLog(@"Received ad successfully");
    }
    - (void)adView:(GADBannerView *)view
    didFailToReceiveAdWithError:(GADRequestError *)error
    {  
      NSLog(@"Failed to receive ad with error: %@", [error localizedFailureReason]);
    }
    //
    // - End Of Ad Handling Code
    // -------------------------
    //

Adding ADMOB to Appery Android Projects

Admob in Android Appery Apps, Step-by-Step


Adding Admob adverts to your Appery applications can be daunting.  Below you will find a walkthrough for adding the SDK, and modifying the source code to enable you to quickly and easily master this art.

Currently Appery is using Phonegap V2.4.0, so this guide relates to that version and will be updated if necessary when Phonegap is updated.
 


Exporting from Appery and Importing into Eclipse - the first steps.





  • Firstly, you will need to export your Appery project by clicking Export -> Eclipse Project.
  • Once you have the project, unzip it a a folder, then open Eclipse and Import as "Existing Android Code into the Workspace".
  • Point to your folder where you unzipped the file from Appery, and when given the opportunity, untick the Barcode Scanner as we don't need that and click finish.
  • Right click on your project and select Android Tools-> click Fix Project Properties.
  • Right click on your project and select Build Path -> Configure Build Path.
  • Click Libraries -> Add External Jars and then point to the Google Admon SDK jar.
  • Click Order & Export, then tick all unticked grey boxes and click ok. 


Manifest File Changes.




  • Open the Android Manifest file, and view the .xml file.
  • Add the lines below to the AndroidManifest.xml file above the line "<------ receiver...."
<activity android:name="com.google.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/>
  • Find and remove the line below:
    <uses-permission android:name="android.permission.READ_INPUT_STATE" />



Source Code Changes - Admob Code




  • Now open your source code for you project, you need the code that has the OnCreate code. (PhoneGapActivity.java)
  • Add this line under the last import statement
    import com.google.ads.*;
  • Add this the line below under public class PhoneGapActivity extendsorg.apache.cordova.DroidGap {
    private AdView adView;
  • Place the code below directly under these 2 lines;
    onCreate(Bundle savedInstanceState)
    super.onCreate(savedInstanceState);


    adView = new AdView(this, AdSize.BANNER, "YourAdMobIDHere");   
    LinearLayout layout = super.root;
    layout.addView(adView);
    layout.setHorizontalGravity(android.view.Gravity.CENTER_HORIZONTAL);          adView.loadAd(new AdRequest());
  • Hover over the [LinearLayout] error that is shown on the line below;
    LinearLayout layout = super.root;
    and select the option: import 'LinearLayout' (Android Widget)
  • Test app (Run As Android app).
  • When ready to create APK for market, edit the AndroidManifest.xml file:
    Look for android:debuggable="true"> and change it to android:debuggable="false">