Building mobile apps with ionic
•Als PPTX, PDF herunterladen•
0 gefällt mir•221 views
A walk though the features and functions of Ionic Framework and PhoneGap/Cordova in building mobile applications. I will show the layout of the framework and how to get started with your first app.
Weitere ähnliche Inhalte
Ähnlich wie Building mobile apps with ionic
Ähnlich wie Building mobile apps with ionic (20)
Building mobile apps with ionic
- 1. Building Mobile Apps with Ionic by Scott Steinbeck
- 2. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 2 ABOUT ME - Scott Steinbeck - Entrepreneur - CF Engineer 10 Years - JavaScript Lover - Hardware/IOT Geek - Amateur Woodworker - Husband - Father
- 3. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Agri Tracking Systems keeps track of your farms, fields, crops, nutrient samples, budgets all the way down to your daily operations. Our purpose is simple, we want to give you the power to become more efficient by staying informed. www.agritrackingsystems.com Agri Mapping makes its simple to build your maps without having to read through tons of help guides. We provide all the information and tools you need, and none of the ones you don’t. And the best part is it is accessible from anywhere! www.agrimapping.com OUR PRODUCTS
- 4. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 4WORD OF WARNING This will be how you feel after another one of you friends tells you about their “million dollar idea” of an app..
- 5. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 5AND WHERE THEIR MILLIONS WILL COME FROM So based on those metrics you would have to have a little less than 8000 clicks a day to bring in 1 million a year. so better get to clicking….
- 6. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 6What mobile apps used to look like
- 7. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 7 But then designer and programmers teamed up
- 9. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 9Most Popular Hybrid Frameworks
- 11. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 11Native Phone App Development Objective-C or Swift Mobile OS Language Java C++ or Java
- 12. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 12Capabilities of a mobile framework www.yourcompanyname.com
- 14. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 14Cordova: Interacting with the Phone Camera Get Image from Camera or Photo Library Network Check Strength of Cell Connection (2G,3G,Wifi) Storage SQL Lite Database Wrapper for WebSQL Device Get Information about the Mobile Device Geolocation Get Global Location Once or Watch Position File Store and Get Files from Local or Permanent Storage File Transfer Upload/Download Files to and from Device Push Notifications Send notification to phone or product local notifications In App Browser Open web pages without leaving your app. Content Sync Update your apps code without re- submitting to the app store Cordova Plugins (100+)
- 16. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 16So hopefully your response to all of this is…..
- 17. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 17But its right after work so it might be a little more like this…
- 18. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 18 Ionic is a complete open-source SDK for hybrid mobile app development. Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and AngularJS.
- 20. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 20 Default Colors With SASS enabled you can quickly change one of the colors here and it will change across your app
- 21. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 21 Quick look at customizing colors
- 23. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 23 My design skills summed up…
- 29. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 29 Ionic CLI > npm install -g ionic cordova Installing Dependencies (once)
- 31. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 31 Getting Started > ionic start myApp {template} Create Project > ionic setup sass Add Sass to Project (optional) > ionic serve View Project - tabs (Default) - sidemenu - blank - Github repo
- 33. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 33 File structure Hooks - cordova build hooks Platforms - where your ios, android, windows phone, etc. build projects reside Plugins - Cordova Plugins Resources - Generated Icons and splash screen files SCSS - your sass styles (used instead of css) www - project directory for web app
- 34. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 34 Project Structure CSS - custom css if you don't use sass img - image resources js - app / controllers / services these are all app logic and configuration files lib - angular, ionic, etc. libraries templates - your html angular template files index.html - your default file, with your master template
- 35. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 35 Angular/Ionic Architecture (Router) Services/ Factories Controlle rs Template s Router
- 36. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 36 Router: Load URL - http://localhost:8100/#app/games In our routes Router will find the route based on the name - Load in the controller: gamesCtrl - Load in the template: templates/games/list.html After the controller is loaded in, the router is done - From here the controller takes over //games .state('app.games', { url: '/games', views: { 'menuContent': { templateUrl: 'templates/games/list.html', controller: 'gamesCtrl' } } }) Game List Template with {{mustache}} placeholders {{game.title}} Angular/Ionic Architecture (Router)
- 37. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 37 Template: Load URL - templates/games/list.html Template contains all the “view” logic Game List Template with {{mustache}} placeholders {{game.title}} <ion-view> <ion-content> <ion-list> <ion-item ng-repeat="game in gameList" href="#/app/game/{{game.id}}"> <h2>{{game.title}}</h2> </ion-item> </ion-list> </ion-content> </ion-view> - ion-view: wrapper for a template, the it contains, header (button & title), content, footer (button & title) ion-content: basically its the <body> tag - ion-list: parent container for <ion-item> can be used to add styles, delete & reorder functions - ion-item: a list item - ng-repeat: loop over an array of data and fill in the template Angular/Ionic Architecture (Template)
- 38. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 38 Controller: GameCtrl - Load Data into our gameList Controller contains logic for interacting with the view - $scope = this - GameService.getAll() = a method on our service for getting back all of our data - .then() = our service returns a promise with the data we asked for - $scope.gameList = this is what we are setting our data to so we can access it in our view .controller('GameCtrl', function($scope, GameService) { GameService.getAll().then( function(items){ $scope.gameList = items; } ) }) Game List {{game.title}} Angular/Ionic Architecture (Controller)
- 39. www.agritrackingsystems.com AGRI TRACKING SYSTEMS 39 Game List Service: GameService - Get Data from Datasource Service gets and sets data from the datasource - $http = angular service to make http calls - .get = makes a GET request to our server .service( 'GameService', function() { return { getAll: function(){ return $http .get('http://localhost:3000/api/games'); } } }) //[{‘id’: 1, ‘title’:’Battletoads’},{‘id’: 2, .. Angular/Ionic Architecture (Service)
- 41. www.agritrackingsystems.com AGRI TRACKING SYSTEMS Gotchas $scope.$apply() I updated my data but the view didn't update…. This can happen because angular doesn't know about the change. $scope.$evalAsync() gives you an error because in the middle of a digest cycle
Hinweis der Redaktion
- For anyone here that is learning about building mobile apps for the first time your in for a treat, because if you have tried building mobile apps in the past you have encountered your fare share of problems im scott steinbeck, and I'm about to take you on a wonderful journey about building ionic apps but before i get started. i should mention a word of warning
- now that your an app developer, you have just become a lot of peoples new best friend. so get ready for the app ideas to come flying in
- unfortunately its not the money pile you were hoping for. and just to do the math for you, you only need to click through to your adds 8000 times a day and your on your way to 1 million dollars a year, and they do look for multiple clicks from the same source so keep that in mind but back to why you are so lucky
- in case you haven't experienced some of the horrors of the first hybrid apps i will remind you. it was the sort of thing that made you want to cringe a little. and there was a stigma associated with hybrid apps, they were slow, not very pretty, and looked very much like a web page, not an app.
- designers jumped in the mix and with a little help from the phones hardware to support more graphic intensive apps we had something truly beautiful.
- with the introduction of font icons sass & less (css frameworks) browser touch support and some amazing designers we got hybrid apps that looked and felt like native apps
- today we have a number of great frameworks for getting the job done personally I've had experience with a couple on the board, and starting out sencha touch was a step ahead of everyone, they had theming, components, data models, it was amazing and even today they make a great product. But i have switched to ionic framework and never looked back.
- but you may be asking if hybrid apps are so great why would someone build a native app. well mobile frameworks have come a long way since their inception and today can give you almost all of the benefits with very few drawbacks. which was one of the main reasons people would go native. performance on a hybrid app used to be very laggy and when user experience is a must hybrid wasn't an option so hybrid apps mostly got created for business apps, which utilized minimal graphics and animation But what are the trade offs of going native?
- you have to build an app for every platform you want to support. which is significant since to build an app for multiple frameworks you have to learn differentness languages Here are the major phone operating systems and their respective languages. To build a mobile app that runs on all of these phones you will need to minimum learn Swift and Java. And thats not the biggest problem, the biggest problem is building 3 separate apps that do the same thing, dealing with their platform specific issues and most of all maintaining them. Now there are very valid reasons for building a native app. Most of it comes down to speed and building custom app components. Thankfully over the last few years both mobile frameworks have spent a bulk of their time optimizing speed. And the major browsers like chrome, safari, and firefox have improved their graphics rendering.
- before we get too far, lets talk about the how a hybrid app is different than a normal web page. and the answer is, nothing really in both cases you are creating a website with html, javascript, and css. so then why use one of these frameworks, well the biggest reason is that they provide a template specifically designed for use on a mobile phone. but there is one thing they cannot do, they cant interact with the phone. they cant ask it to open the camera, or pick from your contacts list, or access the accelerometer. well not on their own at least so how do they do it?
- with a little help from Phonegap, or Cordova (which is just the open source version of phone gap) Cordova is responsible for 2 things making your web app into a native app and giving you access to the phones native functionality through a number of plugins that are freely available
- Cordova provides a repository of over 100+ plugins that you can easily install in your app and start using right away some of the most common are getting and taking a picture or video storing data on the device either in a folder or a database using geolocation for mapping getting phone information (OS version, battery level, network strength, Unique ID) push notifications and something newly added, content sync, which will allow you to swap out your web app after the app has been published this is ridiculously helpful if you have a bug in your app and you need to fix it quickly usually the app store take a few days to a couple weeks to approve an app update and send it out
- so to the people that made cordova all i have to say is…your awesome. not only did you build a platform that made my life infinitely better, you gave it to me for free.
- so hopefully your mind is going…
- but if your tired from work so it may look more like…
- never fear, I've finally gotten to the exciting part, building a mobile app and to build it we will be using ionic framework. ionic is a web framework built on top of angular js and comes out of the box ready to make a great looking app in no time
- ionic uses a few tools under the hood to speed up development and make customizing very easy because ionic is built on top of angular, you can use any of the angular plugins with your app bower is a package manager, similar to npm, for downloading plugins and libraries to your ionic app sass is a css framework, which acts similar to a programming language because you can set variables, run functions, include styles in other styles, and more probably one of the coolest features of sass is that you can set a variable to a color, and then use a built in function to make it darker or lighter by a percentage. if anyone has had to style a box where the border is a darker shade of the background, you will understand how amazing that is. also we have gulp which takes care of minifying our js and css code and lastly Cordova acts as a bridge between our web app and the mobile phone
- so lets start with a few of the built in styles provided by ionic here are 9 different colors that can be used throughout the app to style buttons, headers, footers, and icons of course you don't have to use these colors
- here we have our sass file and you will notice each of those names shown in the bars corresponding to a color if you uncomment any of those sass style variables and change the color, the color will change throughout your app and notice the names of the styles are not color specific, so the color can be anything green, gold, orange, blue. its that simple so if your not a designer, as a number of us aren’t you can still have nice looking apps in fact, in all of the apps i have produced 95% of the components and styles i use are copied right from the ionic docs
- the image on the right is copied strait from the docs all i did was change some colors, the rest is a direct copy so lets look at some of the other components that are available
- as i had said, we have buttons and buttons can be styled be set as full width have icons added on the right or left of the icon and ionic created it own library of icons called ion-icons that are all font-icons so you can resize them and color them
- moving on to lists, you will notice that pretty much every type of list you would use is available list with just text list with text and description picture on the left icon on the right i mean what else is there? and that in itself is the point, for 99% of things there is a finite amount of possibilities so they took the most common scenarios and made them available by default
- these are cards which can be used to display a block of information for grouping or more commonly used for stuff like tinder where you are swiping in case your interested there is a tender app built in ionic you can download and play with
- form inputs are provided and styled very nicely making it super easy to build a login page as with all the other components changing colors is as easy as changing a class these are all using the primary class which is convenient because if you want to style your app after the fact just change the color variable associated with positive
- by now you are either excited about everything ionic has to offer or your ready to see some code examples hang in there, the code is just around the corner
- so lets get started on our app, ionic has provided a pretty awesome CLI to create and run your new project to download the CLI just run npm install -g ionic cordova. this will install the ionic CLI and the Cordova CLI (cordova will be used a little later for adding in plugins to your app) once this downloads you can create your first project ionic offers a number of tools within its CLI for creating a project, adding plugins minifying, viewing it in the browser as well as generating your mobile icons and building your project into an app (with a little help from cordova)
- In fact ionic has built an ecosystem of services for deploying apps, getting analytics, push notifications, and more. with the thought in mind that the process of pushing your app to the store is hard enough, so they can take some of the work load off your shoulders their build platform works similarly to phone gap build but since it still in beta, its free of charge, although it sounds like their pricing model should be pretty affordable
- so all we need do is create our project go into the directory since when we created it we were in the parent directory add sass support and run ionic serve to load it in the browser
- once you run ionic serve a window will pop up with your newly created app you will spend a majority of you time building the app in browser view this is actually the lab view which will show you your app in iOS and Android ionic serve provides live reload so your app will update as you make changes however once you start trying to test your cordova plugins like camera or file upload you will need to switch to the emulate or run mode to see it in action a little bit later we will touch on getting your app on to your phone or running in the emulator
- ok so once you have stated your app you should see a folder structure like this
- and all your app logic is here in the www folder we will be spending most of our time in js folder and the templates folder
- ok so lets talk about the layout of the framework there are 4 parts the the router which acts as a lookup for templates and controllers based on url templates which contain html and angular variables controllers that handle the logic in the template like requesting data and responding to button clicks and services or factories which are responsible for interacting with the data like pulling it from a database requesting from a server, you could handle caching, data sanitization, as well as save and delete data from its source.
- here we have our router which is responsible for looking up the template and controller needed for that url location once the route is found it will call the controller, and load in the template and then pass it over to the controller for further instructions
- here is the template that we made, if you are familiar with angular some of this will be familiar to you however if your new to ionic the custom tags may be new ion-view - acts as our page wrapper, everything inside will be included into the template ion-list - is the parent container for our items, here you can add a functionality like delete and reorder buttons ion-item - wraps the entire line item so you can add multiple lines, icons, classes, etc ng-repeat - loops over a list so looking at the code above we can see that we are going to iterate over a list and output the id and title of each row. In the controller is where we handle that logic
- the controller has been loaded in automatically by our route and in it is very little, we have our controller function which loads in a Game Service and you might wonder where the GameService came from, it is one of the services we will define in our project angular handles dependency injection by loading them in the arguments scope automagically so after we have injected our GameService we call out to it to get our data, and it uses a promise to return back the data lastly we set the data on our scope, and thats it, now your templated list, has data
- *notice that i am immediately passing back the $http, this is because $http uses promises so i only need to pass it back Promise - solves the problem of async, because javascript is async we don't know when a process (like sending a request to our server) will be finished. A promise will (like a callback) will allow you to do additional work once the process is finished.
- digest cycle set timeout