Annertech | @markconroy <?php function preprocess_drupalcon($presentation) { if ($drupal && $ionic) { if ($ionic[‘app’] = ‘Megalomaniac’) { create $presentation } } } ?>
Annertech | @markconroy Mark Conroy - Annertech - @markconroy
Annertech | @markconroy What We'll Talk About Today ● Some background ● Drupal as a RESTful API ● What is Ionic Framework ● Connecting the Dots ● Q&A (please go easy on me)
Annertech | @markconroy Some Background ● I decided to run as a candidate in the 2016 General Election. ● I had everything in place ...
Annertech | @markconroy ...My Poster Campaign
Annertech | @markconroy … My Facebook Page
Annertech | @markconroy … A Twitter Hashtag: #GalwayBeast
Annertech | @markconroy …an Endorsement from a fellow megalomaniac...
Annertech | @markconroy …and from someone I never heard of...
Annertech | @markconroy … except ... ● I needed an app to get my message out to my tens of followers ● Without one, I wouldn't get elected
Annertech | @markconroy What is Drupal? ● Drupal is a content management framework ● We use it to create content management systems, mostly ● It can also be used to ... ● Blah ● Blah ● Blah ● Let's skip the boring parts!
Annertech | @markconroy Drupal as a RESTful API ● In Drupal 8 this is simple ● Enable “Serialization” module ● Enable “RESTful Web Services” module – You should have some authentication as well – HTTP Basic Authentication module comes with core ● Create the views you need
Annertech | @markconroy Enable Modules
Annertech | @markconroy Create a View
Annertech | @markconroy Edit View (and then save it)
Annertech | @markconroy Admire your (uglified) JSON
Annertech | @markconroy You Now Have RESTful Data ● You now have RESTful data ● You can consume this for whatever purpose – Create a headless Drupal site – Allow it as a canonical source for other sites in your business – Differentiate a great editor experience from a great front-end user experience – Pull it into an app – our goal today!
Annertech | @markconroy What is Ionic Framework ● A hybrid web app development kit ● Based on Cordova and AngularJS ● Packages HTML, CSS, and JS into – Android apps – iOS apps ● Does NOT create Windows apps ● You need a Mac to create the final iOS app(s)
Annertech | @markconroy What is Ionic Framework ● Comes with LOADS of built-in features – Lists – Navigation/Tabs ● and classes – This helps apps to have a native look and feel – Everything can be overridden to give custom look and feel ● Comes with support for SCSS ● Has live reload built-in
Annertech | @markconroy Loads of Built-in Features
Annertech | @markconroy E.G. CSS – Card List
Annertech | @markconroy E.G. JS – Modal Dialog 1
Annertech | @markconroy E.G. JS – Modal Dialog 2
Annertech | @markconroy Create a Basic App ● Run 'ionic start [appName] [appStyle]' – appStyle can be ● blank ● tabs ● sidemenu
Annertech | @markconroy Tabs & SideMenu
Annertech | @markconroy Directory/File Structure of Ionic
Annertech | @markconroy Add New Page to your App 1) In www/js/app.js copy one of the states and edit to reflect your new info 2) Add a menu entry in www/templates/menu.html 3) Create a template file in /templates for your HTML 4) Create a controller for your state (if needed)
Annertech | @markconroy Edit States in app.js
Annertech | @markconroy Add the Menu Entry in menu.html
Annertech | @markconroy Create a template (if needed) in /templates
Annertech | @markconroy New Menu Item and View are Added
Annertech | @markconroy Create More Pages? ● Repeat the first first steps again – Add a new state – Add a template (or re-use an existing one) – Add a menu item – Eat cake ● But this will only create static content ● Each time you try to update your app in App Store or Play Store you will need to re-submit it
Annertech | @markconroy Dynamic Content ● The content created to now is static. ● Let's connect it to our Drupal RESTful service from earlier ● Means any content updated on the website will automatically update on the app ● Any new content added (such as a news/blog post) will be added to the list on your app and available for reading ● You don’t need to re-submit your app for each new piece of content
Annertech | @markconroy We’ll Create Something Like This:
Annertech | @markconroy Using Data Like This
Annertech | @markconroy Create a single page ● Edit Controller to use the $http service ● In my case I have a controller called 'PersonalCtrl' ● I use the '$http' service from AngularJS to 'GET' the JSON data ● I then use 'expressions' in my html to situate that data in my template
Annertech | @markconroy PersonalCtrl
Annertech | @markconroy Attached with HTML like this (home.html)
Annertech | @markconroy PersonalCtrl Anatomy
Annertech | @markconroy Create a Listing Page Like This:
Annertech | @markconroy Using Data Like This:
Annertech | @markconroy Create a Listing Page ● Same as for above. ● Edit correct controller ● Add in an 'ng-repeat' property to the HTML to show each item in the list ● Add click function to open each item in its own view
Annertech | @markconroy NewsCtrl
Annertech | @markconroy News List HTML
Annertech | @markconroy Listing Page Anatomy
Annertech | @markconroy Need More Data in your App? ● Repeat the above ● Again ● And again ● And again
Annertech | @markconroy Build the App ● To build, run: – ionic build android – ionic build ios ● To test, run: – ionic emulate android – ionic emulate ios
Annertech | @markconroy Deploying the App to Ionic Cloud ● You can deploy to the Ionic server – Register it with Ionic Cloud – www.ionic.io – The simply run ‘ionic upload’ command ● Ionic View app to preview it and test it ● You can send links to this to others to view and test also ● Updates to the app can be deployed from here ● You can use this as your Push Notification centre, user authentication center and more
Annertech | @markconroy Deploying the App to Apple/Google ● Create your developer account ● Jump through the hoops ● Upload your app ● Wait ● Have app accepted
Annertech | @markconroy JOIN US FOR CONTRIBUTION SPRINTS First Time Sprinter Workshop - 9:00-12:00 - Room Wicklow2A Mentored Core Sprint - 9:00-18:00 - Wicklow Hall 2B General Sprints - 9:00 - 18:00 - Wicklow Hall 2A
Annertech | @markconroy WHAT DID YOU THINK? Evaluate This Session events.drupal.org/dublin2016/schedule THANK YOU!
Annertech | @markconroy
Annertech | @markconroy THANKS FOR LISTENING! Got any Questions?
Annertech | @markconroy Q&A 1 – Sample Apps
Annertech | @markconroy Q&A 2 – Push Notifications ● Yes. You can create push notifications. – Ionic Cloud gives you 1,000,000 per month on the starter plan – Apple store apps want you to use their service ● APN – Apple Push Notification – Google Play apps want you to use their service ● Google Cloud Messaging
Annertech | @markconroy Q&A 3 – Interact with Your Phone ● Yes. Anything that you phone can do, Ionic can interact with – Geolocation – Camera – Maps – Time – Other apps
Annertech | @markconroy Q&A 4 – Extending with Plugins ● Yes. You can extend it with custom plugins if you wish ● You can also use any cordova plugins that are available
Annertech | @markconroy Q&A 5 – Ionic 2 && Angular 2? ● Angular 2 has just been released ● Ionic 2 is just about to be released ● I don’t have much more information
Recommend
More recommend
