{"id":23362874,"url":"https://github.com/remotesynth/pluginsampleapp","last_synced_at":"2025-04-07T21:45:56.967Z","repository":{"id":69429869,"uuid":"49295579","full_name":"remotesynth/pluginSampleApp","owner":"remotesynth","description":null,"archived":false,"fork":false,"pushed_at":"2016-01-26T14:35:28.000Z","size":2575,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-13T23:18:14.355Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/remotesynth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-08T20:52:04.000Z","updated_at":"2019-03-05T10:23:19.000Z","dependencies_parsed_at":"2023-04-19T09:32:14.866Z","dependency_job_id":null,"html_url":"https://github.com/remotesynth/pluginSampleApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotesynth%2FpluginSampleApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotesynth%2FpluginSampleApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotesynth%2FpluginSampleApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remotesynth%2FpluginSampleApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remotesynth","download_url":"https://codeload.github.com/remotesynth/pluginSampleApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737627,"owners_count":20987717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T12:33:22.163Z","updated_at":"2025-04-07T21:45:56.930Z","avatar_url":"https://github.com/remotesynth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cordova Plugins in Action (PhoneGap Day 2016)\n\nSample project for the _Cordova Plugins in Action_ workshop at [PhoneGap Day 2016](http://pgday.phonegap.com/us2016/) in Lehi, Utah.\n\n## Links\n\n* [This workshop’s slide deck](https://docs.google.com/presentation/d/17ZpdDpEDp6YOhhrUqNq6gix5C_hXpB3PUzghkdsR2ys/)\n* [Telerik Verified Plugins Marketplace](http://plugins.telerik.com/cordova)\n* [Telerik Platform](http://telerik.com/platform)\n\n## Workshop Directions\n\n## Requirements\n\n1. Sign up for a free, 30-day trial of the [Telerik Platform](https://platform.telerik.com).\n2. [Download/install the “Desktop Client - Universal”](https://platform.telerik.com/appbuilder/webclient/#/downloads) for your OSX or Windows development machine.\n3. Download the [AppBuilder Companion App](http://www.telerik.com/platform/appbuilder/companion-app) for your iOS, Android or Windows Phone device from the marketplace\n\n## Getting Started\n\n1. Open AppBuilder on your desktop.\n1. Click the \"Create App\" button\n\t\n\t![Create App](images/createapp.png)\n1. Choose \"Advanced\"\n\t\n\t![Advanced](images/advanced.jpg)\n1. Select the \"Clone repository\" option and enter `https://github.com/remotesynth/pluginSampleApp` as the repository URI and then click \"Create App\"\n1. After the project loads, it will initially open to the project's \"master\" branch, which contains the workshop's completed code. You can [refer to this code](https://github.com/remotesynth/pluginSampleApp) at any time if you get stuck, but this workshop starts on the project's \"starter\" branch. To switch branches, go to \"Version Control\" \u003e \"Branches\"\n\n\t![Version Control](images/branches.jpg)\n1. Select the \"starter\" branch and click \"Checkout.\" This will switch your project to the version of the code that we will begin working with.\n\n\t![Starter branch](images/starter.jpg)\n1. To return to your project click the project name next to \"Dashboard\" on the top of the AppBuilder window (it will most likely be \"pluginSampleApp\" if you left the default name)\n\n### The Sample Application\n\n\nOur sample application is built with Ionic (and AngularJS). Right now, if you were to run the application using one of the simulators (under the \"Run\" menu in AppBuilder), you'd see an empty Ionic app. However, the goal of this workshop is not to teach you Ionic or Angular (and don't worry if you don't know them already).\n\nThe goal of our sample application will be to leverage several Cordova plugins (namely a barcode scanner, social sharing and local notification). The UI for this application will be very simple and consist of only two views.\n\nWe will be leveraging the [AppBuilder Companion App](http://www.telerik.com/platform/appbuilder/companion-app) throughout this process to allow us to test our app on devices without needing to deploy the app to a phone. It will also allow us to update our app on our devices quickly. Most importantly, for the purposes of this workshop, it allows us to leverage the plugins we discussed without needing to build and deploy the full application package to a phone.\n\nLet's get started.\n\n## Adding the Barcode Scanner\n\n[BarcodeScanner](http://plugins.telerik.com/cordova/plugin/barcodescanner) is a verified plugin written by Ryan Willoughby. Let's add it to our project.\n\nThe barcode scanner will be trigger by a button, so let's add one to our app.\n\n1. Click \"Plugins\" in the Project Navigator.\n\n\t![Plugins](images/plugins.png)\n1. Scroll down and click on the \"Install from Plugins Marketplace\" button.\n\n\t![Marketplace button](images/marketplace-button.png)\n\n1. Do a search for \"Barcode\", click on the \"BarcodeScanner\" plugin in the list, and then click on the blue \"Install\" button.\n\n\t![Barcode install](images/barcode-scanner.png)\n1. Open templates/home.html in AppBuilder.\n1. Place a button in between the `\u003cion-content\u003e` tags.\n\t\n\t\t\u003cbutton class=\"button button-block button-positive\" ng-click=\"openBarcode()\"\u003e\n\t\t\tOpen Barcode Scanner\n\t\t\u003c/button\u003e\n1. Save the file.\n1. Open js/app.js in AppBuilder.\n1. Find the `PluginCtrl` for this view. It looks like this:\n\t\n\t\t.controller('PluginCtrl', function($scope, $state) {\n\t\t})\n1. Take the sample code from the [BarcodeScanner page](http://plugins.telerik.com/cordova/plugin/barcodescanner) and place it within the `PluginCtrl` controller, defining it as `openBarcode` within our `$scope`:\n\t\t\n\t\t// open the barcode scanner\n    \t$scope.openBarcode = function() {\n\t\t\tcordova.plugins.barcodeScanner.scan(\n\t\t\n\t\t    // success callback function\n\t\t    function (result) {\n\t\t        // wrapping in a timeout so the dialog doesn't free the app\n\t\t        setTimeout(function() {\n\t\t            alert(\"We got a barcode\\n\" +\n\t\t                  \"Result: \" + result.text + \"\\n\" +\n\t\t                  \"Format: \" + result.format + \"\\n\" +\n\t\t                  \"Cancelled: \" + result.cancelled);                            \n\t\t        }, 0);\n\t\t    },\n\t\t\n\t\t    // error callback function\n\t\t    function (error) {\n\t\t        alert(\"Scanning failed: \" + error);\n\t\t    },\n\t\t\n\t\t    // options object\n\t\t    {\n\t\t        \"preferFrontCamera\" : false,\n\t\t        \"showFlipCameraButton\" : true\n\t\t    });\n\t\t};\n1. Save app.js\n\n\u003e It's important to note that we skipped the \"Load in AppBuilder\" (or \"Download Plugin\") step because we are relying on the AppBuilder Companion App having the plugin pre-installed. This is being done simply to simplify the workshop process. Under normal circumstances, you would not want to skip this step if you ever intend to build and deploy your app. \n\nNow let's test our app so far by building and deploying it to the [AppBuilder Companion App](http://www.telerik.com/platform/appbuilder/companion-app).\n\n1. Select Run \u003e Build (Cmd/Ctrl + B)\n1. Choose your device type (iOS, Android, or Windows Phone), select the \"AppBuilder Companion App\" option, and then click next.\n\n\t![Build](images/build.jpg)\n1. Open the AppBuilder Companion App on your device and open the QR scanner to scan the QR code that is produced by AppBuilder.\n\t\u003eNote: You may need to do a two finger swipe from the left side of the device to open the menu (or use the notification) to find the scan option.\n1. Once the app loads, click the \"Open Barcode Scanner\" button and scan the following QR code:\n\n\t![qr code](images/qrcode.png)\n1. When the barcode successfully scans, you should receive a dialog box telling you the results of the scan.\n\n\t![success](images/app_v1.jpg)\n\nSuccess! We're ready for the app store! But before we get that far, our UX \"expert\" says that just alerting the URL isn't enough. Ok, Mr. Fancypants, we'll fix it.\n\n1. Create a new view template by right-clicking on the templates folder and selecting \"Add\" \u003e \"New File\"\n\n\t![New File](images/newfile.jpg)\n1. Name your new template \"viewImage.html\"\n1. Replace the default HTML with the following Ionic view:\n\n\t\t\u003cion-view title=\"Pictures!\"\u003e\n\t\t    \u003cion-pane\u003e\n\t\t      \u003cion-header-bar class=\"bar-stable\"\u003e\n\t\t        \u003ch1 class=\"title\"\u003ePlugin Sample App\u003c/h1\u003e\n\t\t      \u003c/ion-header-bar\u003e\n\t\t      \u003cion-content\u003e\n\t\t          \u003cimg ng-src=\"{{imageURL}}\"\u003e\n\t\t      \u003c/ion-content\u003e\n\t\t    \u003c/ion-pane\u003e\n\t\t\u003c/ion-view\u003e\n1. Save the file.\n1. Open js/app.js\n1. We need to add another state to our `$stateProvider` for our new view. Append the new state (`viewimage`) to the existing one like below:\n\n\t\t.state('app', {\n\t\t  url: '/app',\n\t\t  templateUrl: 'templates/home.html',\n\t\t  controller: 'PluginCtrl'\n\t\t})\n\t\t.state('viewimage', {\n\t\t  url: '/viewimage',\n\t\t  templateUrl: 'templates/viewImage.html',\n\t\t  controller: 'ImageCtrl'\n\t\t});\n1. Within the `PluginCtrl` code, replace the contents of the success callback function (the one with the `// success callback function` comment above it) to set the result of the barcode scan to a variable and move to the `viewimage` state.\n\n\t\tscannedURL = result.text;\n\t\t$state.go('viewimage');\n1. Add the `ImageCtrl` controller following the existing `PluginCtrl` controller:\n\n\t\t.controller('ImageCtrl', function($scope) {\n\t\t    $scope.imageURL = scannedURL;\n\t\t})\n1. Save app.js.\n\nWe're ready to test our changes in the AppBuilder Companion App.\n\n1. Within the AppBuilder Companion App, do a 3-finger tap and hold, which should trigger the updated code to be dowloaded and installed (or use the notfication option for \"LiveSync\").\n1. Click the \"Open Barcode Scanner\" button and scan the barcode from earlier and bask in the glory!\n\n\t![Awesome](images/viewimage.jpg)\n\n## Add the SocialSharing Plugin (Optional)\n\nClearly, our app is awesome already. Nonetheless, if you have the time, let's try adding the [SocialSharing plugin](http://plugins.telerik.com/cordova/plugin/socialsharing), written by Eddy Verbruggen, to make it even more awesomer! You should try doing this yourself, but feel free to reference the instructions below if you get stuck.\n\n1. Install the \"SocialSharing\" plugin in the app using the \"Plugins\" option in the Project Navigator. Refer back to the steps used to install the barcode scanner plugin if you get stuck.\n1. Open templates/viewImage.html\n1. Add a button underneath the image that people can click to share the image. This button will call the `share()` method within our controller (which we will create in a moment).\n\n\t\t\u003cbutton class=\"button button-block button-positive\" ng-click=\"share()\"\u003e\n            Share\n        \u003c/button\u003e\n1. Save viewImage.html\n1. Open js/app.js\n1. Within `ImageCtrl`, create the `scan()` function directly below where we assign the image URL to the `$scope`.\n\n\t\t$scope.share = function() {\n\t\t   plugins.socialsharing.share(null, null, scannedURL, null);\n\t\t}\n1. Save app.js\n1. Reload the app in the AppBuilder Companion App, scan the QR code, click the \"share\" button and impress your friends with your wicked app development skills!\n\n\t![SocialSharing](images/socialsharing.jpg)\n\n## Add the LocalNotification Plugin (Optional)\n\n**Note: In testing this workshop, we encountered an issue with LocalNotification within the AppBuilder Companion App on iOS. If you are testing on iOS, please skip to the [next section](#toast).**\n\nIf you added the SocialSharing plugin, your app is already more awesomer. But you know what would make it the most awesomerest would be if it notified me that I successfully shared the image. To do that, we're going to use the [LocalNotification](http://plugins.telerik.com/cordova/plugin/localnotification) written by Sebastián Katzer. Try doing this on your own, but feel free to reference \nthe instructions below if you get stuck.\n\n1. Install the \"LocalNotification\" plugin in the app using the \"Plugins\" option in the Project Navigator. Refer back to the steps used to install the barcode scanner plugin if you get stuck.\n1. In js/app.js, we need to add a callback function to the social sharing plugin call that will trigger our nofication. Edit the existing social sharing call to add this callback.\n\n\t\tplugins.socialsharing.share(null, null, scannedURL, null, function() {\n\t\t   // called when the image is shared\n\t\t});\n1. Paste the code below within the callback you just created. The code configures the notification plugin's options. Set the `at` option to right now (`new Date()` resolves to the current time), and add the `text` and `title` of your notification (for more detail on the other options, check the [documentation](http://plugins.telerik.com/cordova/plugin/localnotification) for this plugin)\n\n\t\tvar options = {\n\t\t\tid:         1,\n\t\t\tat:         new Date(),\n\t\t\ttext:       \"Your friends will thank you\",\n\t\t\ttitle:      \"You shared the image\",\n\t\t\tautoClear:  true\n\t\t};\n1. Paste the code below right beneath the `options` initialization to call the notification plugin.\n\n\t\tcordova.plugins.notification.local.schedule(options);\n1. Save app.js.\n1. Refresh the app in the AppBuilder Companion App, scan the QR code, share the image and be completely blown away by the awesomeness of your notification!\n\n\t![notification](images/notification.jpg)\n\n\u003ca name=\"toast\"\u003e\u003c/a\u003e\n## Add the Toast Plugin (Optional)\n\nPrefer a toast popup notification to make your app most awesomerest? You're in luck. Let's use the [Toast](http://plugins.telerik.com/cordova/plugin/toast) written by Eddy Verbruggen. Try doing this on your own, but feel free to reference \nthe instructions below if you get stuck.\n\n1. Install the \"Toast\" plugin in the app using the \"Plugins\" option in the Project Navigator. Refer back to the steps used to install the barcode scanner plugin if you get stuck.\n1. In js/app.js, we need to add a callback function to the social sharing plugin call that will trigger our nofication. Edit the existing social sharing call to add this callback.\n\n\t\tplugins.socialsharing.share(null, null, scannedURL, null, function() {\n\t\t   // called when the image is shared\n\t\t});\n1. Within this callback, we call the plugin with the text we'd like to put in the toast notification.\n\n\t\twindow.plugins.toast.showWithOptions(\n\t\t\t{\n\t\t\tmessage: \"You shared the image. Your friends will thank you.\",\n\t\t\tduration: \"short\",\n\t\t\tposition: \"bottom\"\n\t\t\t}\n\t\t);\n1. Save app.js.\n1. Refresh the app in the AppBuilder Companion App, scan the QR code, share the image and be bask in the glow of your notification glory!\n\n\t![toast](images/toast.jpg)\n\n## Next Steps\n\nCongratulations! You’ve completed the Cordova Plugins in Action workshop.\n\nIf you still have time, look over the [list of Cordova plugins supported in the AppBuilder companion app](http://docs.telerik.com/platform/appbuilder/cordova/run-companion/limitations-companion-app#telerik-verified-plugins-in-the-companion-app) and try to add a few to your app. [Flashlight](http://plugins.telerik.com/cordova/plugin/flashlight) and [ActionSheet](http://plugins.telerik.com/cordova/plugin/actionsheet) are two of our favorites to play with.\n\nIf you’ve enjoyed using Telerik AppBuilder and want to learn more, try out the [Telerik Platform interactive tutorials](http://docs.telerik.com/platform/help/getting-started/run-demo-app). You’ll learn more about the tooling the Telerik Platform provides, and build a few more apps in the process.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremotesynth%2Fpluginsampleapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremotesynth%2Fpluginsampleapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremotesynth%2Fpluginsampleapp/lists"}