 Good morning everyone My name is Sam Suresh. I'm from Kuala Lumpur, Malaysia and This is for my first WordCam in Singapore and Today my talk will be about building your first mobile application Using WordPress as a back-end So before I start how many of you are a developer here? Can you raise up your hands? Great Because sometimes people tend to abuse the word developer. So I'm going to ask this question again How many of you are a developer who write quotes? Great. All right, so Just before we move on about mobile application, WordPress powering 28% of website in the world according to the latest statistic from different different companies like like Alexa and browsers So WordPress evolved from being a block into a content management system I'm a technology instructor. I teach people how to build website How to use technology stuff? so the first thing when people heard of WordPress is they think it's a block So if you say you are building a WordPress Internet system Internet system using WordPress and they are just looking at you. Come on. Are you building an internet using WordPress? Because it's just a blog. So what you know what press comes in two flavors that what press comm and org so what press dot org is about the CMS content management systems that's where most of the volunteers are in and Now what press is evolving into apps platform What press taking some drastic changes such as now you have this Gardenburg editor in what press and we have rest API wishing to build in the car out of the box and Why you should use what press as apps platform Before I press it further how many of you have built your mobile applications One two Three great. So today. I'm going to show you how to build your first mobile application Even though you are not a programmer a coder anyone can build a mobile application Why what press has back-end for mobile application because what press is really a powerful and Most popular content management systems 28 percentage. That means you can get support. You can get documentation tutorials in a single Google or just read the documentations What press has built in rest API more than fifty two thousand plugins available in what press plug-in repository So any feature you can imagine you don't have to Build on your own. Just go to what press dot org slash plugins Expand it expand it and you can simply output that by writing a single page API Make it as a json and you can call it in your mobile application What press can be used for e-commerce a user management system content management system or anything you name it because there's Custom content types so you can create any kind of sites using what press and the most importantly what price use case concept Keep it simple and stupid So you don't have to really learn a lot of complex pages complex things to get started with wordpress Anybody can get started with wordpress because it's really simple and you just extend it any features that you need If it is required for you if it's not just go ahead. What's coming the call? So maintaining a custom Backend is a lot of work and it can be really difficult. Have you seen these? animations when the MGM movie starts I Believe all of you have seen this right so those days if you have the old movies And this is animations that will be played before the movie and have you imagine. What is in the back end? So it's not really easy to maintain a back end It can get this complicated It's just because if it's a simple back end. That's fine imagine you have you need to maintain a user directory with a lot of users and If you are building or your own back end that sometimes can be very clean and very efficient But if you want to add on a feature or you want to maintain it so that take a lot of efforts So you can use what press as a back end today I'm going to show you how to pull contents using rest API and display on your mobile app and package it for iOS and Android and something to place our app store Building your own mobile application. There's various technology available to build your own mobile application You can go for native application or a hybrid applications If you want to build a native application for Android, you need to learn Java Or you can include C++ that you learned during your college times into the Java and compiles and as an app Or if you want to build an app for iPhone, you need to learn Swift or objective C So if you want to cater these two major platforms and don't ask me about Windows phone I Don't think anyone using Windows phone except Microsoft employees. So If you want to cater both platforms, you need to master two different programming language That is native application development, but native application development has its own benefits and there's another technology called hybrid which is using HTML 5 Your common technologies that you use in web development such as HTML CSS JavaScript So you can use the technology that you already familiarized with to design your mobile application This is a comparison between native and hybrid in a native app It gives the direct API of the native your device API So it can interact directly with your device if you are building a HTML based application It is running in a shell or in a browser that you don't actually see So It's just kind of like a website that's running within your app, but it really looks like a native application performance wise native of course faster and better and Hybrid is kind of slow, but it's depending on how you optimize a lot of optimizations Ways available so you can just optimize your app and Can make it faster? Look and feel Native have a native look and feel the buttons the input boxes the taxes will look like exactly like Android interface or iPhone interface whereas in a hybrid you need to like do some styling CSS and you're just cheating the cosmetic And it looks like iPhone view, but actually it's not iPhone view It's just by the CSL or SCSS converting that into a Native view Distribution both both application can be distributed using Google Play Store or Apple App Store Notification and you can see some other Comparisons there so in the end you see the development skill required to develop hybrid application is using HTML CSS JavaScript which you use to customize your teams in WordPress, right? How many of you are good in HTML CSS or you can actually alter some HTML and CSS Great, so you can build application now so this is the capability overview of native and hybrid when you are building a native application you have full capability of the native application and And when you are building a hybrid application You still have the full capability, but you can export to multiple platform Whereas not if you can only export to one single platform So hybrid application benefits you can reuse the existing skills in web development into the mobile application Reduce cost of development so you don't have to hire two different programming with two different skill sets Same programmer one code base you can export to different platforms So that's true. You can build the application without learning native programming languages But being a web developer sometimes I can be biased towards the hybrid application It's always your call whether you want to go for native or hybrid Some application is really good to be developed in native programming languages Especially when you have a lot of communication with the hardware Hybrid application can communicate with hardware as well using Kodawa plugins So there's thousands of plugins available you can install you can communicate with cameras You can communicate with sensors so you can easily get started to meet hybrid applications and Immulate as a native application So now let's look at what are the technology used to develop hybrid application? Let's say you want to develop a Hybrid mobile application All right, that's I guess the other session just ended and I'm all just past about 10 minutes here Okay, welcome to everyone just joining in okay hybrid Application technologies so you can develop a mobile application using phone gap Phone gap is an open-source Platform that allow you to build mobile application using HTML CSS in JavaScript and then you can compile using phone gap build by adobe It's free for one app. So you can delete that app you rebuild the same app again and You can get it done And then we have ionic framework. It's open source framework and Built by ionic team, of course, they have paid head-on services such as ionic creator and Ionic view ionic pro ionic dashboard pro. There are some paid services available so if you don't want to write a single line of code you still can build apps by using ionic creator and We have some other technology such as the marine by Microsoft. I don't use any product made by Microsoft usually Accept Excel because that's one of the amazing innovation by Excel by Microsoft So you can use the marine as well. It's they have interface similar to Android studio and you can build a a hybrid application But when it's built by a corporate company the the the open source community became limited so not much growth you can see in the future and Framework 7 is open source framework not really popular compared to a phone gap and ionic Intel SDK one of my favorite tool, please check it out. You can download from Intel website It's a free tool. You can drag and drop build your mobile application using bootstrap Unfortunately, this is not open source of freeware and Intel drop support for Intel SDK since the beginning of 2017 So it's really set They go sunset this software in coming years. Maybe two or three years later So today I'm going to show you using ionic framework Why because it's most popular framework among all the technologies that we have to build a hybrid mobile application Phone gap is another technology that Actually as popular as ionic, but why ionic here it is Ionic use a friend and UI that the look and feel looks like Have native application. So when you build using ionic framework your application will looks like a native application and ionic comes with a ton of Interfaces these are the interfaces in ionic you can see these are the startup screen for your app Buttons everything you can imagine just like bootstrap. I'm sure many of you know what bootstrap is, right? So bootstrap is just a framework you get it from bootstrap get bootstrap.com You build your website. So you don't have to write CSS JavaScript to create buttons boxes and whatever UI elements already building and people maintain it people troubleshoot the grid system everything in there So ionic is the same thing, but for your mobile application It's just like bootstrap, but for your mobile application Everything is already building the components. Just the stylings everything you copy the code and place it in and you get started So that's why I only is getting more popular and ionic team believes that HTML5 going to rule the mobile application in the future because Everyone can use it why most of us use WordPress today because WordPress is again Like I said is case is keep it simple So you can anybody can get started with a little basic knowledge on how to control your mouse and how to click things in your browser so I only also support a broad range of native mobile component like slick animation animations and also you can Install whatever Kodawa plugins available as I only also using Kodawa engine just like phone get So when you are comparing phone gap and ionic if you are using ionic you get Kodawa you got Kodawa plug-in plus You get all the user interfaces the amazing user interfaces in just a one line of code So building a hybrid application with ionic you need to skill set the first one is basic HTML CS and JavaScript Ionic using Angular JavaScript type as well as TypeScript. So that is new Maybe if you are not familiar with this you need to learn Angular a little bit So you can customize You can just read the documentation in the ionic. There's documentation for everything how to add a page How to add a menu how to add a splash screen how to add a plug-in everything is documented There's examples available. You need to have some basic knowledge of command line tools So how to open command line and how to run command line and How not to kill your Macintosh or computer using command line like remove Recursively so that can remove your entire hard disk maybe the data in your disk. So be careful with that But if you have no idea about command line to no problem There's one other technology called ionic creator drag and drop on interface on the web base You can it's a cloud technology you can use it. This is ionic creator, but it's limited for one application You can build one application in ionic creator. I'm just having a demonstration video recorded last night in my hotel room So this is ionic creator. You just start account go to creator or ionic.io start account create a new app and You can see when you started your app your app is already there with three different tabs You can just customize the tab colors and the tab names that you can add more pages You can add icons You can add all the elements. You can see the elements on the left bottom. So there's a lot of different elements Obviously the video is a bit slow. So I Guess I'm gonna skip the video because of time that the time I have is just left about 15 minutes to go so Share these slides later. You can play back this video the full video how to create and how to export it Once you export from here You get a source code which you still need to build because designing a mobile application is two phase The first phase is designing your application second phase is building compile it in into installable Package which is like APK or IPA APK is for Android IPA is for iPhone So that's like images and everything. I'm just doing drag and drop without writing a single line of code Okay, so now let me show you how to install Ioniq on your computer and get started and pull content from WordPress and display it So every time you update a post on WordPress that content will appear on your mobile application in your client So you no need to build your mobile application or update your mobile application again again and again So first thing is you need to install Node.js before starting with Ioniq. So just Google Node.js download Node.js Install it get it done. There's full tutorial in the Node.js website itself. Once you install Node.js You can run these two commands in your command line tool So Ioniq can be installed on Windows as well as on Macintosh. Most of my commands here are for Mac based The commands are slightly different for for Windows you can refer these commands the same command from Ioniq documentation It's just don't run pseudo in Windows. I don't think Windows shall accept pseudo. So To create your first application first of all I'm going to CD my location on my desktop and I just type Ioniq start just one line of Command so let's see how it works. This is my command line So I'm going to CD my desktop that means my application will appear on my desktop over here And I'm just starting Ioniq start. So what would you like name your project? So I'm call it same press just like WordPress. So you see there's a different options available now Whether you want to start mobile application with playable template given by Ioniq tab site menu or tutorial or Conference that are full stack conferring applications available as a sample you can just get started just pick one and Then the code going to download the codes required and now you can see the folder is created on my desktop It's just one line of code I'm just running Ioniq start and I got my application created right in here on my desktop and I'm opening this folder and this is a code structure downloaded from github and created on my On my desktop. So now there's another feature called Ioniq lab This is my second command. I'm going to run the second command Ioniq serve Dash L for lab. So what Ioniq serve does is it going to emulate the application on my computer? So I'm going to clear the code and I'm going to run Ioniq Serve dash lab and again, it's going to start a Lab environment that allow you to preview your app as you build So let's say you are changing a content on your application You can preview it directly on Ioniq lab see the browser is opened and you have a choose platform on the right top You can switch to Windows ops. No, you can switch to a iPhone or Android as well as Windows if you want to and You can build something so I'm going to open a file, which is the pages you see the pages just like HTML pages I'm going to open the home page home HTML and I'm dragging to my atom editor there You can use atom sublime or any editor your preferred text editor or even notepad if you if you're good at it So I'm just clearing my content the the the basic hello world boilerplate contents and I'm just saving that So what happened is when I save this and when I go back you see it's building automatically and it's showing me the latest The latest status of my applications So you don't need to have an iPhone to build an iPhone application anyway, so Now let's look at what press API how you can integrate your mobile application with wordpress There's a step one step two step three. So these three steps actually There's other codes actually I'm just creating a Ioniq card or Ioniq list item here and I'm just going to amend I'm going to fetch the title and the content extract from my wordpress website and In the second code, I'm going to add a HTTP module in the Angular so it can call the HTTP service and in the third step I'm adding there's a code here when you get my actual slide you can get the codes in full That's just a single page code that calling my rest API from my wordpress So this is a short video about the The three slides that I've shown in the step one and two. So I'm running again Ioniq serve dash L So now my mobile application preview will be started So here it is my mobile application and now I can I can see all my wordpress post Once I place the three codes. These are the wordpress post taken from 2017.qualilumpur.wordcram.org So this is what came Malaysia that we are organizing next month 25th in Kuala Lumpur It is taking these three posts from WordCam website and it's displaying on my mobile application So this is the actual site. You can see this is a WordCam website in Malaysia And these are the three posts I have from the home site and these are the exact three posts But there's one problem in here that when I click the details of the post So I'm getting some errors because there is no post detail page So to add a new page in Ioniq that's again just one single line command and I'm I'm attaching three different codes to get The details page is loaded. So now I'm showing you my final application which are Plus or minus just seven or eight steps to come out with this application So this is a running Ioniq serve again So it's going to compile my code and going to preview on the browser Okay, so now I have the post detail page So I'm going to click on one of the title there it is I can read the full post now Full wordpress post within my mobile application So what happened is that once I compile to my application and people install it the next time I post new mobile new post on my wordpress website They can they will be able to read it and there's a plug-in call one signal push notification If you install this in your mobile application and in your wordpress next time you make a new post Your users will get a push notification on their mobile device That's a new post available. What Camelasia just made a new post available. So make sure you subscribe to what Camelasia and Now how to export as an application once you finish your design phase with the seventh step that I outlined before this Now of course you want to export as a Installable mobile application if you want to install export it IPA is for iPhone APK is for Android. I repeat again for those just coming a bit late or on time I'm I'm early actually so To to if you are building on an ionic framework you can export into Android or Apple devices or even Windows devices. So you just build one application You export to multiple devices when you are compiling so you don't have to build for Apple You don't have to build for Android. You don't have to build for Windows unless you have money to do that so To build is once you finish your design phase now you want to compile as an installer You have two options whether you go with command line interface or you go with phone gap build phone gap build is a service by adobe You need to pay for it if you want to make a private application But if you want to make it open application, it's free or you can do this they allow you one free application So you just upload it compile it Download your installable application and delete it Or you can make it open source as well Upload it compile it delete it again. So no one else get your coat or if it's a private application again Looks like phone gap love open source. So if your open source is free So I'm gonna show you how to build using phone gap because this is the most easiest for most of you because if you're using a CLI you need to run on Mac in order to compile Apple iPhone application so you can't compile Apple iPhone application in Windows Unless you have a remote Mac that you can connect and compile it or nowadays They have a lot of hosted services that but I don't still find a way even though You are compiling phone gap to submit to play store. You still need to application loaders to submit it So somewhat Apple forcing you to buy an Apple device so there is five steps to to submit to Phone gap build to compile as a phone gap build the first of all you need to get Apple account Sorry, it's an adobee account. So make sure you just Register as adobee ID or you probably already have an adobee ID when you download Photoshop trial and keep on using it as a trial forever so Yes, that ID to log into phone build dot phone gap Com and this is the interface that you can upload the package That you have build on ionic framework I just keep one other slide before this that shows a slight modification need to make for one file Because ionic is building for ionic CLI and now you're using for phone gap So a little changes need to be made for your conflict But if you go through my site, it will be useful to understand it when you're actually doing it So now when I'm presenting I'm going to speak Skip some of the technical details. So it will be useful when actually it won't be really useful for those You're not following as a practical now So I just uploaded the package to a phone gap build and you see it is compiling uploading Once uploaded it shows my application there same press. That's my application name I don't I don't have any Icon you can actually generate icons and put it on the config file and then your icon will be there Ios is rate. Android is building now and once Android is built. Yeah, that's blue. I can click on the Android and There it is it is downloading my APK already. Yes, this APK you need to sign this APK and then you can send me to play store For iOS in order to compile iOS you need Apple certificate and provisioning files Which you will get from Apple developer dot Apple dot com If you actually paid them hundred dollars every year, you will get it. So Apple's developer account costs 99 dollar yearly Whereas Android developer account costs 25 Dollar one off so it's a lifetime account for Android and you can just build Android application Without even having certificate. You can generate your own certificate. It's just one command to generate your certificate It's called key stars in Android So you just generate key star and sign with this command and once you generate you can submit to Apple play store already but for iPhone you need to get the Key provisioning file. They didn't call it key store is provisioning file and certificate from Apple developer account And when you submit it, they're going to go through very tedious verification process probably You need to spend a lot of time to make sure your app is proper even the spellings the contents everything is proper They're going to check inch by inch before they publish it on Apple app store as in Android It's more flexible. So you just make sure you follow all the trademark guidelines security guidelines than your app is on App Store So that's how you export your app and if you are interested to see more examples I don't want to build from scratch Can I just start from something that somebody already build just like all the WordPress people we all always Just this by downloading a template and install the demo and learn from there So you can do that as well for ionic we have starters for ionic It's called starters in WordPress. We call it demo content You just import demo contents and I've an ionic. We call it starters. Just go to ionic Dot ionic framework.io and then click on the marketplace. This is marketplace. I'm not affiliated with this marketplace I don't get any commission to say this. So it's just a hint for you how to get started quickly You can just get any one of these starters and there's a lot of starters packages already available I mean application that people already build with WordPress with other CMS with many other geo location sensors cameras Just download it and run the ionic surf dash L. You got your application ready Just make changes whatever changes you need or if you are very familiar with Envato marketplace for your WordPress teams Go to code canyon search ionic starter There's a lot of ionic full-featured apps. You can just rebrand it and upload it. That's cheating anyway, so If you're interested to build a WordPress login application just now I show you how to pull content if you want to people login with the same user ID and password they use in your WordPress website You can look at this example Build by corn corner or w there a user in github It's on ionic 2 actually but ionic 2 and 3 is very identical not much change So you can just upgrade it to ionic 3 using adjacent web tokens So you can just log in using just Jason web tokens using the same username in password so your users can have a very Intractive applications, and you don't need to have a different database for the user login sensor on and There's another example available by Julian He built this amazing framework WordPress hybrid client using ionic So in this it's again a starter actually in this starter You already have all these features you can see you can pull your post pages custom post taxonomies Or else you can also search. Let's push notifications social sharing a lot of features. He's free and it's open source You can just get started your application with WordPress using this But there's one limitation in this is that this only work in Mac and Linux So if you are running on Windows probably you can use this because some of the plugins that you use is not supported by Windows command line Alright, so that's how you build your mobile application using hyonic framework and submit it to Apple or Android platforms Thank you so much. My name is Sam Suresh. You can check out the slide at samshua.sh Thank you, Sam That was a really techie techie techie. Hi techie information. I hope it's all sacked down in your heads I was really informative Thank you very much Well, yes, so you've mentioned that your slides will be available, right? All right So yes, if some of you must have missed the first part of his talk So yeah, you can refer to the slides. He will be making it available All right, so we are open to the Q&A for 10 minutes now So you have all the 10 minutes you can ask a lot of questions because it was a lot of informative talk I am hoping you have a lot of questions anybody Any questions none at all? All right Hi, thanks for the great talk. I was wondering if there's any limitations when it comes to using hyonic and HTML5 and If there are any features that you would absolutely have to do it on native for example GPS or this kind of thing, so What's your opinion on what cannot be done? Thank you. It's a good question. Actually, there's no Limitation when you go for a hybrid application. In fact, when you are looking at a hybrid native application Some of the features are actually if it's you need to write in a way that you are writing for a hybrid application as well so The only limitation is that it run in a shell So sometime when you're running a very complex process it can get crashed But I know some of airlines using Malino Air if you know heard of Malino Air Malaysia Indonesia's Indonesian company So they use this Hybrid so airlines using hybrid big market places using hybrid So you can communicate with hardware, cameras, GPS, whatever you want The only thing that I see lacking is the speed If just they have a different container just like Ionic now use a native container Compared to phone gap and other things. So when you're using Ionic you feel like it's totally like native That's beauty about Ionic Thank you, Sam. Any more questions? Yes Have you ever tried pulling from different webs where wordpress sites to go to that? app mobile app Yes, you can do that. So just like I did for home page I'm pulling from what cam a Malaysia website and I'm listed so these three codes It's within my home folder So let's say you have another folder is what cam Singapore folder is another page that a menu on your mobile phone People click on Singapore and they're looking at what cam Singapore and on that page you alter the same code But with different URL but default all WordPress sites have the rest API enabled out of the box So you don't have to do anything in your WordPress and just replace the URL with the same code in a different page There you go that page going to pull content from different different page, but you can get same Content different pages content in the same page as well Just need to make some modification in your how your JavaScript is calling that contents All right. Thank you Sam again. Thank you everyone