Building Apps is Easy with Drupal, DrupalGap, HTML, JavaScript & CSS for Apple and Android Stores

hello and welcome to building apps is easy with Drupal Drupal gap HTML Javascript and CSS for Apple and Android stores I'm Joe Roberts I work at bio clinica and I'm a web web developer this presentations for Drupal Delphia 2016 so let's get started the agenda why Drupal that's a simple one what is Drupal gap and we're going to go over two different apps today we're going to show you how to make them the first one is a mobile app geotag a photo and upload it the second one is a web app with headless Drupal and you can get nearby content shown on a map we're going to talk about how to get involved in questions so why Drupal because it's Drupal get drupal Delphia which makes sense but aside from that Drupal is a great content management system even though the learning curve can seem a little intense you start climbing up the hill and it gets tough and then you get all the way to the top and then if you don't hang yourself maybe you get around the cliff maybe get on top and then you know if you don't kill yourself again you might get bulldozed over by a new version of Drupal and just fall to your death but anyway aside from that all the knowledge that you took the time the time to learn on that Drupal curve will totally all apply in a drupal gap which is fantastic so you start out as a beginner you come become proficient then you become a ninja and I don't know if you can see but on the side here it says 50 100 150 200 not sure if that's day hours minutes days weeks years whatever it takes a while it does take some time but eventually you're a ninja and you know you can literally bust through and break through any code oh yeah you can do that just like the kool-aid man and you start drinking the kool-aid you know you start drinking the juice and then the juice isn't enough so you need your daily cup of coffee to keep you going your your cup of Drupal to keep you going and then if that's not enough sometimes you need a little snack so you throw in some chocolate so you get the Drupal chocolate which is awesome and you know any the only thing that's better than chocolate is of course bacon so and then from there it only gets the only thing that is better than all of that is store so this is a thin as the Drupal drop of course and it's the new order of stormtroopers which is fantastic so makes life fun so anyway what is Drupal gap well it's open source mobile application development kit for Drupal websites and what it does is it allow its the communicator between the apps and the Drupal site which is fantastic and it makes it super simple and easy and quick alright so let's get into Drupal so there's two parts Drupal has um there's a Drupal module and then there's a mobile application development kit or mad Kay as I like to call it you can check out both of them on that location and you can always find everything on Drupal gapped org what does the Drupal gap module how does the Drupal gap module will work well so what it does is Drupal gap uses services and views datasource to pass data back and forth in the JSON format and that's how it plugs in plays with those jace the JSON format what tools does Drupal gap mobile application of um we can use to build apps well we use jQuery Mobile for the for the interface and we use PhoneGap to build out the our drupal gap app into iOS and Android stores so what is phone gap that's helpful to know if you need if you're working with it so phone gap essentially is you take HTML CSS and JavaScript create a mini website that website gets put into an app a native app container that's essentially just a browser that loads your web your website and as you're using stuff throughout that website you can access different things like the camera the GPS the file system contacts compass accelerometer you and those a lot of those things you cannot access through the browser for example in iOS in Safari you can create a mini website that can do your GPS but the website can't access your camera or file system to get pictures off of it so this allows you to break through that barrier that you can't do some things with and allows you to take your app to the next level so putting it all together I'm just going to read this because it does the best job but Drupal gap uses the services and views datasource module to talk to Drupal it also uses jQuery Mobile to build the user interface and it uses PhoneGap to access device features and compile the mobile application for Android and iOS so how does it work drupal gap inherits Drupal development concepts except it uses JavaScript to set up PHP so you still have region still have blocks still have menu still have pages and you can customize it using modules hooks themes templates everything else but there's so much more and it's all free what's the greatest part of it all so there's you can you can use contributed modules there's forms API is render arrays widgets localization support for multilingual and tons and tons of other goodies and also support for Drupal 8 and this is really cool the alpha release is almost ready so close we're almost there and it's purely written in JavaScript so there's no jQuery no nothing anywhere and you can just pop in bootstrap or foundation or any other framework you want to use just right out of the box which is awesome so Drupal gap the app awakens this is going to be our first app we're going to build and I've titled this episode 7 mobile app geotag a photo and upload it now you might be wondering why I said episode 7 and I said it because I didn't want to be associated with episode 1 because of the failure of it or because of the boringness of it but anyway so this is not going to be boring it's going to be just like 7 which is awesome my son loved it I loved it we're going to go for it this is exciting so if you ever want to follow along all you have to do is follow this URL right here and that will take you exactly where you need to go and that'll have step-by-step instructions or you can play and pause and stop the video along the way either it works great ok so what I have here is I have a my the best test URL in the world my mac and cheese calm I am very proud of that it is just a vanilla Struble 7 website no modules installed yet no nothing I'm going to start from scratch and show you exactly how do it what I am going to do is I'm going to use SSH which allows me to log straight into my server and connect to it and do anything I want so I've just logged in and what I need to do is get into the same directory that my Drupal install live so that I'm going to change directories or CD and hit do dub dub dub hit tab and then I'm going to do my Mac and if you just start typing and hit tab it'll complete it for you kind of autocompletes which is awesome then you hit enter so now I'm in the my mac and cheese Drupal install and the way you can see it as you can hit LS and you can list out what's in that folder that's a great way to see what's going on and just so you know I do have Josh installed on here and you just type in drush and you can see if it's installed and if it shows you all the commands it's installed so I am going to be using dress I am going to be doing a lot of stuff that if you've never used dress it's it looks very overwhelming and scary but in all reality it's not and it'll make life quicker better faster and I promise that you'll once you go dress you never go back so let's just get going and I'll show you how to in using dress so you just put in the command rush you type download and I want to accept all of the prompts that pop up and what I'm going to do is I want to install the modules admin I want to install admin menu I want to install views see tools drupal gap and drupal gaps dependencies which are services views underscore data source and libraries and then a separate module I want installs geo field geo coder and entity because entity is actually a requirement of geo field and geo coder but it doesn't it's kind of tricky because it doesn't it's not actually required but it is a requirement so when it enter and it's going to go out and say I don't have any of these modules I got to download them so it's going to download them all which is fantastic and super simple I didn't have to do anything about one line of code not even code just come in so then from there what I'm going to do is zoom is aid rush en which stands for enable and I'm gonna cept all the prompts so I don't have to say yes every time and I want to enable Drupal gap and that'll say oh there's a couple dependencies we got to turn on yes turn them on which is what that - why does so that downloads all that dependent make sure it turns on all the dependencies and everything like that and then what I want to do is dude rush enable views and say yes to all first because I want to make sure I don't have to yes every time views and I want to do views underscore UI hit enter awesome and I want to dude rush enable let's do we're going to do geo field we're going to do geo coder where do entity where do admin underscore menu and hit enter and once we've got see it I forgot to hit dash Y so this is what every time you have to yes but if you put the - why you don't have to which is awesome so then everything got installed and I don't know if you can stall but geo geo PHP was also a requirement of geo field which it Auto installed which is any requirements get installed and now what I want to do is I want to turn on admin menu so I'm going to dude rush enable and I'm going to say yes to all prompts and I want to do admin underscore menu underscore toolbar hit enter and then I want to dude rush disabled or dis and for disabled I'm gonna say yes to all the prompts and I want to disable the normal toolbar and then I also want to go if you hit up it will reload the previous one you did which is kind of good feature to know and then I want to change disabled to p.m. underscore uninstall - Jets toolbar so I'm going to uninstall the toolbar as well now if I did this right I should be able to go over here I'm going to do a refresh control f5 do a hard refresh and I got the nice admin which helps you shortcut to everything which is the best ever so what I'm going to do now is show you how to install a drupal gap as installed the module on this on the drupal website now i want to show you to install the SDK so we go to configuration web services drupal gap so before I get started I want to make sure I test the connection make sure that's all working well which it is and then it's going to I want to install the SDK and it's going to ask you where so mobile app application is the default place and that's where all the docs will refer to where the SDK is installed so I recommend 100% staying with mobile - application you can honestly install it wherever but that's where I install that's where I'm going to install now but you're welcome to install anywhere else so that that's totally fine and so we've we installed it and now let's check it out let's see it so there's a couple things here you can do launch app and the module failed they failed because I didn't clear the cache before I redid this presentation so it was looking for stuff that was there but it's totally cool because we will refresh the page and it'll work fine alright so that was because I didn't clear the cache I was looking for the files already on the server we're looking for that I'm specific already on my local machine we're looking for something that wasn't existing so we clear the cache and this is the out-of-the-box drupal gap what it looks like and it's fantastic so it's got a ton of great stuff already set up oh it's got some logins stuff you can log in you can create a new account and let's log in so we'll log in is the admin and so then once you're once you log in takes a second sometimes once we're logged in okay I'm going to I have some other options I've got create content taxonomy users I get a content and this will show me a list of all my content don't have any content yet it's a brand new Drupal website but let's create content why not let's create it so we're going to say let's create a basic page make a title this say this is my body and we'll say save and it'll load the page and show us the page so it's so amazing because when you hit save here or does is it pushes it up to the server it's saved puts it all there anything that's any dependencies or anything like that at all taken care of and then it loads the page now you might be saying okay it says hello but where's that this is my body part so actually this is so a great example so what we can do is show you inside of Drupal for every content type there is a display mode and we just created a basic page so if we go to basic page content types basic page manage displays drupal gap it's you have by default the title is always the only thing that shows and everything else is hidden by default so because that allows you to customize the display mode for your app because it might be different well you might want to display something different in your app versus your site so we'll just you know at the body and hit save and then what we're going to do is just clear our cache just to make sure we're complete completely good and I'm going to ctrl f5 get a new copy from the server I always do that just to be safe especially for demonstration purposes and then if you go to content there it is hello there it is this is my body so it's pretty awesome the ability to go from you know creating something in the app and also having it display right inside the website as well and you know you can see the content in both places hello it's just that simple when we create it's a mini app that fast we're going to make it even better we're going to actually make the one the full app so what we're going to do is we're going to take over the content type article so we're going to go structure content types structure content types article and we're going to manage the fields of article and what we're going to do is we're going to get rid of tags we don't really need the tags and we're going to add another field called position and what we're going to do is visit the position field is going to be geo field and we're going to call it I do it as a latitude and longitude and hit save all right so we'll take the default settings that's fine and we'll take the default settings again and what we'll do is we got a title body image position and I'm pretty sure we're good to go with that so we did install the geo if you remember when we were doing the drush I installed geo field so because I installed geo field on drush I also need to install the Geo field under web services Drupal gap because I have to install it in the SDK as well so what we'll do is we'll go over to the SDK we'll go right down Geo field and hit install and this is how easy it is to install geo field module all the contributed modules you can install right from here which is awesome so we've installed geofield there so now what I would now what I would do is in order to show you guys I would i would normally you know download the app and then I would take the app and I would there's a tons tons of different tutorials on how to set up your I'm AK or whatever you use to render apps for iOS or Apple I use an iMac and I just would hit download and you would hit download it'll go up it'll grab all the stuff from the server it'll zip it up and it'll say give you a little zip file that you can just grab and that'll have everything in it that you need in order to build out your mini website and what you can see is it's just a regular website so it's got an index file it's got some CSS it's got some jQuery Mobile it's got J Drupal which is a communication thing that uses for JSON it's got the bin which is this is where all the magic happens a drupal gap j s that's the best of it all and under app this is essentially like just like your this is almost exactly like your sites inside of your drupal website so you've got your settings you got all your modules then you would make a theme folder if you have themes so everything's found right in here which is fantastic so I would take all that and what I've done actually is I've rendered it and compiled it and then I actually put it into an app on my phone and what I'm gonna do is I'll take it out and I'll show you on the screen and you can see exactly what the what I did and how I did it and it'll be awesome and hopefully it'll work and you'll be able to see how simple it was to create an app that quick so what I'm going to do is show you that I've got oh there's my kids they're crazy it's my kylo Ren and Princess Leia so what I'm going to do is I'm logging into my phone I'm pulling up the app that I have and what I'm going to do is show you how you can just log right in so let's see I'm going to log in as I'm logging in I'll log in as the admin and everyone loves typing passwords on mobile devices because it is so much fun all right so I got logged in and what I'm going to do logged in I'm going to hit the menu button in the top I'm going to content it shows me my list of contents so what I'm going to do is hit create content okay and what I want to do is create an article and then what I'm going to do is just hit get current position and what that does is it automatically uses my GPS and pulls down my Latin longitude I'm going to hit my title I'm going to put in this is live and put the body I'm going to say hope it works exclamation point and then what I'm going to do is I'm going to hit a take photo there's a take photo button it pops up the photo button and what I'm going to do is take a picture of myself alright there's the picture of myself I'm going to hit use photo then it pops the photo in I'm going to scroll down a little bit and I'm going to hit save and when you hit save as long as you hit the right button it's saving it updates boom and look there it is this is live it might be backwards because it's on the screen but anyway says this is live it says hope this works and it did and there's the picture of me I just did it on the app you got to see it it's on the site now it's hello Drupal Delphia it's also in the app I just cleared the cache and I'm loading the content list and after the content list loads it will show you that hello Drupal Delphia is there hello Drupal Delphia and ok mmm nothing's loading in there I wonder why that is well that's because we created a new content type so we go to structure content types basic this is an article we want to update the article display mode and we wanted to go to drupal gap and we want to login of course that helps and what we're going to do is move the image up we'll move the body up you move the position up and we'll put these labels is hidden because who likes labels and we want to make sure we make the image something from mobile make it a medium hit update and we'll make sure that the coordinates are set the latitude and longitude don't forget to hit save that's important and then what we'll do is clear the cache you clear the cache and we'll go back to the route the web app and reload the web app go to the content hello Drupal Delphia and you can see there it is now look this is a great example so the images aren't showing up and this is a problem that that you'll see we can fix super easy I just wanted to make sure that it actually happened because this will benefit you future wise if you take care of this now so what what we did was the out of the box they actually they've updated Drupal the most latest one that so the image styles that auto get generated you can't just create them anymore you have to have a URL parameter and on it so that it knows that this that's legit and you can create it so what we have to do is turn that off so we're going to go we're still in the my mac and cheese I'm still SSH tin and what I'm going to do is do chmod 744 and I want to go to sites default hit tab every time I'm hitting to have to finish it settings I'm going to enter and then I'm now that I've changed that so I changed it to 744 so I can edit it I'm going to go to VI I'm going to edit it and I'm gonna go all the way down the bottom and I'm going to add this line of code that's commented out I commented it out so you would have to actually add it but I commented out so you could see this issue and so what it is is you got to add the image allow insecure derivatives equals to true all right so then I'm going to hit escape I'm going to hit : and I'm going to hit right and quit now I don't know if I actually specifically said I want to make sure so when you go into the VI you have to hit insert in order to edit it so that's how I hit I hit insert on my keyboard then I deleted that comment or you'd have to add that and then I hit escape to get out of the insert so I can't edit anymore and then you hit : right quit because I want to write and quit it I'm going to save that and get out of there then right after that don't forget this is the worst thing you could do if you forget make turn it back to 4444 because you don't want anyone else to be able to touch it or view it or edit it so that is the quick fix and then if we go back to settings clear browser clear data cache and go back to this link and hit control f5 and refresh from the server and once everything loads up I'm going to content and then I'm going to hit hello Drupal Delphia and then you can see that it worked now so that's the little trick if your images aren't working so let's keep going though because I think we can do better than just showing latitude and longitude let's let's show it as a map so what I think what the way we can do that is if we turned on the right fields so when I drop down position if I turn on if I look through here there's nothing about maps okay so that makes sense because I haven't installed the I haven't turned on the module yet so let's do drush I will do enable because when we download a Geo field it came with it when add Russian able we're going to say yes to all the problems I'm going to enable geofield underscore map I'm going to enter and it's going to say awesome yes let's do it and it's there so now I want to refresh this page once I log back in when i refresh the page reason I keep getting kicked out of logging again is because I keep clearing the cache and deleting my cookies but so now that I'm now that I'm here I got position I can add drop down and do add geo field map and now I get this entire map and you can tweak settings in here you can change there's a default center you can do all that stuff right in there so I'm going to hit save and now there's one more thing I have to do and if you are following along with display a Google map you need to add this script inside your index file right so in order to do that I just want to grab my I have a I have it rendered out or I have it already set up here and I'm doing the same thing I'm just taking this script but it with the Google API key in it and I'm going into into SSH and I want to edit the field so I can so that we can see it so what I'm going to do is I need I need to go into I need to edit the index but I also got to go to VI because I want to edit and then I want to go into mobile - application and then from mobile application I want to open the index file and I hit tab and it pops it open so then I hit enter and I want to edit the index file so I want to hit insert and I want to go just beware ever not doesn't really matter as long as it's in the head I'm going to go just before jQuery mob mobile and I'm going to right click and that'll paste in my code I'm gonna hit escape so I can get out of edit mode and hit colon I'm going to write that and quit it so that way it's updated all right and again if that's confusing the VI stuff and editing through there I promise you it was confusing to me at first but now it is a way of life and it is the way to go as long as it's not a production website because you don't want to mess around in production of stuff you want to edit do it locally and then push it live so but anyway that's a let's take a look at that now so before we reload that we want to clear the cache because we want to get make sure we get all the updated stuff from them from the server and what we're going to do is go to content and then once the list loads we're going to go hello Drupal Delphia and we're going to see look at that we're going to see Hello drupe Adelphia by the picture and the map the geo chord which is awesome so it mapped exactly where I was which is fantastic so that I mean we did we wrote an app with one line of code not even code we copy and pasted and we did that in a matter of minutes so I think Drupal gap is incredible and there's just so much you can do with it and just makes life super simple so yeah let's let's go back and we'll check out the second web app and we'll figure out what we're going to do with that all right so this is Drupal gap the app awakens episode 8 spoiler alert I'm just teasing there's no real spoiler alert but it is going to be an awesome app and it's going to be in a good movie so we're going to do a web app that's headless Drupal and just so you know everything you do at your Bo gap anytime you make a drupal gap app it's always headless it's always I'm just pulling the data down from drupal using views and data source using json and use data source and services module two-putt to populate the content so it's always headless then you can always take that headless Drupal and make it into an app so yeah you can you can go through the we're gonna go through the web app headless Drupal get nearby content and show it on a map and again step-by-step instructions here it'll walk you through everything you need to know it's all of its found on Franklin Tyler Frankenstein calm you walk you right through the whole thing the one thing you need to just be careful of is you make when you're creating a page for the display the map you're going to follow this link here and then once you're done with all that you can copy my paste bin in and that has a little bit of extra features and tweaks that I've just messed around with them made up so just to show that how awesome Drupal gap is so we are going to go to back to the site and we're going to start working on app number two and in order to do that we're going to we have to add a module so we're gonna go to SSH and I'm logged and I'm already there and I want to drush and I want to download and well let's just enable it and I'm going to say yes and I want to enable address field and it's going to say it's not there we want to get it great download it awesome successful okay so now that we did we downloaded the Drupal seven address field we also want to install the Drupal gap address field module now there isn't a module for every Drupal 7 thing but you can you can create it are you going to login you can create it you can build it you can do it and it's anyone can build it and the teaches you how on drupal.org which is awesome so alright so now what we're going to do is we want to create a new content type and we're going to call this content type we're going to add a new content type we're gonna call it locations and we're going to just we don't need to preview before we're going to save and add fields and from there we're going to reuse a couple fields we're going to add some new fields so to start with we're going to reuse the image field I'm going to save and then we're going to take all the defaults because that's just fine and dandy and then we're going to go in and add a new field called not position we're going to add address field right there address field and the type is called postal address and we got that when we added the address module we're going to take the defaults for edit settings we're going to take the defaults here no changes and then we are going to add afterwards the position field so what we're going to do this is really cool we're going to put in a regular address and then we're going to use position and but instead of the latitude and longitude we're going to geocode from another field so we're going to take this address that we input and we're going to geocode it from another field so we're going to take the address and pass it to Google and Google is going to give back the geo coordinates for it so we hit save and this is where if you don't have entity installed this next page won't load so if this page doesn't load it's because you need to install the module entity okay and that's that's just one of the dependency issues that it's not really a dependency but it is a dependency so we're going to take all the defaults and just hit save and from there we're going to we're going to add some content to the site but instead of you watching me copy and paste title body all that stuff all these five times I'm just going to install another module drush I'm going to say enable I'm going to say yes and I want to install node underscore export and it'll download everything you need needs for that and from there we're going to go and start installing it so if I go back to the site and hit control f5 just to get an updated copy of the menu at the top that will allow me to go straight into content add content note import and we're just going to paste in this new piece every time and everything's under here so we can grab Tony Luke's and I've already I already added this content before and and exported it out in the format that needed to be and that's how I'm able to just add it right back in you might see some errors but it still works great doesn't work fine no worries so we're going to get Jim steaks and we just mistakes my import closed with Gino's and then we'll paste that in and then we'll do Pat's that in and then we'll do two Nicks and I'm excited for tunics after this presentation and we'll just close that we don't need it okay so now I've added the feel the content we go back we can see all the different content there's a Reading Terminal Market the NYX Pat's king of steaks Geno's steaks Jim steaks citizen Bank Park Tony Luke's steaks so you can tell I like cheese steaks right so if we cook click on you know writing terminal market you can see there's an image there's an address field and check it out a position at geocoded this address automatically for us and pulled it in which is awesome love it so what we're going to do from here is we are going to create a view to view this content so what this this one's going to this apps supposed to do is we're going to pass it our location and it's going to tell us what's near us so in order to do that we got to go to structure we've got to go to views and we're going to create a new view and we're going to do add a new view and we're actually gonna call this view nearby locations we want content we're going to do a type location and we're going to sort unsorted for now we're going to create a page and the page we're going to actually do is we're going to add dot JSON because anytime we're changing this data format to be a dot JSON file which is JSON data document and that's also that comes with views underscore datasource there's a views JSON module that gets installed it's part of a requirement for a Drupal gap so I always change it to JSON just so I know exactly what the JSON views are and we're going to continue and edit ok so then from here it's if you scroll down you can see oh this is great it's got the title it's showing all our content this is fantastic but it's it's not showing closest to us and it's not showing all the content we want so what we're going to do is we're going to start by adding some more fields so we're going to add a couple more fields we're going to add so we're going to add a couple more fields we're going to add an ID because we need to know what ID it's associated with and we're going to uncheck NID because if you don't uncheck it it's going to have a capital N and that's bad machine names we want all lowercase for programming so we're going to uncheck that it'll automatically make it machine named and what we're going to do is do add again and I'm going to add actually a couple more things I'm training try to add a couple at once we're going to add image I'm going to check it I'm not going to hit apply yet I'm going to go back and hit body and then we're going to that donut apply and then we're going to hit geo car it's actually we call it a position and we're going to hit now we're going to hit apply so all those ones we checked we'll get to go through so we're just going to uncheck this so it's all machine names and hit apply and then image we're going to uncheck and we're going to say we want the medium image we're going to hit apply and position we're actually going to leave checked and we're going to hit we're going to make this latitude and then we're going to say instead of just well-known if we want to change this to latitude only and what that will do is it'll for the for the label lat it'll have latitude only we're going to apply and if you scroll down we'll see we're getting close we got title node body we've got the field image and you can see this the URL parameter the iTalk thing that allows it to auto generate this image style which is awesome and the latitude but we need the longitude so let's add another field that will riad the same position field and what this time what we'll do is we'll make sure that we're adding longitude so we're going to leave that up and we're going to type in a lon and whatever label you put here is what the label will actually be and we're going to say longitude only accept all the defaults and scroll down and see great latitude longitude and this is awesome so now we've got all the fields we want and now we want to show well based off where I am and what URL parameter I pass it of where I am of the look of the location mat show me what's near me so we're going to do advanced and we're going to add a contextual filter and with Geo feel there's a contextual filter called proximity that gets added and this allows you to say how far away you are from something so what we're going to do is say display no results if there's no URL passed I'm going to get rid of the hole so no one can sneakily find everything we're going to put at the vault radius of five why not and we're going to make it meters miles not kilometers and we're going to hit apply now you scroll down and you're like oh crap I broke it but actually you didn't so what I'm going to do is I'm going to put in the location of the Philadelphia Convention Center and I'm going to hit I'm going to now this is kind of interesting so this is we're doing latitude common no space longitude and then we're doing underscore distance away so this is saying give me everything that's within a mile of the Convention Center and I'm going to hit update and then you'll see look at that it put in the Reading Terminal Market because it's right there and if we've changed this to four miles away we get everything Citizens Bank geo Geno's paths Reading Terminal Market I think we do five we actually get everything but you get the idea so now the tricky thing is a Citizens Bank Park is way farther away then writing turmoil market because writing terminal markets like 20 feet were actually this presentations above writing terminal market so what I'm going to do is add we need to add the proximity field so that way we can see how far away it is so what I'm going to do is add proximity and I'm going to check that and scroll down apply I'm going to uncheck the label I'm going to take out thousand marker and let's actually round it because it can be a little overwhelming when it's four million decimal points now this is where it gets a little tricky so source of origin point we want the source of the origin point to be contextual geo field proximity filter so that is the whatever we pass it whatever location we pass this view we wanted to show the distance away and we're going to do it in miles so I'm going to apply all then we're going to scroll down and we're going to see with the URL parameter passed the conference center is three point four miles away now it's still out of order but at least we have the field now so now let's sort the criteria by proximity so we're going to sort it by proximity and again this is tricky but we want to sort by contextual geofield proximity filters so we want to sort by whatever whatever location we pass it and if we just look now writing terminal markets first and Citizens Bank Park is last so it's perfect it's working great now this is a big thing do not forget to save it because I've done that and lost it and been very sad all right so now the tricky part is we save the view and we need to we've installed let's just double check we installed in Drupal gap address field yep we've installed address field now we've got to go in and say okay we need to create a custom module that will allow us to access that view and pull in all the content and data and again all this is found in that the URL that I provided at the very beginning and let's let's just hop right in so what we're going to do is we're going to go in we're going to or SSH then again and under my mac and cheese which is the my test your test Drupal website and what I'm going to do is I'm going to go into I'm going to make a directory so you type in MK der so make directory and what I'm going to do is going to go into mobile application I'm going to hit tab and it will complete it and then I'm going to go into app I'm going to tab and it completes it adds a slash and I'm going to go into modules in it tab and then I'm going to create a I'm going to make a directory right there called custom hit enter and so then I'm going to hit up again because I want to reload that but this time I want to add us I want to add in another directory inside a custom and I want to call it much so I put slash my underscore module because that's the name of my custom module and building and then inside of that I want to create I'm going to leave all that up I'm going to home hit up to reload that same thing and delete this out and I'm going to add VI and I'm going to what I want to do is add oops I'm going to add to the end my module slash I'm going to put my module again because I'm add a file called my module J s so any time is looking for a module and you create a custom when it looks in the custom folder and then it looks for the name of it my module and then it looks for the name of that J s my module J is similar to Drupal except it's looking for other for other files but in this case it's Jaya so I'm going to hit enter and that's going to create this my module dot J s file and what I'm going to do is I'm going to pull up the original so this is what the walkthrough has you do and I'm copying all that I'm going to go in here I'm going to hit insert because I want to paste this in I'm going to right click and paste it all in sometimes you have to right-click paste but I just have to right-click I'm gonna hit escape because I want to get out of edit insert mode and I want to : I want to write and quit it I'm gonna hit enter and so that created that file for me so that did that created a file called my module jeaious inside of the modules custom my module directory which is exactly what we want to do and then from there we also want to we need to edit the settings file so if we go we want to edit the settings file which is a VI because we're going to edit a file and then we're going to go into mobile application again hit tab and app and then we're going to hit settings and we want to edit the settings J s file because we got to add two things to this so if we where this is the file so what we're going to do is I'm going to go up a little bit and I'm going to see okay right here is the cut is the modules so what I want to do is I want to add the custom module I'm going to hit insert hit enter and once I had insert it allows me to edit the file so I'm going to type Drupal dot dot this time custom because we're adding a custom module and I'm going to add the custom module we just added which is my underscore modules module and I'm going to put single quote the brackets equals bracket quotes semicolon and then I'm going to hit escape how I could escape but I didn't have to as I still need to edit one more thing but so we added Drupal dot module dot custom I'm going to go now I got to find the settings I think it's right here it is so under right here where it says I don't know if you can see it right there it says app front page and right now the default which is what loads that that dashboard in Drupal gap that's the default we want to or we want to hit insert first because I did hit escape so to get back into edit he hit insert and I'm going to go back into the front page and I want to type in map and I'm going to hit escape I'm going to colon right quick because I'm going to save my changes and get out of the file okay now that might have been a little confusing but what we did is we added we told Drupal gap hey we're adding a new custom module and then we said hey we want the default page that loads we want that to be this map file just to make it easy and if you look in here just like you would with hook menu for a Drupal website we created my module underscore menu and we added an item called map we just did it in JavaScript so that's how we built the map page and that's what we said when the custom mod when this when this site when the new site loads we want it to automatically load the map page so let's clear our browser settings and then let's go into my mac and cheese and we'll hit refresh the my mac and cheese drupal gap install and the default page should load our map there it is and this find nearby locations button so what what you can do is it find nearby location now this is going to fail because this is tricky because the default I'm not actually in I'm not actually there doing it so what I need to do is I need to go up to the I need to go back up and I want to edit the my module dot J's file because I am actually I'm going to go page up down just a little bit not too far and I want to find theirs variable that sets the distance away by default and it is - is not far enough for me because I live too far away and so there it is range so I'm going to insert I'm get out of this range and four miles isn't far enough for me I'm more like 25 miles so I'm going to hit that escape : right quit and that's how you get out of it and save it and then what I'm going to do is go back here and clear the browsing data clear that clear at all hit ctrl f5 get a new copy from the server and we reload it I hit find nearby locations and there they all are now it's a little tricky because you might not put the proximity as the title and you might want the title to be a little more bold and there's little tweaks and stuff that we can do and so then there's where I am and if i zoom out I can see that the that they did load but they just didn't the map didn't recenter so there's little things that I think we could do to make this look better when I go to load the page but okay wait what's going on remember there's display modules for Drupal display modes and so we for every time you create a new content type you need to edit the display modes so manage displays drupal gap and we're going to go in and we're going to add a login we're going to go in and we're going to add all the fields so we want the image first and then we're going to do the body and then we're going to add address and then we're going to add position and we're going to get rid of all of these because again labels sometimes are pointless and then we're going to edit the image because we want to make sure oh well we're going to show it a little larger why not and then we're going to go to address addresses good actually and we're going to go to position and we're gonna say we want to put the geomap now we already added don't forget we already added the line of code for the JavaScript you need to add into your index file in the previous app so don't forget that if you're just building this separately we're going to keep all the defaults hit update and to just because yet update there doesn't mean it save so don't forget to save I've done that plenty of times and been very annoyed with myself finally figuring it out later so we're going to clear the cache again and we're going to go back and refresh this page and we're going to get the listing of places again it does show that there's new places and then I'm going to get the listing again and then when I display it it loads so that's pretty awesome what we did in a matter of about an hour we built all that so it drew pallab is fantastic everything in it is so awesome but what I wanted what I want to show you is that you can actually there's ways of making obviously ways of making everything better but let me just make a couple tweaks real quick to this to this page here so there's a couple tweaks you can make to make this a lot better so what I'm going to do is I'm going to get this final code that I got you know from the from the paste bin grab that final code I'm going to grab that code copy it and I'm going to paste it into the my modules and I'm going to save it and I'm just going to hop in real quick and I'm going to update that it's just quicker for me to do it this way and it's another way to show you so if I go into my mobile application app modules we're under custom my modules and then I'm just going to upload that my module folder and file and overwrite it and just clear the settings to make sure we don't get the old stuff and I'm going to hop in and hit update and this time I put in a nifty little slider and what that does is allows you to control the distance away so if I hit this yeah I'm not going to get anything because I'm not far enough but if I hit 25 miles and hit get nearby location boom everything shows the map Reis enters I changed the proximity to be over here so it shows you approximately 18 miles away I put the title in I put in the body the image so I just cleaned it up a little the map reader centers you can actually even if you mouse over these guys it will actually tell you what the name of it is you can you can set it so you click it and it loads the title with a clickable link and then instead of clicking here you can click both I've done all that so anything you can do in a Google map you can do right here which is awesome and it all works really well so let's hop back over to the slideshow and wrap this up so we did the app we'd build it and you could render that out and put that into a iOS or Android store and have that ready to go which is awesome so how do you get involved come to the dark side we have Drupal Gap I'm telling you it's awesome you'll love it so Drupal gap you can contribute you can become part of the Association you can make donations you can get started toms and tons and tons of getting started links you can stay connected through Twitter and Facebook you can sign up for newsletter updates and all that jazz it's awesome so questions and comments questions and contact information this is I'm Joe Roberts again my email is Joe at Joe Roberts photography feel free to email me and then you can also you can Twitter my Twitter handles Joe at Joe Roberts photo so you can also hit me up on IRC chat I go I usually go by Joe Roberts photog and because photography doesn't fit but if you don't know what I are see chat is if you go to this website and then type in a username and put this hash tag if you put that hashtag there Drupal - Drupal gap that'll let you log into our little community of guys where there's a ton of us always online trying to chat and build jubal gap and make it better and everything like that I do want to give a special thanks to Tyler Frankenstein he is a awesome guy who helped me out tons with this presentation has presented this similar presentation before and his IRC chat is Frankenstein so if you need help with anything online you can totally hit him up he created Drupal gap brilliant men and a great consultant if you ever want to hire someone to build you some module stuff or modules for the community and for you thank you so much if you have questions comment below the video and I will try to get to them as soon as I can it takes me some time sometimes but I promise I will get to it thanks so much and hope you enjoyed this little video about Drupal gap

Channel: Joe Roberts

Views: 11,914

Rating: 4.9166665 out of 5

Keywords: Drupal, DrupalGap, PhoneGap, Apps, iOS, Android, Easy, Mobile App, Native App, Drupaldelphia, Tutorial, Walk Through, Drupal 7

Id: MNINCbGJylY

Length: 54min 48sec (3288 seconds)

Published: Tue Apr 12 2016