DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

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

Extension Key: lp_iphone

Language: en

Keywords: iphone, lp_iphone, iPhone-app, iPhone-CMS

Copyright 2000-2010, Gabriel Schreiber, <t3phone@mx.lagopixel.com>

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

EXT: iPhone CMS 1

`Introduction 3 <#__RefHeading__4949_377492925>`_

What does it do? 3

Screenshots 3

`Users manual 5 <#__RefHeading__4955_377492925>`_

`FAQ 6 <#__RefHeading__5288_377492925>`_

Reference 6

`Further information 8 <#__RefHeading__1317_1947738088>`_

`Tutorial 9 <#__RefHeading__4969_377492925>`_

Creating a iPhone-App with the lp_iphone extension walk-through 9

`Known problems 14 <#__RefHeading__5009_377492925>`_

`ChangeLog 15 <#__RefHeading__5013_377492925>`_

Introduction

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

img-3 Image 1 – Setup of the Pagetree

img-4

Image 2 – Kategories in rootlevel mapped to iPhone content

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

  • 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

Constants that have to be set in the constant editor (iphone) after including the templates at “Include static (from extensions) → iPhone basic template”

START_DES_SEITENBAUMS

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

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

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

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

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

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

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

Property

HTML_TYPE_NUM

Data type

int

Description

Default

80

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”

encryptionKey

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

((generated))
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

Tutorial

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

Only use only ONE “iPhone backend content element” on a leaf page. If there are more it might brake the installation.

ChangeLog

2.0.0

Version

2.0.0

Changes

Initial release (Set to version 2.0 on accident – sorry!)

2.1

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.

img-2 15