Messenger App (XMPP + Ionic framework)

Been asking a lot of questions since it was my first iphone app but here is the result:

Login screen :smile: I have no logo but when I get one it’ll on top of the screen just like instagramm :smile:


Slide Menu something is not right with the status bar but I ll look into that later:

** Create your avatar ** (click that camera icon) I was using Phonegap’s plugin to hook into the camera API + ionic action sheet for the UI.

Chat Room (the “i” icon opens up your “contactee” profile)

Start a group And this is how you start a group conversation - ionic modal window

So this it for now. There are some minor bugs to fix and then clone it for android! But I guess the most fun part will be getting it approved in apple store and Google Play since I got no experience there at all :smile:


@pink_tshirt Great job! Thanks for sharing!

How did you do the login with background image and without sidemenu? I couldn’t. =(

Simply two separate templates with different markup and css rules applied to it.

This looks great, @pink_tshirt! Please let us know when it’s live, we’d love to feature it on an upcoming Ionic Showcase page. For now, you can submit it here. :slight_smile:


This looks awesome! Did you use push notifications for sending/receiving messages and how did you imeplemented that functionality?

Great work! Could you share the code you used to build the chat?

1 Like

Hi @pink_tshirt, nice work by the way! Quick one please, how does your background image on the login page hold up on larger screens/viewports e.g. iPads and tablets? Does it get stretched in any way?

Are you talking about its HTML or JS code? Basically this is my template: and I am using Strophe.js (look it up) to send/exchange messages over XMPP.

I am using background-size: cover so it fills up the whole screen just fine.

Thanks for sharing, I didn’t know about that css3 property until now!

looks great @pink_tshirt! i am prototyping a chat-related application, too and wondering if you’re up for a chat to share some learnings or even interested in a freelance gig?

@fabian​mu why not :smile:

Good Job! How Do you made Login form ( I’m interested ) and main form with side menu?

The login part is quite simple.

	.controller('loginCtrl', function($scope, $rootScope, $state) {
              $scope.loginButton = function($login,$pwd) {
                   // authentication process...
                   // blah blah blah
                   // true or false
                   if(true) {
                       $state.go('contacts') // aka logged in area.

I am not sure about the second question though. What is exactly “Main form”?

Thanks a lot.
Do you put login view in other nav-view without side-menu?

nice! this forum does not seem to have a DM option :confused: want to send me an mail? hello [at] fabian [dot] mu - thanks!


nice work!

One question: How did you implement the message input filed? I tried to implement it like so:

` But focussing the input field results in the appearing keyboard overlaying the field.

I think you should try to use ionic’s mark-up:

Smth like

<div class="bar bar-footer bar-stable">
<div class="row">
  <div class="col col-75">FIELD</div>
  <div class="col">BUTTON</div>
1 Like

Great UI, How did you create chat messages in bubbles?

Mostly css.

1 Like