JSConfUY 2015 Ionic workshop app. Ionic example conference app.
Please support this project by simply putting a Github star ⭐. Share this library with friends on Twitter and everywhere else you can. 🙏
Notice: This is an Ionic v1 tutorial, if you are looking for an Ionic v3 tutorial please go to https://ionicthemes.com/tutorials/about/building-a-complete-mobile-app-with-ionic-3
In this workshop, we are going to go through the process of building a hybrid mobile app using Ionic Framework.
This repo will serve as a guide and in this README.md
, you can find all the steps and instructions needed to build the app.
7364750e
) of the JSConfUY app on Ionic View. If you want to test the app in your device, you can follow these steps and get the app through Ionic View.apk
here
Notice:
.apk
if you are an Android user.Are you using Windows? It is probable that you will get some errors when running npm install
because your computer needs some other things to use npm
. Stay calm, you are not alone! If that's the case, please look at these links to fix your issues and then continue with the rest of the installation process below.
You can find the Ionic official installation documentation here.
cmd
, Windows), and install Cordova and Ionic:
npm install -g cordova
npm install -g ionic
npm install -g bower
sudo
depending on your system configuration: sudo npm install -g cordova ionic
npm update -g cordova
npm update -g ionic
npm update -g bower
sudo npm update -g cordova ionic
Follow these links if you want more information:
ionic start
This step corresponds with this slide of the presentation.
First we need to link this new Ionic project with our reference repo on github. Clone and checkout the initial commit (e37d84e
) of this repo so we can start working on the app:
git clone https://github.com/startapplabs/jsconfuy.git
cd jsconfuy
git checkout e37d84e
After this, we need to set up some stuff before starting working on the Ionic project. To do so, run these commands:
npm install
bower install
ionic setup sass
Note: If you are starting a brand new project with Ionic, run these commands instead:
ionic start jsconfuy sidemenu
cd jsconfuy
ionic setup sass
Finally, to see the current state of the project, run:
ionic serve
If you followed the procedure above, after serving the app, you can see that the Ionic dev server is running on http://localhost:8100
and there, you will see one of Ionic's starter projects, which showcases an app with a side menu.
This step corresponds with this slide of the presentation, and this commit (e8d787b
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout e8d787b
In this step, we are going to remove all the example files that came with the Ionic starter project and add our own starter files.
This app will have information about Uruguay's Javascript Conference 2015 (JSConfUY 2015). To serve that purpose, the content will be the following:
This image illustrates the navigation between views
To achieve this, we are going to:
www/templates/agenda.html
with basic agenda view layoutwww/templates/speakers.html
with basic speakers view layoutwww/templates/venue.html
with basic venue view layoutwww/templates/event.html
with basic event view layoutwww/templates/menu.html
with navigation layout to the other viewswww/js/app.js
with app's desired routingwww/js/controllers.js
with a basic controller for each viewThe final point of this step is this commit (296941e
). Run git checkout 296941e
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There you will see our JSConfUY app with the navigation DONE.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (e8d787b
) and the final commit (296941e
) of this step.
ui-route
This step corresponds with this slide of the presentation, and this commit (296941e
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 296941e
In this step we are going to work on the layout of the speakers view. For this view, we need to:
Luckily, Ionic provides awesome components that will help us layout the content. Ionic avatar list or thumbnails list may be good options, but I think Ionic cards are the best choice for this view because we can fit all the information we have within one clean component.
The final point of this step is this commit (fb02948
). Run git checkout fb02948
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There, you will see our JSConfUY app with the speakers view DONE.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (296941e
) and the final commit (fb02948
) of this step.
This step corresponds with this slide of the presentation, and this commit (fb02948
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout fb02948
In this step, we are going to work on the layout of the venue view. For this view, we need to:
As we mentioned before, one of the reasons Ionic is awesome is because it's built using the web stack. In this case, that means that we don't have to reinvent the wheel for the map we need for this view. We can easily reuse any angular map directive and it will work like a charm.
Angularjs-Google-Maps will do the trick. We just need to add the dependency using bower:
bower install ngmap --save
The final point of this step is this commit (7bfcf29
). Run git checkout -f 7bfcf29
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There, you will see our JSConfUY app with the venue view and its map DONE.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (fb02948
) and the final commit (7bfcf29
) of this step.
This step corresponds with this slide of the presentation, and this commit (7bfcf29
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout -f 7bfcf29
In this step we are going to work on the layout of the agenda view. For this view we need to:
Again, Ionic has awesome components; in this case, tabs will work perfectly for displaying both days' schedule in a clean and organized manner.
The final point of this step is this commit (9d797d7
). Run git checkout 9d797d7
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There, you will see our JSConfUY app with the agenda view and a tabs component showing both days' schedule.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (7bfcf29
) and the final commit (9d797d7
) of this step.
This step corresponds with this slide of the presentation, and this commit (9d797d7
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 9d797d7
In this step, we are going to remove all hard coded data and replace it with data we get from our data source (in this case, a simple JSON). We are going to:
www/js/services.js
to get data from JSON data sources using AngularJS $http servicewww/js/filters.js
to display raw htmlwww/js/directives.js
to use directive templates for agenda eventswww/js/controllers.js
to use the AngularJS services we defined in www/js/services.js
In this step, we are using all the power of AngularJS controllers, directives, services, and filters to give real value to our app.
We are going to use underscore.js to ease our work; we just need to add the dependency using bower:
bower install underscore --save
Now we have an app that gets data from a data source and displays it dynamically to the users. In this case, we are using two JSON files as data sources, but you could easily use any other backend. The way many apps communicate with backend is through an API.
Having that in mind, in my opinion, you have three alternatives here:
The final point of this step is this commit (14dd74a
). Run git checkout 14dd74a
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There, you will see our JSConfUY app with real data for the event.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (9d797d7
) and the final commit (14dd74a
) of this step.
This step corresponds with this slide of the presentation, and this commit (14dd74a
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 14dd74a
In this step, we are going to integrate some mobile native functionality using Cordova plugins and some Ionic UX components that will improve our app. We are going to:
These are part of the so-called "ionic superpowers". Using Ionic to develop hybrid apps gives you the advantage of accessing the native API’s of devices, including the geolocation, social sharing, inAppBrowser, device camera, touchID, push notification, and so on. When developing an Ionic app, you can have several device API’s integrated using ngCordova or other Cordova plugins. That’s the difference between mobile web and hybrid apps.
To install these plugins, you just need to run:
cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
cordova plugin add org.apache.cordova.inappbrowser
The final point of this step is this commit (73cec82
). Run git checkout 73cec82
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There, you will see our JSConfUY app with the Ionic loader and slide box integrated but as you are accessing the app through the browser, you won't see either the social sharing plugin or the inAppBroswer plugin. You will need to install and test the app in your phone to see those in action.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (14dd74a
) and the final commit (73cec82
) of this step.
This step corresponds with this slide of the presentation, and this commit (73cec82
) represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 73cec82
In this step, we are going to take care of the app styles using CSS with the help of Sass. We are going to:
Mixins will ease our styles development by helping us with prefixing vendor properties, defining functions, etc., which will help us reuse our styles across the app.
This is the structure of the mixins we are going to use:
@mixin cssCalc($property, $expression) {
#{$property}: calc(#{$expression});
}
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex-wrap($value) {
flex-wrap: $value;
-webkit-flex-wrap: $value;
}
Other awesome features are Sass variables. These will enable us to reuse variables across our style sheets. This is particularly useful, for example, when defining colors that will be spread across the app.
Here, you can see the variables we defined for our app, and how easily we can change those and immediately change the UI color scheme of the whole app.
$content-bg: #EAEAEA;
$content-color: #444444;
$top-bar-bg: #254164;
$top-bar-color: #FFFFFF;
$loading-color: #FFFFFF;
$main-menu-bg: #FFC900;
$main-menu-color: #FFFFFF;
$loading-color: #FFFFFF;
$speaker-actions-bg: #FFFFFF;
$workshop-bg-color: #00B454;
$talk-bg-color: #FF7C00;
$keynote-bg-color: #FF3900;
$global-bg-color: #DDDDDD;
$event-color: #FFFFFF;
$get-directions-btn-bg: #419e61;
$get-directions-btn-color: #FFFFFF;
The final point of this step is this commit (6eaea0f
). Run git checkout 6eaea0f
and you will see the implementation of the instructions above.
Serve the app with ionic serve
and look at the Ionic dev server running on http://localhost:8100
. There, you will see our JSConfUY finished with a professional and polished look.
If you want to see more details of what we have done, take a look at this comparison between the initial commit (73cec82
) and the final commit (6eaea0f
) of this step.
Please make sure you have node
version 0.10.36
You should fix your errors by reading these links: