YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

<?phpfunctionpreprocess_drupalcon($presentation) { if ($drupal && $ionic) { if ($ionic[‘app’] = ‘Megalomaniac’) { create $presentation } }}?>

Page 2: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Mark Conroy- Annertech -

@markconroy

Page 3: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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)

Page 4: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Some Background

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

Page 5: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

...My Poster Campaign

Page 6: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

… My Facebook Page

Page 7: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

… A Twitter Hashtag: #GalwayBeast

Page 8: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

…an Endorsement from a fellowmegalomaniac...

Page 9: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

…and from someone I never heard of...

Page 10: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

… except ...

● I needed an app to get my message out to my tens offollowers

● Without one, I wouldn't get elected

Page 11: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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!

Page 12: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 13: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Enable Modules

Page 14: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Create a View

Page 15: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Edit View (and then save it)

Page 16: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Admire your (uglified) JSON

Page 17: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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-enduser experience

– Pull it into an app – our goal today!

Page 18: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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)

Page 19: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 20: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Loads of Built-in Features

Page 21: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

E.G. CSS – Card List

Page 22: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

E.G. JS – Modal Dialog 1

Page 23: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

E.G. JS – Modal Dialog 2

Page 24: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Create a Basic App

● Run 'ionic start [appName] [appStyle]'– appStyle can be

● blank ● tabs● sidemenu

Page 25: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Tabs & SideMenu

Page 26: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Directory/File Structure of Ionic

Page 27: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Add New Page to your App

1) In www/js/app.js copy one of the states and edit to reflectyour 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)

Page 28: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Edit States in app.js

Page 29: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Add the Menu Entry in menu.html

Page 30: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Create a template (if needed) in /templates

Page 31: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

New Menu Item and View are Added

Page 32: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 33: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 34: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

We’ll Create Something Like This:

Page 35: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Using Data Like This

Page 36: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 37: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

PersonalCtrl

Page 38: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Attached with HTML like this (home.html)

Page 39: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

PersonalCtrl Anatomy

Page 40: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Create a Listing Page Like This:

Page 41: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Using Data Like This:

Page 42: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 43: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

NewsCtrl

Page 44: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

News List HTML

Page 45: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Listing Page Anatomy

Page 46: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Need More Data in your App?

● Repeat the above● Again● And again● And again

Page 47: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Build the App

● To build, run:

– ionic build android

– ionic build ios● To test, run:

– ionic emulate android

– ionic emulate ios

Page 48: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 49: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Deploying the App to Apple/Google

● Create your developer account● Jump through the hoops● Upload your app● Wait● Have app accepted

Page 50: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

JOIN US FORCONTRIBUTION 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

Page 51: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

WHAT DID YOU THINK?

Evaluate This Session

events.drupal.org/dublin2016/schedule

THANK YOU!

Page 52: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Page 53: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

THANKS FOR LISTENING!

Got any Questions?

Page 54: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

Annertech | @markconroy

Q&A 1 – Sample Apps

Page 55: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 56: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 57: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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

Page 58: function preprocess drupalcon($presentation) { if ($drupal ... · Based on Cordova and AngularJS ... – Ionic Cloud gives you 1,000,000 per month on the starter plan

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


Related Documents