Help File – IOS App For WordPress


 

2. Changing name and icons of the App

1. Single click on the name of project at the top of “Project Navigator”.
2. The project name will be highlighted.
3. Type there new name and hit enter.
4. Once you hit enter key, under the “Activity Viewer”, you’ll be prompted to change name of some files. Press “Rename” and all files will be renamed.
5. When the renaming is complete then screen 5 (Fig 1) will appear with green checks in each replacement made and this dialog will auto close after sometime.

…image here…

3. Changing the App Icon

1. Go to the “Project Inspector”. In case your “Project Inspector” doesn’t look like in Fig 2 then expose the contents of your project by clicking on the little arrow at the left of your project name. Similarly open WPFeed folder and click “Images.xcassets” (as highlighted in red in Fig 2). In the panel just right to the “Navigator Area” all image assets will be listed.

2. In that panel click “AppIcon” (highlighted in red in Fig 2). In the “Editor View” there will be various icons for different versions (retina and non retina display, iOS 6 and iOS 7) and purposes (App icon, Spotlight icon, Settings icon).

…image here…

3. iOS app icon is square and you should get it designed by some designer or if you have the logo file then you can generate the app icons from online services like http://makeappicon.com/. In that case your iOS AppIcon will look good if your log is already close to square in shape. Some other iOS app generating web services are:

– www.gieson.com/Library/projects/utilities/icon_slayer/
– http://www.quirco.com/iPhoneIcon/
– http://www.appiconsizes.com/

4. All these services will generate icons of different sizes. You will need following sizes preferably in PNG format.

– 29px
– 40px
– 50px
– 57px
– 58px
– 72px
– 76px
– 80px
– 100px
– 114px
– 144px
– 152px

5. Once you’ve obtained icons in these sizes then its time to replace them. Open the folder where you have all icons for sizes mentioned above. If you’re in the column view of Explorer then clicking on a file will show its size (highlighted in green in Fig 3). Drag and drop on the appropriate tile in the Editor area. Tiles labelled as 1x will have the specified size. e.g. Tile labeled 1x under iPhone 57pt will have AppIcon of size 57px by 57px. Tiles labelled as 2x will have AppIcon of double the size mentioned. e.g. Tile labelled 2x under iPhone 57pt will have image having size 114px by

…image here…

114px (57 x 2). Keep on doing this till you replace all icons.
6. You can see more icons here which are used in UI. Like refresh button, bookmark button and default thumbnail. Each of them can be replaced in the same way.

4. Changing Launch image

1. Go to “Images.xcassets” (as highlighted in red in Fig 4). In the panel just right to the “Navigator Area” click “LaunchImage” (highlighted in red in Fig 4). In the “Editor View” there will be various

…image here…

launch images for different versions (retina and non retina display, iPhone and iPad).
2. The launch image is shown when your app is loading and so its the best place for advertisement which can be read say in 2 seconds. So this is the best place to tell others about you and you can either place a logo of your company or website name or both. The sizes you’ll need will be:

&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp

ipad retina landscape

2048 x 1536

iphone non retina 3.5”

320 x 480

ipad non retina landscape

1024 x 768

iphone retina 3.5”

640 x 960

ipad portrait retina

1536 x 2048

iphone retina 4”

640 x 1136

ipad portrait non retina

768 x 1024

 

 

…image here…

3. You can replace the launch images in the same way as you replaced the App Icon (Fig 5).

5. Changing the Feed

Now you want to display your own feed. There are few situations to consider.

– If app runs first time and there is no internet connectivity while app launches then you can display some hard coded feed (Fig 6).
– If app has run before and downloaded your feed successfully then if your app loses internet connectivity in future launches, in that case it saves last downloaded feed and display it.
– If app has internet connectivity then it updates the saved feed file and display all updated items.

5.1 Changing the default feeds

– In Project Navigator, open a file names feed.xml under WPFeed > Supporting files. Paste your default feeds into it and save the file.

5.2 Changing the feed URL

– Open ViewController.m under WPFeed.
– In “viewDidLoad” method find line in which “feedURL” variable is assigned. It should look like: feedURL = @”http://mobilemerit.com/feed/”;
– Replace the string with your feed URL.

5.3 Feed Format

5.3.1 Rules
– All feed items should be in “” tag.
– Feed title should in “” tag.<br /> – The feed URL should be in “<link />” tag.<br /> – Feed date should be in “<pubdate>” tag.<br /> – Feed item short description should be in “<description>” tag.<br /> – Feed item content should be in “<content:encoded>” tag</p> <p>5.3.2 Overriding Rules<br /> If you want to change these rules, say your feed has publishing date in “<date>” tag, then you have to open “KMXMLParser.m” under “WPFeed > Supporting Files” and find definition of method – (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string. You’ll see all the conditionals that matches a particular tag name. e.g. [element isEqualToString:@“pubDate”] will match tag “<pubdate>”. Just replace tag name string with the tag you desire, “<date>” in this case.</p> <p>5.3.3 App Configuration<br /> In “ViewController.m” find definition of function -(void)fetchData and find a line where the 3 configuration variables (viz. thumbnailMatchPattern, contentInLink and context) are initialised.</p> <p>So here we can see 3 configurations<br /> – “contentInLink” has value “yes”<br /> – “context” has value “yourappname”<br /> – “thumbnailMatchPattern” has some regular expression which matches the first image tag and extract its src attribute.</p> <p>The value of “contentInLink” controls how the feed content is displayed. If its set to “yes” then feed detail view displays content pointed by “<link />” attribute of that feed item. This make app slower as various HTTP requests are sent to load the content pointed by “<link />” tag.<br /> If its set to any other value then feed detail view displays the content inside “<content:encoded>” tag which if not present fallbacks to “<description>” tag. This is much faster. But configuring XML feed to include page content is not common and difficult to achieve.</p> <p>The value of “context” can be your app name or your company name or any string. This is used in case you have edit the flow of app based on the value context holds.</p> <p>In case your feed is loaded from “<link />” you have set value in “thumbnailMatchPattern” to a Regex pattern to capture the image “src” attribute which should be used to generate feed thumbnails. the current value matches the first image in the content pointed by “<link />” tag. In case you are not using custom mode then you can</p> <p>6. WordPress and Youtube Mode</p> <p>The two popular feed formats are WordPress feeds and Youtube channel feed. App is specially optimised for these two modes.</p> <p>6.1 Changing Modes</p> <p>By default the value is set to CUSTOM mode which assumes that your feed source is unknown. Find the – (void)viewDidLoad method of ViewController.m. and you will find some constants looking BOOL variables (viz. WORDPRESS, YOUTUBE and CUSTOM) defined. If you want to switch to any one of the mode you have to set it to YES and set others to NO. Be careful here, only one of the three can be YES and others must be NO as many decisions taken by app is based on value of these variables. An ambiguous sate can lead to app crash.</p> <p>6.2 WordPress mode</p> <p>Set WORDPRESS mode to YES and CUSTOM and YOUTUBE mode to NO.</p> <p>It is advisable to set “contentInLink” app configuration to @“no” and in your wp-admin settings set “For each article in a feed, show” setting to “Full text” which can be found under “Settings > Reading” (Fig 7). This will cause the app to load much much faster and</p> <p>…image here…</p> <p>in a mobile friendly way (in case your WordPress theme is not mobile friendly).</p> <p>6.3 Youtube mode</p> <p>Set YOUTUBE mode to YES and CUSTOM and WORDPRESS mode to NO.</p> <p>7. Libraries Used</p> <p>The app uses 4 libraries all of which are stored in “WPFeed” > “Supporting Files” folder:</p> <p>1.4.1 MBProgressHUD: https://github.com/jdg/MBProgressHUD<br /> This is used to show loader.</p> <p>1.4.2 GTMNSString+HTML: https://github.com/siriusdely/GTMNSString-HTML<br /> It deals with Strings that contain HTML</p> <p>1.4.3 NSString+HTML: https://github.com/Koolistov/NSString-HTML<br /> It deals with Strings that contain HTML, uses GTMNSString+HTML</p> <p>1.4.4 KMXMLParser: https://github.com/KieranMcGrady/KMXMLParser<br /> It parses the feed. But this library is modified in this app.</p> <p>There is also one custom library<br /> 1.4.5 applicationHelper<br /> This library contains common code used across the app.</p> <p>Xcode Layout Guide</p> <p>For detailed information, open Xcode, goto Help > Xcode overview.</p> <p>…image here…<br /> </description></content:encoded></date></pubdate></date></content:encoded></description></pubdate>

Posted in IOS | Comments Off on Help File – IOS App For WordPress
Powered By: wpnova.com