ultima mobile

not just a tool, but your companion

• created: 08/11/2017
• latest update: 08/15/2017
• by: PSSThemes
• email: prettysmartsoft@gmail.com

Thank you

ultima mobile is an awesome package you will find here on CodeCanyon.

With ultima you can write history, it's easy to create your own mobile app.

 

Installing Ionic

Improve this doc

Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build and deploy as a native app. This means we need to install a few utilities to get developing.

Ionic CLI and Cordova

To create Ionic projects, you’ll need to install the latest version of the CLI and Cordova. Before you do that, you’ll need a recent version of Node.js. Download the installer for Node.js 6 or greater and then proceed to install the Ionic CLI and Cordova for native app development:

$ npm install -g ionic cordova

You may need to add “sudo” in front of these commands to install the utilities globally

Once that’s done, create your first Ionic app:

$ ionic start cutePuppyPics

Add –type ionic1 if you’d like to use Ionic 1. To run your app, cd into the directory that was created and then run the ionic serve command to test your app right in the browser!

$ cd cutePuppyPics
$ ionic serve

Platform Guides

For those building native apps for iOS and Android (most of you!), each platform has certain features and installation requirements before you can get the most out of your Ionic and Cordova development.

For iOS developers, take a look at the Cordova iOS Platform Guide and follow the instructions to install or upgrade Xcode, and possibly register for a developer account to start building apps for iOS.

For Android developers, take a look at the Cordova Android Platform Guide and follow the instructions to install the SDK and/or Android Studio to start building apps for Android.

In the downloaded app you will find a src folder. 

Inside the src folder there are:

 - app folder

   - app.component.ts 

   - app.html

   - app.module.ts

   - app.scss

   - main.ts

- assets folder

- pages folder

- theme folder - variables.scss

1. create a new ionic app

ionic start app sidemenu 

2. replace src folder with the one found in the package

3. run ionic serve to preview the app in the browser

We do have so far:

- home page (4 versions)

- cards (6 versions)

- articles (3 versions)

- single article (3 versions)

- profile page (6 versions)

- lists (2 versions)

- buttons (different versions)

- wordpress API (articles list)

- Firebase (Angularfire2 - list GET and ADD)

- toast messages

- date and time input

1. How to start your own app, using only elements you need

First of all you can start a New Ionic v3 app:

$ ionic start cutePuppyPics sidemenu

After that replace  app.scss from the app folder with the one in our package

Include the HTML code for the element you want to use.

Let’s say you want to use a gradient card, open pages/cards/cards4/cards4.html and select the one you like

<ion-card class="round-small relative">
    <div class="grad-blue-red ptb100 center">
      <h1 class="text-white">Hello gradient!</h1>
         …
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

Paste the code in your HTML page, you should see the card looking good in your app preview.

2. How to add pages to your app

In your CMD/Terminal:

Ionic generate page MyPageName

After that, inject the page in app/app.module.ts:

import { MyPageName } from '../pages/my-page-name/my-page-name’;

And add it to @NgModule declarations and entryComponents.

If you want the page to appear in the side menu, include it to app/app.components.ts page:

import { MyPageName } from '../pages/my-page-name/my-page-name’;

And add it to this.pages = 

{ title: ‘Awesome Page’, component: MyPageName },
…

In your code, wordpress/wordpress.ts page holds the code needed for the app to communicate with Wordpress. 

First of all we import the Http service, which creates a bridge between the app and your blog, communicating with your blog database through the Json service provided by Wordpress.

After retrieving the posts, we do get the featured image too. And everything is pushed into an array of data (this.items). 

In wordpress/wordpress.html we itterate through all the items and display a list with your blog posts.

If you want to include other elements from your blog, feel free to use the official doc: https://developer.wordpress.org/rest-api/reference/

1. Install Angularfire2

npm install angularfire2 firebase --save

2. Setup Angularfire2

open the app.module.ts file, under src/app and add the following three entries.

At the top:

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

Define Firebase config (from your firebase web setup keys):

export const firebaseConfig = {

  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

2. Initialize your app by adding AngularFireModule in the imports array in @NgModule like this:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
...

Now you can include Firebase in any page (page.ts) like this:

1. Import "AngularFireDatabase, FirebaseListObservable" (FirebaseObjectObservable) at the top of your component.

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

2. Inject your AngularFireDatabase dependency in the constructor.

constructor(public navCtrl: NavController, afDB: AngularFireDatabase) {

3. Call the list (object) method on AngularFireDatabase object.

this.items = afDB.list('/cuisines');

Now you can add a list to your html page:

	<ion-list>
		<ion-item class="text" *ngFor="let item of items | async">
			{{item.$value}}
		</ion-item>
	</ion-list>

1. How to change colors:

We have provided 7 colors already defined:

$green: #98c01f;
$yellow: #f1c40f;
$gray: #666666;
$white: #ffffff;
$orange: #e67e22;
$light: #fafafa;
$dark: #222222;

You can find those in app/app.scss file.

For each of the colors, there is a transparent (Reba) version too, if you need to add a color overlay, and of course we have already defined background color versions, as well as text color versions. 

You can apply/change any of the classes (bg-green, text-orange) to change some element color scheme.

1. How to use the SCSS file:

SASS (SCSS) is easy to use if you already know CSS. It uses same functionalities, but is a bit extended, you can use $ variables to define standard constants through the file, variables that you can re-use anytime you want. 

There is the mixing part too, similar to functions, but in CSS, very useful. 

You can use as well Ionic variables to customize the entire look and feel of the app, but we invite you to read more about it here: 

https://ionicframework.com/docs/theming/