Tek13 - Creating Mobile Apps with PHP and Symfony
Upcoming SlideShare
Loading in...5
×
 

Tek13 - Creating Mobile Apps with PHP and Symfony

on

  • 3,435 views

In this talk we will look at some of the reasons on why mobile applications are important, including some history on the mobile market. Then we will look at some frameworks that help develop ...

In this talk we will look at some of the reasons on why mobile applications are important, including some history on the mobile market. Then we will look at some frameworks that help develop high-quality mobile apps and we will showcase a mobile app developed with PHP and Symfony2, including the source code which will be available on Github.

Statistics

Views

Total Views
3,435
Views on SlideShare
3,429
Embed Views
6

Actions

Likes
7
Downloads
29
Comments
0

1 Embed 6

http://librosweb.es 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tek13 - Creating Mobile Apps with PHP and Symfony Tek13 - Creating Mobile Apps with PHP and Symfony Presentation Transcript

  • Creating Mobile Apps withPHP & SymfonyPablo Godel @pgodelhttp://joind.in/8159Tek13, Chicago, May 15 2013Wednesday, May 15, 13
  • ⁃ Born in Argentina, living in the US since 1999⁃ PHP & Symfony developer⁃ Founder of the original PHP mailing list in spanish⁃ Master of the parrilla⁃ Co-founder of ServerGroveWho am I?!Wednesday, May 15, 13
  • Wednesday, May 15, 13
  • Wednesday, May 15, 13
  • ⁃ Founded ServerGrove Networks in 2005⁃ Provider of web hosting specialized in PHP,Symfony, ZendFramework, MongoDB and others⁃ Servers in USA and Europe!Who am I?!Wednesday, May 15, 13
  • ⁃ Very active open source supporter through codecontributions and usergroups/conference sponsoringCommunity is our TeacherWednesday, May 15, 13
  • Why?Mobile Apps - WhyWednesday, May 15, 13
  • •More & more people have access to Internet throughmobile devices•Devices are more powerful & versatile•Internet access is faster and more reliable•Users demand services and applications at all times &and the go•Don’t give advantages in an ultra-competitive market•Your competition is already using it or implementing itMobile Apps - WhyWednesday, May 15, 13
  • Some numbers...Mobile Apps - WhyWednesday, May 15, 13
  • •Estimated 6.5 billion mobile subscriptions globally (over90%)•1.7 billion mobile phones sold in 2012•1 billion users in China alone•321M subscriptions in the US (over 100%)•Devices range from phone and tablets to door locks,thermostats, etc.Mobile Apps - WhyWednesday, May 15, 13
  • How did we get here?Mobile Apps - WhyWednesday, May 15, 13
  • Let’s see some history...Mobile Apps - HistoryWednesday, May 15, 13
  • First commercial cellular network launched inJapan )1G - first generation(1979Mobile Apps - HistoryWednesday, May 15, 13
  • The “mobile” telephoneMotorola DynaTAC -aka “The Boot”cost: US$ 3995weight:793g / 28 ounces1983 Motorola DynaTACMobile Apps - HistoryWednesday, May 15, 13
  • Common Standard to connect networks andapps•WAP client•Server sends WML (XML)WAP - Wireless Application Protocol<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml" ><wml><card id="main" title="First Card"><p mode="wrap">This is a sample WMLpage.</p></card></wml>1997Mobile Apps - HistoryWednesday, May 15, 13
  • WAP/WMLMobile Apps - HistoryWednesday, May 15, 13
  • WAP/WMLMobile Apps - HistoryWednesday, May 15, 13
  • WAP/WMLMobile Apps - HistoryWednesday, May 15, 13
  • Developer:WAP/WMLMobile Apps - HistoryWednesday, May 15, 13
  • User:WAP/WMLMobile Apps - HistoryWednesday, May 15, 13
  • 2007...Mobile Apps - HistoryWednesday, May 15, 13
  • •Revolutionizedthe market ofmobile telephony•Safari Web ClientiPhone2007Mobile Apps - HistoryWednesday, May 15, 13
  • iPhone App Store2007Mobile Apps - HistoryWednesday, May 15, 13
  • First Android Device2008Mobile Apps - HistoryWednesday, May 15, 13
  • iPad2010Mobile Apps - HistoryWednesday, May 15, 13
  • So what does allthis mean?Mobile Apps - HistoryWednesday, May 15, 13
  • The PC is not deadMobile Apps - HistoryThe Mobile GenerationWednesday, May 15, 13
  • The PC is not dead, yet?The Mobile GenerationMobile Apps - HistoryWednesday, May 15, 13
  • Information is now consumed on phones and tabletsThe Mobile GenerationMobile Apps - HistoryWednesday, May 15, 13
  • And this is just the beginning...The Mobile GenerationMobile Apps - HistoryWednesday, May 15, 13
  • Symfony?Mobile Apps - SymfonyWednesday, May 15, 13
  • What is Symfony?Mobile Apps - SymfonyWednesday, May 15, 13
  • Definition by Fabien Potencier:⁃ Symfony2 is a reusable set of standalone,decoupled, and cohesive PHP componentsthat solve common web developmentproblems.⁃ Based on these components, Symfony2 isalso a full-stack web framework.http://fabien.potencier.org/article/49/what-is-symfony2Mobile Apps - SymfonyWednesday, May 15, 13
  • SilexThe PHP/‘Symfony’ micro-frameworkhttp://silex.sensiolabs.org/Mobile Apps - SymfonyWednesday, May 15, 13
  • 25 high qualitycomponentshttp://symfony.com/doc/current/components/index.htmlMobile Apps - SymfonyWednesday, May 15, 13
  • • DependencyInjection• EventDispatcher• HttpFoundation• DomCrawler• ClassLoader• CssSelector• HttpKernel• BrowserKit• Templating• Translation• Serializer• Validator• Security• Routing• Console• Process• Config• Finder• Locale• Yaml• FormComponents:GitHub: http://github.com/symfonyMobile Apps - SymfonyWednesday, May 15, 13
  • Proyects using Symfony2 components:• Silex: BrowerKit, CssSelector, DomCrawler, EventDispatcher, HttpFoundation,HttpKernel, Routing, Form, Translation, Validator• Goutte: BrowserKit, DomCrawler, CssSelector, Process, ClassLoader, Finder• Behat: Console, DependencyInjection, EventDispatcher, Finder, Yaml, Config,Translation• Doctrine2: Console, Yaml Propel2: Console, ClassLoader, Yaml• PHPUnit: Yaml• FLOW3: Yaml• Midguard CMS: most of them in their next version?• phpBB 4: most of them• Drupal 8: ClassLoader, HttpFoundation, HttpKernel, and more• EZ Publish• Laravel• Composer• ...Mobile Apps - SymfonyWednesday, May 15, 13
  • Do you know or usedsymfony 1.x?Mobile Apps - SymfonyWednesday, May 15, 13
  • Forget it...Mobile Apps - SymfonyWednesday, May 15, 13
  • The only thing incommon betweensymfony 1.x & Symfony2is the name...Mobile Apps - SymfonyWednesday, May 15, 13
  • OK... the web folder too...Mobile Apps - SymfonyWednesday, May 15, 13
  • Why Symfony?Mobile Apps - SymfonyWednesday, May 15, 13
  • •Provides solid base to build good HTTP &RESTful APIs•Twig makes it easy to build templates formobile devices•Re-use code for different devices thanks totemplates, controllers and routingMobile Apps - SymfonyWednesday, May 15, 13
  • 1.Native applications2.SMS applications & Voice applications3.Web aplicaciones4.Hybrid applications (mix native, web, others)Mobile Apps - TypesWednesday, May 15, 13
  • Native ApplicationsMobile Apps - TypesWednesday, May 15, 13
  • •iPhone - Objective-C•Android - Java•Windows Mobile - .NET•Frameworks multi-platform⁃ PhoneGap http://phonegap.com⁃ rhomobile http://rhomobile.com⁃ Appceledator http://appcelerator.com⁃ Corona http://anscamobile.com/corona/Mobile Apps - Native AppsWednesday, May 15, 13
  • Common uses:•send emails & messages in general•loading of profile data•authentication & authorization•chatsMobile Apps - Native AppsPHP does not run in thesedevices but native apps need toretrieve and store data fromservers.Wednesday, May 15, 13
  • Some considerations:•Design API (RESTful, HTTP, XML-RPC) earlyon at the development cycle•An API can be used for other types of clients(ej. Desktop como Adobe AIR)•Re-use controllers and use _format togenerate different content types (XML, JSON,etc)Mobile Apps - Native AppsWednesday, May 15, 13
  • Build APIs with Symfony2- FOSRestBundlehttps://packagist.org/packages/friendsofsymfony/rest-bundle- ApiDocBundlehttps://packagist.org/packages/nelmio/api-doc-bundleMobile Apps - Native AppsBuild APIs with Silex- responsible-service-provider- silex-skeleton-restWednesday, May 15, 13
  • Push NotificationsServer sends messages to mobile devices- AppleApnPushBundle- RMSPushNotificationsBundle- DABSquaredPushNotificationsBundle- ZendServiceGoogleGcm- ZendServiceAppleApnsMobile Apps - Native AppsWednesday, May 15, 13
  • SMS (and voice) ApplicationsMobile Apps - SMS AppsWednesday, May 15, 13
  • Symfony can send/receive text messagesCommon uses:- Alerts- Chats- Electronic payments- Ads- Two-factor authenticationMobile Apps - SMS AppsWednesday, May 15, 13
  • Mobile Apps - SMS AppsWednesday, May 15, 13
  • SMS Gateway providers:•Twilio•Nexmo•Clickatell•BulkSMSMobile Apps - SMS AppsWednesday, May 15, 13
  • MMS are multimedia messages with text,images, video, audio.Common uses:- Photo processing- Sending/scanning 2D barcodesMobile Apps - SMS/MMS Appshttps://github.com/endroid/QrCodehttps://github.com/endroid/EndroidQrCodeBundlehttps://github.com/mkoppanen/php-zbarcodeWednesday, May 15, 13
  • Web ApplicationsMobile Apps - Web AppsWednesday, May 15, 13
  • Mobile Apps - Web Appshttp://forecast.ioWednesday, May 15, 13
  • Frameworks HTML / Javascript• iuihttp://code.google.com/p/iui/ (one of the first ones)• JQuery Mobilehttp://jquerymobile.com/ (Open source)• JQTouchhttp://jqtouch.com/ (Open source)• DHTMLX Touchhttp://dhtmlx.com/touch/ (Open source)• The M Projecthttp://www.the-m-project.org/ (Open source)• Sensa Touchhttp://www.sencha.com/products/touch/Mobile Apps - Web AppsWednesday, May 15, 13
  • Mobile Apps - Web AppsjQuery MobileWednesday, May 15, 13
  • Supports:- IOS (iPhone/iPad)- Android- Blackberry- Windows Phone- palm webOS- symbianjQuery MobileMobile Apps - Web AppsWednesday, May 15, 13
  • jQuery MobileMobile Apps - Web AppsWednesday, May 15, 13
  • •Based on jQuery•Light (40KB)•HTML5•Accesible (works on screen readers)•Events, plugins, themes•Lots of documentationjQuery Mobile - FeaturesMobile Apps - Web AppsWednesday, May 15, 13
  • •Page management•Transitions•Dialog windows•Links and buttons•Navigation bars•Header / Footer•Forms•ListsMobile Apps - Web AppsjQuery Mobile - FeaturesWednesday, May 15, 13
  • jQuery Mobile - Page management<body><!-- Start of first page --><div data-role="page" id="foo">! <div data-role="content">!! ! <p>Im first in the source order so Im shown as the page.</p>!!! ! <p>View internal page called <a href="#bar">bar</a></p>!! </div><!-- /content --></div><!-- /page --></body>Mobile Apps - Web AppsWednesday, May 15, 13
  • <body><!-- Start of first page --><div data-role="page" id="foo">! <div data-role="content">!! ! <p>View internal page called <a href="#bar">bar</a></p>!! </div><!-- /content --></div><!-- /page --><!-- Start of second page --><div data-role="page" id="bar">! <div data-role="content">!! ! <p><a href="#foo">Back to foo</a></p>!! </div><!-- /content --></div><!-- /page --></body>Mobile Apps - Web AppsjQuery Mobile - Page managementWednesday, May 15, 13
  • jQuery Mobile - Transitions<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a><a href="foo.html" data-rel="dialog" data-transition="slidedown">Open dialog</a><a href="foo.html" data-rel="dialog" data-transition="flip">Open dialog</a><a href="foo.html" data-rel="dialog" data-transition="fade">Open dialog</a>Mobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile - DialogsMobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile - Navigation bars<div data-role="header" data-position="inline">! <a href="index.html" data-icon="delete">Cancel</a>! <h1>Edit Contact</h1>! <a href="index.html" data-icon="check">Save</a></div>Mobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile - FormsMobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile - FormsMobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile - ListsMobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile & SymfonyMobile Apps - Web AppsWednesday, May 15, 13
  • TemplatesMobile Apps - Web AppsWednesday, May 15, 13
  • <!DOCTYPE html><html><head> <title>Podisum by ServerGrove</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body>{% block content %}{% endblock %}</body></html>layout.html.twigMobile Apps - Web AppsWednesday, May 15, 13
  • {% extends "layout.html.twig" %}{% block content %}<div data-role="page" id="home"><div data-role="header"><h1>Podisum</h1></div><div data-role="content"><1-- ... --></div></div>index.html.twigMobile Apps - Web AppsWednesday, May 15, 13
  • <div data-role="header" data-theme="b"><h1>{{title}}</h1><a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse"class="ui-btn-right jqm-home" data-ajax="false">Home</a></div>header.mhtml.twigMobile Apps - Web AppsWednesday, May 15, 13
  • {% extends "layout.html.twig" %}{% block content %}{% include “header.html.twig’ %}<div data-role="content"><1-- ... --></div></div>index.html.twigMobile Apps - Web AppsWednesday, May 15, 13
  • RoutingMobile Apps - Web AppsWednesday, May 15, 13
  • home:pattern: /defaults: { _controller: DemoBundle:Default:index }talks:pattern: /talks.{_format}defaults: { _controller: DemoBundle:Talk:index, _format: html }requirements:_format: html|xml|icstalk:pattern: /talk/{slug}defaults: { _controller: DemoBundle:Talk:talk }jQuery Mobile & Symfony / RoutingMobile Apps - Web AppsWednesday, May 15, 13
  • Mobile Apps - Web AppsjQuery Mobile & Symfony / Routinghome:pattern: /mdefaults: { _controller: DemoBundle:Default:index,_format:mhtml }talks:pattern: /m/talksdefaults: { _controller: DemoBundle:Talk:index, _format:mhtml }talk:pattern: /m/talk/{slug}defaults: { _controller: DemoBundle:Talk:talk, _format:mhtml }Wednesday, May 15, 13
  • Mobile Apps - Web AppsjQuery Mobile & Symfony / Routing(option 2)home:pattern: /mdefaults: { _controller: DemoBundle:Default:index, mobile:true }talks:pattern: /m/talksdefaults: { _controller: DemoBundle:Talk:index, mobile:true }talk:pattern: /m/talk/{slug}defaults: { _controller: DemoBundle:Talk:talk, mobile:true }Wednesday, May 15, 13
  • m_home:pattern: /mdefaults: { _controller: DemoBundle:Mobile:index }Mobile Apps - Web AppsjQuery Mobile & Symfony / Routing(option 3)Wednesday, May 15, 13
  • Controllers & ActionsMobile Apps - Web AppsWednesday, May 15, 13
  • jQuery Mobile & Symfony / Controller & Actionpublic function indexAction(){$em = $this->get(doctrine)->getEntityManager();// ...$format = $this->get(request)->getRequestFormat();return $this->render(DemoBundle:Default:index..$format..twig, array(// ...));}Mobile Apps - Web AppsWednesday, May 15, 13
  • ExtrasMobile Apps - Web Apps•Detect Mobile deviceshttp://mobiledetect.net/•Symfony2 + MobileDetectBundle•Silex + MobileDetectServiceProviderWednesday, May 15, 13
  • TestingMobile Apps - Web AppsWednesday, May 15, 13
  • •Symfony2 functional tests for HTML pages•For AJAX other testing methods may be used:•Selenium RC•BehatMobile Apps - Web AppsWednesday, May 15, 13
  • DEMOS !Podisum:http://github.com/pgodel/podisumsunshinephphttp://m.sunshinephp.com/Control Panel:•https://control.servergrove.com/•https://control.servergrove.com/mlogin: demo@servergrove.compassword: demoMobile Apps - Web AppsWednesday, May 15, 13
  • Podisum http://github.com/pgodel/podisumGenerates summaries of Logstash eventsSilex appTwig templatesMobile versionMobile Apps - Web AppsWednesday, May 15, 13
  • PodisumApache access_log LogstashRedisPodisum redis-clientMongoDBPodisum Silex AppWeb ClientMobile Apps - Web AppsWednesday, May 15, 13
  • Hybrid ApplicationsMobile Apps - Hybrid AppsWednesday, May 15, 13
  • Applications that combine web, sms,voice and native aspectsFramework PhoneGap- Build apps with HTML & JavaScript- Integrates with XCode- Compiles app into native code- Access to accelerometer, camera, geolocation,notifications and moreMobile Apps - Hybrid AppsWednesday, May 15, 13
  • Questions?Mobile AppsWednesday, May 15, 13
  • Feedback Please:http://joind.in/8159Thank you!Twitter: @pgodelIRC Freenode: pgodelSource: https://github.com/pgodel/podisumSlides: http://slideshare.net/pgodelMobile Apps - Thanks!Wednesday, May 15, 13