Saturday, March 18, 2017
Why Ionic creator?
Mobile first is the new mantra of today's applications. Building mobile based apps has also seen a huge growth from early 90s. Along with languages like swift and Java, which are focussed on specific environments like IOS and Android respectively, we have seen good traction on platforms like phonegap and cordova.
Today's startup are aiming mostly on business logic which are compatible with desktop and mobile devices. Investing on individuals for each aspects might be expensive. For ex: Instead of having 3 developers, 1 for android 1 for IOS and 1 for web is far too expensive than having 1 for all 3. Here platforms like Phonegap and Cordova play a vital role in binding one code for all 3 platforms.
Cordova is just a fork of Phonegap, but as per my research if someone ask you which one you will chose, I suggest go with Cordova. Phonegap is a adobe project compared to Cordova which is an apache open source project. Being a part of Apache community it seems to be more reliable and maintainable in future by the community.
You might be wondering where Ionic is going to come?
Well here it is, Ionic plays a critical role in binding cordova plugins with angularjs components. Ionic framework exists since past few years, but what we want to talk about here is Ionic creator which is a web version of creating mobile based app with easy to use utilities.
It took me just 3 hours to have a basic app up and running without going through Android or IOS based native coding tutorials.
Ionic creator gives you a web view where you can not only preview your changes real time but also can create beautiful designs and give that standard native look and feel which will make your app great for the consumer
Why Firebase authentication?
Now after getting the knowledge of ionic creator, which is the UI look and feel, let's now focus on the backend stuff. When we are talking about backend we should be considering couple of questions which will help us design our app
1. App performance should be good, Database related actions should not prove to be a poor performant.
2. App should be able to handle offline data. This becomes incredibly important for mobile based apps. Offline data should sync seamlessly when it gets network back.
3. App authentication can be personified as a backbone to your app work. Authentication should be secure and managed by certified vendor.
4. It should work in scale
The list of design consideration goes on and on. But let's focus on a solution based on the above listed aspects.
Firebase is a relatively new product released by Google. Yeah Google! that answers you scaling requirement.
Performance is relatively fast, as the data transmission is done in form of json objects. Being a no sql type , fields can be added or deleted on the fly.
Firebase has support for offline data also, however I have not explored this, but as per documentation feel this can be achieved with minimal effort
There are tons of other advantages for this. But the most striking advantage is with Ionic creator Firebase comes as a plugin. Believe me when I say it will take 15 min for you to setup an app and get it authenticated from Firebase.
Why Ionic creator with Firebase authentication?
Let's jump to the other topic which is the crux of this blog. Let's first talk about the motivation behind this blog.
If you search youtube there are samples where Ionic creator team has shown how to create an app in minutes. If you checkout the authentication part link you will see they used ionicauth for the same.
Now when I started working with this, the first question I had that where I want to store my data. I wanted to go with Firebase, now my question was how will I authorize my app. Examples showed by integration with ionic auth. Honestly this did not make sense to me.
I didn't like the fact that ionic auth will authorize the app and the data then will go and get stored in firebase. This was weird because Firebase itself has an authentication piece where user can signup/signin with their email and password
So I started exploring Firebase auth with Ionic creator. Now comes the exciting part. The code which was working with ionic auth in case of error was not working with Firebase. In error scenario, ionicauth was able to update the ui element with the corresponding error message. Here {{errorBox}} is the ui element.
People have posted on forums (https://forum.ionicframework.com/t/basic-firebase-error-handling/65798 ) but I couldn't find any solution for this. Note there are examples with ionic framework and firebase auth but none with ionic creator.
The reason for this blog is to share the fix with you
Enough of whys now let's answer how?
Refer to https://github.com/driftyco/creator-weekly-workshops/tree/master/04-ionic-auth-and-gravatar for the ionic auth integration with ionic creator, video is available at https://www.youtube.com/watch?v=McBS4fbPt5Q
The code which is handling the auth and on success helping the user to navigate to the home page is as following
$ionicAuth.signup($scope.data).then(function() {
// `$ionicUser` is now registered $ionicAuth.login('basic', $scope.data).then(function(){ $state.go('menu.home'); }); }, function(err) { var error_lookup = { 'required_email': 'Missing email field', 'required_password': 'Missing password field', 'conflict_email': 'A user has already signed up with that email', 'conflict_username': 'A user has already signed up with that username', 'invalid_email': 'The email did not pass validation' } $scope.errorBox = error_lookup[err.details[0]]; });
Note on success the ionicAuth.login is going to home and on error it should update a paragraph component populating it with the error details. This error scenario fails when you try to get Firebase auth. Why? because the firebase auth action is asynchronous and we need a mechanism to invoke the update action on the ui paragraph element in case of error so that it is updated properly.
To solve this we can have the following
$scope.errorBox=''; const promise = firebase.auth().createUserWithEmailAndPassword($scope.data.email,
$scope.data.password); promise.then(resp => { $state.go('menu.home'); }) .catch(err => { $scope.$apply(function(){ //Set error box message $scope.errorBox = err.message; }); })
In case of firebase, when there is an error one should do $scope.$apply and then update the element with the message
Note the intent of this blog is to save that one hour which I spent learning about firebase async transaction and angularjs $apply function. Once this was done everything worked fine.
Hope this blog will help someone to save his/her few hours of investigation. Let me know if you see any issues.
Responsive design will continue dominate because it is one of the most effective ways of achieving a good UX.
CSS media queries offer websites flexibility and allow them to adjust according to the different devices the site is being accessed on.
In April 2016, Google changed its ranking algorithm to prioritize websites which have optimized content and throughout the next year, we’ll see companies hurrying to re-boost their Google ranks.
As website providers, we must accept the situation, though, that there’s not a one size fits all situation here. I do believe that offering fewer options, less responsive views, conversions of those websites will go up.
Tuesday, November 29, 2016
So, you like to develop native iOS or Android apps? While you can create wonderful, functional apps for either of the platform, do you think this is enough? Perhaps, no. It will be expensive and time consuming to create a native app for each platform and given that your audience is spread across various platforms, having a native app for any one platform is not enough. Rather, it is a good idea to have your app built for at least two, if not more, platforms. This can give you the opportunity to reach millions of other possible users.
Learning app-development skills for multiple platforms is a huge challenge and even if you hire a native developer to code an app for each platform, it will be very expensive. Plus, maintaining more than one code bases is cumbersome.
Welcome to hybrid-app development!
Hybrid mobile app development not only can help you build web apps quicker and easier that can later be wrapped and run as native apps on different mobile operating systems, it also lets you easily manage your app’s lifecycle, thanks to a single code-base.
Among the myriad of hybrid-app development frameworks available today, Ionic is a framework you can rely upon for developing a hybrid app falling closest to a native app in look and feel.
Despite the many benefits of Ionic, there are several myths which might cause people to shy away from using it to build native apps. We debunk these myths so that next time you need to build an app, Ionic can be one of your preferred choices.
Myth #1: Ionic is just another framework
Angular-powered Ionic has gained a lot of respect in the hybrid app development community since its release. It has Git repo of more than 21,000 stars as of this writing. The Ionic Forum is very active, thereby ensuring the quick and effective resolution of all issues. Ionic, an open-source platform, can enable you to build beautiful and highly functional mobile apps with the look and feel of a native app. It also provides UI components for you to use and to customize using the CSS extension language, Sass.
Myth #2: Hybrid apps aren’t as good as native ones
The key strength of the Ionic Framework is that it enables a more native-like experience for hybrid apps in a more cost-effective manner. Ionic features platform continuity which means you can build once and run anywhere. Plus, Ionic is the only company that supports creating apps and building great mobile websites, all with the same code.
Myth #3: Hybrid apps have a poor UX
Ionic comes with native-styled mobile UI layouts and elements that you would get with a native SDK on Android or iOS. This front-end UI framework supports a broad range of common mobile components, beautiful designs, and smooth animations to make you app look compelling. Hence, with Ionic, you get the speed, portability, and lower cost of building an app along with a UX that is closer to that of fully native apps.
Myth #4: Creating an Ionic app is a huge chore
Building hybrid apps used to be a huge task because of their limited functionality for building full-fledged web applications. But with AngularJS, that has changed as Angular isthe core innovation that makes hybrid apps possible. Ionic provides similar functionality for AngularJS that iOS UIKit provides for Obj-C/Swift and that Android UI elements provides for Java.
Myth #5: Ionic might just disappear, leaving me nowhere
Ionic is one of the top 40 most popular projects in the world and has one of the most active and dedicated developer communities. Ionic is MIT-licensed, which means it can be used both for commercial or personal uses. Ionic is the SDK of choice for both startups and Fortune 500 companies and is installed more than 100,000 times per month. With funding from the likes of Light-bank, Arthur Ventures, and Founder Collective, one can be sure Ionic is here to stay.
Myth #6: Ionic is new and thus has limited support
Sure, Ionic is new but it is built on top of Cordova and Angular, which are very popular technologies. So anytime, you run into problems, you know you will get enough support online through an expert’s blog post or via Stack Overflow. And, not to forget, the Ionic Forum is the best place to seek answers to Ionic-specific queries where you can find tutorials by many accomplished developers.
Myth #7: Ionic apps are just a passing trend
As per Gartner, hybrid technology, which offers a balance between native and HTML5-based web technologies, will be used in more than 50 percent of mobile apps by 2016. So, to be sure, hybrid apps, including the ones built with Ionic, are not just a passing trend but in fact represent the future of mobile technology in the coming years.
If you are in the process of deciding whether creating your own mobile app the native or hybrid way, the above 7 pointers can be useful for you to know how functional and convenient hybrid-app development can be, especially with Ionic. We suggest you to take the leap now and go hybrid with Ionic.
What is ionic framework?
how to install ionic framework , Ionic framework is the Latest and Most popular html5 mobile app Development Framework, The First alpha version was released in November 2013. Built on the AngularJS framework which is manage by Google.
- Ionic use AngularJS to provide the application architecture, while Ionic framework itself target on the user Mobile App UI. In other words, we can see match between the power of Angular and the beauty of Ionic Framework.
- Ionic is an HTML5 mobile apps development framework Focus on building hybrid mobile apps. Hybrid apps are basically small websites that’s running in a browser.
- App that have access to the native mobile app platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to third party code.
- Think of Ionic as the front-end UI framework which handles all of the front-end look and feel and UI of your app needs in order to be compelling.ionic framework is the best platform for mobile app Ui Design..
- how to install ionic framework.
What is Hybrid Mobile App Development?
- Hybrid Mobile App Development is like native Mobile Application. Run in the Mobile device and are written with web technologies like HTML5, CSS and JavaScript. Hybrid apps run inside a native container.Hybrid mobile App development combines the Pro And Cons of both the native and HTML5 worlds.
- We define hybrid as a web app, basically built on HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features and services.Phone-Gap Technology is an best example of the most popular container for creating hybrid apps.
- Hybrid mobile application work in any platform like android,ios,web browser withing single code no more extra coding required for specific platform.
- Hybrid Mobile apps use standard web technologies like HTML5, JavaScript and CSS. This write-once-run-anywhere approach to mobile development creates cross-platform mobile applications that work on multiple devices.
- Hybrid Mobile apps use standard web technologies like HTML5, JavaScript and CSS. This write-once-run-anywhere approach to mobile development creates cross-platform mobile applications that work on multiple devices.
How To Install Ionic Framework In Windows?
- first step to install ionic in windows computer you will required Node.js for installation.
- Firstly Download Node.js(Below 4.0 any version) .Click Me!!
- After Successfully Installation. You will need to install cordova and Ionic framework using node command line(CLI).
4. This command may take some time to install ionic and cordova globally in your computer.It depend on your internet speed.
5. Create first ionic Application using below command. Ionic Start will create ionic project. it will required internet connectivity for install new Project.
6. Ionic Provide By Default Three Template as Given Below..
For More Info Plz Visit : ionic Framework Official Website.
More Post About ionic: Click Here..
Tuesday, March 29, 2016
When it comes to managing your smartphone from your computer, both iOS devices and Windows phone devices have a upper hand when compared to Android as both of them have their own desktop management tools - iTunes for iOS and Zune for Windows. However there have been some software developers who have taken this opportunity to create a powerful management software for Android smartphones. MoboRobo is one of the most comprehensive and all-in-one desktop management tool for Android.
MoboRobo comes with all the traditional features of an Android manager like backup and restore, but what makes it different from others is that you can install and uninstall any application from your smartphone using the MoboRobo Android manager on your PC and you can even update the apps. If you are using Mobo Launcher as your device's theme, then you can control the theme settings from the computer.
You can even access the calls database, messages, call logs and you can even send messages from within the software itslef. What's really an impressive feature is that you can even integrate an iOS device and transfer complete contacts and entire message threads from an iOS device to an Android device. That complete's the list of MoboRobo's very impressive features list.
Connecting your Android device to MoboRobo:
MoboRobo is free to download so you can visit their official website and download the software from there. Once downloaded, install the software on your computer and launch the manager tool.
When the software is up and running, you will see a screen that will ask you to perform some steps. You need to enable USB debugging on your Android smartphone. Go to "Settings > Developer Options > USB Debugging" to enable it. Then connect your smartphone to the computer using the USB cable.
You can even connect your smartphone using WiFi and the process will differ slightly from the one using USB cable. However once you have connected your smartphone, it will check if the drivers are installed or not. If not, you will see that the drivers for your smartphone are being installed and then you will be ready to manage your smartphone from your PC using MoboRobo.
MoboRobo Interface:
MoboRobo's dashboard interface is pretty clean and user-friendly. In the Home tab, you will see all the general information about your smartphone like the available and used memory of SD card and your device's internal memory, the backup/restore option and the File Manager option.
The Home tab will even show you the number of contacts on your device, how many messages are present, the number of apps you have installed and also the number of images, music and videos on your device.
If you have multiple devices connected at the same time to MoboRobo, then you can switch between then using the switch button below the smartphone's image.
The top of the interface consists of 7 different tabs - Home tab, Data, Apps, Tunes, Images, Videos and Themes. You can switch between them by simply clicking on it.
Backup/Restore:
The most important thing you should do on a regular basis is backup all your important data at a safe place and MoboRobo makes that task really easy. With the backup option available in the Home tab, you can select the things that you need to backup and save on your computer.
As you can see in the image above, you can backup contacts, images, call logs, messages, images, apps and app data. Click on whatever you want to backup and choose a location where you want to save the backup files and hit the backup button.
In a similar way, you can use the Restore option to restore all the files back to your smartphone. The backup/restore option is really helpful when you are constantly rooting your smartphone or installing new ROMs every now and then.
File Manager:
The file manager option allows you to manage all the files and folders on your smartphone from within the software itself. You can add new folder, move files from one location to another, upload new files from your PC to your smartphone or delete the unimportant data from the device.
Install, Uninstall and Update Apps:
Using the Apps tab from the top of the interface, you will be able to see all the apps and games that are installed on your Android device. The whole interface is pretty much self-explanatory. On the right hand side, you will see some options like the system apps and user apps. If you have apk files stored on your computer, you will be able to see them by clicking on the App Library under the Local apps section.
Similarly under the Web Resources section, you will be able to search and download for various different apps and install them on your PC.
Image, Video and Music Section:
Nothing complicated here as you can easily add images, videos and music to your smartphone from your computer's storage and delete some data if you want to.
In the Images section, you will see all the images present on your Android device and it will let you choose a particular image and give you the option to apply it as your device's wallpaper.
Data Management:
The Data management in MoboRobo is by far the best management we have ever witnessed in an Android manager software. You can view all the contacts, messages and call logs from the same interface.
On the right hand side, you can select what you want to view. When you choose the Contacts option, you will see a complete list of all your contacts being displayed on the dashboard. You can add or delete any contact from within the software itself.
The same goes with the Messages section. When you click on the Messages, you will be able to see all the messages that are stored on your device which includes Drafts and Unread messages as well. What's a really great feature of MoboRobo is that you can reply to the messages from within the software itself.
iOS Integration:
The MoboRobo data management software not only supports Android devices but you can even connect your iOS device to the tool. If you want to copy all the contacts from an iPhone to your Android smartphone, you will be able to do so easily by using MoboRobo software.
The steps are pretty much self-explanatory and is the same as the ones with Android device. When you connect your iPhone, you won't face any difficulties as everything is similar.
Final Words:
Seeing the complete list of super impressive and awesome features that comes packed in MoboRobo software, we can really call it the all-in-one data management tool for Android devices. If you are an owner of an Android smartphone then you should definitely have this tool installed on your PC.
MoboRobo supports almost all the Android versions, from 1.5 and above. Though there are still some devices that are not recognized by the software but you won't face any difficulties in connecting it. There won't be any image shown of your device, just a default Android smartphone will appear but we are concerned with other things and not the image.
Overall we can say that MoboRobo is a wonderful data management tool and you should download and install it at this very moment if you have an Android smartphone. Use the link below to know more about the software and to download it on your computer.
Check Out More about MoboRobo.
Subscribe to:
Posts (Atom)
