 Hi everyone those outside if you would like to see the giant ball and By biking 50 feet above the ground then you can come in the auditorium and Watch me biking from the string All right, so Good afternoon everyone again. I'm Paul and The reason why I posted this picture. This was actually taken during our team building in the Philippines about with A pack team this two weeks ago, so Any anyone knows what's ionic ionic angular Rest API json API here maps. That's a lot. That's a lot to take in but these are ingredients that That's really good in Building mobile application so ionic was actually created by the Drifty Company in 2013 Ionic is a HTML5 mobile app development framework. Let me tell you a story when I was in college. I That was in 2005 That was the time that PHP is still gaining its popularity There's no Resources over the internet. So you have to buy a book authored by Tom Welling You know that author and There's no I mean, there's no DVD at that time. So Installing PHP and my sequel Took us two months to install. I mean just PHP my sequel and yeah and Since there's no DVD We have like this one install this one and when you are in ready in the disc 10 of error you repeat it again until everything is not working and I Mastered PHP in my college days and then I wanted to Build mobile application at that time the mobile application Technology is Java and you have to study separately five-inch a stick of mobile application book So It was I was a frustrated Mobile developer at that time and when HTML5 came in It was it was really I mean was really good because being a PHP developer and jumping in a mobile development sphere is Not so hard because you know already JavaScript You know already HTML and you know already CSS. So if you're a PHP developer It's easier for you to jump in and become a mobile developer using HTML5 framework like Cordova or phone gap I don't know if you're familiar with titanium app accelerator and So not one and Ionic is the new one in the market Ionic is pretty new. It's based in Angular and It's a cross-platform mobile app development and a Lot of are using them. There are options in building Applications like Phone gap or there's the react J react native so And there are three types of application the web which is Just the HTML your HTML5 CSS and Doing mobile responsive thing and then of course your native which basically you have to learn the native of Android or C++ or if you're looking into iOS and you have to dive in the Kotlin and of course the hybrid so hybrid is the new in the market that Enables page feed the bill for like me to build a mobile application And that's what we are gonna talk about this this afternoon so as you can see here the web like probably you're familiar with Asana and base camp and if you're driving into native application, then You're looking into Skype Your favorite game Your Instagram So these are the things that you can do Like the example of the native application So why Ionic? There's actually a lot of reason why number one, it's an open source It's number two. It's cross-platform. You can develop Windows You can Windows mobile you can develop Android or iOS in just one base code and It's free of cost. So no licensing fees that you need to take care of It's based in Apache Cordova So Apache Cordova is really huge that a lot of cross-platform frameworks are using it phone gap using it and a lot of a lot of them so it has a deploy live updates like for example You've already application in your Google Store Google Play and then you have some updates so you don't need to apply again for submission of your application and Wait for another two weeks before it gets rolled out. So you just need to push your live updates and Anyone that uses that application will receive that updates So that's actually one of the one of the best things that I like with Ionic and if you're familiar with the Angular, this is really good because It has a very Easy learning curve so it's easy peasy and It's based in TypeScript And Then the last one is it has a very strong community. So you will get a lot of support from the community So Ionic is really just Very simple when you you know, you just do Four commands Ionic start your app in the name of your application and then blank and it will create the The basic structure of your mobile application and then You can and then to run it you just need to run the command Ionic serve or Ionic lab so it's a very simple and This is how it looks like The generated codes it looks like this if you're into Angular Component export very JavaScript-ish we don't need to Check line by line, but we'll discuss that and and then this is the HTML part. So if you know HTML 5 then It's just very simple if you're also doing react.js It it looks similar, but I think the only changes there are the tags the Ionic tags All right, so Everyone it's Just came in I'm Paul. I'm one of the superheroes in the in pantheon and I'm working with this bunch of heroes Maybe one of them probably if you're if you had some issues before a pantheon and Yeah, so Right now we are 13 Superheroes in the Philippines servicing the APAC time zone the US time zone and the European time zone and I also do I actually lead the Drupal Filipinas in the Philippines. I organize Drupal camps and This group is actually the leaders of different communities in the Philippines That's Python the women who code coding girls. So in the Philippines we are we have this Group of community. These are the leaders. So everything we shared Lessons learned organizing their events and sharing information sharing notes. So it was a good Wonderful conversation with the community and this is actually the Sample of the pictures from our recent Drupal camps the last one that's On your right those Drupal Camp Manila just like two months ago Where 350 people attended the events? So we're gearing towards the students and 60% of the attendees are students So and we're also working with together with the coding girls there and Don't you know that in the Drupal Camp Manila the population the I think 50 percent 60 percent are women attended the Drupal Camp and That's because of the coding girls helping us organize the event All right, so let's go back to how how to install ionically. I remember when I was just I used to do mentoring in the hackathon in the Philippines and Joining a hackathon and building mobile application if you're using Ionic it's easy peasy You just need to have a node. Yes, you just need to install npm So Cordova Ionic and boom You can already create your mobile app You don't need to install the Android SDK like or if you're using Android SDK you have to install the two gig of data. Oh, that's terrible probably with the internet connection of the Philippines Maybe the 24 hours done you're not yet finished downloading those stuff Yeah, but Ionic even if you have a slow internet you can still Install this in less than 30 minutes So let's talk about here maps Here, I don't know if you're familiar with here maps. Can you anyone in the room? use tier maps anyone guys No, all right Here maps is actually you've been using that you've been using Facebook, right? The mapping application the mapping provider of Facebook is here maps and then you're using uber too so uber using here maps map maps and Microsoft they're using Here maps technology But the question is why is it that in the developers community? They don't know or they're not familiar with it Probably because here maps was designed to cater for Because I think the history is gearing towards the car Automatives so they're a nab tech before so they're really more into car Computer systems mapping system and now here maps is gearing towards Development and they're Encouraging developers to use the technology and I'm jumping into that Together with the here maps technology. We are partnering in the Philippines So it's just very simple. This is how it looks like the the map Hmm and In Europe and North America four to five In the four to five four to five of car with in car navigation for it's actually using here maps and Yeah, so 8,000 employees with these xanthries they're really growing and Hopefully the developers will start using them So these are the top users that I know and So now how are we going to use that? So just simple just go to the developer sites Have the developers key. It's I think that 90 days free and then you can have this sample HTML and With the bunch of JavaScript libraries and then just put the app ID and application code and you're up you're good to go and This is how it looks like when you generate that but the question is why would I use that if there's Google map and in Drupal I Don't think here maps is being Used I'm I'm a hundred percent sure of that Because if you're using liplet if you check liplet, there's no here maps So I actually submitted a patch in the liplet more maps more Module so that you can actually use here maps. So I will post the link with that I actually contributed that that module so that People can can try it out It's just easy and I'll be using here maps in my presentation. So now let's Part of this Drupal 8 rest API has been discussed already with review speaker So in my case, I've used the flat I've used the rest UI just the basic modules. I did not use a lot of unnecessary modules and Just to enable the content the file the user registration method the resource and I'm using I'm using The authentication I'm using basic off so Need to generate Token to be able to post now so if you're using basic authentication There's a problem in getting the data fetching the data but the problem is if you're posting data So you need to have this course So by default this is Disabled on in Pantheon you need to make sure that this is Created so you just need to have the service YAML and make sure that you enable the course So of course this is actually Will it will allow you to To this is it I mean to allow you to open application with different domain So this is really a very dangerous settings here if you're Putting this in a production site So but in our case, this is just a development. So Everything is allowed. So I allowed all headers allowed all methods and then I allowed Origins so that's line over eight is really sensitive. So if you're just Allowing that to a particular site then you need to specify it there and these are my My lessons learned so make sure that the X CSRF token has no white spaces So sometimes when you submit or when you post It works on your in your browser local machine, but it doesn't work on your mobile on your mobile device Because they're actually white spaces if it's running on your mobile on your actual mobile device the same with Sometimes there are special characters. So make sure you filter them out I had a problem that it works in my Local machine using a browser it works 100% but it doesn't work when I Use it with my phone and I actually figured it out for like a week What's wrong? I've been I've been changing servers. I even went out with pantheon because it doesn't work so I just realized that When running into my actual mobile device it basically attaching some characters So make sure that you filter them out. So that's what I did. I just filter them So that when even regardless if you run it if you run it on local machine or your mobile device it works All right, so let me post there. I'd like to do some demo So the name of the application that this is actually still on a better pace the name is Mappinas Hmm There so this is very simple, but I'm actually using Drupal 8 so Let me do the demo so this is how we do Debugging all right opening my application so on on your right side, that's the application that I'm actually opening and On the left side, that's the back end so that I can show you The data that I've been that I will be submitting So let me try to log in. I'm using my login account My username and password all right, so this is how it looks like in my phone now I'm gonna Create a collection So so what's the collection? This is actually used to submit reports for here maps like for example, there's a location that is not That is not correct probably The place is not existing anymore and you have to report it to here maps that hey, there's no more Jollibee there is KFC now so I'm going to Send a report sdx Sdx One so this is the the here maps there. I will load it It will detect as you can see I'm this is actually running on the debug mode So I can check In my console if I'm having some issues so I can actually drag So In my phone, it's actually showing up that sometimes the chrome developer tools is buggy. So I will take a picture Of you and send that okay, then I will add another So We'll reset the form and add another one Sdx to and put that in another room The pointer actually I move the pointer to the other side If you have a wet I will take another picture So another picture and I will submit this All right So let's check that in our So this is very basic map so right now So this is actually the one that we've sent That's from our place this morning. I think this is ours so Here's the photo that I submitted and that's the the second one so now the question is what's What's behind this? because I've been using up accelerator phone gap for the past few years and The most difficult part is how to submit how to transmit that images to your Drupal back end via rest API and And let's go back to No presentation, so this is the sign up rest API Before I go to that the coding to the coding to the actual coding in the angular I Tested first in The plug-in that this is actually a Chrome plug-in for rest API is So this is for how to create a node using API And this is for Update of the node so I get this is actually the most important tidbits in building an application and interacting with your Drupal 8 and Then this is the the auto delete the node and with the corresponding setup and This is how we handle image as you can see the URL is pantheon Funding site entity file. That's the The path that I use post method and then along with that I actually sent adjacent data So together with a file name the mime type the type the value and the base 64 Data and if you're if your image is big this also becomes bigger and heavier, so It's it's really hard if you're sending a large image to your mobile back end using base 64 but The the strategy there is to make sure that the image that you generated this is not that big probably just You can tailor it by 50% so that it's not that big and now the question is So when I submit When I submit the Images together with the with the form that I filled up it actually creates two requests first is it requests It has to submit the The base 64 image from coming from a camera and then it will submit it will submit that base 64 and Then you from your Drupal back end it will send back with the FID with a With the file ID of that image and then when you get that file ID Then you send you send another request for creation of the node. So there's two and There's a big news because This coming this release for Drupal 8.6. They're going to release a newer version It's no longer two requests, but it's just one request and that's actually Let me Go So this is actually one of the one of the oldest Commit, which is actually the API first which is supporting the Drupal the sending of Drupal file of files via REST API, so That's going to be that's going to happen in the release for Drupal 8.6 So if if you're building if you're creating a node or creating a Data, you don't need to create multiple requests just one request and everything will be saved. So It is actually one of the one of the things that I'm Waiting for for that release. So now if we're If we go back to this Actually, I did a video about that if it happens that there's no internet connection There's no need for that. All right. So this is actually the JSON API that I've used to pets the data so Now the question is why would I use JSON API over the just the normal JSON Pets data things like that So if we so these are the The first one is this the fetching of the data and if we're going to decipher that it's basically Adding the filter author with condition path and then the username that you know it filter outs what The user created that content and then I'll and then I I can I can Specify what are the fields that I need to fetch? So if I just need title you ID created me I don't need to I don't need the whole bunch of the node Of the nodes. I just need title you ID created an ID and you ID and That's actually a relief. That's I mean Based on I mean performance wise, this is really good because I don't need to to have a massive Amount of resources and then I can also sort it out already I can I can set it for for the limit how many contents that I'm gonna fetch and then JSON API is also designed with caching so Internally it already caches the data and So that's why I I use JSON API Forget method and just fetching the data. So from the collection here is already our Data that we've sent a while ago sdx 101 and STX 2 we can delete that and Just same projects so basically the What I'm pointing out here is sending of images and How to efficiently send that to your to your back end? That was the difficult part on that especially on working on Drupal 8 but now Everybody's good and And I'm encouraging everyone that if ever You can use that so I'm actually using ionic framework in In taking care of the codes. So this is how it looks like So this is the ionic framework so you can Remember when we Let me run this video a short video just to make sure that Okay, so this is the Ionic we will create Simple image a simple application and then we will See how the dashboard looks like and how the how it takes care of the Base code so I only start Rupal camp. It's a blank Ionic Then it will ask you if you're going to use it on iOS or Android. So for this, let's use Android and Then it will ask you So at this point it it already builds the the application it and It says here that if you're if you want to to upload this on your ionic dashboard You need to get push ionic master So it will appear it on your application in in the dashboard Yeah, let's do that. So this is the generated files when you did the the ionic start So now it's pushing it's it's pushing the code to the dashboard and in the dashboard This is how it looks like so it basically running the progress. It's like a circle CI so it will take care of your build and then from there it basically Lags everything if there's something wrong with your codes then it will it will start to log it in So that is one of the features of the dashboard And then another one is so now now that I've already pushed my my Application so how how can I be to how can I download that APK so I can install it manually in my phone So there's actually a package tab here that you can basically Build your package and It will give you it will give you either a debug version or the release version So the debug version that's what I've just used for the demo a while ago that you can see the debugging things and then Right now this building the the release version of the package so Now the question is why would they use this dashboard if I can actually run this on my on my terminal? Well You can you can run it on your local machine But it takes time because you still have to figure out your your certificates You have to set up everything, but this one you just need to push your changes Build the package and wait for the APK to be downloaded So I think for the for that basic blank application that will take probably five minutes to finish the building of the packages there it's building on progress and It's now uploading the APK to your to your to AWS so that you can you can download it It can archive it for you and then now it's build finish so you can click the history and then The download is ready for you. Just click the download and you can download the APK So that is the beauty of this dashboard, so it will This is really good if you are working in the team So That is one So let's go back to this to this map so as I said a while ago, I'm using liplet and I Created a patch so that we can use here maps and and the the map provider is actually here maps and That was recently this morning Yeah, I think That's all for my demonstration, so guys any question okay, I Forget to mention so liplet is actually A mapping module. I mean, it's actually a mapping provider it can you can use it for a standalone mapping application and In Drupal, there's actually it can actually be integrated There's an available liplet module that you can use and it view supports it. So if you have a Let me show you the views that I created So So if you install those liplet modules that I've showed you a while ago you will have this format liplet map and Once you have that it will just create it will require you to have a geo information So a geo information you can install a geo field for that so So in my case I only have the geo information the body and the photo and it will So these are the results and It's it's actually in a cluster So that when you click that it will it's it's not it will not look like scatter scattered So I'm using cluster Setup using leaflet. So this is really easy to set up just install the leaflet and then Have a geo fields. So a geo fields. You need to have a geo field module installed in your Drupal. Yep Anyone Yes, bro, okay in my in in my Experimentation it doesn't support you need to have a customization in order to have that But in the case of here maps or even liplet. So the the strategy is You create your views you create a JSON expose it and then Have that have that path and store that in your liplet and then have have the liplet Parse it so you can yeah Especially on Drupal 8 so there's no cost. There's no contrib module for that yet Guys anyone oh Another question is now If there's no question, I will ask question All right, so This I really spent a lot of time in this and there's no resources. I've been looking for this Overdrupal.org and there's none. So now the question is how are we going to get a geo information? from the mobile device so in your mobile device. There's actually a Sensor that gets your GPS the GPS so you can utilize the GPS to get that actual location and What I did is what's the role of here maps here? So once I once I got the the GPS information I I Send it to here maps to get to give me the the exact location in the map so This is there As you can see I'm using local storage local storage is actually a storage That is being stored in your local browser so what I did is when you drag the pointer it will actually Set that coordinates to your local storage item so as you can see there's a market marker longitude and then marker latitude and then I This is actually the the important tidbits that I've been studying for more than a week on how to figure out how to Send the geo information over the rest API so fill geo information and then Bracket then value the longitude and then the latitude and then Drupal will accept that so wrong white space or any syntax will Will Get will give you an error. It will not proceed and another question so How do we submit the images as I've As I've as I've mentioned a while ago We I resubmit images by by by a base 64 Data for Okay, that's actually a good question Because in the current setup of Drupal 7 Drupal 8 you have to send it In a batch manner So if you have a big images It will take time and sometimes If your if your images is too big and your memory limit is not that enough It will give an error. That's why as much as possible to make sure that it will not In my case I only have like 200 kbps the maximum number of image because if it's higher you'll get more errors and And The one that I mentioned that they're going to release in Drupal 8.6 is it's not going to use base 64 anymore. It's going to use The So as you can see it says here it is one of the longest issues in Drupal history at 572 comments because a lot of people really like to have this Feature to submit an image without using base 64 and As you can see here it says It will use application octet stream so it can be able to Support video Video files and large images without a problem And and it's much more reliable And and according to the to the comment to the to the whole thread Even in in other communities Especially using rest API. This is actually the major problem on how to submit images and this is and and What's the best thing here because it only only in our Drupal community? that That this has been resolved and I'm waiting for that 8.6 All right, so any oh, yes. Yes, sir Oh, yeah I think that's actually a part of that features So That's going to be No, no Yeah, so this one is actually raw image. It's not basic support anymore This one the the new version So I think that's already resolved the Exempt for information All right, so guys, I know this is really a bit Advanced for others Even myself I'm still Especially in submission of these images. I just figured this out a couple of weeks ago. So All right, so thank you guys and I hope you've learned something from my Presentation and and I hope that you can also start using here maps. Yeah, just give it a try Look into the offline version. Yes