<?php function preprocess_drupalcon($presentation) { if ($drupal && $ionic) { if ($ionic[ app ] = Megalomaniac ) { create $presentation } } }?

Transcription

1 <?php function preprocess_drupalcon($presentation) { if ($drupal && $ionic) { if ($ionic[ app ] = Megalomaniac ) { create $presentation } } }?>

2 Mark Conroy -

3 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)

4 Some Background I decided to run as a candidate in the 2016 General Election. I had everything in place...

5 ...My Poster Campaign

6 My Facebook Page

7 A Twitter Hashtag: #GalwayBeast

8 an Endorsement from a fellow megalomaniac...

9 and from someone I never heard of...

10 except... I needed an app to get my message out to my tens of followers Without one, I wouldn't get elected

11 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!

12 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

13 Enable Modules

14 Create a View

15 Edit View (and then save it)

16 Admire your (uglified) JSON

17 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!

18 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)

19 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

20 Loads of Built-in Features

21 E.G. CSS Card List

22 E.G. JS Modal Dialog 1

23 E.G. JS Modal Dialog 2

24 Create a Basic App Run 'ionic start [appname] [appstyle]' appstyle can be blank tabs sidemenu

25 Tabs & SideMenu

26 Directory/File Structure of Ionic

27 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)

28 Edit States in app.js

29 Add the Menu Entry in menu.html

30 Create a template (if needed) in /templates

31 New Menu Item and View are Added

32 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

33 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

34 We ll Create Something Like This:

35 Using Data Like This

36 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

37 PersonalCtrl

38 Attached with HTML like this (home.html)

39 PersonalCtrl Anatomy

40 Create a Listing Page Like This:

41 Using Data Like This:

42 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

43 NewsCtrl

44 News List HTML

45 Listing Page Anatomy

46 Need More Data in your App? Repeat the above Again And again And again

47 Build the App To build, run: ionic build android ionic build ios To test, run: ionic emulate android ionic emulate ios

48 Deploying the App to Ionic Cloud You can deploy to the Ionic server Register it with Ionic Cloud 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

49 Deploying the App to Apple/Google Create your developer account Jump through the hoops Upload your app Wait Have app accepted

50 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

51 WHAT DID YOU THINK? Evaluate This Session events.drupal.org/dublin2016/schedule THANK YOU!

52

53 THANKS FOR LISTENING! Got any Questions?

54 Q&A 1 Sample Apps

55 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

56 Q&A 3 Interact with Your Phone Yes. Anything that you phone can do, Ionic can interact with Geolocation Camera Maps Time Other apps

57 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

58 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