.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =============== EXT: iPhone CMS =============== :Created: 2010-06-03T13:52:47 :Changed: 2011-03-24T21:36:33 :Classification: lp_iphone :Keywords: iphone, lp_iphone, iPhone-app, iPhone-CMS :Author: Gabriel Schreiber :Email: t3phone@mx.lagopixel.com :Info 4: :Language: en |img-1| |img-2| EXT: iPhone CMS - lp\_iphone .. _EXT-iPhone-CMS: EXT: iPhone CMS =============== Extension Key: lp\_iphone Language: en Keywords: iphone, lp\_iphone, iPhone-app, iPhone-CMS Copyright 2000-2010, Gabriel Schreiber, For more informaiton see also `http://lagopixel.com/iphone.html `_ and the wiki-page at: `http://t3phone.lagopixel.com/wiki `_ This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `EXT: iPhone CMS 1 <#__RefHeading__4947_377492925>`_ **`Introduction 3 <#__RefHeading__4949_377492925>`_** `What does it do? 3 <#__RefHeading__4951_377492925>`_ `Screenshots 3 <#__RefHeading__4953_377492925>`_ **`Users manual 5 <#__RefHeading__4955_377492925>`_** **`FAQ 6 <#__RefHeading__5288_377492925>`_** `Reference 6 <#__RefHeading__4967_377492925>`_ **`Further information 8 <#__RefHeading__1317_1947738088>`_** **`Tutorial 9 <#__RefHeading__4969_377492925>`_** `Creating a iPhone-App with the lp\_iphone extension walk-through 9 <#__RefHeading__4971_377492925>`_ **`Known problems 14 <#__RefHeading__5009_377492925>`_** **`ChangeLog 15 <#__RefHeading__5013_377492925>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ With this plugin you can create **native** iPhone-Apps using typo3 content. The content can be provided as if you would create a website and then sent to lagopixel.com which creates a native iPhone app such as the “Bodensee”-app (Link: `http://itunes.apple.com/app/bodensee/id339088154 `_ ). .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-3| Image 1 – Setup of the Pagetree |img-4| Image 2 – Kategories in rootlevel mapped to iPhone content .. _Users-manual: Users manual ------------ - Install the extension using the extension manager - Create a seperate pagetree for the iPhone content: Startingpoint for the content (PID has to be set in CONSTANTS) - Create a sysfolder for (fe\_)users (is needed for tracking, comments and checkins). Set the PID for this sysfolder in the CONSTANTS editor. Both fields (USER\_PID and KONFIGURATION\_PID) can point to this same sysfolder. - To set up custom icons, admin-email and default icon put a plugin (t3Phone Configuration) on this page and fill it with content that fits your needs. - Create a pagetree with content on the leaf-pages. See also “creating content” - Preview the content (put type=80 to your URL – this will show only the data but not the actual look on the iPhone) - Look at the XML-Output (preferably in Firefox to see the XML-Tree). Make sure you also look at “type=20” and “type=10”. These (escpecially “type=10”) may take a while to render, depending on the amount of pages and pictures you have got in the pagetree. - When you think you might want to make an iPhone/iPad app of the content, go to lagopixel.com and create an account. After doing so you can download the XCode project as .zip file that allows you to create an iPhone/iPad app from your data of the typo3 content. For examples of apps that use this system go to `http://lagopixel.com/apps.html `_ - If you do not whish to do this on your own (e.g. if you don't wish to dig deeper into iPhone programming) contact lagopixel to do the demos and/or submission process to the appstore for you. .. _FAQ: FAQ --- - *Can I see a preview of the iPhone-App on a webpage?* No and Yes. Currently there is no “iPhone sumulator” available for the web (on a webpage). However if you use the “type=80” you can browse through the data and even customize this view with a template - *Do I have to have my own typo3 installation?* No. There is hosting, guidance and setup available at `http://lagopixel.com `_ . If you drop us a note we will be happy to set up an account that fits the needs of the iPhone extension within notime with no extra fee. - *Can I use lp\_iphone with an existing typo3 installation?* Yes you can. Jut install the plugin and put “lp\_iphohne”-items on the pagetree or create a new one which is only for the iPhone-backend. You can put iPhone content elements on regular pages and have it all in the same pagetree. Just make sure that there is only one “iPhone-item” on one page. You can use existing content elements (Text, Image and Text/Image) and change the CType to “iPhone item”. This way you can “reuse” the text and images already that are already there. - *When I use the extension on the same pagetree my website is broken (shows xml output)!?* This happens because the extension uses *type=0* as default. You can change this in the constant editor setting Ohter *TypeNum [TYPENUM\_XML]* to something else than “0” (for example “5”). This will fix your output. - *When I use an existing typo3 installation that has already some (website-) content, can I “reuse” this content?* Yes. Install the plugin and set the root (“START\_DES\_SEITENBAUMS”) in the constant editor to the PID where you want to have the iPhone content to start. You then can copy existing elements (or crate new ones) you want to (re-)use to this pagetree. You can change exitsting “Text”, “Text with Image” and “Image” content objects to “iPhone item” to “reuse” the text and images already provided there. - *How does the update-mechanism work?* When the iPhone queries the URL it queries the “type=20”. This returns a XML-document with the pageIDs, the contentIDs and the timestamp to each of them. The iPhone- App checks if and which one was changed and querys this one with the “id=xxx” query. Only the items that have a newer time stamp than the saved ones get updated. - Can I set a different typeNum than 0 for the XML-output?Yes, if you want to have a website on the same pagetree this might be a good idea. To do this you can set the typeNum in the Constant Editor (“TYPENUM\_XML”). - *Can I disable the commenting-system in an app?* Yes. There is a setting in the app-configuration (XCode) where you can turn it off. When we are doing this for you, just let us know. - *Can I disable the location information in the iphone-App?* Yes. Just do not fill in the location information and the app will not use it. - *Can I mix non-location content and location content?* Yes you can mix both types. When there is no location information in the backend the app will show different things according to the information not being there. .. _Reference: Reference ^^^^^^^^^ Constants that have to be set in the constant editor (iphone) after including the templates at “Include static (from extensions) → iPhone basic template” .. ### BEGIN~OF~TABLE ### .. _START-DES-SEITENBAUMS: START\_DES\_SEITENBAUMS """"""""""""""""""""""" .. container:: table-row Property START\_DES\_SEITENBAUMS Data type PID Description PID for entry to pagetree. Put the PID for the root node of the content that is going to be shown in the iPhone app Default 3 (has to be changed!) .. _KONFIGURATION-PID: KONFIGURATION\_PID """""""""""""""""" .. container:: table-row Property KONFIGURATION\_PID Data type PID Description PID for iPhone(frontend-)Users. PID of the Systemfolder that will hold the frontend-users which will be created by the commenting system of the iPhone app Default 560 (has to be changed!) .. _USER-PID: USER\_PID """"""""" .. container:: table-row Property USER\_PID Data type PID Description PID of page with config element. Put the PID of the page that holds the configuration-element here. Default 59 (has to be changed!) .. _googlemaps-api-key: googlemaps\_api\_key """""""""""""""""""" .. container:: table-row Property googlemaps\_api\_key Data type string Description Google-Maps API key for backend imagepicker and preview in the browser. It must match the domain on which the system resides. Default ABQIAAAAC-uzOT2nN4cYyz\_Ts\_8djhTrLjPNI4cXeu0H2v-Ci8Z9yR- N2BSOAv3z4l3fwof4jrjS1V0YN3ljwA (has to be changed!) .. _googlemaps-url: googlemaps\_url """"""""""""""" .. container:: table-row Property googlemaps\_url Data type string Description URL that is associated with the Google-Maps API key. Without the right setting the location-picker will show an error-message Default appmacher.com (has to be changed!) .. _defaultLatLng: defaultLatLng """"""""""""" .. container:: table-row Property defaultLatLng Data type wrap Description Default Lat/Lng for Location-picker[defaultLatLng] Around this Lat/Lng the location-picer will center Default 33.81089\|-17.918772 (Location for Disneyland – can/should be changed) .. _TYPENUM-XML: TYPENUM\_XML """""""""""" .. container:: table-row Property TYPENUM\_XML Data type int Description typeNum definition for items can be set if other than 0 (default) is required. E.g. if you want to show a webpage on the same pagetree. Default .. _HTML-TYPE-NUM: HTML\_TYPE\_NUM """"""""""""""" .. container:: table-row Property HTML\_TYPE\_NUM Data type int Description Default 80 .. ###### END~OF~TABLE ###### Constants that have to be set in the constant editor (iphone) after including the templates at “Include static (from extensions) → iPhone comments or iPhone checkin” .. ### BEGIN~OF~TABLE ### .. _encryptionKey: encryptionKey """"""""""""" .. container:: table-row Property encryptionKey Data type string Description Secret key for posting comments from the iPhone to the server and registering users. This has to be compiled into the app. If set wrong, commenting system will not work. You have to provide this secret key to the lagopixel-team. Default .. ###### END~OF~TABLE ###### .. _generated: ((generated)) """"""""""""" .. _Example: Example ~~~~~~~ This is how the CONSTANTS of your tempalate in the root-folder for the iPhone content could look like. Don't forget to change the values according to your installation: :: START_DES_SEITENBAUMS = 4 USER_PID = 561 KONFIGURATION_PID = 5 googlemaps_url = lagopixel.com googlemaps_api_key = ABQIAAAAC-uzOT2nN4cYyz_Ts_8djhTrLjPNI4cXeu0H2v-Ci8Z9yR-N2BSOAv3z4l3fwof4jrjS1V0YN3ljwA defaultLatLng = 3.81089|-17.918772 encryptionKey = 12AB67 .. _Further-information: Further information ------------------- - For more information see also the t3phone- **wiki** at `http://t3phone.lagopixel.com/ `_ - See a reference to the page types (Parameter: type=xxx) on the wiki: `http://t3phone.lagopixel.com/wiki/Page\_Types `_ - If you are planning to implement this for android, please let us know so we can give you more detailed information. .. _Tutorial: Tutorial -------- .. _Creating-a-iPhone-App-with-the-lp-iphone-extension-walk-through: Creating a iPhone-App with the lp\_iphone extension walk-through ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you want to see an app that was created with the system you can download the app called “Bodensee” from the appsotre (here is the link: `http://itunes.apple.com/app/bodensee/id339088154 `_ ). If you don't want to pay the fee for downloading, please send me an email and I will give you a promo-code (works only on the US-appstore). You can also watch the youtube video to get an impression of what the app will do. Please note that the app as well as the video does not show the commenting system since this is a new feature and not implemented in the app yet (We will implement this in the next updates of our apps though) First you install the extension Go to `http://code.google.com/apis/maps/signup.html `_ and get an api key for your domain. |img-5| Look for a page that will be your rootpage. Name it whatever you like. In this page you will create the pagetree for your content. If you have an exiting pagetree with content elements like “Text”, “Image” or “Text with Image” you can copy it to the new location (you also can use this one but this is a bit more tricky to handle when you work with multiple backed useres). In the following image we named it “Categories” |img-6| Set up a system folder which will hold the records for configuring the app and for the users (if you want to use comments or checkins) generated by the commenting system and used by the checkins. |img-7| Put a template on your page that contains the root-folder and include the static templates |img-8| Now you can start adding content: Start making a new page. |img-9| Go to the new page and edit the pageporperties. There you enter a pagetitle (like on a “regualar” typo3 web installation), and then enter “Categorie description” for the subtitle of an item in the iPhone menu and “Categorie Image” for the preview thumbnail which shows on the table-views on the iPhone. If the “Categoriy image” fild is left blank it will show the thumbnail of the image that resides on the next content page in the “image” field (if there is none it will show the deafault icon that is set in the configurations sysfolder) |img-10| In the leafs of the pagetree are the actual items that contain the content. To fill the content you will have to put an “iPhone item”, which is a content element on this page. To do this, do the same as you would if you would crate an text or text/image content element and then change the type to “iPhone backend” Once you see all the fields of the “iPhone backend” item you can fill them as you would a regular typo3 content element. |img-11| Fields on “general” tab maps to the following items as you can see in the pictures |img-12| Here you can see the mapping of the “iPhone sepecific items” |img-13| |img-14| Location: pick a location with the location-picker wizard Save item Repeat these steps to generate the desired pagetree Set the configuration in the sysfolder: Go to the sysfolder and add the following items as you would add a new record on a page: iconconfig, default image, feedback email. Add a “image with text” content element on the sysfolder. This will be used for the “about” section in the app If you want to see a very basic preview you can do this by adding the parameter “type=80” to the URL (so it would look something like this: `www.yourdomain.com/index.php?id=123&type=80 `_ ) You can test the various output by calling the pages in a browser and adding the types (found here: `http://t3phone.lagopixel.com/wiki/Page\_Types `_ ) to the URL. If you have all data set (or before that) you can contact us at `www.lagopixel.com `_ and request a preview app. For that we need you deviceID from your phone or your valid developer signature form apple. .. _Known-problems: Known problems -------------- Only use only ONE “iPhone backend content element” on a leaf page. If there are more it might brake the installation. .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _2-0-0: 2.0.0 ^^^^^ .. container:: table-row Version 2.0.0 Changes Initial release (Set to version 2.0 on accident – sorry!) .. _2-1: 2.1 ^^^ .. container:: table-row Version 2.1 Changes \* Rearranged the configuration as a flexform plugin item (this requires action if you already have a working installation, but it is worth it) \* Added “checkins” (“I was here” feature like Foursquare / Gowalla) to the backend. \* Regular content elements can now be mixed in the same pagetree as the iPhone items \* Added sorting field to XML-output. Which this it is now possible to have the items in the same order as they are sorted from the typo3 backend. \* Added icons for comment- and checkin records in the backend. \* Added a *iPhone HTML Element* that you can use to show a Webpage instead of a iPhone-item. \* Changed preview iconsize to 114x114 in typoscript to get the great quality on the iPhone 4 retina display. \* Lot's of small improvements especially on the typoscript \* Updated documentation \* Adaptions for improvements of the iPhone frontend. .. ###### END~OF~TABLE ###### |img-2| 15 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 136 .. :id: Grafik15 .. :name: Grafik15 .. :width: 341 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :id: Grafik3 .. :name: Grafik3 .. :width: 80% .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 136 .. :id: Grafik5 .. :name: Grafik5 .. :width: 341 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 136 .. :id: Grafik4 .. :name: Grafik4 .. :width: 341 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 239 .. :id: Grafik7 .. :name: Grafik7 .. :width: 669 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 180 .. :id: Grafik8 .. :name: Grafik8 .. :width: 455 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 299 .. :id: Grafik9 .. :name: Grafik9 .. :width: 603 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 541 .. :id: Grafik10 .. :name: Grafik10 .. :width: 372 .. |img-11| image:: img-11.png .. :align: left .. :border: 0 .. :height: 462 .. :id: Grafik11 .. :name: Grafik11 .. :width: 459 .. |img-12| image:: img-12.png .. :align: left .. :border: 0 .. :height: 289 .. :id: Grafik12 .. :name: Grafik12 .. :width: 557 .. |img-13| image:: img-13.png .. :align: left .. :border: 0 .. :height: 225 .. :id: Grafik13 .. :name: Grafik13 .. :width: 437 .. |img-14| image:: img-14.png .. :align: left .. :border: 0 .. :height: 272 .. :id: Grafik14 .. :name: Grafik14 .. :width: 489