App creation guide

26
How to create a mobile app 3D Issue Digital Publishing Software

Transcript of App creation guide

Page 1: App creation guide

How to create a mobile app3D Issue Digital Publishing Software

Page 2: App creation guide

1

REQUIREMENTS

· A PC or MAC· An internet connection· An Apple developer account· A Google Play Developer account

2

Create Your Own Marketing App > Register here

Create Your Own Marketing App > Register here

INTRODUCTION

This tutorial guide will help you create your own marketing app using the 3D Issue Apps platform. 3D Issue brings you a powerful, user friendly marketing app builder that doesn’t require any coding knowledge. You will be able to create an app that showcases all your online content, strengthens your brand and keeps you in touch with your customers, bringing up a notch your mobile marketing strategy.

3D Issue App platform:· Create a marketing app from scratch· Use a neat and user friendly interface· Unify your online content· Submit your apps to the Apple App Store and Google Play· No coding required!

Enter your email address in the first box. This will be your user name.

Next choose your password. Please bear in mind that is case sensitive.

Page 3: App creation guide

3 4

CREATECreate Your Own Marketing App > Register here

Create Your Own Marketing App > Register here

Now is time to select the content sources you want to use to create your app.

You can name and add new sections to organize your content.Each section can have different type of sources. For example, you can create a section just with videos using Vimeo and Youtube as a source, and then create another section with articles and your feeds RSS.

To add new sections click on the “+” button on the left hand side of the screen. You can add as many sections as you want.If you need to rearrange them, hover over the dotted line of the section you wish to move and click and drag to the desired place.

To change the name of the sections click on the pencil icon next to the section name.

START

A window prompting you to “Enter App Name” will open. Write the name of your app and select “Ok”. This will be the name used to submit the app to the App Stores.

Click on “Create App”

Page 4: App creation guide

5 6

Add RSS FeedCreate Your Own Marketing App > Register here

Create Your Own Marketing App > Register here

Once the source has been added you can click on the “+” and see all the articles that will be added to the app. You can then edit them, hide them or “feature” them.

When you “feature” and article, this will appear at the top.In the case of the email, when you add an email address of the contributor they will receive an email with the necessary instructions on how to submit their articles.

Once you have added all your sources and organized your sections you can click “NEXT” on the bottom right hand side.

To add a source click on the icon of the source type you want to add. A new window will open asking you to enter the url of the source. Alternatively you can also start a search and then select the source you would like to add.

Some type of sources, such as Facebook, will ask you to authorize your account so you can verify you own the content.

Page 5: App creation guide

CUSTOMIZE

In the customization tab you will be able to modify and personalize the appearance of your app so it fits your brand. Make sure you have your images ready. You can alternate between the Mobile and Tablet view to see how your app will look like on each type of device.

87

Create Your Own Marketing App > Register here

Create Your Own Marketing App > Register here

HOME SCREEN

Mobile Button LayoutHere you will choose the layout you want for the buttons that identify each different section.

Button PaddingDefines the amount of space you want to leave between the right and left sides of the screen and the buttons.

Button ShadowYou can add a shadow to the buttons by turning this option on.The shadow is very subtle, but is really useful if you are using a light background.

Button AlignmentLets you choose where you want to position the buttons. There are three options: top, center and bottom.

Background Image - PortraitLets you set up the background image for mobiles and tablets when the tablet is in portrait position. The images should have a .png format and be under 5KB in size.

Background Image - LandscapeLets you set up the background image for tablets when the tablet is in landscape position.

Background ColorIn case you don’t want to use a background image, here you can choose a background color for your app.

Text ColorLets you change the color of the text that appears below the buttons.

Display on StartIf you choose to turn this option on when the users open the app the homescreen will show. Otherwise when the app is opened the user will be taken straight to the list of articles.

Page 6: App creation guide

9 10

Create Your Own Marketing App > Register here

Create Your Own Marketing App > Register here

SECTIONS

Choose the section you want to edit from the drop down menu.

NameAllows you to rename the selected section.

ColorAllows you to choose the color of your section.

IconAllows you to add your own icons to your sections. We recommend the use of a .png file, under 5MB and 100 x 100 px in size.

SIDE PANEL

Expand Icon, Minimize Icon and Home IconThis 3 options let you change the default icons by uploading your own. We recommend the use of a .png file, under 5MB and 100 x 100 px in size.Text ColorChanges the color of the text on the side panel.Background imageLets you change the background by adding an image as a background for the side panel. If you have uploaded your image but you can’t see it, try lowering the background color opacity.Background colorLets you choose the color of background for the side panel. Playing with the opacity this color can function as a color filter for the background image.Background Color OpacitySets the opacity of the background color. If you add an image but the opacity of the background color is too high, you may not be able to see the image through it.Line Divider ColorLets you change de color of the line that divides each section.

Page 7: App creation guide

1211

EXTERNAL WEBVIEW

This is the view the readers get when clicking on an article that has to load through the web, such as an article from facebook or twitter, or when they click on a link while reading an article inside the app.

Back IconLets you change the default back icon by uploading your own image. We recommend the use of a .png file, under 5MB and 100 x 100 px in size.

Share IconLets you change the default share icon by uploading your own image. As in the back icon case, we recommend the use of a .png file, under 5MB and 100 x 100 px in size.

Text ColorLets you change the color of the text in the top banner.

Banner ColorLets you change the color of the top banner.

Line dividerLets you change de color of the line that divides the top banner from the rest of the article.

MENU VIEW

Here you can change and customize the appearance of the menu view that appears after the user selects a section.

Background ColorAllows you to choose the background color of the area where the articles appear.

Border ColorAllows you to change the color of the line that appears around the articles.

Header ColorAllows you to change the color of the top header section.

Title Color Allows you to change the color of the title of the articles.

Date ColorAllows you to change the color of the date of the articles.

Create Your Own Marketing App > Register here

Create Your Own Marketing App > Register here

Page 8: App creation guide

1413

PREVIEW

Once you have finished customizing your app, you will be able to see how it will look like once is created. Click step 3: Preview

From here you will be directed to download the “3D Issue App Portal” from “Google Play” or the “App Store”

Create Your Own Marketing App > Register here

ARTICLE VIEW

Here you can change and customize de appearance of the articles that the user will read inside the app.

Back IconLets you upload your own image for the icon that will allow the user to go back to the previous screen. We recommend the use of a .png file, under 5MB and 100 x 100 px in size.

Read More IconLets you upload your own image for the icon that will allow the user to show the rest of the article. Like with the back icon, we recommend the use of a .png file, under 5MB and 100 x 100 px in size.

Border ColorChanges the color of the line around the date of the article and below the title.

Title ColorChanges the color of the text in the title of the article.

Body Text ColorChanges the color of the text in the body of the article.

Once you have 3D Issue App Portal downloaded to your mobile or tablet insert the “Preview Code”. Now you will be able to view the app you have just created.

Click finish on the “3D Issue Apps”, you will be redirected to the home page.

Create Your Own Marketing App > Register here

Page 9: App creation guide

1615Create Your Own Marketing App > Register here

PURCHASE APP

On the homepage look for the app you have just finished editing and click on “Purchase App” (more information about how to purchase apps here).

The green button now will change to “Submit App” click on it to go to the next step.

SUBMIT YOUR APP

Now that you have your App ready, in order to be able to submit it to the App Stores you will need to provide some information.

1. App Graphics

1.1 Submission Icons

Hi-res IconThis is the icon that will be used both in the App Store and in Google Play as the main icon for the app. The one that will identify your app in the stores.This image must be 1024 x 1024 px and be in PNG format.

1.2 Launcher images

Master Launcher ImageThis is the image that appears when the user launches the app and the app is opening. This image must be 2208 x 2208 px and be in PNG format.

AdvancedBy clicking on “Advanced” you will see all the different launcher images required for your aplication. You can change each image by clicking on the arrow of each icon and selecting your new image.

Feature GraphicThis is the image that will appear at the top in Google Play after the user has selected the app. This image must be 1024 x 500 px and be in PNG format.

AdvancedBy clicking on “Advanced” you will see all the different icons required for your aplication. You can change each image by clicking on the arrow of each icon and selecting your new image.

Page 10: App creation guide

Create Your Own Marketing App > Register here

1817Create Your Own Marketing App > Register here

KeystoreThe Android Keystore is self-generated.

Apart from the Keystore Name and the password (that you will now choose), all the information requested will be tied to your business.

The Keystore name is generic and its only purpose is to let you identify the Keystore in the 3D Issue system.

2.1 AndroidTo submit the apps to Google Play and the Apple App Store you will need the Keystore and the iOS certificate. Click on “Create New” to start.

You will be able to change this number if you are updating an existing app in the App Store.

2. BINARY REQUIREMENTS

App ID This is the unique identifier of your app. You will need this ID to create the iOS Certificate required to submit your app to the App Store.

The App ID can’t contain any numbers and must have the following format: “com.companyname.appname” for example “com.dissue.appportal”

App Version NumberHere you must specify the version number of your app. You should use the two level format that consists of a number a dot and a number, for example: “1.0”, “2.3” etc.

Page 11: App creation guide

Create Your Own Marketing App > Register here

19 20Create Your Own Marketing App > Register here

Once you have your Apple ID, log in and under “iOS Apps” go to “Identifiers”.

iOS Certicate

To create the iOS Certificate there are a few things that we need to do first.

First you need to generate an App ID on iTunes Connect and the Apple Developer Portal. To do so, copy the App ID that you have just created and open the Apple Developer Portal.

Apple Developer Portal.

Click on “Member Center” and on “Create Apple ID”. Fill in the required fields and create your Apple ID.

Page 12: App creation guide

Create Your Own Marketing App > Register here

21 22Create Your Own Marketing App > Register here

The next step is to create a new Identifier.

App ID Description

NameThis is the name you will use to identify your new identifier in your account. It doesn’t need to match the name the app will have on the store as is just for internal use.

App ID PrefixUnless your app is going to be added to multiple teams, you should leave the default Team ID.

App ID Suffix

There are two choices, for the type of apps that you can create with 3D Issue you will need to select “Explicit App ID”.

Where it says “Bundle ID” copy and paste the “App ID” you have created on the 3D Issue Apps platform. Please make sure that you enter the correct ID, as once the ID for an app is set up it can’t be changed.

Page 13: App creation guide

23 24Create Your Own Marketing App > Register here

App Services

Here you can select all the services that you would like to enable in your app. This selection is not definitive and you will be able to change them later if needed.

Once you have finished completing the form and clicked on “Continue” the only thing left to do is revise the details and submit.

Make a note of your “Identifier”. Although you can access it later, it will come in handy for your iTune’s Connect Listing. (Don’t close this tab of the browser)

CertificateNow you need to go back to the 3D Issue Apps dashboard and under iOS, click on “Create new”.

Page 14: App creation guide

24 26

Give the certificate a name, fill in the email address field, select your country from the drop down menu and click “Generate CSR”.

Now is time to go back to the App developer portal. Once you are there go to “Certificates” click add.

Under Production select “App Store and Ad Hoc” and click “Continue” until you get to the page where it says “Generate your certificate”.

Once the certificate has been generated click on “Download CSR” and “OK”.

A window will pop-up, click on “Create New CSR”.

Page 15: App creation guide

Create Your Own Marketing App > Register here

27 28Create Your Own Marketing App > Register here

Back in the 3D Issue Apps dashboard, upload your .cer file.

Provisioning files

The next step is to generate the “provisioning profiles”.

Go back to the App developer portal. Under “Provisioning Profiles” select all and click “+” to add a new provisioning profile.

Click on “Choose file” under “Upload CSR file” and look for the CSR file that you previously downloaded from the dashboard.

Now click “Generate”, then “Download” and finally “Done”.

Page 16: App creation guide

28 29

From the drop down menu select the App ID generated earlier. Click “Continue” and select the certificate that you just generated. Click “Continue” again.

Select “App Store” and “Continue” Give the profile a generic name and click “Continue”. Finally Download the file.

Back again in the “3D Issue Apps dashboard” click on “Upload”, next to “Provisioning Profiles” and upload your file.

Once the file has been uploaded click on “Build”.

Page 17: App creation guide

31

Once you have finished building your app, when you access the 3D Issue App Portal you will see that your App can now be downloaded both for Android or iOS. Now is time to submit the Apps to the Apple App Store and to the Google Play Store.

Apple App StoreGo to iTunes Connect and Sign in with your Apple ID and password. Click on “My Apps” and then on “New iOS App”

30

A new window will pop-up asking you to fill in the basic details for your app.

NameUse the same Name for the App that you used in the 3D Issue App Portal.

LanguageThis will be the primary language of your app, you will be able to add multiple translations afterwards.

Bundle IDThe Bundle ID will be the same as the App ID in the 3D Issue App Portal.

VersionThe version number must be the same as the one stated in the 3D Issue App Portal.

SKUTake the note you made before and that contains the “identifier” you created on the App Developer Portal and copy it in the SKU field. Make sure that you leave no spaces in front or behind the code.

Page 18: App creation guide

32

App PreviewHere, if you wish, you can add a short video demonstrating your app. You can add a different video per device.

NameThis is the name that will appear on the app store for your app.

DescriptionThe description of the App should include details of its features and functionality. It must be maximum 4000 characters long and it doesn’t admit any type of formatting, so you will have to use plain text.

KeywordsUse keywords that describe your app and separate them with commas. There is no need to include the name of the app as a keyword, as it will not affect the search results.

Support UrlYou must provide a website support URL that leads to actual contact information. Users will use this contact information to give feedback, ask for support or make enhancement suggestions.

Marketing UrlYou can add a URL of the website where the users can find more information about the app.

Privacy Policy UrlYou can add a URL that links to your company’s Privacy Policy.

Apple watchApps created with the 3D Issue App Portal don’t support the Apple Watch. So you can skip this section.

CopyrightApple takes the copyright infringement seriously and checks thoroughly every app submission. Make sure you are providing the right copyright. At 3D Issue for example we use the following: 2015 3D Issue LTD.

Version NumberThis is the version number that will be visible for the users in the App store. This number must match the version number you specified in the bundle. Use the following format: 1.0 , 1.2

Primary CategoryThis primary category should match the one defined in the app build property list. Always choose the category that fits your app best.

Trade Representative Contact InformationIt only affects to those who sell apps in the Korean App Store. So unless that is your case, you can skip to the next field.

33

Version Information

ScreenshotsYou need to provide a screenshot for each of all the different types of devices you want your app to be available. If for example you don’t provide a screenshot for the iPad, your app won’t appear on the Apple App Store when an iPad user makes a search. You can add up to 4 screenshots per localization.

Page 19: App creation guide

35

RatingThis field is really important and specific. Make sure you are thorough when completing it or your app could get rejected. If you include content from Youtube for example you will have to select: Infrequent/Mild under Mature/Suggestive as this content can link to external sources that feature unfiltered comments.

34

Unrestricted Web AccessSelect: NOYou can ignore both Game Center Properties and Newsstand Properties.

App Reviewer Information

Contact InformationThis is the contact information Apple will use to get in contact with you in case there is a problem with your app. Make sure you provide a valid contact information.

Demo AccountApple reviews every app manually. If your app requires for the user to have a login, you will need to grant access to Apple, so your app can be reviewed. Here is where you will provide the login details that Apple can use to access your app.

Version Release

If you select “Automatically release this version”, the app will appear on the Apple App Store as soon as it has been reviewed and approved by the Apple team.

However, if you prefer to decide when the app is released, you will need to select “Manually release the version”. This way, once your app is reviewed and approved you will need to release it on the App Store yourself.

IMPORTANT

Once you have filled the information click on “save” as Itunes Connect doesn’t save the information automatically.

PricingUnder this tab you will be able to select the date and price for your app. If by the date you have selected your app hasn’t been approved yet, the app will be released as soon as it’s been approved.

Once you are done, click on “Save” and then, and only after saving, click on “Cancel” to go back to the platform. Don’t worry as long as you have clicked on “save” before clicking on “cancel” your settings will be saved.

Page 20: App creation guide

36 37Create Your Own Marketing App > Register here

Update The Binary (ipa) and Upload the App to the App Store

For this step you will need a MAC. If you don’t have a MAC available don’t worry, you can rent one in the cloud here: https://macstadium.com/

Once you have your app you will need the “Application Loader” app. On Mac computers this application is usually located in the HardDrive Xcode folders.

If for some reason your Mac doesn’t have the “Application Loader” installed, you can always log in to your iTunes Connect account and download it from there.

Simply go to “Manage Your Apps” and under “Deliver Your Apps”, click on “Download Application Loader”,

download the file and install it on your Mac.

Once you have the “Application Loader” installed it, launch it and enter your Apple ID and password. Next, select “Deliver Your App”.

Select your api file. The application will verify and add the app. Once it has finished click on “Next”.

Page 21: App creation guide

Create Your Own Marketing App > Register here

38 39Create Your Own Marketing App > Register here

Wait for the Application Loader to upload your file, when the process is completed a green check mark will appear. The app has now been submitted to Apple.

Note: Don’t click “Send” again unless there was an error and you want to try to add your app again.

Final Step: Checking your submission

Go back to iTunes Connect and in My Apps,>App Portal Support go to “Prerelease”.

You will see the build of your app, the date it was uploaded, the version and its status.

It’s possible that the image on the side doesn’t appear at the beginning as it can take a few minutes to be processed.

Under the “Versions” tab, click add the new build by clicking on the “+” button next to “Build”.

Select the build you want to add and “Save”.

Page 22: App creation guide

40 41Create Your Own Marketing App > Register here

Click on “Submit for Review” on the top right hand corner.

Android Google Play Store

Google Developer Console

To submit your app to the Google Play as it happens with the Apple App Store, you need to have your own developer account.

To create your account you can go here and follow the steps.

Once you have your developer account, login to the Developer Console and click on “Add new application”

Cryptography

Itunes Connect will now show you the Cryptography screen, just select “No” for all the options.

3rd Party ContentIf you are using content sources such as YouTube, Facebook or any other Social Network, you will need to select “Yes”.

Ads identifier

Select “No” and “Next”.

Your App has been submitted!

It will take Apple 1 to 2 weeks to approve and release your App.

Page 23: App creation guide

Create Your Own Marketing App > Register here

42 43Create Your Own Marketing App > Register here

APK

Under the Production tab, upload your APK.

Store Listing

Select the primary language of your app and add translations if needed.

Title

This is the name of the app in the Google Play Store. To keep it consistent and to avoid confusion among the users, make sure that you use the same app name you used for the Apple App Store.

Short description This is a very short description of your app, previously it was called “Promo text” and is the first descriptive text users will see when they open your app on the Google Play Store. It’s usually just one line long. It has a max length of 80 characters.

Full descriptionHere you should include a complete description of your app. You have a maximum of 4000. The description should give the user a good idea about what your app does and what is it for. Use keywords that are relevant for your app and for which you want to rank on search. But read Google’s “tips on how to create policy compliant app descriptions” carefully and make sure you are following them, not doing so could lead to the suspension of your app.

Page 24: App creation guide

Create Your Own Marketing App > Register here

44 45Create Your Own Marketing App > Register here

Graphic Assets

Apple is more specific regarding image sizes. Therefore is handier to create your screenshots for the iOS app and then re-use them for the Android app.

Make sure you add screenshots for all the platforms you want your app to be available.

The promo graphic

Is optional and is used for promotions on Android version (4.0 or earlier).

TV and TV BannerYou can ignore these 2 categories.

Hi-res iconIs the icon that will appear in the Google Play Store for your app.

Feature graphicThis is the image that appears on the top part of the screen when the user opens the app in the app store, so make sure it looks really good.

Promo video

The promo is optional and is always a YouTube video. If you choose to include one, make it short and sweet. It should always show the best of your app.

Page 25: App creation guide

46 47Create Your Own Marketing App > Register here

Categorisation

Application type and Category

Fill in the details and select the correct options for your app for each field.

Content ratingYou will need to fill out a questionnaire about the nature of your app’s content. Always provide accurate responses, the rating of your app will be based on them. If you don’t, the content of your app could be misrepresented and lead to the removal of your app from the store.

If you include content from Facebook, YouTube, Google + or any other social network, under “Content Rating” your app will be rated at least as “Medium Maturity” (+12).

You will receive an email with the rating certification for your app.

Note: It would be a good idea to save the draft now, as google doesn’t do it automatically.

Contact details

These are the details that will appear in the Google Play Store. You will need to provide at least an email address.

Privacy Policy

Introduce the URL where you have your privacy policy hosted online.

If you don’t want to submit a privacy policy URL right now, you can select the “Not submitting a privacy policy URL at current time”.

Page 26: App creation guide

48Create Your Own Marketing App > Register here

Pricing and distribution

You should decide if you want your app to be “Free” or “Paid”. Be careful when selecting this option as it can’t be changed later. If you choose for it to be a paid app, you will need a merchant account.

Google play for educationYou should only tick this option if your app is mainly for educational purposes.

ConsentMarketing opt-out: Leave untickedContent guidelines: TickUS export laws: Tick

Now, once you have finished with the Pricing & Distribution tab, click on “Save draft” and then on “Plublish app”.

It will take Google roughly 1 day to release your app if there are no issues with the submission.