Fulcrumy

Ionic 2 Starter Full App Supports Multiple Language i18n

Tweet Me!

Ionic 2 Starter Full App Supports Multiple Language i18n

This application template build in using Ionic 2 Framework with applied i18n that is support multiple language. Now four languages applied in this app, languages are- default English, Spanish, Chinese, Arabic(RTL Support). Build In multiple theme concepts like Social media, Ecommerce, Business Logic, Map etc. Full application organised very simple design concepts with proper project structure, best practices. We applied latest version of Ionic 2, Angular 2, Typescript with i18n.


Created: 21/02/2017
By: Afroza Yasmin
Email: ionicbucket@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Demo

Youtube


Ionic Viewer

Preview this application on IOS and Android using Ionic View. Please download this Ionic View application from - Ionic Viewer. Use the app ID - a3a6e8a9


Android APK file

APK File
Platform Support

This app support all the platform - Android, IOS, Windows

Screens
  1. Landing Page
  2. Login Page
  3. Signup Page
  4. Forget Password
  5. Profile Page
  6. Calendar
  7. Location Google Map
  8. Chart
  9. Ecommerce
  10. Latest News
  11. Chat
  12. Components
  13. About Us
  14. Contact Us
  15. Settings
  16. Search
  17. Logout
Features

  1. Technologies- Ionic 2 + Angular 2 + Typescript
  2. Latest release of Ionic 2 and Angular 2 version
  3. Animated design that is clear and meaningfull
  4. 37 components
  5. Support multiple language I18n. Implemented by Ionic 2 - translator developed from Angular 2 (ng2-translate ).
  6. RTL Support
  7. Full authentication of Landing, Login and Registration page.
  8. Side menu support with Icon and company logo
  9. User Profile included with social options - Timeline, About Me, Friends, and Gallery tabs
  10. Calendar component implementation of Angular 2 full calendar
  11. Google map components added multiple view options detect current location
  12. Chart components added multiple chart and implemented by Chart.Js
  13. Ecommerce Module( Category wise product list and cart options)
  14. Latest news component slided support
  15. Chat module
  16. Awesome components page design
  17. About us and contact us components
  18. Language change options added into the Settings component
  19. Search and logout
  20. Very easy to customize
  21. Generated icons and splash screens
  22. Support full page Image viewer of any image. Implemented from - Image Viewer
Authentication

The landing page contains three option naming registration, login and skip. You can create an account by clicking on registration button which will take you to the registration page and by providing username, email, password and reconfirming password you can create the account. For entering into your profile you need to click on Login button. At login page, you need to provide registered email and password. If you forget your password anytime then there have option to retrieve your password by clicking on Forget Password which will create a pop up box for entering your email.


Preview Samples

Authentication
Side Menu

By default, side menus are hidden underneath their side menu content and can be opened by swiping the content left or right or by toggling a button to show the side menu.


Preview Samples

Side Menu
Profile Pages

The screenshots showing the profile pages view below. Through login one can enter into the profile page which is mixed with a number of interesting options. The header of the page contains serach option and advance menu. There have two slider view at the beginning of the page,the first slide exhibit profile picture and designation and second slide describe profile holder description. Immediate below of this there have timeline, about me, friends and gallery buttons. Timeline will show friends activities where you can give like and put your comments. About me section contains basic information, contact information and check ins. By clicking on friends button you can view your friends and can message them also. The profile gallery shows your uploaded photos and bigger photos displayed if you click on each photo. In every page of your selection there have a round size button at below right side corner and by clicking on the button you will found sharing option to social sites like Facebook, Twitter, Google plus etc.


Preview Samples

Profile Profile
Calendar

The calendar is an amazing option to see any kind of events, remind friends birthday, schedule meeting and so on.

Preview Samples

Calendar
Google Map

The google map can help you to see your destined location with five types of google view naming Standard Map, Silver Map, Night Map, Dark Map and Aubergine Map. When you will enter into the map that will detect your current location automatically.

Preview Samples

Map
Chart

The chart have six chart options naming Dynamic chart, Bar chart, Doughnut chart, Pie chart, Polar chart and Radar chart. Chart.js has been applied for describing every charts.

Preview Samples

Chart
Ecommerce

The Ecommerce site is very interesting and easy to browse. There have eight categories for browse in the site are Women, Men, Electronics, Home & Garden, Fashion, Toys & Baby, Book and Latest. Each categories are functionable. By entering into women category you can see this category product advertisement. If you select any product seller to see his/her product then you will see his/her product details, price, add to cart and related product suggestions. There also have quantity selection option for purchase the product. The cart symbol of the page right side corner of header shows how many products you have putted on your cart. By clicking on the button you can keep or discard your product selections.

Preview Samples

Ecommerce
Chat

The chat option allow you to chat with your friends who are in your contact list. By entering in contacts you can choose to whom you want to contact and by entering in to chat you can see messages and also can start to send message to your friends.

Preview Samples

Map
Internationalization (i18n)

This app support multiple language options that means internationalization can provide multiple language support of this application. This app suggests and applied best practice for internationalization. Initially we applied and used four(4) internationalization language for multiple language option. By default English(en) and others languages are - Spanish(es), Chinese(zh), Arabic(ar). Now stored all the json files assets folder assets/i18n.


JSON File Structure:

Json file

For multiple language support we used ng2-translate package.


Apply in Plain Html Text Page:

Json file

Preview Samples

preview

Installing

To install NG2-Translate run npm install ng2-translate --save.

Set up:

Bootstrapping

To use NG2-Translate, it must first be imported and added to the imports array in the NgModule of the application.

Import translate into ngModule

import { TranslateModule } from 'ng2-translate/ng2-translate';

    @NgModule({
    imports: [
        TranslateModule.forRoot()
    ]
    })
    

Translation json files stored into the src/assets/i18n/ directory.

We create a function in app.modules.ts that returns a new TranslateLoader.

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, 'assets/i18n', '.json');
    }
    

And then adding this function following the NgModules imports array:

@NgModule({
    imports: [
        TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
        })
    ]
    })
    

Usage:

Once the above steps have been completed, we can begin to use NG2-Translate in any Ionic 2 app. The first step is to set up the translation assets. The translation assets are just json objects, as shown below:

en.json
    {
    "HELLO": "Hello"
    }
    es.json
    {
    "HELLO": "hola"
    }
    

Now we can translate Hello following format.

<ion-title>{{ 'HELLO' | translate }}</ion-title>
    

Although we can use TranslateService for translate the current language the app is using and to translate JavaScript values in an application. To use the TranslateService in your app you must first import it and set the default language.

Import TranslateService

import {TranslateService} from 'ng2-translate';
    

Set default language

// this language will be used as a fallback when a translation isn't found in the current language

translate.setDefaultLang('en');
    

To change the language the app is currently using, there’s the use method of the TranslationService.

translateService.use('en');
    

More Details - ng2-translate

RTL Support

This application fully works Right to left (RTL) support. Already we used one language option of Arabic for that case you select Arabic language option from the settings page then you can see this application all the contents or items will be work on right to left side. This is only possible for the Ionic framework that is RTL supported by default. We can use RTL option by adding this code this.platform.setDir('rtl', true) when platform ready to run.


Sample code example in app.component.ts

this.platform.ready().then(() => {
    this.platform.setDir('rtl', true) 
    }
    

Preview Samples

Theming

Full application based on component based and every component uses its own SASS file. For that reason full app are well structured, flexible to manage. Easily override default SASS variables where possible (in app.variables.scss). app.variables.scss is used to modify the apps shared variables.

Theming your Ionic App

More Details

Sass Variables

More Details
Project Folder Structure

Let's take a tour to see how the project has been structured before we start to talk about details of project.

./src/index.html

src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app.

In this app, Ionic looks for the <ion-app> tag in your HTML. So, for that we include ionic tag <ion-app> </ion-app> in index.html page.

Also add some following script near in <ion-app> bottom tag.

<!-- Google APIs -->

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrvCNAuO0nWhvCQrKYc0CLAYtfZ9xHBrg&libraries=places" async defer></script>

    <!-- The polyfills js is generated during the build process -->
    <script src="build/polyfills.js"></script>

    <!-- The bundle js is generated during the build process -->
    <script src="build/main.js"></script>
    

./src/

Inside of the src directory we find our raw, uncompiled code. This is where most of the work for an Ionic 2 app will take place. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

./app

Starting with folders, we can see that the bulk of our app lives here: pages, services, etc.

src/app/app.module.ts

src/app/app.module.ts is the entry point for our app.

Every app has a root module that essentially controls the rest of the application. This is also where we bootstrap our app using ionicBootstrap.

In this module, we’re setting the root component to MyApp, in src/app/app.component.ts. This is the first component that gets loaded in our app, and typically it’s an empty shell for other components to be loaded into. In app.component.ts, we’re setting our template to src/app/app.html. Also this file contains all the components and module of this app.

./src/app/app.html

This html file contains main features of this app that represents side menu and content area. Set ion-menu to function as a side menu and then an ion-nav component to act as the main content area.

./platforms

Contains app platform targets like iOs or Android.

./www

This is where application index.html file lives. However, don’t be fooled into thinking this is where your app should live. Put all of your application scripts in the ./app folder.

./www/index.html

This file update meta tags and add in any required scripts (cordova, polyfills, vendor build, app build, etc.).

./ionic.config.json

These file contains project-specific settings. Primarily it’s just the app name and id along with any proxies you may need for your app.

./package.json

If you are familiar with npm, you will recognize this immediately. If not, then this file describes your app’s production and development dependencies.

./webpack.config.js

(optional) If you are using webpack for builds then you certainly will need this for adjusting your webpack build settings. If you are not using webpack then, please move on… nothing to see here.

./gulpfile.js

Here you find hooks for modifying the Ionic gulp tasks. Use these to modify the Ionic build. There are a number of custom hooks you can take advantage of. You most likely will not need to modify this file.

More details -

https://ionicframework.com/docs/v2/intro/tutorial/project-structure/
http://moduscreate.com/ionic-2-project-structure/
Installation

Prerequisite

  • Install Node
  • On OSX install [home brew](http://brew.sh/) and type `brew install node`
  • On Windows install [chocolatey](https://chocolatey.org/) and type `choco install nodejs`

To create Ionic 2 projects, you’ll need to install the latest version of the CLI and Cordova.

$ npm install -g ionic cordova
    
Run

Clone the project and cd into the project directory.

$ ionic serve
    $ ionic serve --lab
    
Build

Build for Android

Requirements


  • Android Studio
  • Updated Android SDK tools, platform and component dependencies. Available through Android Studio’s SDK Manager

Add android platform with the CLI :

$ ionic platform add android
    $ ionic build android
    

Android Production Builds (release.apk)/Publishing your app

$ cordova plugin rm cordova-plugin-console
    $ cordova build --release android
    $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
    $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
    $ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk
    

More Details

https://ionicframework.com/docs/guide/publishing.html

Building for iOS

You need the iOS SDK installed on your computer to build an iOS version of your application using the steps below.

  1. On the command line, make sure you are in the ionic-tutorial/conference directory
  2. Add support for the iOS platform
  3. ionic platform add ios
  4. This step is not required with recent versions of the Ionic CLI because the ios platform is installed by default
  5. Build the project
  6. ionic build ios
  7. Open conference.xcodeproj in the conference/platforms/ios directory
  8. In Xcode, run the application on a device connected to your computer or in the iOS emulator
Testing your app

Desktop browser testing

$ ionic serve
    

Simulator testing

$ ionic build ios
    $ ionic emulate ios
    

Testing as a native app

$ ionic run android
Icon and splash screen generation

Auto generate your icons and splash screens from 2 initial files with the CLI for iOS and Android.

Place two initial files in your project/resources directory

  • icon.png
  • splash.png

Make sure the sizes are correct:

  • icon.png: 192x192 px
  • splash.png: 2208x2208 px

Run the following command:

$ ionic resources
    $ ionic resources --splash
    $ ionic resources --icon
    
Technologies
  1. Angular 2
  2. Ionic 2
  3. Sass
  4. Typescript
  5. Ionic 2 with Typescript
  6. SCSS instead of CSS
  7. Automatic compilation