 Jigwit, yw'r cydmill efo'r chygo boll yw Llywodraeth, yw Drupalcawn Mila Shedig. Cymill efo'r Shedig. Hello, welcome to Drupalcawn. 10, 16, and then I cracked myself as a 2016, or else we had 1,000 years in the past. OK, we're going to look today at getting started with Ionic framework and Drupal for creating hybrid web apps. It is a getting started. This isn't an advanced tutorial. It's an intermediate tutorial. It's the basic idea of how you create APIs with Drupal and then how you expose that information to an external service and how you use an external service to render this data and then how you package that up as an iOS app or an Android app. My name is Mark Conroy. I'm a lead front and developer at Anartec where Ireland's leading Drupal agency. Basically, if something happens in Ireland that's got to do with Drupal, you can be pretty sure that Anartec have been involved if not been taking the lead on it. We're going to talk today about some background about myself, let's say, and the reason I decided I needed an app or what makes me a megalomaniac. If you don't speak English as a first language, that's Donald Trump, basically. We're going to look at Drupal as a restful API service and what you might do with that. We'll have a brief look at what is Ionic framework. My wife corrected me for not having a question mark at the end of that and I got to stop bike shedding and we just get on with the information. So I didn't put in a question mark. Then we look at connecting the dots. That means looking at how we connect Drupal to Ionic framework and use that then to create web apps or to create some sort of a decoupled website based on Drupal as a data store. Then we'll have questions and answers. I said, go easy on me. That was the first time I gave this presentation. So you can go a little bit harder now, but still go easy on me into getting started presentation. So some background, I decided to run as a candidate in the elections in Ireland about six, maybe eight months ago. We had elections, the national elections, and I said, I was going to be a candidate and I was going to get elected. I'm still working as a web developer. So I thought I had everything in place. I had a poster campaign. I'm going to sort shit out. Who doesn't want to work with someone who's going to sort shit out? I wasn't about making Ireland great again. I was just about sorting stuff out. I don't want to get us started. I had a Facebook page. My wife tried to stop me so I ran over her in a tank. She is actually, as it happens. We sleep in separate rooms now. It's cheaper than buying two houses. So we had some hashtags, mark for king, Galway beast. My constituency was Galway East. So I said we're going to be the Galway beast. I put a hashtag to Galway beast as well. One person retweeted one tweet once. The campaign wasn't going great. I was glad I had a job to fall back on. I got an endorsement from a fellow megalomaniac. Donald Trump said there's only one credible candidate in Galway East for general election 16. That's Mark Conroy in that I got lots of retweets and favourites. He's good for something. He's good for someone else's branding or marketing. I got an endorsement from somebody that I never heard of before. Hillary Clinton said that if Donald Trump had a job to fall back on, he'd be happy for it. Hillary Clinton said that if Donald Trump is voting for Mark Conroy, and she's voting for Mark Conroy, there don't seem to be very many differing ideas. So that sounded fairly okay. I had this idea at the end of what I'd need as an app. I want to make sure that if somebody is involved in the Mark Conroy campaign, that I can spam them. If they got a phone in their pocket, I want to send them my newsletters. I want to send them texts and messages. I want to send them push notifications. I want to make sure that every single time to put out their phone to see me, and that's going to get me elected. If I don't have this kind of spamming infrastructure, I'm not going to get elected. So I said I'd build an app. So that's basic background of why I was what I was hoping to win, I suppose, win an election, and I thought, okay, Drupal is a perfect framework for me to build a content management system for this, not least because it's the only content management system that I understand how to use. So I was kind of stuck. So we look at Drupal, we say it's a content management framework, and we say we use this to create lots of things. One thing we use it mostly for is to create content management systems. It can be used to, and I've put in a few blah blah blah, I've got a feeling if you've got as far as Drupal can, you've got a fair idea of what Drupal is, or at least know the kind of things it does. So we'll skip these boring parts. Let's look at creating a restful API using Drupal. There was another slide in this from when I gave this presentation a few months ago, and it was how to do this with Drupal 7 as well. Drupal 7 was quite complex. You need maybe six or seven different modules, and you kind of patch web services together and restful API together and different things, and it wasn't difficult, but it was more involved, let's say. In Drupal 8, this is simple. I couldn't believe how simple this was when I tried to do this. You enable the serialization module, you enable the restful web services module, and you probably should have some authentication now to create a prototype app, or a very simple app for yourself just to see how things work. You don't need to authenticate it really, but you should have some authentication, and the HTTP basic authentication module comes in core. After that, then, you're going to need to create some views to list the data that you want to consume in your app. My suggestion would be that you create a view to list all the listing pages you'll need, so in my case, I'd need one for my press releases, one for my news, one for my campaigns I was involved in, and things like that. I should probably mention here I didn't actually run the election, that was just a backstory. I would say you should also maybe create one view that lists every node on your website with a path of example.com, slash node, slash node ID, slash JSON, slash feed, or whatever you want to call it. Then you'll have all your lists and all of your nodes individualized as JSON entities. To do this, you get these three modules, HTTP basic authentication, restful web servers and serialization, and you click install. It is as simple as that to get the infrastructure that you're going to need to create a restful API with Group of 8. Then you create a view, so normally when we create views, we've got two options, you want to create a page or you want to create a block. In this instance, when you enable these modules, you get a third option, and that is to create a rest export view. You just provide a rest export, and then you enter a path for this. If you have example.com slash articles as your listing page for your articles, then you can have example.com slash articles slash JSON or XML or whatever path you want, and that will give you the exact same list except with a JSON output. Click save and edit, and you get to your view page. Then you can choose here the format will be serializer and the settings. You can leave this as default. It will automatically create a JSON feed and an XML feed. If you don't leave it as default, you choose which you want, JSON or XML. I'm not sure about other formats. If you leave that blank and just don't touch it, you can click save and you'll start getting data. Actually, you will need one thing. You need to add the fields that you need, so you're going to need to add your title field, your body field, your image field. You might add the image field to four different times because you might want it with different image settings. You might add a long image and a short image and a teaser image and things like that. Then whatever filter criteria you need. Then you get some ugly-fied JSON. Depending on your PHP setup and your Apache setups and things like that, you can have that printing a bit better. That's listing all articles inside a JSON array with each article being an object. With that, we've got restful data. That's it. That's a restful API in Drupal 8. It's that easy. 15-20 seconds, you create a view. It takes maybe one minute and you're ready to at least get started or start prototyping. We can consume this data in any way we want. We can create, say, a headless Drupal website so you have your information in one place and you've got your presentation in another place. We can create it as a canonical source of information so you might have a large website that has all of your news but you might have some subsites that you can use that's related to DrupalCon so you might have the DrupalCon subsites for yourselves and you can filter that out and not have to install the whole of Drupal and not have to have the whole database and stuff that goes with that. Just have a front-end that uses the Drupal data and is pulled in via React or Angular or Ember. I think Ember is probably what we should be looking towards. I've got a feeling that's going to be flavor of the month when Therese makes his decision. You can use it to differentiate a great editor experience from a great front-end experience so you can let your back-enders and maybe front-enders focus on here is a beautiful editing experience for your website that we don't have the big, long, boring forms that we have presently from the seven team. We can have a really nice back-end team and then you have a really nice front-end team or else a really nice front-end that's independent of Drupal or you can pull the information into your app and consume it that way and that's the goal today. So there's lots of different things you can do once you have your data in this manner. So let's have a quick look at why does Ionic Framework The first thing to mention I suppose that it doesn't say it here is that it's free and open source. So I think it's very good to have that if you're using free open source software like Drupal. It's good to try work with other free and open source products. It's a hybrid web app development kit. That means it makes more than just the app that you might be developing first so you might be developing an iOS app but it's hybrid, it'll make iOS and Android. Ionic 1 does not make Windows apps but Ionic 2 does and the beta version of it presently does and I'd say in the next week or two it's going to be released as a full stable Ionic 2. That will make or will build Windows apps for you. What you do really is you use the open web standards and technologies that we all know and love and that is basically HTML, CSS and JavaScript and you don't need to worry about lots of really fancy stuff and you don't need to worry about the wall gardens of using Swift or using Objective-C or using Java and runetimes for Android and runetimes for iOS. You're basically building a little website that uses HTML, CSS and JavaScript that we can all know and love and this will let us then create web apps basically and the web app then gets packaged up into a web view and that web view is what's used inside the Android or iOS device. If you want to create a Mac app so if you want to create an iOS app you do need to have a Mac computer the reason being that when you package your app it packages what's the format for Xcode is it .xcode or whatever it is and then you need Xcode which is only available on Mac computers you need Xcode to actually package that into the iOS app for you so if you're on a Linux machine you will only be able to you can develop the hybrid app but you need to get a friend that has a Mac computer to package the iOS part for you you can only do the Android part and that's that page I suppose it comes with lots of built in features so if you're used to a framework like say Twitter Bootstrap you know how to create menus and give them menu classes and by just adding all the different classes you want into your HTML you get your jumbotron, you get your slider you get your drop down menus and things like that it comes with all those kinds of things built into it that you might need for creating apps such as a class called card and a class called list and these kind of things and these automatically build in the front end that looks like a material design type front end it comes with supports for SAS so you can very easily not write CSS, you can write SAS and you can recompile it and it has live reload and things like that once you type Ionic serve into your terminal every page, every JavaScript file that gets changed, every HTML file that gets changed every CSS file, every SAS file that gets changed automatically live reloads it for you and you can watch it in your browser so that's an overview of the built in features page from ionicframewrc.com there's a couple of websites you could look at ionicframewrc.com we'll say Drupal.org ionic.io is Drupal.com in terms of the marketing site of it and then there's one called creator.ionic.io which allows you to have a drag and drop interface to prototype what the app might be like and you can package it up and then download that and use that as you're starting a place so for an example you're going to create a list it's as simple here as you can see you can find the CSS class components on the ionicframewrc website and you need two classes for a list one is list and that automatically says that it is a list and it gives it whatever margins and paddings and you would expect on a list item and then the class card and card automatically then puts it in little divs with border shadows and things like that the same then you can see later on you've got href and the class is item item icon left you say item icon left automatically and in the item that's an icon element the same as if you use font awesome or something but it has what's called ionicons so these are icons built by ionic guys so here we've got an icon and it's ion home so it's the home icon and the same then you can see on the next one it's telephone the next one is wifi and the next one is a card for a credit card so without knowing how to create all these apps and not even much HTML and things like that you can just use these cards use these classes to get a look and feel of a native app and then you can change just your colours yourself to make it look and feel like your branding colours or you can go for the full on experience of skinning the whole thing from start to finish the same then with JavaScript if you go to the JavaScript section of ionicframework.com you can see all the different interaction features that will be available to you so if you want a feature such as a model so you click on a login button and you want to pop up in a form not to go to a new page well that's very simple to do so you find the service that would be needed and in this case here it's called ionicmodel and you can see here then that we've got an Angular module called testapp it's got a controller called mycontroller so the controller is going to determine what functionality is available when this controller is called on a page and in this case we've injected scope and injected ionicmodel into the parameters of mycontroller so that's just the basic dependency injection thing that every time this gets loaded this gets used and that's how easy it is to add new features so if you want to add in geolocation you want to add in push notifications or you want to add in something else that's kind of as easy as it is so if we're going to create a basic app so the very first app we're going to create you've installed node and you've installed gulp and whatever you need that goes along with it I won't talk about those but in your terminal then you run this command ionic start and then you give the app a name and then you say the style of the app you want so you can say ionic startruplecon blank or ionic startruplecon tabs or ionic startruplecon side menu and depending on which style you want you get a different set of files to pre-build what the shell of the website or what the shell of the app is going to be like if you choose blank you get a blank slate you start from scratch if you choose tabs you get what you see here on the left and if you choose side menu you get what you see on the right so if you look at on the left at the bottom of the screen you can see there's a status button and there's a chat tab and there's an account tab for settings so that's where the tabs go and then you can change them if you want for iOS you might say you want the tabs on the bottom and for Android you might say you want the tabs on the top if you choose side menu and then if you click the hamburger the left slides across and you can see there that you get a login search browse and playlists menu items so if we were to look then at the directory and file structure of ionic on the left hand side it's a side menu app that we're creating here for the getting started tutorial you've got a few directories hooks, platforms, plugins, SCSS, www and so on the left hand side SCSS, www and some files you can ignore everything in there, that's all ionic stuff and you are not interested in it except you might want to look to see how it actually works let's say but you don't need to interfere with those the only directory we are interested in is the www once that's our actual web app so if we look inside the web app then it's fairly easy to understand the structure of the CSS an images directory, a javascript directory a library of helper functions and then a templates directory I would change the structure around if I were you and I would go for the more component based approach and if you got a home page let's say I would create a home directory and inside I'd have a js directory so I'd have my home.js I'd have my home.scss for my sas and I'd have my home.html for my home page html so that you keep each component in its own kind of modular place rather than all the javascripts in one file and all the CSS in one file and all the templates in one file because it could get a bit a bit messy or a bit kind of hard to remember what goes where okay so we're adding a new page to our app so what we have back there was that's what you get default with the home page to add a new page then you go to your www folder you go to your js folder and then you go to the app.js file now like I said a moment ago I would have a home.js here and I'd have a news.js and a news item.js but what comes is just an app.js and all the app stuff gets lumped in there together kind of like a WordPress team so you go to that you edit the states the states that you find are the default behaviour the default state that each item is in when you load the app and then you edit a menu entry so you add a menu entry so you find a html file called menu.html it'll have five items in it you add one more item to it then if you want a template for this so you can share templates you can say that the state for this is that it's a news item but a news item is the exact same as a blog item so they can both share the same template and we call that article or something like that or you might need a new template because you might be creating a home page and you might say okay for the home page we're going to create a new template and then you create a controller if you need one so if there's interactivity on this page of the website do you want when you click on it it pops up in the model and it allows your camera to open up so you can take a picture and things like that if you need a controller you create one so at the states we get here on first looking at Ionic there's the playlist states that's the home page that you saw a moment ago that had reggae and dubstep and whatever else was on it so you can copy and paste that and start again then so we're going to call app.about we're going to say the URL for this is slash about so the URL for the first one there is none because there's a default state it will be slash playlist so the home will always go back to that page so we'll say the URL for this is going to be slash about it's going to use the template called about.html and it's going to use a controller called about controller and we probably don't need that here because we're just going to create static content but if we were going to create something that was dynamic or something that needed interactivity that's the controller that would start kicking in so to add a menu item then you can see you got Ion item open Ion item close there's a close near the bottom called Ion list in Ionic we don't use the elements that we have normally in HTML such as UL and LI for an unordered list and a list item Ionic has its own directives that do its own special thing and present it this way and Ion list is a list as in UL and Ion item is a list item as in LI but besides that it's based on HTML that you're writing there then so you give it a class called menu close which means it's presently closed and if it's clicked on it will get a class of menu open you give it a href to say it goes to app slash about so it will bring us to our about page and then you put in a title and we call it about me me me because I'm a megalomaniac apparently so this is a template then for this one here was the menu .html template and this is the template we created called about.html and it's very simple we got Ion view title says about me me me that's the very top of the page that's the title you get there and then we got a h1 that says this is the about page and then we got a paragraph that says this content is so static why can't I be dynamic so what this is going to create then is on the left hand side you can see there's a new menu item and on the bottom you can see this is the page that if you had clicked on about me me me you'd see that where it says this content is so static why can't I be dynamic and that's it really that's how you create pages for your apps that's fairly simple it's fairly basic html and even someone like me could get the grips with it so you want to create more pages well again you're just going to repeat what you've seen above you're going to create a new state for the new page you're going to add another or you're going to use an existing template you're going to add a menu item to it and then you're going to eat some cake it's not difficult but it does only create static content and we want more than static content because if we've only got static content and you want to change something for example you might have the word form but you might have spelled it f-r-o-m by accident submit your app to the app store again because now you've made a change to your app and Apple is going to take maybe three weeks to accept your app or to refuse your app and you've got to go through that system again so if we've got dynamic content then that's the great thing about using something like this and using something like Drupal your website every time you have a blog post you don't have to resubmit your app to the app store again if that was the New York Times maybe 500 articles a day they can't submit 500 submissions of their app a day and wait for three weeks for each submission to come through so we need dynamic we need to get these listing views and we need to pull these into our app so we can connect the dots we can take Ionic framework which can do the appy stuff we can take Drupal which can do the content management stuff and we'll connect the two of them together to make a new service for ourselves so any content that's updated on the website then automatically gets updated on the app so if you change a spelling it's updated, if you add a new blog post it's updated you can go as far as adding new features to your website to your app sorry and they would be automatically available on the app for users as long as they're not adding new JavaScript functionality so for example if you don't have any modal pop-ups but now a new version of your app wants modal pop-ups then you've got to resubmit that one again but if it's able to use the JavaScript that's already there it's free game to start improvising and doing what you're doing so we're going to create something like this so this is the Mark Conroy app at the top it says Mark Conroy TD TD stands for Choctadola which is Irish for the Houses of Parliament so every elected member of our parliament is whatever their name is TD the same as you'd have MP in the United Kingdom and then there's an image there and that will come from a website and then it says my name is Mark Conroy and the Mark Conroy section of my name comes from the data in Drupal the high my name doesn't so this could be very generic that any politician could purchase this app for me and they've just got to fill out a form on their Drupal website and we'll suck in the data and have the nice friendly hello my name is items around it the content underneath that then I was elected to the Dall in 2016 etc that comes from Drupal and my constituent's office is hardcoded into the app but the address I won't tell you it's actually my home address probably shouldn't be there the address that comes then again from filling out a form on the Drupal website so we'll create something that's fairly simple that's just a simple homepage for it just add some tension you know create excitement okay so we're going to use data like this this is just a JSON object the data comes out as nodes and we got the first dot node then has a title has an image the source of the image then comes from samplecontent slash images slash news slash markconroyweb.jpg so what I've actually done here is taken the JSON from my website so I'll be able to preview it live and show what's happening and just put it into a JSON file I'm not going to show it live because when I try to give this presentation again to Front Engine my computer kept crashing so I've just taken screenshots instead but that's just sample content coming from a directory inside Ionic then we got a field for phone number email constituency office short bio about me and then some social media links so using data like this we did I do something wrong there using data like this we're going to create a single page so we're going to have a template that we'll see in a minute and this template will say ngcontroller so the controller that we're using via Angular ngcontroller equals personal control so it's going to use a controller called personal controller to be able to get this data and pull it into angular expressions we're going to use the HTTP service from that so we're going to dependency injection to say that there's a dependency on this service HTTP every time this this page is called inject this service as a dependency into the app and we're going to use this to get to the JSON data and then we're going to use an expression in Angular is the same as an expression in twig it's just two curly braces and we pop whatever we want inside there so here's the personal controller we've already created app equals angular dot app dot my app or whatever it is and inside it we're going to have a dot controller and it's going to be called personal CTRL that's general accepted angular names for controllers CTRL and it's got a function that needs two services scope and HTTP so that's going to get the directory called sample content and then the file called personalinfo.json in your case here with the Drupal site this will be getting node slash one two three or user slash admin or whatever page you have the personal information on your website and then it's got two promises or returns a promise really that if we're successful we'll say then that personalizer will be equal to data dot nodes dot node zero and if there's an error well get the data print this to the console log and tell me in fairly good detail what the error is and where I need to go to fix it it even gives suggestions that if you try this this should fix it for you so we can see data dot nodes zero is here so nodes and then the first item in the in this array is dot node so that's the zero so using this then we will attach a title that says the engine controller for this so any place you find this stuff here use the personal controller and we got personalitem dot node dot title so again it goes back to json finds dot node finds that title and that will use that for the main title where it says Mark Conroy and then outside of that we got the letters TD so they're hard coded into this I'm not very ambitious I could never use this app for anybody outside of Ireland then we've got a second directive here so this is ion content so this is our body tag basically and that also uses the same controller called personal controller and it initializes as being empty that init should probably be in your javascript file and we give it a class of header and we got an image source now we don't use image src equals when we're talking angular because if we try to do that what will happen is the image will try to load before the pages ready and if it does that we're going to get a blank so we use ng source so we know that angular says load an image tag let me go fetch the data and when I find it I bring it back and we stick the image in where it's supposed to be and then we've got the other information there how my name is and personal short bio and constituency office so if we look at the rendered app that we saw a second ago we can see then that the page title or the app title gets personal.no.title the image source comes from personal.no.mainimage.source and then the rest is the short bio and constituency office information and again it's fairly simple html that we're writing there there's nothing very complex in it if we want to create a listing page then so you've got elected or got a new cycling jersey or something that's worth having a news post about so this will have a title and it will have an image and maybe a read more link and we'll have maybe three of those at the top of the page and under that maybe seven just titles of the latest seven news articles or something like that and I put the time 2043 in the corner because I'm a badass and here's as complex as I could get at the time so we're going to use data like this this is very similar to what we saw a second ago except this is a JSON array with JSON objects inside it of each node so we've got node 147 at the top with title mark I came for the code and stated for the community we got node with an idea of 226 where mark was re-elected as a TD for Galway East and then we've got a node 147 again which is going to break the website so we can ignore that and it says mark Henry becomes the first ever TD elected from Portumna that's the little village I come from so using that kind of data we create a listing page it's pretty much the exact same as what we did a moment ago in terms of you put in your title you put in your ion content and you give it a controller called news controller or whatever it is except we're going to use a new angular property now it's called ng-repeat and this is basically your fur loop in PHP and that says that repeat this little template here over and over again each time for each item that you find that matches the parameters that we give it and then we're going to add a click function that says that if you click on this app here don't open the stock browser that comes with the app so don't open Safari or don't open Chrome or don't open whatever apps come instead open the link inside the app so that it looks like an app because remember this is a small website inside the app as opposed to an actual app that's wrapped up inside a web view so we've got to tell it don't open up the external browser so it's a slight bit longer here but it's not much more detail really than the personal controller so we're again going to say use HTTP service to get sample content slash news slash JSON so that's the the news listing page data.nodes is going to be our scope here and then scope.brows so if you do want to browse something if you do click on whatever it is and you want to use the browser then it's going to say stay inside our own system don't use the systems that come with the phone or the tablet that you're presently using and then we've got a local storage stuff there that's going to stringify stuff so this will allow us to actually store stuff on people's phones or people's tablets for offline use and then if there's an error well same as usual will you print out the error will you tell us what it was and give us as much details as you can and it will and then the list then is we saw from earlier on IonList creates a list instead of UL IonItem creates a list item instead of Li and then we're going to say ng-repeat node in nodes so it's saying for each key as value so we're going to say for each item in nodes we'll call them node and ngif so if the index is less than tree says that only give you back the first tree options so for the first tree options I'm going to use this template and under this I can have the same thing and say for anything post tree options give me a slightly amended view so on this one here give me the node title an h2 element and give me a dived end that has a class of image holder and has an image and then after that I'll have just h2 just for my list and that's basically your news listing page so we've got the ng-repeat nodes and nodes we've got the node.node.title at the top and image ng source at the bottom and that repeats three times and that's your static pages that's your dynamic about us page that are managed in one management system and presented here and this is now your listing pages that's a lot of what you would need I suppose from an app without starting to get into the not getting started with hyonic framework presentation so if you need more data in your app you're going to just repeat the above again and again and again so whatever you want to do if you're creating a single page or a listing page that's things that you need to get those going then you've got to build the app so we keep going through these we add our CSS we add our sass or whatever it is we make it look the way we want it to look so to build the app then you go back to your terminal you see to the directory where your app is and you run the command ionic build android and that takes maybe 30 seconds or a minute or so and it builds you an android app and then you run a second command ionic build IOS and again takes another 30 seconds or a minute and it builds you an IOS app and then you can test them so presumably you've got an android emulator and presumably you've got an IOS emulator on your computers you just run ionic emulator android it powers up the android and it shows you what it's going to look like ionic emulator IOS and it shows that's what it's going to look like in your IOS simulator or what I think is brilliant if you have an ionic cloud account you can upload your app to ionic cloud you can download an app called ionic view and then you can see your app in real time on your phone that's not even connected to your computer and you can send a link to your friends or whatever or associates in your company and everyone can run the app as well so you're not just using the emulator you're actually testing the app on a real device in real time and seeing exactly what happens and how it works and that part of ionic is free so then we deploy the app into the cloud so you set up an account on ionic cloud and you register your app and then you can account what the command is I think it's just ionic upload and that just uploads the app on whatever new features you've built into it other people will download so when you click on ionic view app inside your phone you can use that and yeah so the ionic cloud is this is where it just becomes not free so this is the we said the aquea part of Drobo Lysfer one second my alarm to click my kids in school ok so this is where we've used the free open source version of ionic and we've created the app that we want and now we need to install our app somewhere so you can submit it to the app store you can submit it to the google play store or you can submit it to the ionic cloud and that's the store I would be using because when you upload it to there you can upload your updates to that as well without submitting anything back into the app store again unless there's a new feature coming on that needs new javascripts and it's very cheap and they have push notification built into it and they have authentication built into it and they have lots and lots of services to give to do all the server admin stuff and the service that you might want from an app to make it a proper app app not just something as simple as listing pages and details pages and it's as cheap as I think 20 dollars per month per app and that will give you something like a million push notifications ok so you're deploying them to apple and google you've got to create your developer account you've got to jump through some hoops you've got to upload your app, you've got to wait and then you will have your app accepted hopefully now you will have to go to that stage you do have to submit it to the app stores to be able to be used on the app store maybe not with google because android allow you to install external apps but you will have to submit it at least once to the apple app store just so it's verified and then you can maintain it from the ionic cloud infrastructure oh that's it there are I thought I had another slider too please I've been asked to mention this, do join us for contribution sprints if you've never contributed before it's a great way to get started if you have contributed before it's a great way to continue contributing and if you would like please give feedback positive or negative so we can improve the experience for people and get better presentations presentations of equal quality each year and thirdly front end united which I think is absolutely brilliant and great value for money, it's on in Athens next year 26th, 27th of May come listen to me again and that is it thanks for listening, any questions okay there's a microphone here it's probably turned on if that's easier thanks you had done something where it's supposed to use the internal storage on the phone to store the data how does it work when you first connect to the app if they don't have internet access do they not see anything does it wait until they view a page first before it stores if they have no internet access they won't see anything you'll see what's already stored but if you've never got the app in the first place you're going to get a shell of a listing page that won't have data because all the data is stored externally unless you can actually go and get that stuff it's not going to come back for you just one second I was just going to answer that question you can do I was ready for some questions if you need to extend what you were saying here you can create your own plugins and if you can't create the plugin that you wanted to do so if you want this kind of offline type stuff and that any Cordova plugins that are available then you can use those inside your app hi my question is when you mentioned like you can compile on android or IOS you have to have these channels of distributions based on the IOS or android or you can create your own channel of distribution so you can grab your own apps sorry I don't understand the question the question is if it's possible with this process to create your own app store I don't see why not the app is just getting served from somewhere so you can upload and serve it from the app store you can serve it from the anacloud you can serve it from Google Play or you can serve it from your own server what anacloud is setting up is basically what Acria do but you don't have a hosted group of websites with Acria is we look after all the infrastructure and the maintenance and the website is available there so it's the same thing you can host where you want to host as far as I know I might be wrong but as far as I know that's what you can do and then you can set up a market to let other people host their apps from your marketplace as well thank you the question is if you have push notifications to your app can that be managed from Drupal or does that have to be managed from somewhere else my understanding is you can manage that from Drupal but I haven't applied push notifications but I don't see why there will be any problem with having an entity type called push notifications and you type in one and it just goes and sends to your anac there is a module on D.o there you go, simple yep the question is do you recommend using say a module in Drupal to have the custom functionality do you set most of the most of the dynamic information to be loaded into your app through a view but is it possible for it to be also like through a custom module do you have to do do you recommend that or use Cordova or other things to bring other things into it I would recommend views because it's so simple and because it's the Drupal way of doing things you can write a custom module or custom SQL query or whatever you want to yourself to extract that and make it available I'd be nervous of creating technical debt by having all your own custom queries that do things and somebody else might have to look after it at a similar stage when it's the simplest creative view that lists what you want I don't see a reason not to do that I get to fill in the question more was looking for a javascript timer and javascript timer on Drupal and then would that be pulled into the app or would it be better to use a timer as part of Cordova in that case I think you'd use a timer as part of Cordova thank you the question is can you edit or create new nodes through the app I don't know yeah I guess if you're using the HTTP service that's while getting JSON you're going to say post JSON really and consume that yeah that was a good question yes I haven't looked at Drupal Gap very much Fong Gap this was actually built on Fong Gap originally on Cordova the guys at Ionic and I don't want to speak for them there's no huge amount about Fong Gap or that either but my understanding was they decided that what they were building was like Fong Gap but was so much more better and adding better features and better way of doing things that they decided to basically fork Fong Gap and this is in their view an enhanced version of Fong Gap if that makes it better I'm not sure okay the websites there's basically three oh I didn't have a website I'm playing around on a localhost version it looks similar to yeah I don't see why not you're just building a web app that uses Angular to render your content so it's pretty much the exact same if I was to run Ionic serve now inside I'll try to do that absolutely yeah because all you're doing is taking the data you're not taking any of the CSS from your Drupal website so you're going to get a very ugly app the same as you get a very ugly Drupal when you turn it on first but the two templates that you're using are different and the CSS that you're using is going to be different you could maybe share CSS by using an external CSS file but in general yeah it's going to be totally different unless presumably you'd want to make it look similar to your whatever your branding is if I CD to squigglytings.htd.x getting started getting started site menu and Ionic serve should load up the website first sorry serve Ionic serve that should open up in Firefox and then if you change any files inside here it comes down so this is our home page and this is our login and here's our about me make it a bit smaller make it look more like an app and then if you change any files whether they're CSS or JavaScript or HTML inside your www folder automatically show your preview it doesn't do some of the things you want it doesn't have the native capabilities of using camera using geolocation using that kind of phone features so you're better to serve this inside the iOS emulator or Android emulator Ionic serve oh very good I wish you give this presentation give this man a clap excellent okay thank you