{"id":13630886,"url":"https://github.com/adamweeks/ion-scanner","last_synced_at":"2025-09-11T11:30:46.374Z","repository":{"id":31891748,"uuid":"35460530","full_name":"adamweeks/ion-scanner","owner":"adamweeks","description":"A barcode scanner built with the Ionic Framework","archived":false,"fork":false,"pushed_at":"2015-05-12T17:43:38.000Z","size":3212,"stargazers_count":40,"open_issues_count":2,"forks_count":21,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-06-13T23:35:58.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/adamweeks.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":"2015-05-12T01:52:37.000Z","updated_at":"2021-04-03T05:38:10.000Z","dependencies_parsed_at":"2022-09-08T13:20:40.364Z","dependency_job_id":null,"html_url":"https://github.com/adamweeks/ion-scanner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/adamweeks/ion-scanner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamweeks%2Fion-scanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamweeks%2Fion-scanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamweeks%2Fion-scanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamweeks%2Fion-scanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adamweeks","download_url":"https://codeload.github.com/adamweeks/ion-scanner/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamweeks%2Fion-scanner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274624689,"owners_count":25319702,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-08-01T22:02:02.103Z","updated_at":"2025-09-11T11:30:45.686Z","avatar_url":"https://github.com/adamweeks.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ion-scanner\nA barcode scanner built with the Ionic Framework\n\n(this project was built for a blog post that appears on [adamweeks.com](adamweeks.com), below is the contents of the blog post)\n\nThe Blog Post\n----\n\nJust when I thought I was out, they pulled me back in! After a year off of iOS programming, who knew that all the Angular work would bring me back to mobile.\n\nAfter hearing about [Ionic Framework](http://ionicframework.com/) on [ng-air](http://angularair.podbean.com/e/05-ngair-ionic-framework/) I decided to check it out. Ionic is a mobile framework based on [Cordova](). It allows us to write multi-platform mobile apps with a native feel by using angular and custom ionic directives. You can read plenty on their site for more information, so let's get into it!\n\n\nThe Project\n------\nOf course, I have to make some sort of sample project when I'm learning a new platform, so I decided to write a basic barcode scanner app. \n\nFirst things first, let's install ionic:\n```\n$ npm install -g cordova ionic\n```\n\nWhen creating a new project, Ionic has a few different base templates to choose from. I created the `ion-scanner` project based off the tabs template:\n```\n$ ionic start ion-scanner tabs\n```\n\nThen we can add the ios platform simply by running:\n```\n$ ionic platform add ios\n```\n\nSince we don't want to write the barcode scanning software from scratch, we can use a plugin from [NgCordova](http://ngcordova.com/), a site that contains angular extensions for cordova. \n```\n$ bower install ngCordova\n```\n\nOnce that is installed, we can add the barcode scanner plugin found [here](http://ngcordova.com/docs/plugins/barcodeScanner/):\n```\ncordova plugin add https://github.com/wildabeast/BarcodeScanner.git\n```\n\nThat is all the setup we need to be capable of making a barcode scanning application with Angular.\n\nThe Code\n-----\nMy view is very simple. I've ripped out all but one tab from the sample project and emptied it (thinking about it now, I probably could have just used the empty template!). The main view has a \"scan\" button and a results area. \n`tab-home.html`:\n```\n\u003cion-view view-title=\"Scanner\"\u003e\n    \u003cion-content style=\"background: #e8ebf1;\" class=\"padding\"\u003e\n        \u003cdiv class=\"card\"\u003e\n            \u003cdiv class=\"item\"\u003e\n                \u003cbutton class=\"button button-block button-positive\" ng-click=\"vm.scan()\"\u003e\n                    \u003ci class=\"icon ion-qr-scanner\"\u003e\u003c/i\u003e\n                    Scan Now\n                \u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"card\"\u003e\n            \u003cdiv class=\"item item-divider\"\u003e\n                Scan Results\n            \u003c/div\u003e\n            \u003cdiv class=\"item item-text-wrap\"\u003e\n                {{vm.scanResults}}\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/ion-content\u003e\n\u003c/ion-view\u003e\n```\nAs you can see, there are some custom ionic directive that we are utilizing to give our application a more natural look. There are also lots of built in icons as well, you see we are using `ion-qr-scanner` on our button above.\n\nIn our controller, the most complicated thing about using the cordova plugins is knowing when the device is ready. Luckily, Ionic gives us `$ionicPlatform.ready()` function to throw our code into. Our controller with scanner looks like this: \n`controllers.js`\n```\nangular.module('scanner.controllers', [])\n    .controller('HomeController', function($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform) {\n        var vm = this;\n\n        vm.scan = function(){\n            $ionicPlatform.ready(function() {\n                $cordovaBarcodeScanner\n                    .scan()\n                    .then(function(result) {\n                        // Success! Barcode data is here\n                        vm.scanResults = \"We got a barcode\\n\" +\n                        \"Result: \" + result.text + \"\\n\" +\n                        \"Format: \" + result.format + \"\\n\" +\n                        \"Cancelled: \" + result.cancelled;\n                    }, function(error) {\n                        // An error occurred\n                        vm.scanResults = 'Error: ' + error;\n                    });\n            });\n        };\n\n        vm.scanResults = '';\n    });\n```\nFunny how there are more lines of code devoted to displaying scan results and errors than actually scanning. I've written this code in Objective-C before and even with the built in scanner for iOS 7, it was never this easy! \n\nDeploying\n-----\nIonic allows us to test our code in a browser window, but since we are doing a barcode scanner, we really need to run our project on hardware. If you have an Apple developer account, you can simply run `ionic build ios` and then open the XCode project in the `platforms` folder. I imagine most Angular developers are not though, but there's an easy solution for that as well. Ionic now has [ionic.io](http://www.ionic.io), a deployment service that in conjunction with [Ionic View](http://view.ionic.io/) allows you to run apps on any device without having to do a native build. \n\nWe won't go through the ionic.io setup process here because the [documentation](http://docs.ionic.io/v1.0/docs/user-quick-start) is so good. If you want to try it out follow along there.\n\nFinally\n-----\nOur first steps into native mobile development with Ionic are complete. I'm looking forward to utilizing it some more!\n\nYou can download my barcode scanner app here: [https://github.com/adamweeks/ion-scanner](https://github.com/adamweeks/ion-scanner)\n\nIf you have any questions, feel free to contact me on twitter [@AdamWeeks](https://twitter.com/adamweeks). I also hang out with a great group on slack called [Angular Buddies](http://angularbuddies.com), so join us there!\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamweeks%2Fion-scanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadamweeks%2Fion-scanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamweeks%2Fion-scanner/lists"}