http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/app-overview-controller.js ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/app-overview-controller.js b/portal/js/app-overview/app-overview-controller.js new file mode 100644 index 0000000..0715c43 --- /dev/null +++ b/portal/js/app-overview/app-overview-controller.js @@ -0,0 +1,76 @@ +'use strict' + +AppServices.Controllers.controller('AppOverviewCtrl', + ['ug', + 'data', + 'charts', + '$scope', + '$rootScope', + '$log', + function (ug, data, charts, $scope, $rootScope, $log) { + //util + var createGradient = function (color1, color2) { + var perShapeGradient = { + x1: 0, + y1: 0, + x2: 0, + y2: 1 + }; + return { + linearGradient: perShapeGradient, + stops: [ + [0, color1], + [1, color2] + ] + }; + }; + $scope.appOverview = {}; + + $scope.collections = []; + $scope.graph = ''; + $scope.$on('top-collections-received', function (event, collections) { + var dataDescription = { + bar1: { + labels: ['Total'], + dataAttr: ['title', 'count'], + colors: [createGradient('rgba(36,151,212,0.6)', 'rgba(119,198,240,0.6)')], + borderColor: '#1b97d1' + } + }; + //todo add this to charts service as helper + $scope.collections = collections; + var arr = []; + for (var i in collections) { + if (collections.hasOwnProperty(i)) { + arr.push(collections[i]); + } + } + $scope.appOverview = {}; + if (!$rootScope.chartTemplate) { + //get the chart template for this view... right now it covers all charts... + data.get(null, 'js/charts/highcharts.json').then(function (success) { + $rootScope.chartTemplate = success; + $scope.appOverview.chart = angular.copy($rootScope.chartTemplate.pareto); + $scope.appOverview.chart = charts.convertParetoChart(arr, $scope.appOverview.chart, dataDescription.bar1, '1h', 'NOW'); + $scope.applyScope(); + }, function (fail) { + $log.error('Problem getting chart template', fail) + }); + } else { + $scope.appOverview.chart = angular.copy($rootScope.chartTemplate.pareto); + $scope.appOverview.chart = charts.convertParetoChart(arr, $scope.appOverview.chart, dataDescription.bar1, '1h', 'NOW'); + $scope.applyScope(); + + } + + + }); + $scope.$on('app-initialized',function(){ + ug.getTopCollections(); + }); + if($rootScope.activeUI){ + ug.getTopCollections(); + } + + + }]); \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/app-overview.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/app-overview.html b/portal/js/app-overview/app-overview.html new file mode 100644 index 0000000..797ad7a --- /dev/null +++ b/portal/js/app-overview/app-overview.html @@ -0,0 +1,34 @@ +<div class="app-overview-content" > + <section class="row-fluid"> + + <div class="span12"> + <div class="page-filters"> + <h1 class="title" class="pull-left"><i class="pictogram title">📱</i> Summary</h1> + </div> + <h2 class="title" id="app-overview-title">{{currentApp}}</h2> + </div> + + </section> + <section class="row-fluid"> + + <div class="span6"> + <chart id="appOverview" + chartdata="appOverview.chart" + type="column"></chart> + </div> + + <div class="span6"> + <table class="table table-striped"> + <tr class="table-header"> + <td>Path</td> + <td>Title</td> + </tr> + <tr class="zebraRows" ng-repeat="(k,v) in collections"> + <td>{{v.title}}</td> + <td>{{v.count}}</td> + </tr> + </table> + </div> + + </section> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/android.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/android.html b/portal/js/app-overview/doc-includes/android.html new file mode 100644 index 0000000..d0738f1 --- /dev/null +++ b/portal/js/app-overview/doc-includes/android.html @@ -0,0 +1,209 @@ +<h2>1. Integrate the SDK into your project</h2> +<p>You can integrate Apigee features into your app by including the SDK in your project. You can do one of the following:</p> + +<ul class="nav nav-tabs" id="myTab"> + <li class="active"><a data-toggle="tab" href="#existing_project">Existing project</a></li> + <li><a data-toggle="tab" href="#new_project">New project</a></li> +</ul> + +<div class="tab-content"> + <div class="tab-pane active" id="existing_project"> + <a class="jumplink" name="add_the_sdk_to_an_existing_project"></a> + <p>If you've already got an Android project, you can integrate the Apigee SDK into your project as you normally would:</p> + <div id="collapse"> + <a href="#jar_collapse" class="btn" data-toggle="collapse"><i class="icon-white icon-chevron-down"></i> Details</a> + </div> + <div id="jar_collapse" class="collapse"> + <p>Add <code>apigee-android-<version>.jar</code> to your class path by doing the following:</p> + + <h3>Android 4.0 (or later) projects</h3> + <p>Copy the jar file into the <code>/libs</code> folder in your project.</p> + + <h3>Android 3.0 (or earlier) projects</h3> + <ol> + <li>In the Eclipse <strong>Package Explorer</strong>, select your application's project folder.</li> + <li>Click the <strong>File > Properties</strong> menu.</li> + <li>In the <strong>Java Build Path</strong> section, click the <strong>Libraries</strong> tab, click <strong>Add External JARs</strong>.</li> + <li>Browse to <code>apigee-android-<version>.jar</code>, then click <strong>Open</strong>.</li> + <li>Order the <code>apigee-android-<version>.jar</code> at the top of the class path: + <ol> + <li>In the Eclipse <strong>Package Explorer</strong>, select your application's project folder.</li> + <li>Click the <strong>File > Properties</strong> menu.</li> + <li>In the properties dialog, in the <strong>Java Build Path</strong> section, click the <strong>Order and Export</strong> tab.</li> + <li> + <p><strong>IMPORTANT:</strong> Select the checkbox for <code>apigee-android-<version>.jar</code>, then click the <strong>Top</strong> button.</p> + </li> + </ol> + </li> + </ol> + <div class="warning"> + <h3>Applications using Ant</h3> + <p>If you are using Ant to build your application, you must also copy <code>apigee-android-<version>.jar</code> to the <code>/libs</code> folder in your application.</p> + </div> + </div> + </div> + <div class="tab-pane" id="new_project"> + <a class="jumplink" name="create_a_new_project_based_on_the_SDK"></a> + <p>If you don't have a project yet, you can begin by using the project template included with the SDK. The template includes support for SDK features.</p> + <ul> + <li>Locate the project template in the expanded SDK. It should be at the following location: + <pre><sdk_root>/new-project-template</pre> + </li> + </ul> + </div> +</div> +<h2>2. Update permissions in AndroidManifest.xml</h2> +<p>Add the following Internet permissions to your application's <code>AndroidManifest.xml</code> file if they have not already been added. Note that with the exception of INTERNET, enabling all other permissions are optional.</p> +<pre> +<uses-permission android:name="android.permission.INTERNET" /> +<uses-permission android:name="android.permission.READ_PHONE_STATE" /> +<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> +<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> +<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> +</pre> +<h2>3. Initialize the SDK</h2> +<p>To initialize the App Services SDK, you must instantiate the <code>ApigeeClient</code> class. There are multiple ways to handle this step, but we recommend that you do the following:</p> +<ol> + <li>Subclass the <code>Application</code> class, and add an instance variable for the <code>ApigeeClient</code> to it, along with getter and setter methods. + <pre> +public class YourApplication extends Application +{ + + private ApigeeClient apigeeClient; + + public YourApplication() + { + this.apigeeClient = null; + } + + public ApigeeClient getApigeeClient() + { + return this.apigeeClient; + } + + public void setApigeeClient(ApigeeClient apigeeClient) + { + this.apigeeClient = apigeeClient; + } +} + </pre> + </li> + <li>Declare the <code>Application</code> subclass in your <code>AndroidManifest.xml</code>. For example: + <pre> +<application> + android:allowBackup="true" + android:icon="@drawable/ic_launcher" + android:label="@string/app_name" + android:name=".YourApplication" + ⦠+</application> + </pre> + </li> + <li>Instantiate the <code>ApigeeClient</code> class in the <code>onCreate</code> method of your first <code>Activity</code> class: + <pre> +import com.apigee.sdk.ApigeeClient; + +@Override +protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + + String ORGNAME = "{{currentOrg}}"; + String APPNAME = "{{currentApp}}"; + + ApigeeClient apigeeClient = new ApigeeClient(ORGNAME,APPNAME,this.getBaseContext()); + + // hold onto the ApigeeClient instance in our application object. + yourApp = (YourApplication) getApplication; + yourApp.setApigeeClient(apigeeClient); +} + </pre> + <p>This will make the instance of <code>ApigeeClient</code> available to your <code>Application</code> class.</p> + </li> +</ol> +<h2>4. Import additional SDK classes</h2> +<p>The following classes will enable you to call common SDK methods:</p> +<pre> +import com.apigee.sdk.data.client.DataClient; //App Services data methods +import com.apigee.sdk.apm.android.MonitoringClient; //App Monitoring methods +import com.apigee.sdk.data.client.callbacks.ApiResponseCallback; //API response handling +import com.apigee.sdk.data.client.response.ApiResponse; //API response object +</pre> + +<h2>5. Verify SDK installation</h2> + +<p>Once initialized, App Services will also automatically instantiate the <code>MonitoringClient</code> class and begin logging usage, crash and error metrics for your app.</p> +<p><img src="js/app-overview/doc-includes/images/verify.png" alt="screenshot of data in admin portal"/></p> +<p>To verify that the SDK has been properly initialized, run your app, then go to 'Monitoring' > 'App Usage' in the <a href="https://www.apigee.com/usergrid";>App Services admin portal</a> to verify that data is being sent.</p> +<div class="warning">It may take up to two minutes for data to appear in the admin portal after you run your app.</div> + +<h2>Installation complete! Try these next steps</h2> +<ul> + <li> + <h3><strong>Call additional SDK methods in your code</strong></h3> + <p>The <code>DataClient</code> and <code>MonitoringClient</code> classes are also automatically instantiated for you, and accessible with the following accessors:</p> + <ul> + <li> + <pre>DataClient dataClient = apigeeClient.getDataClient();</pre> + <p>Use this object to access the data methods of the App Services SDK, including those for push notifications, data store, and geolocation.</p> + </li> + <li> + <pre>MonitoringClient monitoringClient = apigeeClient.getMonitoringClient();</pre> + <p>Use this object to access the app configuration and monitoring methods of the App Services SDK, including advanced logging, and A/B testing.</p> + </li> + </ul> + </li> + <li> + <h3><strong>Add App Services features to your app</strong></h3> + <p>With App Services you can quickly add valuable features to your mobile or web app, including push notifications, a custom data store, geolocation and more. Check out these links to get started with a few of our most popular features:</p> + <ul> + <li><strong><a href="http://apigee.com/docs/node/8410";>Push notifications</a></strong>: Send offers, alerts and other messages directly to user devices to dramatically increase engagement. With App Services you can send 10 million push notification per month for free!</li> + <li><strong>App Monitoring</strong>: When you initialize the App Services SDK, a suite of valuable, <a href="http://apigee.com/docs/node/13190";>customizable</a> application monitoring features are automatically enabled that deliver the data you need to fine tune performance, analyze issues, and improve user experience. + <ul> + <li><strong><a href="http://apigee.com/docs/node/13176";>App Usage Monitoring</a></strong>: Visit the <a href="https://apigee.com/usergrid";>App Services admin portal</a> to view usage data for your app, including data on device models, platforms and OS versions running your app.</li> + <li><strong><a href="http://apigee.com/docs/node/12861";>API Performance Monitoring</a></strong>: Network performance is key to a solid user experience. In the <a href="https://apigee.com/usergrid";>App Services admin portal</a> you can view key metrics, including response time, number of requests and raw API request logs.</li> + <li><strong><a href="http://apigee.com/docs/node/13177";>Error & Crash Monitoring</a></strong>: Get alerted to any errors or crashes, then view them in the <a href="https://apigee.com/usergrid";>App Services admin portal</a>, where you can also analyze raw error and crash logs.</li> + </ul> + </li> + <li><strong><a href="http://apigee.com/docs/node/410";>Geolocation</a></strong>: Target users or return result sets based on user location to keep your app highly-relevant.</li> + <li><strong><a href="http://apigee.com/docs/node/10152";>Data storage</a></strong>: Store all your application data on our high-availability infrastructure, and never worry about dealing with a database ever again.</li> + <li><strong><a href="http://apigee.com/docs/node/376";>User management and authentication</a></strong>: Every app needs users. Use App Services to easily implement user registration, as well as OAuth 2.0-compliant login and authentication.</li> + </ul> + </li> + <li> + <h3><strong>Check out the sample apps</strong></h3> + <p>The SDK includes samples that illustrate Apigee features. You'll find the samples in the following location in your SDK download:</p> + <pre> +apigee-android-sdk-<version> + ... + /samples + </pre> + <div id="collapse"> + <a href="#samples_collapse" class="btn" data-toggle="collapse"><i class="icon-white icon-chevron-down"></i> Details</a> + </div> + <div id="samples_collapse" class="collapse"> + <p>The samples include the following:</p> + <table class="table"> + <thead> + <tr> + <th scope="col">Sample</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>books</td> + <td>An app for storing a list of books that shows Apigee database operations such as reading, creating, and deleting.</td> + </tr> + <tr> + <td>messagee</td> + <td>An app for sending and receiving messages that shows Apigee database operations (reading, creating).</td> + </tr> + <tr> + <td>push</td> + <td>An app that uses the push feature to send notifications to the devices of users who have subscribed for them.</td> + </tr> + </tbody> + </table> + </div> + </li> +</ul> http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/images/verify.png ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/images/verify.png b/portal/js/app-overview/doc-includes/images/verify.png new file mode 100644 index 0000000..21b3712 Binary files /dev/null and b/portal/js/app-overview/doc-includes/images/verify.png differ http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/ios.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/ios.html b/portal/js/app-overview/doc-includes/ios.html new file mode 100644 index 0000000..ff4c0e2 --- /dev/null +++ b/portal/js/app-overview/doc-includes/ios.html @@ -0,0 +1,173 @@ +<h2>1. Integrate ApigeeiOSSDK.framework</h2> +<a class="jumplink" name="add_the_sdk_to_an_existing_project"></a> +<ul class="nav nav-tabs" id="myTab"> + <li class="active"><a data-toggle="tab" href="#existing_project">Existing project</a></li> + <li><a data-toggle="tab" href="#new_project">New project</a></li> +</ul> +<div class="tab-content"> + <div class="tab-pane active" id="existing_project"> + <p>If you've already got an Xcode iOS project, add it into your project as you normally would.</p> + <div id="collapse"><a class="btn" data-toggle="collapse" href="#framework_collapse">Details</a></div> + <div class="collapse" id="framework_collapse"> + <ol> + <li> + <p>Locate the SDK framework file so you can add it to your project. For example, you'll find the file at the following path:</p> + <pre> +<sdk_root>/bin/ApigeeiOSSDK.framework</pre> + </li> + <li>In the <strong>Project Navigator</strong>, click on your project file, and then the <strong>Build Phases</strong> tab. Expand <strong>Link Binary With Libraries</strong>.</li> + <li>Link the Apigee iOS SDK into your project. + <ul> + <li>Drag ApigeeiOSSDK.framework into the Frameworks group created by Xcode.</li> + </ul> + <p>OR</p> + <ol> + <li>At the bottom of the <strong>Link Binary With Libraries</strong> group, click the <strong>+</strong> button. Then click <strong>Add Other</strong>.</li> + <li>Navigate to the directory that contains ApigeeiOSSDK.framework, and choose the ApigeeiOSSDK.framework folder.</li> + </ol> + </li> + </ol> + </div> + </div> + <div class="tab-pane" id="new_project"><a class="jumplink" name="create_a_new_project_based_on_the_SDK"></a> + <p>If you're starting with a clean slate (you don't have a project yet), you can begin by using the project template included with the SDK. The template includes support for SDK features.</p> + <ol> + <li> + <p>Locate the project template in the expanded SDK. It should be at the following location:</p> + <pre> +<sdk_root>/new-project-template</pre> + </li> + <li>In the project template directory, open the project file: Apigee App Services iOS Template.xcodeproj.</li> + <li>Get acquainted with the template by looking at its readme file.</li> + </ol> + </div> +</div> +<h2>2. Add required iOS frameworks</h2> +<p>Ensure that the following iOS frameworks are part of your project. To add them, under the <strong>Link Binary With Libraries</strong> group, click the <strong>+</strong> button, type the name of the framework you want to add, select the framework found by Xcode, then click <strong>Add</strong>.</p> +<ul> + <li>QuartzCore.framework</li> + <li>CoreLocation.framework</li> + <li>CoreTelephony.framework </li> + <li>Security.framework</li> + <li>SystemConfiguration.framework</li> + <li>UIKit.framework</li> +</ul> +<h2>3. Update 'Other Linker Flags'</h2> +<p>In the <strong>Build Settings</strong> panel, add the following under <strong>Other Linker Flags</strong>:</p> +<pre> +-ObjC -all_load</pre> +<p>Confirm that flags are set for both <strong>DEBUG</strong> and <strong>RELEASE</strong>.</p> +<h2>4. Initialize the SDK</h2> +<p>The <em>ApigeeClient</em> class initializes the App Services SDK. To do this you will need your organization name and application name, which are available in the <em>Getting Started</em> tab of the <a href="https://www.apigee.com/usergrid/";>App Service admin portal</a>, under <strong>Mobile SDK Keys</strong>.</p> +<ol> + <li>Import the SDK + <p>Add the following to your source code to import the SDK:</p> + <pre> +#import <ApigeeiOSSDK/Apigee.h></pre> + </li> + <li> + <p>Declare the following properties in <code>AppDelegate.h</code>:</p> + <pre> +@property (strong, nonatomic) ApigeeClient *apigeeClient; +@property (strong, nonatomic) ApigeeMonitoringClient *monitoringClient; +@property (strong, nonatomic) ApigeeDataClient *dataClient; + </pre> + </li> + <li> + <p>Instantiate the <code>ApigeeClient</code> class inside the <code>didFinishLaunching</code> method of <code>AppDelegate.m</code>:</p> + <pre> +//Replace 'AppDelegate' with the name of your app delegate class to instantiate it +AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; + +//Sepcify your App Services organization and application names +NSString *orgName = @"{{currentOrg}}"; +NSString *appName = @"{{currentApp}}"; + +//Instantiate ApigeeClient to initialize the SDK +appDelegate.apigeeClient = [[ApigeeClient alloc] + initWithOrganizationId:orgName + applicationId:appName]; + +//Retrieve instances of ApigeeClient.monitoringClient and ApigeeClient.dataClient +self.monitoringClient = [appDelegate.apigeeClient monitoringClient]; +self.dataClient = [appDelegate.apigeeClient dataClient]; + </pre> + </li> +</ol> + +<h2>5. Verify SDK installation</h2> + +<p>Once initialized, App Services will also automatically instantiate the <code>ApigeeMonitoringClient</code> class and begin logging usage, crash and error metrics for your app.</p> + +<p>To verify that the SDK has been properly initialized, run your app, then go to <strong>'Monitoring' > 'App Usage'</strong> in the <a href="https://www.apigee.com/usergrid";>App Services admin portal</a> to verify that data is being sent.</p> +<p><img src="js/app-overview/doc-includes/images/verify.png" alt="screenshot of data in admin portal"/></p> +<div class="warning">It may take up to two minutes for data to appear in the admin portal after you run your app.</div> + +<h2>Installation complete! Try these next steps</h2> +<ul> + <li> + <h3><strong>Call additional SDK methods in your code</strong></h3> + <p>Create an instance of the AppDelegate class, then use <code>appDelegate.dataClient</code> or <code>appDelegate.monitoringClient</code> to call SDK methods:</p> + <div id="collapse"><a class="btn" data-toggle="collapse" href="#client_collapse">Details</a></div> + <div class="collapse" id="client_collapse"> + <ul> + <li><code>appDelegate.dataClient</code>: Used to access the data methods of the App Services SDK, including those for push notifications, data store, and geolocation.</li> + <li><code>appDelegate.monitoringClient</code>: Used to access the app configuration and monitoring methods of the App Services SDK, including advanced logging, and A/B testing.</li> + </ul> + <h3>Example</h3> + <p>For example, you could create a new entity with the following:</p> + <pre> +AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; +ApigeeClientResponse *response = [appDelegate.dataClient createEntity:entity]; + </pre> + </div> + + </li> + <li> + <h3><strong>Add App Services features to your app</strong></h3> + <p>With App Services you can quickly add valuable features to your mobile or web app, including push notifications, a custom data store, geolocation and more. Check out these links to get started with a few of our most popular features:</p> + <ul> + <li><strong><a href="http://apigee.com/docs/node/8410";>Push notifications</a></strong>: Send offers, alerts and other messages directly to user devices to dramatically increase engagement. With App Services you can send 10 million push notification per month for free!</li> + <li><strong><a href="http://apigee.com/docs/node/410";>Geolocation</a></strong>: Target users or return result sets based on user location to keep your app highly-relevant.</li> + <li><strong><a href="http://apigee.com/docs/node/10152";>Data storage</a></strong>: Store all your application data on our high-availability infrastructure, and never worry about dealing with a database ever again.</li> + <li><strong><a href="http://apigee.com/docs/node/376";>User management and authentication</a></strong>: Every app needs users. Use App Services to easily implement user registration, as well as OAuth 2.0-compliant login and authentication.</li> + </ul> + </li> + <li> + <h3><strong>Check out the sample apps</strong></h3> + <p>The SDK includes samples that illustrate Apigee features. To look at them, open the .xcodeproj file for each in Xcode. To get a sample app running, open its project file, then follow the steps described in the section, <a target="_blank" href="http://apigee.com/docs/app-services/content/installing-apigee-sdk-ios";>Add the SDK to an existing project</a>.</p> + <p>You'll find the samples in the following location in your SDK download:</p> + <pre> +apigee-ios-sdk-<version> + ... + /samples + </pre> + <div id="collapse"><a class="btn" data-toggle="collapse" href="#samples_collapse">Details</a></div> + <div class="collapse" id="samples_collapse"> + <p>The samples include the following:</p> + <table class="table"> + <thead> + <tr> + <th scope="col">Sample</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>books</td> + <td>An app for storing a list of books that shows Apigee database operations such as reading, creating, and deleting.</td> + </tr> + <tr> + <td>messagee</td> + <td>An app for sending and receiving messages that shows Apigee database operations (reading, creating).</td> + </tr> + <tr> + <td>push</td> + <td>An app that uses the push feature to send notifications to the devices of users who have subscribed for them.</td> + </tr> + </tbody> + </table> + </div> + <p> </p> + </li> +</ul> http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/javascript.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/javascript.html b/portal/js/app-overview/doc-includes/javascript.html new file mode 100644 index 0000000..66e047d --- /dev/null +++ b/portal/js/app-overview/doc-includes/javascript.html @@ -0,0 +1,94 @@ +<h2>1. Import the SDK into your HTML</h2> +<p>To enable support for Apigee-related functions in your HTML, you'll need to include <code>apigee.js</code> in your app. To do this, add the following to the <code>head</code> block of your HTML:</p> +<pre> +<script type="text/javascript" src="path/to/js/sdk/apigee.js"></script> +</pre> +<h2>2. Instantiate Apigee.Client</h2> +<p>Apigee.Client initializes the App Services SDK, and gives you access to all of the App Services SDK methods.</p> +<p>You will need to pass a JSON object with the UUID or name for your App Services organization and application when you instantiate it.</p> +<pre> +//Apigee account credentials, available in the App Services admin portal +var client_creds = { + orgName:'{{currentOrg}}', + appName:'{{currentApp}}' + } + +//Initializes the SDK. Also instantiates Apigee.MonitoringClient +var dataClient = new Apigee.Client(client_creds); +</pre> + +<h2>3. Verify SDK installation</h2> + +<p>Once initialized, App Services will also automatically instantiate <code>Apigee.MonitoringClient</code> and begin logging usage, crash and error metrics for your app.</p> + +<p>To verify that the SDK has been properly initialized, run your app, then go to <strong>'Monitoring' > 'App Usage'</strong> in the <a href="https://www.apigee.com/usergrid";>App Services admin portal</a> to verify that data is being sent.</p> +<p><img src="js/app-overview/doc-includes/images/verify.png" alt="screenshot of data in admin portal"/></p> +<div class="warning">It may take up to two minutes for data to appear in the admin portal after you run your app.</div> + +<h2>Installation complete! Try these next steps</h2> +<ul> + <li> + <h3><strong>Call additional SDK methods in your code</strong></h3> + <p>Use <code>dataClient</code> or <code>dataClient.monitor</code> to call SDK methods:</p> + <div id="collapse"> + <a href="#client_collapse" class="btn" data-toggle="collapse"><i class="icon-white icon-chevron-down"></i> Details</a> + </div> + <div id="client_collapse" class="collapse"> + <ul> + <li><code>dataClient</code>: Used to access the data methods of the App Services SDK, including those for push notifications, data store, and geolocation.</li> + <li><code>dataClient.monitor</code>: Used to access the app configuration and monitoring methods of the App Services SDK, including advanced logging, and A/B testing.</li> + </ul> + </div> + </li> + <li> + <h3><strong>Add App Services features to your app</strong></h3> + <p>With App Services you can quickly add valuable features to your mobile or web app, including push notifications, a custom data store, geolocation and more. Check out these links to get started with a few of our most popular features:</p> + <ul> + <li><strong><a href="http://apigee.com/docs/node/8410";>Push notifications</a></strong>: Send offers, alerts and other messages directly to user devices to dramatically increase engagement. With App Services you can send 10 million push notification per month for free!</li> + <li><strong><a href="http://apigee.com/docs/node/410";>Geolocation</a></strong>: Keep your app highly-relevant by targeting users or returning result sets based on user location.</li> + <li><strong><a href="http://apigee.com/docs/node/10152";>Data storage</a></strong>: Store all your application data on our high-availability infrastructure, and never worry about dealing with a database ever again.</li> + <li><strong><a href="http://apigee.com/docs/node/376";>User management and authentication</a></strong>: Every app needs users. Use App Services to easily implement registration, login and OAuth 2.0-compliant authentication.</li> + </ul> + </li> + <li> + <h3><strong>Check out the sample apps</strong></h3> + <p>The SDK includes samples that illustrate Apigee features. To look at them, open the .xcodeproj file for each in Xcode. You'll find the samples in the following location in your SDK download:</p> + <pre> +apigee-javascript-sdk-master + ... + /samples + </pre> + <div id="collapse"> + <a href="#samples_collapse" class="btn" data-toggle="collapse"><i class="icon-white icon-chevron-down"></i> Details</a> + </div> + <div id="samples_collapse" class="collapse"> + <p>The samples include the following:</p> + <table class="table"> + <thead> + <tr> + <th scope="col">Sample</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>booksSample.html</td> + <td>An app for storing a list of books that shows Apigee database operations such as reading, creating, and deleting.</td> + </tr> + <tr> + <td>messagee</td> + <td>An app for sending and receiving messages that shows Apigee database operations (reading, creating).</td> + </tr> + <tr> + <td>monitoringSample.html</td> + <td>Shows basic configuration and initialization of the HTML5 app monitoring functionality. Works in browser, PhoneGap, Appcelerator, and Trigger.io.</td> + </tr> + <tr> + <td>readmeSample.html</td> + <td>A simple app for reading data from an Apigee database.</td> + </tr> + </tbody> + </table> + </div> + </li> +</ul> http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/net.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/net.html b/portal/js/app-overview/doc-includes/net.html new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/node.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/node.html b/portal/js/app-overview/doc-includes/node.html new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/doc-includes/ruby.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/doc-includes/ruby.html b/portal/js/app-overview/doc-includes/ruby.html new file mode 100644 index 0000000..e69de29 http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/getting-started-controller.js ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/getting-started-controller.js b/portal/js/app-overview/getting-started-controller.js new file mode 100644 index 0000000..3b49ddd --- /dev/null +++ b/portal/js/app-overview/getting-started-controller.js @@ -0,0 +1,90 @@ +'use strict' + +AppServices.Controllers.controller('GettingStartedCtrl', + ['ug', + 'data', + '$scope', + '$rootScope', + '$location', + '$timeout', + '$anchorScroll', function (ug, data, $scope, $rootScope, $location, $timeout, $anchorScroll) { + + + $scope.collections = []; + $scope.graph = ''; + + + $scope.clientID = ''; + $scope.clientSecret = ''; + var getKeys = function () { + return data.jsonp_raw('credentials', '', {}); + } + + $scope.regenerateCredentialsDialog = function (modalId) { + $scope.orgAPICredentials = {client_id: 'regenerating...', client_secret: 'regenerating...'}; + ug.regenerateAppCredentials(); + $scope.hideModal(modalId); + }; + + + $scope.$on('app-creds-updated', function (event, credentials) { + if (credentials) { + $scope.clientID = credentials.client_id; + $scope.clientSecret = credentials.client_secret; + if (!$scope.$$phase) { + $scope.$apply(); + } + } else { + setTimeout(function () { + ug.getAppCredentials(); + }, 5000) + } + }); + + ug.getAppCredentials(); + + + $scope.contentTitle; + + $scope.showSDKDetail = function (name) { + var introContainer = document.getElementById('intro-container'); + + //if no value then let link click happen and reset height to remove content + if (name === 'nocontent') { + introContainer.style.height = '0'; + return true; + } + + introContainer.style.opacity = .1; + introContainer.style.height = '0'; + var timeout = 0; + if ($scope.contentTitle) { + timeout = 500; + } + $timeout(function () { + introContainer.style.height = '1000px'; + introContainer.style.opacity = 1; + }, timeout); + $scope.optionName = name; + $scope.contentTitle = name; + + $scope.sdkLink = 'http://apigee.com/docs/content/' + name + '-sdk-redirect'; + $scope.docsLink = 'http://apigee.com/docs/app-services/content/installing-apigee-sdk-' + name; + + $scope.getIncludeURL = function () { + return 'app-overview/doc-includes/' + $scope.optionName + '.html'; + } +// $location.path('http://mktg-dev.apigee.com/docs/content/ios-sdk-redirect'); + } + + + $scope.scrollToElement = function (elem) { + // set the location.hash to the id of + // the element you wish to scroll to. + $location.hash(elem); + + // call $anchorScroll() + $anchorScroll(); + return false; + } + }]); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app-overview/getting-started.html ---------------------------------------------------------------------- diff --git a/portal/js/app-overview/getting-started.html b/portal/js/app-overview/getting-started.html new file mode 100644 index 0000000..8953427 --- /dev/null +++ b/portal/js/app-overview/getting-started.html @@ -0,0 +1,126 @@ +<div class="setup-sdk-content" > + + <bsmodal id="regenerateCredentials" + title="Confirmation" + close="hideModal" + closelabel="Cancel" + extrabutton="regenerateCredentialsDialog" + extrabuttonlabel="Yes" + ng-cloak> + Are you sure you want to regenerate the credentials? + </bsmodal> + + <section class="row-fluid"> + + <div class="span12"> + <div class="page-filters"> + <h1 class="title" class="pull-left"><i class="pictogram title">🚀</i> Getting Started</h1> + </div> + </div> + + </section> + <section class="row-fluid"> + + + + + <div class="span8"> + + <h2 class="title">Install the SDK for app {{currentApp}}</h2> + <p>Click on a platform icon below to view SDK installation instructions for that platform.</p> + <ul class="inline unstyled"> + <!--<li><a target="_blank" href="http://apigee.com/docs/usergrid/content/sdks-and-examples#ios";><i class="sdk-icon-large-ios"></i></a></li>--> + <!--<li><a target="_blank" href="http://apigee.com/docs/usergrid/content/sdks-and-examples#android";><i class="sdk-icon-large-android"></i></a></li>--> + <!--<li><a target="_blank" href="http://apigee.com/docs/usergrid/content/sdks-and-examples#javascript";><i class="sdk-icon-large-js"></i></a></li>--> + + + <li ng-click="showSDKDetail('ios')" + analytics-on="click" + analytics-label="App Services" + analytics-category="Getting Started" + analytics-event="iOS SDK"><i class="sdk-icon-large-ios"></i></li> + <li ng-click="showSDKDetail('android')" + analytics-on="click" + analytics-label="App Services" + analytics-category="Getting Started" + analytics-event="Android SDK"><i class="sdk-icon-large-android"></i></li> + <li ng-click="showSDKDetail('javascript')" + analytics-on="click" + analytics-label="App Services" + analytics-category="Getting Started" + analytics-event="JS SDK"><i class="sdk-icon-large-js"></i></li> + <li><a target="_blank" + ng-click="showSDKDetail('nocontent')" + href="http://apigee.com/docs/usergrid/content/sdks-and-examples#nodejs"; + analytics-on="click" + analytics-label="App Services" + analytics-category="Getting Started" + analytics-event="Node SDK"><i class="sdk-icon-large-node"></i></a></li> + <li><a target="_blank" + ng-click="showSDKDetail('nocontent')" + href="http://apigee.com/docs/usergrid/content/sdks-and-examples#ruby"; + analytics-on="click" + analytics-label="App Services" + analytics-category="Getting Started" + analytics-event="Ruby SDK"><i class="sdk-icon-large-ruby"></i></a></li> + <li><a target="_blank" + ng-click="showSDKDetail('nocontent')" + href="http://apigee.com/docs/usergrid/content/sdks-and-examples#c"; + analytics-on="click" + analytics-label="App Services" + analytics-category="Getting Started" + analytics-event="DotNet SDK"><i class="sdk-icon-large-net"></i></a></li> + </ul> + + <section id="intro-container" class="row-fluid intro-container"> + + <div class="sdk-intro"> + </div> + + <div class="sdk-intro-content"> + + <a class="btn normal white pull-right" ng-href="{{sdkLink}}" target="_blank"> + Download SDK + </a> + <a class="btn normal white pull-right" ng-href="{{docsLink}}" target="_blank"> + More Docs + </a> + <h3 class="title"><i class="pictogram">📕</i>{{contentTitle}}</h3> + + <div ng-include="getIncludeURL()"></div> + </div> + + </section> + </div> + + <div class="span4 keys-creds"> + <h2 class="title">Mobile sdk keys</h2> + <p>For mobile SDK initialization.</p> + <dl class="app-creds"> + <dt>Org Name</dt> + <dd>{{currentOrg}}</dd> + <dt>App Name</dt> + <dd>{{currentApp}}</dd> + </dl> + <h2 class="title">Server app credentials</h2> + <p>For authenticating from a server side app (i.e. Ruby, .NET, etc.)</p> + <dl class="app-creds"> + <dt>Client ID</dt> + <dd>{{clientID}}</dd> + <dt>Client Secret</dt> + <dd>{{clientSecret}}</dd> + <dt> + + </dt> + <dd> </dd> + + <dt> + <a class="btn filter-selector" ng-click="showModal('regenerateCredentials')">Regenerate</a> + </dt> + <dd></dd> + </dl> + + </div> + + </section> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app.js ---------------------------------------------------------------------- diff --git a/portal/js/app.js b/portal/js/app.js new file mode 100644 index 0000000..80f9cca --- /dev/null +++ b/portal/js/app.js @@ -0,0 +1,125 @@ +'use strict'; +//todo - where does angular recommend we put polyfills???? +var polyfills = function(window,Object){ + window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(/* function */ callback, /* DOMElement */ element){ + window.setTimeout(callback, 1000 / 60); + }; + })(); + + Object.defineProperty(Object.prototype, "clone", { + enumerable: false, + writable: true, + value: function () { + var i, newObj = (this instanceof Array) ? [] : {}; + for (i in this) { + if (i === 'clone') { + continue; + } + if (this[i] && typeof this[i] === "object") { + newObj[i] = this[i].clone(); + } else { + newObj[i] = this[i]; + } + } + return newObj; + } + }); + + Object.defineProperty(Object.prototype, "stringifyJSON", { + enumerable: false, + writable: true, + value: function () { + return JSON.stringify(this, null, '\t') ; + } + }); + +}; + +polyfills(window,Object); + +var AppServices = AppServices || {}; +global.AppServices = global.AppServices || AppServices; + +AppServices.Constants = angular.module('appservices.constants', []); +AppServices.Services = angular.module('appservices.services', []); +AppServices.Controllers = angular.module('appservices.controllers', []); +AppServices.Filters = angular.module('appservices.filters', []); +AppServices.Directives = angular.module('appservices.directives', []); +AppServices.Performance = angular.module('appservices.performance', []); +AppServices.Push = angular.module('appservices.push', []); + +angular.module('appservices', + [ 'ngRoute', + 'ngResource', + 'ngSanitize', + 'ui.bootstrap', + 'angulartics', + 'angulartics.google.analytics', + 'appservices.filters', + 'appservices.services', + 'appservices.directives', + 'appservices.constants', + 'appservices.controllers', + 'appservices.performance', + 'appservices.push' + ]).config(['$routeProvider', + '$locationProvider', + '$sceDelegateProvider','$analyticsProvider', function ($routeProvider, + $locationProvider, + $sceDelegateProvider, $analyticsProvider) { + $routeProvider + .when('/org-overview', {templateUrl: 'org-overview/org-overview.html', controller: 'OrgOverviewCtrl'}) + .when('/login', {templateUrl: 'login/login.html', controller: 'LoginCtrl'}) + .when('/login/loading', {templateUrl: 'login/loading.html', controller: 'LoginCtrl'}) + .when('/app-overview/summary', {templateUrl: 'app-overview/app-overview.html', controller: 'AppOverviewCtrl'}) + .when('/getting-started/setup', {templateUrl: 'app-overview/getting-started.html', controller: 'GettingStartedCtrl'}) + .when('/forgot-password', {templateUrl: 'login/forgot-password.html', controller: 'ForgotPasswordCtrl'}) + .when('/register', {templateUrl: 'login/register.html', controller: 'RegisterCtrl'}) + .when('/users', {templateUrl: 'users/users.html', controller: 'UsersCtrl'}) + .when('/users/profile', {templateUrl: 'users/users-profile.html', controller: 'UsersProfileCtrl'}) + .when('/users/groups', {templateUrl: 'users/users-groups.html', controller: 'UsersGroupsCtrl'}) + .when('/users/activities', {templateUrl: 'users/users-activities.html', controller: 'UsersActivitiesCtrl'}) + .when('/users/graph', {templateUrl: 'users/users-graph.html', controller: 'UsersGraphCtrl'}) + .when('/users/roles', {templateUrl: 'users/users-roles.html', controller: 'UsersRolesCtrl'}) + .when('/groups', {templateUrl: 'groups/groups.html', controller: 'GroupsCtrl'}) + .when('/groups/details', {templateUrl: 'groups/groups-details.html', controller: 'GroupsDetailsCtrl'}) + .when('/groups/members', {templateUrl: 'groups/groups-members.html', controller: 'GroupsMembersCtrl'}) + .when('/groups/activities', {templateUrl: 'groups/groups-activities.html', controller: 'GroupsActivitiesCtrl'}) + .when('/groups/roles', {templateUrl: 'groups/groups-roles.html', controller: 'GroupsRolesCtrl'}) + .when('/roles', {templateUrl: 'roles/roles.html', controller: 'RolesCtrl'}) + .when('/roles/settings', {templateUrl: 'roles/roles-settings.html', controller: 'RolesSettingsCtrl'}) + .when('/roles/users', {templateUrl: 'roles/roles-users.html', controller: 'RolesUsersCtrl'}) + .when('/roles/groups', {templateUrl: 'roles/roles-groups.html', controller: 'RolesGroupsCtrl'}) + .when('/data', {templateUrl: 'data/data.html', controller: 'DataCtrl'}) + .when('/data/entity', {templateUrl: 'data/entity.html', controller: 'EntityCtrl'}) + .when('/data/shell', {templateUrl: 'data/shell.html', controller: 'ShellCtrl'}) + .when('/profile/organizations', {templateUrl: 'profile/organizations.html', controller: 'OrgCtrl'}) + .when('/profile/profile', {templateUrl: 'profile/profile.html', controller: 'ProfileCtrl'}) + .when('/profile', {templateUrl: 'profile/account.html', controller: 'AccountCtrl'}) + .when('/activities', {templateUrl: 'activities/activities.html', controller: 'ActivitiesCtrl'}) + .when('/shell', {templateUrl: 'shell/shell.html', controller: 'ShellCtrl'}) + .when('/logout',{templateUrl: 'login/logout.html',controller:'LogoutCtrl'}) + .otherwise({redirectTo: '/org-overview'}); + + $locationProvider + .html5Mode(false) + .hashPrefix('!'); + + $sceDelegateProvider.resourceUrlWhitelist([ + // Allow same origin resource loads. + 'self', + // Allow loading from our assets domain. Notice the difference between * and **. + 'http://apigee-internal-prod.jupiter.apigee.net/**', + 'http://apigee-internal-prod.mars.apigee.net/**', + 'https://appservices.apigee.com/**', + 'https://api.usergrid.com/**' + ]); + + $analyticsProvider.virtualPageviews(false); + }]); http://git-wip-us.apache.org/repos/asf/incubator-usergrid/blob/508ef2f7/portal/js/app/app.js ---------------------------------------------------------------------- diff --git a/portal/js/app/app.js b/portal/js/app/app.js deleted file mode 100644 index b05fa28..0000000 --- a/portal/js/app/app.js +++ /dev/null @@ -1,118 +0,0 @@ -Usergrid.organizations = new Usergrid.Organization(); - -var Pages = new ApigeePages(); - - - -$(document).ready(function () { - - var query_params = Usergrid.Params.queryParams; - if (Usergrid.apiUrl) { - Usergrid.ApiClient.setApiUrl(Usergrid.apiUrl); - } - Pages.resetPasswordUrl = Usergrid.ApiClient.getResetPasswordUrl(); - - initCore(); - initUI(query_params); - startApp(); - - function initCore() { - prepareLocalStorage(); - parseParams(); - } - - function initUI(query_params) { - apigee_console_app(Pages, query_params); - initMenu(); - StatusBar.Init('#statusbar-placeholder'); - toggleableSections(); - } - - function startApp() { - - if (!Usergrid.userSession.loggedIn()) { - // test to see if the Portal is running on apigee, if so, send to SSO, if not, fall through to login screen - if (Usergrid.SSO.usingSSO()) { - Pages.clearPage(); - Usergrid.SSO.sendToSSOLoginPage(); - } else if (query_params.goto_signup) { - Pages.ShowPage("signup"); - } else { - Usergrid.console.showLoginForNonSSO(); - } - } else { - Usergrid.console.autoLogin( - function () { - Usergrid.console.loginOk(); - }, - function () { - Usergrid.console.logout(); - } - ); - } - } - - function initMenu() { - $('.navbar .dropdown-toggle').dropdown(); - $('#sidebar-menu .dropdown-toggle').dropdown(); - $('#logout-link').click(Usergrid.console.logout); - $('#hideBanner').click(Pages.hideBanner); - - var publicMenu = $('#publicMenu'); - var privateMenu = $('.privateMenu'); - - Pages.AddPage({name:'login', menu:publicMenu}); - Pages.AddPage({name:'message', menu:publicMenu}); - Pages.AddPage({name:'signup', menu:publicMenu}); - Pages.AddPage({name:'forgot-password', menu:publicMenu}); - Pages.AddPage({name:'post-signup', menu:publicMenu}); - Pages.AddPage({name:'console', menu:privateMenu, initFunction:initConsole, showFunction: function() { - if(!Backbone.History.started){ - Backbone.history.start(); - } - }}); - } - - function initConsole() { - //Pages.AddPanel(pageName,linkSelector,boxSelector,initfunc,showfunc,buttonHandlerFunction); - Pages.AddPanel('organization', '.go-home', null,null, null, Usergrid.console.pageSelectHome,null); - Pages.AddPanel('console', null, null, null, null, null, null); - Pages.AddPanel('dashboard', null, null, null, null, Usergrid.console.pageSelectApplication,null); - Pages.AddPanel('user', null, "#users-sublink", null, null, null, function() {}); - Pages.AddPanel('users', null, "#users-sublink", null, null, Usergrid.console.pageSelectUsers, null); - Pages.AddPanel('group', null, "#groups-sublink", null, null, null, function() {}); - Pages.AddPanel('groups', null, null, null, null, Usergrid.console.pageSelectGroups, null); - Pages.AddPanel('roles', null, null, null, null, Usergrid.console.pageSelectRoles, null); - Pages.AddPanel('activities', null, null, null, null, Usergrid.console.pageSelectActivities, null); - Pages.AddPanel('notifications', null, null, null, null, Usergrid.console.pageSelectNotifcations, null); - Pages.AddPanel('sendNotification', null, "#sendNotification-sublink", null, null, null, null); - Pages.AddPanel('messageHistory', null, "#messageHistory-sublink", null, null, null, null); - Pages.AddPanel('configuration', null, "#configuration-sublink", null, null, null, null); - Pages.AddPanel('getStarted', null, "#getStarted-sublink", null, null, null, null); - Pages.AddPanel('collections', "#collections-link", null, null, null, Usergrid.console.pageSelectCollections, null); - Pages.AddPanel('analytics', null, null, null, null, Usergrid.console.pageSelectAnalytics, null); - Pages.AddPanel('properties', null, null, null, null, Usergrid.console.pageSelectProperties, null); - Pages.AddPanel('shell', null, null, null, null, Usergrid.console.pageSelectShell, null); - Pages.AddPanel('account', "#account-link", null, null, null, null, accountRedirect); - //$("#sidebar-menu > ul > li > a").click(Pages.ShowPanel); - - } - - function accountRedirect(e) { - e.preventDefault(); - Usergrid.console.requestAccountSettings(Backbone.history.getHash(window)); - } - - function initCenterPanels(){ - $(window).resize(centerPanels); - $(window).resize(); - } - - function centerPanels(){ - var panels = $("#console-page"); - var freeSpace = $(window).width() - panels.width(); - console.log("window: " + $(window).width() + " Panels:" + panels.width()); - console.log("free space: "+freeSpace); - panels.css('margin-left',function(){return freeSpace / 2;}); - } -});
