Sie sind auf Seite 1von 56

Installation Mobile News App

Contents
1. Config App & Wordpress ........................................................................................................................... 3
1.1. Change package name ........................................................................................................................ 3
1.2. Install & Setting plugins for Wordpress ...................................................................................... 4
1.3. Create OneSignal for Application Android ................................................................................. 7
2. Deploy App to *.apk for Android & *.ipa for iOS ........................................................................... 13
3. Use Deployapp.net Tool .......................................................................................................................... 14
4. Install Tools ................................................................................................................................................. 17
5. Build Android App for Testing ............................................................................................................. 20
5.1. Install Java Development Kit (JDK) ............................................................................................ 20
5.2. Install Android Studio & Android SDK ...................................................................................... 21
5.3. Setting environment variables for Android SDK .................................................................. 21
5.4. Add Platform ....................................................................................................................................... 23
5.5. Build to APK ........................................................................................................................................ 23
5.6. Error: Could not find an installed version of gradle either in android studio... ........ 24
6. Build iOS app for Testing ....................................................................................................................... 27
7. Public App to Store ................................................................................................................................... 28
7.1. Android Publishing........................................................................................................................... 28
7.2. Upload to Google Play Store .......................................................................................................... 29
7.3. iOS Publishing..................................................................................................................................... 32
8. Deploy on Mac OS ..................................................................................................................................... 47
9. FAQs ............................................................................................................................................................... 48
1. How to push notification ................................................................................................................... 48
2. Send a notice advising the posts or category ............................................................................. 50
3. How to change icon of category ...................................................................................................... 52
4. How to post a video? ........................................................................................................................... 53
5. How to create Album Galerry on Mobile App? .......................................................................... 54
6. How to Edit Title, Description for each Picture in Album? ................................................... 54
7. Change infomation application ....................................................................................................... 55
8. Translate mobile app to another language ................................................................................. 56

https://buy-addons.com | http://deployapp.net Page 1


9. RTL Language......................................................................................................................................... 56

https://buy-addons.com | http://deployapp.net Page 2


Start

If our source have any error, please contact us throught our Ticket System Support:

- Forums: https://forums.buy-addons.com/forums/

1. Config App & Wordpress


1.1. Change package name

- Open YOUR_PROJECT/config.xml change content of <name> tag, id attribute


in <widget> tag

Every app has a unique application ID that looks like a Java package name, such
as com.example.myapp

This ID uniquely identifies your app on the device and in Google Play Store, Apple Store...

Example:

- Change com.taydo.dailynews to com.domain.appname

- Change <name> tag to Daily News as example

ID must is UNIQUE for every app on GLOBAL

https://buy-addons.com | http://deployapp.net Page 3


1.2. Install & Setting plugins for Wordpress

1.2.1. Settings Permalinks:

On WP-Admin, go to Settings -> Permalinks, select any options except for Plain and Save
to change.

1.2.2. Install the plugins for wordpress website in order:

Open file: Wordpress Plugins/Download & Install.txt, download all plugins from this file
and Install it

1.2.3. Install & Setting jwt-authentication-for-wp-rest-api plugin

Before continuing you need to configure the website to install JWT Authentication for WP-
API

Minimum PHP Version: 5.3.0

Step 1: Install & Active jwt-authentication-for-wp-rest-api plugin

https://buy-addons.com | http://deployapp.net Page 4


Step 2: Modify your .htaccess file in your hosting (from ROOT of Wordpress) file adding
the follow

RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

https://buy-addons.com | http://deployapp.net Page 5


Step 3: Modify your wp-config.php file, add 2 NEW lines in TOP of file

define('JWT_AUTH_SECRET_KEY', 'your-top-secrect-key');

define('JWT_AUTH_CORS_ENABLE', true);

Change your-top-secrect-key to any your random STRING like 34bas9mzkfu300768jafj

1.2.5. Install there plugins:

• Install & Active rest-api plugin


• Install & Active wp-user-avatar plugin
• Install & Active wpcustom-category-image plugin
• Install & Active post-views-counter plugin
• Install & Active mobiconnector plugin

https://buy-addons.com | http://deployapp.net Page 6


1.3. Create OneSignal for Application Android

- Login to https://onesignal.com/ and click "Add a new app". Input App Name and click
Create

- Select Platform Google Android and click Next

- Before continue, you need Add Google Services for app. Open Google Services
https://developers.google.com/mobile/add?platform=android&cntapi=gcm&pli=1 in new

https://buy-addons.com | http://deployapp.net Page 7


tab, login your Google account and input App name, Android package name, select Country
and click Continue.

https://buy-addons.com | http://deployapp.net Page 8


- On tab Cloud Messaging click Enbled Google Cloud Messaging. When success, you will get
the Server API Key and Sender ID (you must remember to configure)

https://buy-addons.com | http://deployapp.net Page 9


- Now back to tab OneSignal, paste Server API Key to Google Server API Key and click Save

- Select target is PhoneGap, Cordova, Ionic, Intel XDX and click Next

https://buy-addons.com | http://deployapp.net Page 10


- Click to Close (X) and chose Yes

- Go to App Settings, tab Keys & IDs get the Onesignal App ID to change config.

1.3.1. Config Onesignal from Mobile App

- Open YOUR_PROJECT/www/settings.js or YOUR_PROJECT/www/js/settings.js

then modify your config.

https://buy-addons.com | http://deployapp.net Page 11


android_packageName = Your package name (1) on for Rate and Share app

wordpress_url = Url website Wordpress without / at the end

wordpress_per_page = Posts on 1 page

onesignal_app_id = Onesignal App ID (some app onesignal_app_id is named your_appid)

onesignal_project_number = Sender ID (some app


onesignal_project_number is named your_google_project)

Some app, onesignal_project_number's variable is not important, so this variable


is commented. you do not need enter data for this variable, if you see this format, it is
commented, you can ignore it

// var your_google_project = '';

https://buy-addons.com | http://deployapp.net Page 12


2. Deploy App to *.apk for Android & *.ipa for iOS
• Google Play require *.apk file - signed which can be used to upload it to Google Play
• Apple Store require *.ipa file which can be used to upload it to Apple Store

To deploy an Android App you can use 2 ways:

• 1st Way: Use our online Tool (it is a Beta version) on http://deployapp.net/, please
read 3. Use Deployapp.net section
• 2nd Way: Manual install tools and deploy your app from your computer. Please
read: 4. Install Tools, 5. Build Android App for Test, 7. Public app to Store sections

To deploy an iOS app

Please read 4. Install Tools, 6. Build iOS App for Test, 7. Public app to Store

https://buy-addons.com | http://deployapp.net Page 13


3. Use Deployapp.net Tool
Step 1: Open YOUR_PROJECT/www/settings.js or YOUR_PROJECT/www/js/settings.js

Change information to your app.

Step 2: ZIP (Compress) Mobile App Source directory

https://buy-addons.com | http://deployapp.net Page 14


Enter any name of file.zip

Step 3: Upload ZIP File to http://deployapp.net/

https://buy-addons.com | http://deployapp.net Page 15


Uploading:

Next Step to FINAL

Step 4:

• Download file APK-debug file and test it on your real Android device
• Download & Upload APK-signed file to your Google Play if it is ready

https://buy-addons.com | http://deployapp.net Page 16


4. Install Tools
Deploy Mobile app you need install some Tools

You can uninstall there tools after uploaded your app to Google Play or Apple Store

- Download & Install NodeJS (lastest version): https://nodejs.org/en/download/

- Install Apache Cordova (Lastest version): http://cordova.apache.org/#getstarted

- Install latest IONIC ( latest version is IONIC 3) with command:

npm install -g ionic

Once you already installed, create a new project ionic from any directory with command:

ionic start your_app_name blank --type ionic1

Example Our command ( --type ionic1 is IMPORTANT)

ionic start Foxnews blank --type ionic1

https://buy-addons.com | http://deployapp.net Page 17


After created the your project, delete 4 directories & files:

- www

- resources

- plugins

- config.xml

from your IONIC project

Copy all SOURCE in Mobile App Source from our package to your IONIC project (Override
it it is necessary)

https://buy-addons.com | http://deployapp.net Page 18


https://buy-addons.com | http://deployapp.net Page 19
5. Build Android App for Testing
5.1. Install Java Development Kit (JDK)

- Step 1: Download & Install Java Development Kit


(JDK) latest: www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-
1880260.html

- Step 2: Set the JAVA_HOME environment variable to the location of your JDK installation

In File Explorer right-click on the This PC (or Computer) icon, then click Properties ->
Advanced System Settings -> Environmental Variables.

https://buy-addons.com | http://deployapp.net Page 20


5.2. Install Android Studio & Android SDK

- Step 1: Download & Install Android


studio: https://developer.android.com/studio/install.html?pkg=studio

- Step 2: Open Android Studio, Click Next to download all Package for Android SDK

5.3. Setting environment variables for Android SDK

- Step 1: In File Explorer right-click on the This PC (or Computer) icon, then
click Properties -> Advanced System Settings -> Environmental Variables.

https://buy-addons.com | http://deployapp.net Page 21


- Step 2: Select the PATH variable and press Edit. Add more path to android-sdk\tools and
android-sdk\platform-tools

to PATH, example:

G:\androidSDK\tools;G:\androidSDK\platform-tools;

https://buy-addons.com | http://deployapp.net Page 22


5.4. Add Platform

Move to folder of project YOUR_IONIC_PROJECT from Command line

cd your_app_name

Then use command

cordova platform add android

After add platform success, you can edit config, icon, splashscreen... in
YOUR_APP/platforms/android

5.5. Build to APK

Now, you can build to run in device

cordova build android

When success, file apk will in /platforms/android/build/outputs/apk with name


"android-debug.apk"

https://buy-addons.com | http://deployapp.net Page 23


5.6. Error: Could not find an installed version of gradle either in android
studio...

If you see this error:

- Please install gradle at here: https://gradle.org/install

Step 1: Download https://gradle.org/releases

Step 2: unzip to your computer

Step 3: In File Explorer right-click on the This PC (or Computer) icon, then click Properties
-> Advanced System Settings -> Environmental Variables.

Under System Variables select Path, then click Edit. Add an entry for G:\nodejs7\gradle-
4.0\bin. Click OK to save.

https://buy-addons.com | http://deployapp.net Page 24


Step 4: Close Window Command Line and open it again

Step 5: test with command: gradle -v

if it is showing result for any version of gradle, it is okay.

Step 6: do STEP 5.5. Build to APK again

https://buy-addons.com | http://deployapp.net Page 25


Read More:
http://cordova.apache.org/docs/en/6.x/guide/platforms/android/index.html#page-toc-
source

https://buy-addons.com | http://deployapp.net Page 26


6. Build iOS app for Testing
Read more
link: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html

https://buy-addons.com | http://deployapp.net Page 27


7. Public App to Store
Now that we have a working app, we are ready to push it live to the world! Since the Ionic
team already submitted the Todo app from this guide to the app store, chances are you’ll
want to follow this chapter with a new app that you make on your own.

So first, we need to generate a release build of our app, targeted at each platform we wish
to deploy on. Before we deploy, we should take care to adjust plugins needed during
development that should not be in production mode. For example, we probably don’t want
the debug console plugin enabled, so we should remove it before generating the release
builds:

ionic plugin rm cordova-plugin-console

7.1. Android Publishing

To generate a release build for Android, we can use the following cordova cli command:

ionic cordova build --release android

This will generate a release build based on the settings in your config.xml.

Your Ionic app will have preset default values in this file, but if you need to customize how
your app is built, you can edit this file to fit your preferences. Check out the config.xml file
(link: http://cordova.apache.org/docs/en/latest/config_ref/index.html) documentation for
more information.

Next, we can find our unsigned APK file in platforms/android/build/outputs/apk. In our


example, the file was platforms/android/build/outputs/apk/HelloWorld-release-
unsigned.apk.

Now, we need to sign the unsigned APK and run an alignment utility on it to optimize it and
prepare it for the app store. If you already have a signing key, skip these steps and use that
one instead.

Let’s generate our private key using the keytool command that comes with the JDK

https://buy-addons.com | http://deployapp.net Page 28


keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -
keysize 2048 -validity 10000

You’ll first be prompted to create a password for the keystore. Then, answer the rest of the
nice tools’s questions and when it’s all done, you should have a file called my-release-
key.keystore created in the current directory.

Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to
submit updates to your app!

To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-


key.keystore HelloWorld-release-unsigned.apk alias_name

This signs the apk in place.

Finally, we need to run the zip align tool to optimize the APK. The zipalign tool can be found
in /path/to/Android/sdk/build-tools/VERSION/zipalign.

For example, on OS X with Android Studio installed, zipalign is


in ~/Library/Android/sdk/build-tools/VERSION/zipalign:

zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

Now we have our final release binary called HelloWorld.apk and we can upload this on the
Google Play Store for all the world to enjoy!

(There are a few other ways to sign APKs. Refer to the official Android App Signing at here:
https://developer.android.com/studio/publish/app-signing.html )

7.2. Upload to Google Play Store

Now that we have our release APK ready for the Google Play Store, we can create a Play
Store listing and upload our APK.

https://buy-addons.com | http://deployapp.net Page 29


To start, you’ll need to visit the Google Play Store Developer Console:
https://play.google.com/apps/publish/ and create a new developer account.
Unfortunately, this is not free. However, the cost is only $25 compared to Apple’s $99.

Once you have a developer account, you can go ahead and click “Publish an Android App on
Google Play” as in the screenshot below:

Then, you can go ahead and click the button to edit the store listing (We will upload an APK
later). You’ll want to fill out the description for the app. Here is a little preview from when
we filled out the application with the Ionic Todo app:

https://buy-addons.com | http://deployapp.net Page 30


When you are ready, upload the APK for the release build and publish the listing. Be patient
and your hard work should be live in the wild!

Updating your App


As you develop your app, you’ll want to update it periodically.

https://buy-addons.com | http://deployapp.net Page 31


In order for the Google Play Store to accept updated APKs, you’ll need to edit
the config.xml file to increment the version value, then rebuild the app for release.

7.3. iOS Publishing

First, you need to enroll in Apple Developer Program:


https://developer.apple.com/programs/. As with Google, if you have a personal account
with Apple, you can create an additional one for your applications.

7.3.1. Connecting Xcode with your developer account

After you receive your developer status, open Xcode on your Mac and go to Preferences ->
Accounts and add your account to Xcode by clicking the + button on the lower left hand
side, and follow the instructions:

https://buy-addons.com | http://deployapp.net Page 32


7.3.2. Signing

Now that you linked Xcode with your developer account, go to Preferences -> Accounts,
select your Apple Id on the left hand side and then click the View Details button shown on
the previous image. You should see the popup similar to the one on the image below:

Click the Create button next to the iOS Distribution option.

You can learn more about maintaining your signing identities and certificates from
the official documentation:
https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistri
butionGuide/MaintainingCertificates/MaintainingCertificates.html

7.3.3. Setting up the app identifier

Next, through the Apple Developer Member Center:


https://developer.apple.com/membercenter we’ll set up the app ID identifier details.
Identifiers are used to allow an app to have access to certain app services like for example
Apple Pay. You can login to Apple Developer Member Center with your Apple ID and
password.

Once you’re logged in you should choose Certificates, Identifiers, and Profiles option as
shown on the image below:

https://buy-addons.com | http://deployapp.net Page 33


On the next screen, shown on the image below, select the Identifiers option under the iOS
Apps.

https://buy-addons.com | http://deployapp.net Page 34


On the next screen, shown on the image below, select the plus (+) button in order to add a
new iOS App ID.

On the next screen, shown partialy on the image below, you’ll have to set the name of your
app, and use the Explicit App ID option and set the Bundle ID to the value of the id in your
Cordova config.xml tag.

https://buy-addons.com | http://deployapp.net Page 35


Additionally, you’ll have to choose any of the services that need to be enabled. For example,
if you use Apple Pay or Wallet in your app, you need to choose those option.

You can learn more about registering app identifiers from


https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributi
onGuide/MaintainingProfiles/MaintainingProfiles.html

7.3.4. Creating the app listing

Apple uses iTunes Connect https://itunesconnect.apple.com/ to manage app submissions.


After you login, you should see a screen similar to the one on the image below:

https://buy-addons.com | http://deployapp.net Page 36


Here you have to select the My Apps button, and on the next screen select the + button, just
below the iTunes Connnect My Apps header, as shown on the image below:

This will show three options in a dropdown, and you should select the New App. After this
the popup appears, as shown on the image below, where you have to choose the name of
the application, platform, primary language, bundle ID and SKU.

https://buy-addons.com | http://deployapp.net Page 37


Once you’re done, click on the Create button and you’ll be presented with the following
screen where you’ll have to set some basic options like Privacy Policy URL, category and
sub category.

Now, before we fill out everything in the listing, we’ll build our app and get it uploaded with
Xcode. Then you’ll come back to finish the listing.

You can learn more about managing your app in iTunes Connect from
https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributi
onGuide/UsingiTunesConnect/UsingiTunesConnect.html

7.3.5. Building the app for production

In the root directory of your application execute the following command: ionic build ios --
release

If everything went well you’ll see the BUILD SUCCEEDED output in the console.

- Opening the project in Xcode

https://buy-addons.com | http://deployapp.net Page 38


- Now, open the platforms/ios/SuperSimpleCalculator.xcodeproj file in Xcode (of course
you would change SuperSimpleCalculator with your own name).

https://buy-addons.com | http://deployapp.net Page 39


Once the Xcode opens up the project, you should see the details about your app in the
general view, as shown on the image below:

You should just check that the bundle identifier is set up correctly, so that it’s the same as
the value you specified earlier in the app ID. Also, make sure that the version and build
numbers are correct. Team option should be set to your Apple developer account. Under
the deployment target you can choose which devices your application will support.

7.3.6. Creating an archive of the application

In Xcode, select Product -> Scheme -> Edit Scheme to open the scheme editor. Next, select
the Archive from the list on the left hand side. Make sure that the Build configuration is set
to Release as shown on the image below:

https://buy-addons.com | http://deployapp.net Page 40


To create an archive choose a Generic iOS Device, or your device if it’s connected to your
Mac (you can’t create an archive if simulator is selected), from the Scheme toolbar menu in
the project editor, as shown on the image below:

Next, select Product -> Archive, and the Archive organizer appears and displays the new
archive.

https://buy-addons.com | http://deployapp.net Page 41


At this point you can click the Upload to App Store... button, and if everything goes fine
you’ll have an uploaded app, and the only thing that’s left to do is to complete the iTunes
Connect listing and submit it for review!

If you get an email from iTunes Connect shortly after you uploaded the archive with the
content similar to this:

7.3.7. Finishing the app list process

Now you should head back to the iTunes Connect portal


https://itunesconnect.apple.com/ and login. Next, click on the Pricing and Availability on
the left hand side under APP STORE INFORMATION.

https://buy-addons.com | http://deployapp.net Page 42


You don’t have to worry about forgetting to insert any crucial and required information
about your application, since you’ll be notified about what’s missing and what needs to be
added/changed if you try to submit the app for review before all details are filled in.

Next, click on the 1.0 Prepare for Submission button on the left hand side, as shown on the
image below. When we uploaded our archive, iTunes Connect automatically determined
which device sizes are supported. As you can also see on the image below, you’ll need to
upload at least one screenshot image for each of the various app sizes that were detected
by iTunes Connect.

https://buy-addons.com | http://deployapp.net Page 43


Next you’ll have to insert Description, Keywords, Support URL and Marketing URL
(optionally), as shown on the image below:

In the Build section you have to click on the + button and select the build that was uploaded
through Xcode in the previous steps, as shown on the image below:

https://buy-addons.com | http://deployapp.net Page 44


Next you’ll have to upload the icon, edit the rating, and set some additional info like
copyright and your information. Note that the size of the icon that you’ll have to upload
here will have to be 1024 by 1024 pixels. Thankfully, you can use the splash.png from the
second tutorial. If you’re the sole developer then the data in the App Review
Information should be your own. Finally, as the last option, you can leave the default
checked option that once your app is approved that it is automatically released to the App
Store.

Now that we’re finished with adding all of the details to the app listing, we can
press Save and then Submit for Review. Finally, you’ll be presented with the last form that
you’ll have to fill out:

https://buy-addons.com | http://deployapp.net Page 45


After you submit your app for review you’ll see the status of it in the My Apps as Waiting
for review, as shown on the image below. Also, shortly after you submit your app for
review you’ll get a confirmation email from iTunes Connect that your app is in review.

Apple prides itself with a manual review process, which basically means it can take several
days for your app to be reviewed. You’ll be notified of any issues or updates to your app
status.

7.3.8. Updating the app

Since you’ll probably want to update your app at some point you’ll first have to update the
build and version numbers in the Cordova config.xml file and then rebuild the application
and open it up from the Xcode and follow the same steps all over again.

Once you submit for the review, you’ll have to wait for the review process again. It’s pivotal
to note that if your changes aren’t too big you could use Ionic Deploy to update your
application without going through the review process.

https://buy-addons.com | http://deployapp.net Page 46


8. Deploy on Mac OS
Please read more this
link: https://cordova.apache.org/docs/en/latest/guide/platforms/osx/index.html

https://buy-addons.com | http://deployapp.net Page 47


9. FAQs
1. How to push notification

Requirements: at least one user is identified on the application management OneSignal

- Go to https://onesignal.com/ login your account, click to name of Application open


Dashboard

https://buy-addons.com | http://deployapp.net Page 48


- Click New Message in menu right, select user to send and click Next

- Enter information, click Next,...to Confirm, check information and click [Send Message] to
send notification

https://buy-addons.com | http://deployapp.net Page 49


2. Send a notice advising the posts or category

- You need include addtional data so that when a user clicks on the message will open the
posts or the categories

- In Option of New Message

- Input data, you can only choose one posts or category:

+ Posts: key = posts, value = [id of posts]

+ Category: key = category, value = [id of category]

Example:

when users click on the notification will open posts with ID 234

https://buy-addons.com | http://deployapp.net Page 50


https://buy-addons.com | http://deployapp.net Page 51
When user click on the notification will open category with ID 1

3. How to change icon of category

- On the Wordpress Admin, open Posts -> Categories on menu left. Click the category to edit
or create new.

- In case Image, click Upload/Edit Image button, select your icon and
click Update (recommended image size 32x32 pixel)

https://buy-addons.com | http://deployapp.net Page 52


4. How to post a video?

In Content, you can enter any link to youtube, vimeo, or any video, Example

• https://vimeo.com/77677392
• https://www.youtube.com/watch?v=HOoreJa6ies
• http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
• etc...

https://buy-addons.com | http://deployapp.net Page 53


5. How to create Album Galerry on Mobile App?

6. How to Edit Title, Description for each Picture in Album?

- Step 1: Edit a Picture

https://buy-addons.com | http://deployapp.net Page 54


- Step 2: Enter Title, Description for each picture

7. Change infomation application

- You can change config application before build, like name of application, version,
description, author,...

Open and edit in /config.xml

Change Logo and Launcher

To change Logo and Launcher, change images on /resources

/android for application Android

/ios for application Ios

Make sure you overwrite and don't change the name, image file size.

https://buy-addons.com | http://deployapp.net Page 55


8. Translate mobile app to another language

- Open YOUR_PROJECT/www/translate.js or YOUR_PROJECT/www/js/translate.js and edit


value on $translateProvider.translations

- Example, i want to translate into Vietnamese. I replace that value into Vietnamese
and Save file

9. RTL Language

To customization application for RTL Language open settings.js change rtl_language = true;

https://buy-addons.com | http://deployapp.net Page 56

Das könnte Ihnen auch gefallen