ionic-team/ionic-conference-app

A conference app built with Ionic to demonstrate Ionic

Ionic Angular Conference Application

This application is purely a kitchen-sink demo of the Ionic Framework and Angular.

There is not an actual Ionic Conference at this time. This project is just to show off Ionic components in a real-world application. Please go through the steps in CONTRIBUTING before submitting an issue.

React and Vue Versions

We've built versions of this Conference app in React and Vue for developers that would prefer to use one of those framework options:

https://github.com/ionic-team/ionic-react-conference-app

https://github.com/ionic-team/ionic-vue-conference-app

Table of Contents

• Getting Started
• Contributing
• App Preview
• Deploying
  • Progressive Web App
  • Android
  • iOS

Getting Started

• Download the installer for Node LTS.
• Install the ionic CLI globally: npm install -g ionic
• Clone this repository: git clone https://github.com/ionic-team/ionic-conference-app.git.
• Run npm install from the project root.
• Run ionic serve in a terminal from the project root.
• Profit. 🎉

Note: See How to Prevent Permissions Errors if you are running into issues when trying to install packages globally.

Contributing

See CONTRIBUTING.md 🎉👍

App Preview

Menu

Material Design	iOS

Schedule Page

Material Design	iOS

Speakers Page

Material Design	iOS

Speaker Detail Page

Material Design	iOS

About Page

Material Design	iOS

Deploying

Progressive Web App

1. Run ionic build --prod
2. Push the www folder to your hosting service

Android

1. Run ionic cordova run android --prod

iOS

1. Run ionic cordova run ios --prod

ionic-conference-app's Issues

What is the `id="login"` being used for?

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/login/login.html#L8

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/login/forgot-password.html#L8

Remove any comments that aren't describing the JS

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/schedule/schedule.js#L28

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/schedule/schedule.js#L45

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/schedule/schedule.js#L69

Have the search bar only show sessions that match

[bug] - DateForm Pipe has issues in Safari with internationalization

As per the angular/angular#3333 issue, the pipe used in Date Formatting is not working in Safari, and only works in Chrome/Opera, as stated here:

WARNING: this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers.
Formats a date value to a string based on the requested format.

Due to our issues with the custom date-format component we made, referencing issues #40 #41, we had previously included moment.js in the project, altered the webpack.config.js to include the module, and had the date-format.js file include the module via import * as moment from 'moment'.

We could use this opportunity to show the following:

• How to include 3rd party node module in ionic app via webpack.config.js
• How to make a custom component
• How to use import statement for 3rd party module
• How to use custom component providers, etc.

Reduce css nesting

If the nested is required to override Ionic, cool. If not, remove as much nesting as possible:

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/speakers/speakers.scss#L2

Bottom line, only do nesting when you absolutely have to. Prefer a more specific css classname over nesting classes.

Remove moment.js from app

Remove from package.json and the webpack.config.js.

Reference #40

Use ng2 pipes for date formatting

I think ng2's "pipes" might be the right tool for the job for this date formatting:

https://github.com/angular/angular/blob/758efba34bb347991991e780ed31130e642e65ab/modules/angular2/docs/core/03_pipes.md

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/components/date-format.js

[bug] - Search bar fires update for searchQuery

If you scroll in the app, you'll see the search bar doing an update and firing the getItems method in schedule.js.

The search bar shouldnt be firing a change event on scroll. It even fires the event on a click.

Figure it out, and fix it.

Each css selector gets a new line

Instead of

.next-day-schedule, .previous-day-schedule {

It should be

.next-day-schedule, 
.previous-day-schedule {

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/home/home.scss#L33

Is ion-pane required here? Can you use nothing instead?

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/modals/filter-schedule-modal.html#L1

Are FORM_DIRECTIVES still required here?

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/schedule/schedule.js#L5

If they are required, please submit an issue in the ionic2 repo

Document the directive for date display

Tap session information to view more information about session talk

This should show the session details page with more information about the session

Categories
Detail
Time
Location (room)
Link to view more about speaker

[bug] - close item sliding instance when item option button is tapped

Item-sliding is open, with options 'Speaker info' and 'Add to favorites'

When I tap one, close the item.

Filter Modal

Implement the filter modal that filters out sessions by their tags or categories.

ion-navbar should not be within ion-content

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/map/map.html#L2

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/schedule/schedule.html#L2

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/session-detail/session-detail.html#L2

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/speakers/speakers.html#L2

many others throughout the app

Finish About Page

Make the about page look better

Meta charset must be the very first element in the head

<meta charset="utf-8">

https://github.com/driftyco/ionic-conference-app/blob/master/www/index.html#L5

https://code.google.com/p/doctype-mirror/wiki/MetaCharsetAttribute

[Refactor] - rename the session detail and speaker detail pages

They should follow the convention of having hyphens in the name

Instead of sessionDetail - it should be "session-detail"

Make speaker list look clean

Add a tap to item to view speaker information
Show sessions from speaker
Make it look nice.

If there's no `href`, it should be a `<button>`

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/login/login.html#L21

Fix times on schedule json

Every @Page component should get its own file

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/login/login.js#L36

Remove all uses of @View

https://github.com/driftyco/ionic-conference-app/blob/1fd76dd2cd9916412eae85086e4fe38125204f34/www/app/components/schedule-list.js#L12

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/components/date-format.js#L9

Add categories to the session JSON data.

These categories will be filtered from the modal and the search bar.

"No Favorites" shows when there are no search results

Click on session to see speaker information.

Click on speaker and view sessions by speaker

Ensure app can run on device

Currently having an issue with the sourcemap files - for some reason ios simulator is a white screen of death.

Remove used functions

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/session-detail/session-detail.js#L14

Do not import/inject variables that aren't being used

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/home/home.js#L1
https://github.com/driftyco/ionic-conference-app/blob/master/www/app/home/home.js#L3
https://github.com/driftyco/ionic-conference-app/blob/master/www/app/home/home.js#L18
https://github.com/driftyco/ionic-conference-app/blob/master/www/app/home/home.js#L19
https://github.com/driftyco/ionic-conference-app/blob/master/www/app/session-detail/session-detail.js#L8

many others throughout the app

Get app ability to get started easy as 1-2-3

Allow user to run git clone & npm run app.

Nothing complicated.

[bug]: navigating to a new page loses previous scroll position

Navigating forward then back loses the previous scroll position so you have to scroll back down.

Is both ng-control and [(ng-model)] required?

ng-control="email" type="email" placeholder="Your email" [(ng-model)]="email"

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/login/forgot-password.html#L12

Dont allow duplicate sessions to be added when tapping 'add favorite'

Replace cordova resources with Ionic ones

Splashscreen & icons are default cordova logo

Add some images of the app to the README

Add some images, maybe a gif or two? Let's go crazy.

Improve the filter to only return the array when it is modified

angular/angular#4792 (comment)

Remove all unused attributes/css classes

If it's not adding any value or use, it needs to be removed:

https://github.com/driftyco/ionic-conference-app/blob/17fa68ca4fce28757770763952660b72bc438008/www/app/home/home.html#L2

Check each of the files plz

Clickable items should be a <button>

Instead of:

<ion-item href="#" detail-push (click)="openSpeakerDetail(speaker.name)">...</ion-item>

it should be:

<button ion-item (click)="openSpeakerDetail(speaker.name)">...</button>

Also, the right arrow will automatically get added, and the 300ms delay will correctly kick in. And for accessibility reasons (the screen readers and when keyboard tabbing through elements, it has no clue that this random element is clickable and does important stuff).

No type="text/javascript"

I know google maps probably added it, and you see it everywhere, but it's not need and looks ugly:

https://github.com/driftyco/ionic-conference-app/blob/master/www/index.html#L16

Remove all unused css

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/home/home.scss#L3

Make sure we're not adding any more css than needs to be there.

iOS 8.x doesn't work with a form in the ion-title

The following markup breaks the app on iOS 8.x (but works on iOS 9):

<ion-navbar *navbar>
  <ion-title>
    <form [ng-form-model]="scheduleForm">
      <ion-segment ng-control="scheduleShowing">
        <ion-segment-button value="all">
          All
        </ion-segment-button>
        <ion-segment-button value="favorites">
          Favorites
        </ion-segment-button>
      </ion-segment>
    </form>
  </ion-title>
  <ion-nav-items secondary>
    <button (click)="openScheduleFilter()"><icon ios="funnel-outline" md="funnel"></icon></button>
  </ion-nav-items>
</ion-navbar>

but if we remove the form from the ion-title it will work (aesthetically):

<ion-navbar *navbar>
  <ion-title>
    <ion-segment [(ng-model)]="scheduleShowing">
      <ion-segment-button value="all">
        All
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favorites
      </ion-segment-button>
    </ion-segment>
  </ion-title>
  <ion-nav-items secondary>
    <button (click)="openScheduleFilter()"><icon ios="funnel-outline" md="funnel"></icon></button>
  </ion-nav-items>
</ion-navbar>

I can change the ng-control to ng-model but it doesn't update the value from the ion-segment. Need to investigate this further.

Prune excessive Pages

Since we started with the starter, remove the extra pages no longer being used by conference app.

[bug] - hide the sticky headers on chrome/android when all/favorites is toggled

Right now, open the app, add a favorite session, scroll down on the 'all' list.

Click 'favorites' segment button at the top to see the favorites.

You will see that last sticky header showing on the 'all' list.

The sticky header should be cleaned up when the containing list is hidden or taken out of view.

Same goes for the 'favorites' header when you go back to 'all' sessions.

Document the http service

Is it ready to be compiled in an actual iOS9 app ?

Hi Folks ! Thanks for the conf today was awesome.
I've actually loved the schedule app as a proof of concept.

Is it ready to be compiled in an actual iOS9 app ? It seems that after adding platform ios, building it and running it, an older version shows without maps in a iOS9 device, without speakers list neither and with only a breakfast entry in the schedule tab.

The ionic serve command works perfectly.
Do I miss something ?

No spaces between decorator and class

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/schedule/schedule.js#L14

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/session-detail/session-detail.js#L6

ionic serve fails with the following error

Hi,

I have followed the run instructions as mentioned, and I am getting the following error on ionic serve command. I am using Windows 7 with latest Node, Cordova and Ionic versions.

$/ionic-conference-app> ionic serve
? Compiling your SASS to CSS.
Error: file to import not found or unreadable: ionic
Current dir: .../ionic-conference-app/www/app/
at Object.module.exports.renderSync (...\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\node_modules\node-sass\lib\index.js:424:22)
at Object.processSass (...\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\lib\transpile.js:163:25)
at Object.serveV2 (...\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\lib\serve.js:72:31)
at Object.IonicTask.run (...\AppData\Roaming\npm\node_modules\ionic\lib\ionic\serve.js:49:18)
at Object.run (...\AppData\Roaming\npm\node_modules\ionic\lib\cli.js:98:32)
at Object. (...\AppData\Roaming\npm\node_modules\ionic\bin\ionic:9:10)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)

Order of sass imports

If a user created overrode ionic's sass variables with their own, from within their own css, they'd have to have ionic scss below their app's right?

https://github.com/driftyco/ionic-conference-app/blob/master/www/app/app.scss#L31