Ionic 2 Starter Full App Supports Multiple Language i18n Tweet Me!
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.
By: Afroza Yasmin
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!
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 fileAPK File
This app support all the platform - Android, IOS, Windows
- Landing Page
- Login Page
- Signup Page
- Forget Password
- Profile Page
- Location Google Map
- Latest News
- About Us
- Contact Us
- Technologies- Ionic 2 + Angular 2 + Typescript
- Latest release of Ionic 2 and Angular 2 version
- Animated design that is clear and meaningfull
- 37 components
- Support multiple language I18n. Implemented by Ionic 2 - translator developed from Angular 2 (ng2-translate ).
- RTL Support
- Full authentication of Landing, Login and Registration page.
- Side menu support with Icon and company logo
- User Profile included with social options - Timeline, About Me, Friends, and Gallery tabs
- Calendar component implementation of Angular 2 full calendar
- Google map components added multiple view options detect current location
- Chart components added multiple chart and implemented by Chart.Js
- Ecommerce Module( Category wise product list and cart options)
- Latest news component slided support
- Chat module
- Awesome components page design
- About us and contact us components
- Language change options added into the Settings component
- Search and logout
- Very easy to customize
- Generated icons and splash screens
- Support full page Image viewer of any image. Implemented from - Image Viewer
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.
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.
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.
The calendar is an amazing option to see any kind of events, remind friends birthday, schedule meeting and so on.
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.
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.
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.
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.
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:
For multiple language support we used ng2-translate package.
Apply in Plain Html Text Page:
To install NG2-Translate run npm install ng2-translate --save.
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
Translation json files stored into the src/assets/i18n/ directory.
We create a function in app.modules.ts that returns a new TranslateLoader.
And then adding this function following the NgModules imports array:
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:
Now we can translate Hello following format.
Set default language
// this language will be used as a fallback when a translation isn't found in the current language
To change the language the app is currently using, there’s the use method of the TranslationService.
More Details - ng2-translate
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
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 AppMore Details
Sass VariablesMore Details
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 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.
Starting with folders, we can see that the bulk of our app lives here: pages, services, etc.
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.
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.
Contains app platform targets like iOs or Android.
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.
This file update meta tags and add in any required scripts (cordova, polyfills, vendor build, app build, etc.).
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.
If you are familiar with npm, you will recognize this immediately. If not, then this file describes your app’s production and development dependencies.
(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.
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/
- 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
Clone the project and cd into the project directory.
$ ionic serve $ ionic serve --lab
Build for Android
- 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
Building for iOS
You need the iOS SDK installed on your computer to build an iOS version of your application using the steps below.
- On the command line, make sure you are in the ionic-tutorial/conference directory
- Add support for the iOS platform
- ionic platform add ios
- This step is not required with recent versions of the Ionic CLI because the ios platform is installed by default
- Build the project
- ionic build ios
- Open conference.xcodeproj in the conference/platforms/ios directory
- In Xcode, run the application on a device connected to your computer or in the iOS emulator
Desktop browser testing
$ ionic serve
$ ionic build ios $ ionic emulate ios
Testing as a native app
$ ionic run android
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
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
- Angular 2
- Ionic 2
- Ionic 2 with Typescript
- SCSS instead of CSS
- Automatic compilation