Mobile Apps

iOS Mobile App

The iOS App shows data in real time from the business directory website. The Business Owner will have the possibility to manage his/her own listings, offers, events, as well as private messages from the other business owners / users.

A section dedicated to The Business Owner’s profile will be present. From the profile menu, The Business Owner can manage its own bookmarks and reviews (for both, Listings and Offers). This section offers also the possibility to edit the current profile, to change the settings and to access the Front–End Control Panel.

Building the app - Prerequisites

After purchasing the application, you can access our online form for the application building process. A couple of configuration data and images are needed for the customization process.

You would have to provide the website address of the business directory extension, the images, the desired colors and the language.

Images

Landing Screen Images

These are the images that will appear when first opening the app.

slider_image_1.jpg

_images/app_1.jpg

slider_image_2.jpg

_images/app_2.jpg

slider_image_3.jpg

_images/app_3.png

After the landing screens it will appear the sign in/up screen with the option to continue as a guest aswell.

_images/app_4.1.jpg

Home Screen Header

This is the header image on top of the main screen of the application.

home_header_image.jpeg

_images/app_4.jpg _images/app_5.jpg

Listing No Image

featured_listing_placeholder.jpg - when the listing won’t have a logo image added, this image will be displayed instead in the list view.

Logo

ic_jbd_logo_24dp.xml (SVG) this is the logo image that contains the black background as shown in the home screen header. Logo should always be in a SVG format.

ic_jbd_logo_nobg_24dp.xml (SVG) – this is the logo image, that doesn’t contain the black background, as shown in the above three landing screen images. Logo should always be in a SVG format.

Note: These two logos can actually be the same image, but it is recommended, for design purposes, to have two different versions of the logo as described above.

Colors

The main color values used are: colorPrimary, colorPrimaryText, colorIcons, colorBackground, colorGenericText

_images/app_6.png

Firebase Set up

Firebase is used to push notifications to you audience as well as storing app data. Please do the set up below.

Firebase Console - Link

  • Create project in firebase

Firebase Landing Page

_images/app_7.png

Firebase Add a New Project Dialog

_images/app_8.png
  • Add iOS app to project

Firebase Console Dashboard

_images/app_9.png
  • Download GoogleServices-info.plist

Firebase Project Register

_images/app_10.png

Firebase Download GooglServices-info.plist

_images/app_11.png

Firebase Verify Your Installation

_images/app_12.png

Setup Database

  • Go to database section

_images/app_13.png
  • Create database

_images/app_14.png
  • Start in test mode -> Enable

_images/app_15.png
  • the Data tab should look like this

_images/firebase_database.png
  • for the database please use the following rules:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Get Web API Key

  • Settings -> Project Settings

_images/app_16.png
  • Cloud messaging -> Server Key

_images/app_17.png
  • Copy paste key to Firebase server key on Mobile app configuration on the admin dashboard.

_images/app_18.png

Google Maps API

Get API key for MAP SDK for iOS

Step 1

_images/app_19.png

Step 2

_images/app_20.png

Step 3

_images/app_21.png

Registering for the Apple Developer Program

Begin registration as follows:

  1. Register at Apple to get an Apple ID. Or check if your company has an Apple ID already on the Apple support pages.
    _images/app-dist_appleid.png
  2. Register for a D-U-N-S number on the Apple D-U-N-S registration page.

  3. The D-U-N-S numbers are managed by Dun & Bradstreet and for free.
    _images/app-dist_apple-DUNS.png
  4. Register for the Apple Developer Program. The membership costs $99 per year.
    _images/app-dist_appledev-enroll.png

Within a few days following the registration, Apple will probably call you and ask you a few questions to ensure that your intentions for the app are in line with the Apple guidelines. Here are some possible questions and some ideas for your answers:

Q: What’s the name of the company that registers?

A: The name will be the same that was used to register for the D-U-N-S number.

Q: In which department does the contact person work?

A: Just state the department where you (the contact person for Apple) work.

Q: What is the purpose of the app?

A: To comply with Apple’s guidelines your app needs public relevance.You can easily create public relevance by explaining that your app will contain valuable information for a wide spread and public audience. For example, you can post job vacancies for potential new employees, company news for partners and customers, and offer additional information for employees that will be available after logging into the employee space.

Log in to App Store Connect with your Apple ID to verify that everything works correctly.

_images/app-dist_app-store-connect1.png

Creating the iOS Distribution Certificate

The iOS distribution certificate ensures that the code of the app originates from the organization that signed the app and has not been altered.

Preparing the iOS Distribution Certificate

  1. Log in to your Apple Developer account and navigate to Certificates, IDs & Profiles > Certificates > Production.

  2. Add a new certificate.

  3. Set up a certificate of type Production and activate App Store and Ad Hoc. .. image:: _images/rect826.png

  4. Click Continue.

  5. To proceed with the next step you need a Certificate Signing Request (CSR). You leave the Apple Developer interface as is now and come back later when you have created a CSR.
    _images/app-dist_appledev_csr-ready.png

Preparing the Signing of the Certificate

You need a Mac for the next steps. In case you work on another operating system contact your Customer Success Manager to get further support.

  1. On a Mac, open the Keychain Access program.

  2. In the menu bar, navigate to Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority.
    _images/apple-enterprise-dev_keychain-access_CSR.png
  3. The Certificate Assistant opens and creates a Certificate Signing Request (CSR) that is submitted to a certificate authority that verifies the information in the request.

  4. Enter your Apple ID and email address in the dialog.

  5. Click Continue.

  6. Select a folder for saving the CSR file.

  7. Click Done.

Finalizing the iOS Distribution Certificate

  1. Go back to the Apple Developer account where you started to create a certificate.

  2. Click Continue.

_images/app-dist_appledev_csr-ready.png
  1. Select the CSR file you just generated.

  2. Click Continue.

  3. The certificate is created and signed.

  4. Download the newly created certificate.

  5. The downloaded certificate will later be used in the Mobile Form

  6. Click Done.

The certificates overview with your new certificate is displayed.

Obtaining the Certificate & Private Key(.p12)

  1. Open the certificate file downloaded in the previous step.

  2. In the Keychain app on your Mac, click on the Certificates item on the left menu

  3. Identify the certificate you just added and expand the certificate as per the image below

  4. Select both the certificate and the private key

  5. Right click on the items as select Export 2 items…

  6. Set the password to jbusiness

    _images/p12.png

Creating the iOS App ID

Creating the App ID

  1. Log in to your Apple Developer account and navigate to Certificates, IDs & Profiles > Identifiers > App IDs.

  2. Add a new app ID.

  3. Fill in a name. The name is not visible to the end user.
    _images/app-dist_apple-appid.png
  4. Activate Explicit App ID.

  5. Fill in a Bundle ID. Best practice is to use your external domain name backwards + app name, for example com.yourcompany.app.

  6. In the section App Services, leave the default activated. Activate Push Notifications.

  7. Click Continue.

  8. An overview of the entered data is displayed.

  9. Check the data and click Submit.

Creating the iOS Provisioning Profiles

Creating the Provisioning Profile of Type App Store

  1. Log in to your Apple Developer account and navigate to Certificates, IDs & Profiles > Identifiers > Provisioning Profiles.

  2. Add a new provisioning profile.
    _images/Profiles.png
  3. Activate App Store.
    _images/App_Store_Profile.png
  4. Click Continue.

  5. From the dropdown menu, select the app ID you just created.

  6. Click Continue.

  7. Select the certificate you just created.

  8. Click Continue.

  9. Fill in a name of your choice. The name is not visible to end users.

  10. Click Generate.

  11. Download the provisioning profile.

  12. Click Done.

The provisioning profiles overview with your new provisioning profile is displayed.

Creating the Provisioning Profile of Type Ad Hoc

  1. In your Apple Developer account navigate to Certificates, IDs & Profiles > Identifiers > Provisioning Profiles.

  2. Add a new provisioning profile.
    _images/Profiles.png
  3. Activate Ad Hoc.
    _images/Ad_Hoc_Profile.png
  4. Continue with step 4 to 12 as described above.

Creating an App Profile in App Store Connect

  1. Log in to App Store Connect and navigate to My Apps.

  2. Click on New App.
    _images/app-dist_apple-itunes-connect-new-app1.png
  3. This creates the profile for the app. The profile will contain all the settings related to the app and the Apple App Store.
    _images/Screen_Shot_2018-01-22.png
  4. Fill in the app name.

  5. The app name is reviewed by the Apple reviewer. If the app name does not fit with the Apple guidelines this will result in an app rejection.

  6. Do not use “employee app” as your app name. Apple requires the app to have public relevance instead of focussing on a single target group.

  7. Set the primary language.

  8. Fill in a Bundle ID. The ID is not visible to end users.

  9. Fill in a unique ID in the field SKU. The ID is not visible to end users.

  10. Click Create.

Adding the App Store Information

Configuring the App Information

  1. Log in to App Store Connect and navigate to My Apps and open the app profile you created earlier.

  2. Make sure all the required languages are set.

  3. Check the app name.

  4. Add a link to the privacy policy in your app.

  5. Select the categories for your app. CMSJunkie suggests Social network and News.

  6. Click Save.

Configuring Pricing and Availability

  1. Navigate to Pricing and Availability.

  2. Set app pricing to free.

  3. Adjust available countries if necessary.

  4. If you restrict the availability of your app to certain countries, only employees with app store accounts in those countries will be able to find and download your app in the stores. The geographical location of the employee does not matter for accessing the app store.

  5. For example, an app is only available in the French app store. In this case an US American employee would not be able to see the app. A French employee who resides in the USA will still be able to download and use the app while being in the USA.

  6. Select Available with no discount.

  7. Click Save.

Configuring the Current Version of the App

CMSJunkie provides you with files and information you need to fill into your app profile:

  1. Screenshots of your app

  2. The version number of your app file

  3. Reviewer login credentials

  4. Navigate to iOS App current version, usually 1.0.

  5. For each language:

  • Fill in the app information.

  • Add the store description.

  • Your app needs public relevance to get into the Apple App Store. You create an app store description that creates public relevance by mentioning the following points:

  • Introduce your company, e.g., your field of service and your typical customers.

  • Describe your app’s target audience as partners, employees, and customers.

  • Explain the content that will be available in the public area, e.g., company news, event reviews, and jobs.

  • Mention features like push notifications.

Example: This app keeps you up-to-date regarding listing information, offers and event about company ABC. With push notifications, you know what’s going on - always and everywhere. On top of that, the app offers the following features: […] Stay tuned!

  • Add more keywords that fit the company name and description, e.g. info, feed, events, information, notification.

  • Add the support URL and marketing URL, both can be your homepage.

  • Adjust version to the version number you received from CMSJunkie.

  1. Fill the Copyright section with your company information.

  2. Edit the rating. In most cases select None or No.

  3. Add the credentials of the reviewer login to the ones you received from CMSJunkie.

  4. Adjust the release timing if necessary

  5. Click Save.

Add CMSJunkie to the Developer Account

Adding a new Developer to your developer.apple.com account To access your account, a new Developer user will need to be invited.

To invite team members

  1. Login to App Store Connect (https://appstoreconnect.apple.com/).

  2. Open the Users and Access section.

  3. Click the ‘+’ button in the top-left corner of the page.

  4. Enter the new users details. Please use support@cmsjunkie.com as email

  5. Grant the user with at least the Admin or App Manager role.

  6. Enable ‘Access to Certificates, Identifiers & Profiles’.

  7. Click Invite to send an invite.

_images/add_account_appstoreconnect.png

Online build form

To continue with the iOS App Build firstly add the ‘iOS order ID’ and ‘iOS order Email’ on the edit button as in the picture and then click on the ‘Build iOS app’ button.

_images/account_build_app_ios.png

Using the form

Please fill in all the details and add all needed files in the form below for bulding the mobile app. The mobile application can be linked to only one website. Once the website is saved it cannot be changed.

  • App name: the name of the app

  • Base URL: the website Url

  • User email: the email the build will be sent to.

  • Google maps API key: set here the Google Map API key you want to use for maps.

  • Firebase server key: the key generated by Firebase for the mobile app

  • Mandatory location field: if yes, will make location mandatory when searching for a business/offer/event.

  • Show latest listings: if yes, will shown all latest listings on the screen.

  • Show featured listings: will show/hide featured listings sections on home screen.

  • Show featured offers: will show/hide featured offers sections on home screen.

  • Show featured events: will show/hide featured events sections on home screen.

  • Show offers: if set to no, offers will be removed from the app altogether

  • Show events: if set to no, events will be removed from the app altogether

  • Enable reviews: if yes, user will be allowed to enter reviews and also see the existing reviews for businesses/offers.

  • Show messages: if yes , the messages will appear.

  • Select platform: select between joomla and wordpress

  • Allow guest users: if the setting is set to yes, the user will be allowed to open the app without having the need to be registered or login

  • Display emails: if it’s set to yes the emails will be displayed

  • Enable google login:if it’s set to yes , the google login will be available

  • Enable facebook login: if it’s set to yes , the facebook login will be available but before will have to complete the details

  • Select languages: select between english, french, german and italian.

NOTE: Please include the languages you are willing to change. You can download the existing language files and translate as needed, files are in .arb format which can be edited using a text editor

All the settings/images/data explained in the sections above can be fed into our online form in order to generate the application. This form can be accessed after purchasing the app.

_images/app_22.png

Custom menu

Configure custom menu items for the user dashboard. Please note that the changes take effect immediately and no app rebuild is required.

_images/custom_menu.png

The user can add custom menus where can define the title, menu,icon, user types,where to be located(dashboard or side drawer),type(phone, URL or Email) and languages.

NOTE : The menus that will show, will be depending from the language selected, the language is chosen from the settings on the device

_images/form_ios_upload_files.png
  • Logo - logo image that will be used as the app icon aswell.

  • Logo - No background - this is the logo image, that doesn’t contain the black background.

  • Google PList - use this input to upload the Google Plist info file downloaded from the Firebase console.(Google GoogleService-Info.plist file from Firebase project)

  • Mobile Provisioning File - use this input to upload the Mobile Provisioning File file downloaded from the Apple account.

  • Certificate & Private key - use this input to upload the p.12 file obtained in the Obtaining the Certificate & Private Key section

Mobile app server configurations

_images/app_23.png

Only featured listings - if set to yes, only featured listings will be displayed.

Only featured offers - if set to yes, only featured offers will be displayed.

Only featured events - if set to yes, only featured events will be displayed.

Listings category filter - select the categories that will be shown on the listing search filter

Offers category filter - select the categories that will be shown on the offer search filter

Events category filter - select the categories that will be shown on the event search filter

Pagination max number of items - admin can set the maximum number of items displayed on the pagination

Business default cover image - default cover image for all listings ( it is used if no cover image is uploaded for the listing or the selected package does not include a cover image)

Offer default cover image - default cover image for all offers ( it is used if no cover image is uploaded for the offer or the selected package does not include a cover image)

Event default cover image - default cover image for all events ( it is used if no cover image is uploaded for the event or the selected package does not include a cover image)

After finalizing, all the changes can be saved and previewed on the mobile device on the right side of the screen.

Language

The language section allows you to set your own language in order to have the content of your app in the desired language(s). By default we add the English language in the app building process. To add a new language follow the steps below. Please note that only the defined languages will be considered.

To add a new language:

  1. You can download the existing English file and translate as this file as you need: Download English File

  2. Once you’ve finished creating your language files, one strings.xml per language, select the desired languages from the language select and then upload the file for each language.

Publishing your app

Submitting the App to the Apple App Store for the First Time

  1. CMSJunkie provides you the ipa file. Once the build process triggered by the build form has finished you’ll receive via email the ipa file.

  2. Log in to App Store Connect.

  3. Upload the ipa file.

  4. This can take a couple of minutes. If the upload was successful you will get a success message.

  5. Apple is now processing the app and it can take several minutes until the app is available in App Store Connect.

  6. In App Store Connect, navigate to the app profile you created.

  7. Select the newly uploaded app in the Build section.

  8. Double check all inputs.

  9. Click Save.

  10. Answer all questions with No.

  11. Click Submit.

  12. The app is send to the Apple reviewer. You can see the status of the review in App Store Connect. After a successful review the app is available in the stores immediately or at the date you specified.

In case you work on another operating system contact your Customer Success Manager to get further support.

Android Mobile App

The Android App shows data in real time from the business directory website. The Business Owner will have the possibility to manage his/her own listings, offers, events, as well as private messages from the other business owners / users.

A section dedicated to The Business Owner’s profile will be present. From the profile menu, The Business Owner can manage its own bookmarks and reviews (for both, Listings and Offers). This section offers also the possibility to edit the current profile, to change the settings and to access the Front–End Control Panel.

Building the app - Prerequisites

After purchasing the application, you can access our online form for the application building process. A couple of configuration data and images are needed for the customization process.

You would have to provide the website address of the business directory extension, the images, the desired colors and the language.

Images

Landing Screen Images

These are the images that will appear when first opening the app.

slider_image_1.jpg

_images/app_1.jpg

slider_image_2.jpg

_images/app_2.jpg

slider_image_3.jpg

_images/app_3.png

After the landing screens it will appear the sign in/up screen with the option to continue as a guest aswell.

_images/app_4.1.jpg

Home Screen Header

This is the header image on top of the main screen of the application.

home_header_image.jpeg

_images/app_4.jpg _images/app_5.jpg

Listing No Image

featured_listing_placeholder.jpg - when the listing won’t have a logo image added, this image will be displayed instead in the list view.

Logo

ic_jbd_logo_24dp.xml (SVG) this is the logo image that contains the black background as shown in the home screen header. Logo should always be in a SVG format.

ic_jbd_logo_nobg_24dp.xml (SVG) – this is the logo image, that doesn’t contain the black background, as shown in the above three landing screen images. Logo should always be in a SVG format.

Note: These two logos can actually be the same image, but it is recommended, for design purposes, to have two different versions of the logo as described above.

Colors

The main color values used are: colorPrimary, colorPrimaryText, colorIcons, colorBackground, colorGenericText

_images/app_6.png

Firebase Set up

Firebase is used to push notifications to you audience as well as storing app data. Please do the set up below.

Firebase Console - Link

  • Create project in firebase

_images/firebase_android_add.jpg

Firebase Landing Page

_images/firebase_android_add_proj.jpg

Firebase Add a New Project Dialog

_images/firebase_android_1.jpg
  • Add Android app to project

  • The Android Package name has to be in the following format: com.cmsjunkie.jbusiness.yourcompany

  • replace yourcompany at the end with the name of your company.

_images/firebase_android_2.jpg
  • Download GoogleServices-info.plist

_images/firebase_android_3.jpg

Firebase Download GooglServices-info.plist

_images/app_11.png

Firebase Verify Your Installation

_images/app_12.png

Setup Database

  • Go to database section

_images/app_13.png
  • Create database

_images/app_14.png
  • Start in test mode -> Enable

_images/app_15.png
  • the Data tab should look like this

_images/firebase_database.png
  • for the database please use the following rules:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Get Web API Key

  • Settings -> Project Settings

_images/app_16.png
  • Cloud messaging -> Server Key

_images/app_17.png
  • Copy paste key to Firebase server key on Mobile app configuration on the admin dashboard.

_images/app_18.png

Google Maps API

Get API key for MAP SDK for Android

Step 1

_images/app_19.png

Step 2

_images/firebase_android_map.jpg

Step 3

_images/firebase_android_map2.jpg

Online build form

To continue with the Android App Build firstly add the ‘Android order ID’ and ‘Android order Email’ on the edit button as in the picture and then click on the ‘Build Android app’ button.

_images/account_build_app.png

Using the form

Please fill in all the details and add all needed files in the form below for bulding the mobile app. The mobile application can be linked to only one website. Once the website is saved it cannot be changed.

  • App name: the name of the app

  • Base URL: the website Url

  • User email: the email the build will be sent to.

  • Google maps API key: set here the Google Map API key you want to use for maps.

  • Firebase server key: the key generated by Firebase for the mobile app

  • Mandatory location field: if yes, will make location mandatory when searching for a business/offer/event.

  • Show latest listings: if yes, will shown all latest listings on the screen.

  • Show featured listings: will show/hide featured listings sections on home screen.

  • Show featured offers: will show/hide featured offers sections on home screen.

  • Show featured events: will show/hide featured events sections on home screen.

  • Show offers: if set to no, offers will be removed from the app altogether

  • Show events: if set to no, events will be removed from the app altogether

  • Enable reviews: if yes, user will be allowed to enter reviews and also see the existing reviews for businesses/offers.

  • Show messages: if yes , the messages will appear.

  • Select platform: select between joomla and wordpress

  • Allow guest users: if the setting is set to yes, the user will be allowed to open the app without having the need to be registered or login

  • Display emails: if it’s set to yes the emails will be displayed

  • Enable google login:if it’s set to yes , the google login will be available

  • Enable facebook login: if it’s set to yes , the facebook login will be available but before will have to complete the details

  • Select language: select between english, french, german and italian.

NOTE: Please include the language you are willing to change. You can download the existing language files and translate as needed, files are in .arb format which can be edited using a text editor

All the settings/images/data explained in the sections above can be fed into our online form in order to generate the application. This form can be accessed after purchasing the app.

_images/app_22.png

Custom menu

Configure custom menu items for the user dashboard. Please note that the changes take effect immediately and no app rebuild is required.

_images/custom_menu.png

The user can add custom menus where can define the title, menu,icon, user types,where to be located(dashboard or side drawer),type(phone, URL or Email) and languages.

NOTE : The menus that will show, will be depending from the language selected, the language is chosen from the settings on the device

_images/form_android_upload_files.png

Logo - logo image that will be used as the app icon aswell. Logo - No background - this is the logo image, that doesn’t contain the black background. Google Services JSON - google-services.jason file from Firebase project

Mobile app server configurations

_images/app_23.png

Only featured listings - if set to yes, only featured listings will be displayed.

Only featured offers - if set to yes, only featured offers will be displayed.

Only featured events - if set to yes, only featured events will be displayed.

Listings category filter - select the categories that will be shown on the listing search filter

Offers category filter - select the categories that will be shown on the offer search filter

Events category filter - select the categories that will be shown on the event search filter

Pagination max number of items - admin can set the maximum number of items displayed on the pagination

Business default cover image - default cover image for all listings ( it is used if no cover image is uploaded for the listing or the selected package does not include a cover image)

Offer default cover image - default cover image for all offers ( it is used if no cover image is uploaded for the offer or the selected package does not include a cover image)

Event default cover image - default cover image for all events ( it is used if no cover image is uploaded for the event or the selected package does not include a cover image)

After finalizing, all the changes can be saved and previewed on the mobile device on the right side of the screen.

Language

The language section allows you to set your own language in order to have the content of your app in the desired language(s). By default we add the English language in the app building process. To add a new language follow the steps below. Please note that only the defined languages will be considered.

To add a new language:

  1. You can download the existing English file and translate as this file as you need: Download English File

  2. Once you’ve finished creating your language files, one strings.xml per language, select the desired languages from the language select and then upload the file for each language.

Publishing your app

Submitting the App to the Google App Store

  1. Sign up on Google Play Console

  2. You can sign up on the google play console by using the following link

  3. There are 4 steps to complete the registration. After reading the Google play store developer distribution agreement, agree to the terms by clicking on the check box.

  4. Now you will need to pay a one time ‘Developer Registration Fee’ to Google. You can upload an unlimited number of applications from a single account with a limit of uploading 15 apps per day.

  5. After completing your account details for the Google developer account, it is time to create the application.

Publishing App

  1. Click on the create application button, and enter the name of your app on the form. Fill in the other information as well (short description, full description etc.)

  2. After this you need to put up some screenshots from the application. The minimum required number is 2 and maximum is 8.

  3. Once this step is done, you will need to put a high resolution icon or logo with a size of 512x512 px.

  4. You will also need to put a feature graphic of 1024x500 px.

  5. Scroll down to complete the other details including application type, category, website, email and phone number.

  6. After this check privacy policy and then click save as draft and go to the app release and click on manage production.

  7. Now you will see a create release button, go ahead and click on it. You will be prompted with an upload files form, you can upload here the signed .apk file of your application. Once the upload is successful , scroll down and click on the review button.

  8. Go to Content Rating section and click continue. Fill in all the details which include email addresses and select your categories as well. Fill in all the other required fields.

  9. After completing all fields, click on the Apply Rating button. Select your pricing and distribution based on how you want users to access your App. Fill in all mandatory information marked with a *, and click Save draft after completing all needed information.

  10. For the last step, click on the Manage Production, Edit Release and lastly on the Review button. A new button will appear named “Start Rollout to Production” . You can click on this button and after confirming, your submission will be finally complete and you will need to wait up to 6 hours for approval.s