Building the Twitter UI with Ionic Components | Built with Ionic

what's up simonix and welcome to a new ionic tutorial today we're starting a new series that i call built with ionic and the first part today is building the twitter ui with ionic there's usually a lot of uncertainty about using ionic components for more than just the custom or the standard list and the cards and the items so we're gonna do in this series um change the default ui to a more specific ui like twitter like spotify like netflix like your recommendations so right now i ask you to put your recommendations for uh uis that you want to see with ionic in the comments we're not working on the back end side because that would just be too much and so we're gonna use some fake data and implement the ui and today we will start with twitter we will create the tab bar interface we're gonna use a timeline uh we're gonna use this fleet section we're gonna do the tweets we're gonna use custom components a directive to fade the header to make elements sticky so really advanced stuff and in the end a great result and i hope you enjoyed this new series so let's do this [Music] all right so let's get into the application i for this tutorial uh picked the ionic tabs template so you can start with ionic star the name of your application and then tabs we usually use blank but tabs just saves a bit of time today then i also generated a new module inside a compo the components folder if we check it out it's right here the shared components and adding dash flat make sure the components module is right at this top level so not inside another folder and that's the same for the directives module uh directives shared directives module also at this level i've also generated a new component that i call tweet and two directives inside the directives folder so that's all we need for today um if you bring up ionic surf now you should already see the tab bar with the default layout and we're gonna dive into that now but before we do any kind of real coding we should check out our app module first of all because we're going to make an http request to retrieve some dummy json data and therefore we're going to add the http client module from at angular common http inside the array of imports i think that's actually so far everything for the setup so let's move into the tabs page for this page um i only applied a few simple changes those changes were basically just removing the label and picking different icons um maybe we could even show this on the side so it's even more clear what we're doing in this tutorial since we're really just working with the ui so now we got uh four tabs right here which um well the last tab isn't really a new tab but i wanted to have that icon so i don't want to create a new page we got home we got search uh we got notifications for notifications i also added this little batch to show the number of new notifications but as you can see it doesn't really completely look like inside the twitter application so what i did here is i applied a few changes to the tabs page scss for the ion batch i just played around with the values to make this work everywhere with a big a bit bigger font size and fun way that was basically the most important part about this everything else is the padding or the min width and min hate making sure everything looks a bit better so if we hit save with this now we can see that we tweeted uh tweak the ion batch to become this little bigger uh circle and the more top position let's see so that is our tab bar and from now on we're going to focus on the timeline we're not going into the other pages um i think the timeline will be enough for today trust me uh if you want to see the other pages maybe we could do another tutorial on that so just let me know in the comments what we're gonna do inside our tab one page is pretty simple we're gonna inject the http client http client not the module only this one and we're gonna implement the on init so we can retrieve some values within our uninit we're gonna make a call using http get to a file there can i just did i open this somewhere else yeah there it is so i just uh faked some tweet data and uploaded it to digitaloceans um you can also check it out the full link i will also put this into the tutorial that's whatever twitter ui tweets jason stop the video or use the link below to get to that file now with uh that information we can fill a local array of tweets so we can create some more realistic feeling for our application um let's now also get into the tip one page html i will also open the css i'm pretty sure at one point we're gonna need this so i will remove the references from the default ionic stuff and within the toolbar i wanna apply a few changes so instead of having a title with the name we're going to have inside the toolbar buttons in the slot start which is usually to the left with an icon we're going to have an ion title with an icon using the twitter logo uh directly setting the color and also defining the size to make it a bit bigger and at the end another uh icon so that comes pretty close to the twitter ui uh from what we can see here this is the android view i could also use the tools right here to open uh iphone preview and hit refresh now so in that case we could also see this can i somehow close this now and still keep the view up uh i actually don't think that's possible maybe we can keep it like this should be fine as well now within the trader ui you also notice that there's like a control um and we can use a segment control for that um you could also use the super tabs module if you want to have like swipeable tabs to mimic that behavior but the ion segment uh should work fine as well so the ion segment needs an ng model to work on and we're gonna define this in our tab one page and we're gonna set the default one to sorry to home so that means the default value of segment is home um this part is necessary later and when we have our home we got the first segment button with the value home the second with whatever content suggests i just had this in my application as well if i remove this we will see something else uh happening um and that is the segment of course has different styling for ios and android and actually the twitter application on ios looks different and i found that the mode uh or setting directly in the mode to a material design for both applications looks exactly like it looks on twitter so by doing this you can pick your favorite uh theme of a component for an ionic control now um since we use the segment to switch between different segments uh we could use an ngif ng template but i will actually use hidden because we otherwise get uh tiny problems with a few of our components or do we um i actually think we could also use ng if please remind me if something's broken in the end then we're going to have to change this one to hidden again so if the segment is equal to home we can display uh the content of home and if it's equal to content we're going to display other content that we're actually not going to display in this tutorial now within the home segment we want to display the tweets we could craft the ui in here or since we created the custom tweet component we're gonna use that component and by default the new created component has a name app slash the name of the component so we can use app tweet within this page to use a new component that we created and since we want to have one tweet component for every tweet we're gonna use ng for let a tweet of tweets and we need a way to pass the tweet to that uh component in the end but for now uh this will first of all not work at all because app tweet is not a known element the reason is simple we haven't added it to our tab one module so simply move to the imports of the page you're editing and add the shared components module since we're here let's also add the shared directives module we're gonna need this anyway in the end if we now hit save we should see a list of our app component of course app tweet is not yeah ionic surf is sometimes not really picking up these changes or actually we made a little uh issue because inside the shared components module we're not yet declaring the tweet component i don't know why the cli isn't automatically adding it to the declarations and exports um i guess there's a cli command to do this but if you create a shared module you need to make sure that you declare the com the parts that are inside that module and if you want to use it somewhere else also export it and now we can finally see tweet works that's the default message of a new component so that's actually a good step forward now if we check out our tab one page or the twitter ui you will also notice that there's this new i think it's called fleet i will just call it story since it looks exactly like instagram stories and therefore we can use the ion slides component um we ion slides is not like a slide from a powerpoint presentation it's really just uh you can't really explain it it uses the swiper underneath we can tweak a lot of the settings so we're gonna create uh one slide for every uh once again using our fake data tweet of tweets and within that slide we gonna simply use an ion avatar which makes a little bit rounded image and we can use the tweet image which is if i check out the data correctly yeah it's just the image of the author so there we go um once again if we now save we will see in the default way yeah that's how the slides look of course that's not how the stories or fleets look but we're here to apply custom changes to our uh ionic components and to the slides we can actually pass options so we're gonna call them options and we can define them within the according class so for example you can define that you want to have 4.5 slides per view i will let's remove this to four you can define a bunch of other things here uh space padding different styling and i should maybe save the html page as well which now becomes a view come on uh i think maybe it's called is it called options i'm not completely sure what the name was here it looks like options so now we can slide through this and if you want to have an effect where you see part of the next image you should use a number like this 4.5 4.2 anything that works for you and then you will see you will uh get this little preview of the uh one slide or how many slides you got uh that's not in the view so that's really something cool that you can add so far our view also looks pretty good uh we can switch between the segments we got the app tweets working um and now we should maybe apply a bit of css to our tab one page so if you check out the twitter application once again you will see that the toolbar actually has no border and therefore we're going to set the border style of the ion toolbar to none how did i found this css variable well you can either check out the ionic documentation for the toolbar or if you are actively developing stuff you can just type in dash dash and then you will or you should usually find all the css values of that maybe i should go there border with um and at some point i also found the border style setting so once we apply this the border at the top should already be gone i will also add a little fix up front for the ion header um you can remember this in the end we're gonna create a directive to scroll out the header and on an ios device there's this little top-notch area that becomes transparent uh and therefore we're gonna set the background of the ion header directly to white not a huge problem since it's anyway white in here but that's a fix for the future um then we're gonna add a little bit more uh we're gonna add for the ion slides some styling to make them look even better and give them a bit more padding um then for the ion segment you can notice that everything is in uppercase that's uh android default and so we're going to set the ion segment button text transform to none which makes them use a default case and also in preparation for our final uh working header fade we're going to set the index of the ion segment with a background because they will actually be sticky in the end to the top so this part fades and scrolls out and this should be sticky to the top right now we can't even check it because we're still in this view but this will become relevant in the end and finally our ion avatar inside the slides or the fleet or whatever it's called should have a border and we can directly access our ionic color theme so now we're already closer to our final result so how long are we inside the video yeah i expected this to be quite long now the next step is to actually create our custom component so we can open all the files roller event for it so the typescript file um the css and the html so for the tweet component uh we need a way to pass information to that component and we can do this by using or defining an angular input right here decorator because there's a little trick because we just call it tweet we can directly pass the information to this component but you could also give it a name like my name um but now since we had just got this variable name we need to use this to pass information to the tweet and that's how we do it inside the tab one page so that is basically using the input from the tweet component and that's the value of our iteration we could use different names maybe might be more more clear for you but i think you can figure this one out inside our init let's just quickly lock this out so we can see what's happening the component is created now five or six times and each got access to the information of one tweet now one thing that i found is the tweet text sometimes contains a hashtag or an ad so mentioning another name on twitter and therefore we're gonna parse this to include uh specific styling um this is really not super relevant for our twitter cologne but i wanted to have this ui and therefore i went through the text using a simple regular expression catching either the hashtag or the add sign and replacing this with span class highlight then the value of the regular expression match and then a closing span tag so really just a tiny tiny ugly fix i'd say and with that in place that's actually everything we need for the tweet component we can craft the tweet component view um let me put one ion row class wrapper around everything and then we can define our styling if you check out twitter once again you will notice that there's a small uh column in the beginning let's say it has a size of two which means we got a size of 10 still left for the rest of our uh view so that should be the first step oh how did i open that one don't want to get this can we just format the code that would be cool all right and for the first column we're gonna once again use the ion avatar just like we did before using the tweet image so now we should see that our tweet component comes to life finally now the bigger part of the column so right in here is once again or we can actually separate it once again and start with another ion row you can really nest this um sometimes you need to add iron no padding so iron no padding stuff like this if you nest too many rows or columns in one layout but for us we're just going to use uh the class tweet info so we're gonna add some custom css in here and then we're gonna use ion column size 12 and within there we just gonna display the username the handle and the time of the post if we now check this out we're gonna see that by default it doesn't really look like twitter so that's really why i used like tweet infor name and handle here perhaps we can already add this tweet info name and handle just playing around with the font sizes the font weight or the colors and suddenly it becomes this looks a lot better i think because we're not using an ion list or an ion item we should also add a separator and that's why i added the wrapper class to our whole custom component so we can give the whole item a little border at the bottom now we can actually separate each of them and only the tweet message is actually missing and probably an image that's inside so we got okay now i really need to watch out uh we got our column of the size 10 which means after the row i think there's still something missing uh sweet jesus yeah actually no there's only there's only one thing missing and that's the actual tweet that is the tweet text and the attachment so ion column 12 uses all of the available space i just opened the new ion row here well because i don't want to be inside the tweet info class so inside that new row i also use ion column size 12 just to have the same padding and margin like the other rows and because the tweet text contains html tags i use it with inner html also i added an image below if there's an attachment inside the tweet and we're gonna for sure add some custom styling to that image now if we save this we're gonna notice that our tweets are not highlighted this has two reasons the first reason is we haven't added the highlight class which is just changing the color to blue and i think for the preview image we could also quickly add our custom styling so the preview image on twitter usually has a little border and some border radius and then it should look like this this should looks better i think um but the the mentioning here or the mentions are still not highlighted correctly and the reason is that within our custom component the inner html is separated from the rest of the page and we can fix this now by going back to the tweet component and right in here inside the uh component definition we gonna set the encapsulation to the encapsulation none and by doing this the inner html is also styled accordingly and we see the blue preview in here great that actually i really love how this view came together um now there's only one row uh missing and that's the row with all the buttons for re-sharing and liking stuff so i'm going to add this after the current row is closed this is really just uh an another ion row i hope we are still fine with our rows and columns you just need to make sure that you got row and then column and then you can use row again not row row row um or maybe that would work but i don't think it would work great um so i'm gonna put the or justify the content center for each of our column and we got four columns first column um using a button i have no functionality attached to that button for the response count uh so we got an icon and then the response count then we got a button for uh the retweet and the retweet count and same for like and share for the retreats i also added a little variable inside our json so um if i have retweeted or like the data the data actually won't be changed it's just a static json file but we can fake this by just directly setting our local data to not retweet and therefore we can also add conditional styling to both of these buttons right here by using color usually you just use is there some other reference right here color medium but if you add the brackets around it you can have um a calculation or uh checking a value or anything right here so we're gonna check the tweet retweet this is just the quick way of doing it if this is true we're going to use primary styling otherwise we're going to use the medium color styling and same right here so with that in place we can hit save once again and we should see that our tweet component now looks great we can click these buttons they actually also change color and the whole view is really close to the twitter ui with just a bit of additional css and the ionic styling but now the hard part begins we want to fly out this header area and we want to keep this segment inside the view which is really both not happening at the moment so we're gonna move into our directives now things are about to get really interesting um we're gonna also leave the tab one page open since we're gonna do a bit of work in there as well um let's start no not the spec file not not today's spec file not today uh we're gonna start inside the tab one page html or no sorry we're gonna have to do the same thing we did for the shared components and that is open the shared directives module in here interesting enough uh both directives were added to the declarations i have no idea why they were added in this case but not inside the shared components um i really just use the same commands so that's that's really strange anyway uh what we're gonna do now is first of all we're gonna change inside the tab one page our ion content what we wanna do is we wanna set the full screen value to true otherwise um the content would always stop uh at this point and not scroll behind this this is just a little fix or a little change that we need for our animation effect then we also want to add scroll events true i actually don't know why i added the brackets i think it should work like this as well and now for our app height header directive that's actually the name of the directive we want to add this directive to the ion content because then we can easily listen to scroll events basically we want to listen to the scroll events of the ion content and when we scroll up we also at the same time want to scroll up the header area and fade it out that's the whole idea so we got access to the scroll events by attaching the directive to ion content and we also need access to the actual ion header area here and therefore we gonna add a template reference um right here let's call this one header and then we're gonna pass that to our directive just like we passed information previously to the custom component um we also do the same for the segment here and already prepared this and i can already tell you that the app sticky segment now also goes in here and we pass the segment control because this will make sure the segment control also scrolls up but then sticks at the top of our screen okay great so far this hopefully shouldn't count right into as known content okay did we did we at the the module shared directives module is in place um tab one module guts the directive perhaps i should just reload sometimes ionic surf really fixes your issues if not then you're in trouble but usually that's really the fix for a lot of problems so now we can go back to our or actually get started with the height header directive we used this in a different tutorial in the past as well uh a tiny bit different but what we want to do is we're gonna define an input for the header um just like we did for the component that's where the actual header element comes into this then we're gonna also set the header height automatically calculating it never really worked for me so that's why i changed to just setting it in here and within the constructor we now also need the renderer so the renderer 2 from angular core and we're going to also inject the ionic dump controller to have more performance of writes and updates to uh the dom once we fade out or change positions um we also gonna add implements after view in it and then add the ng after view in it to get our element i will also put a little lock in here so this um header this dot header to see what's actually going on and this dot header maybe i will just do it after we've set both of the values this dot let's also do the children now i'm creating uh these children for a specific reason um if we fade out everything from the header um we got a space in the application where we don't have the white background and everything's kind of messed up so we technically want to keep the header at some point and only uh fade out the toolbar but we still want to move out the header so now uh there's children we got a collection which is just the ion toolbar and we got access to the header inside the directive as well that's great news for now now we're going to implement another cool thing and that's the host listener for our directive since the ion content is basically the host of this directive we can listen to the ion scroll event and whenever we got an event let's just log it out event we will see that we catch that event so trying to scroll custom event all the time and within is also a value that's called scroll top details scroll top and you see now it's at zero previously it was somewhere else and detailed scroll top is the distance that we scrolled from top now it should be at some other values so now we are 248 and that is the value we want to grab so let's extract it from the event and then we're gonna set our new position which is the new position of the header to minus scroll top of course that would be kind of terrible to use this new position so we also going to add another check if the new position is below minus this dot okay what did i thought here no i just want to make sure that um this value is basically the boundary so we will not set the new position to minus 100 we will always then set it to minus 44 or minus 56. uh otherwise the header would just completely fly out of the view since we also want to change the opacity uh we can calculate the new opacity by using uh this value so the new position divided by the header height which is at most one which means we will have a value in the end between zero and one for the new opacity which fades out our element cool now we can use the dom controller to write the update to the dom the ionic dump controller handles this quite cool because it's not immediately saying to the dom okay you need to repaint this now do it now that's gonna mess up the repaint and restructuring of your view instead the ionic dump controller will schedule this for the appropriate time this doesn't mean it takes like a second until it's executed it's really fast but it just handles it under the hood in a better way so in our case we're going to now use the render arm to change the uh styling so we're going to call this renderer set style we want to change the styling of our header element and what we're going to do is we want to change the top property to new position hopefully i'm not covering this plus pixel okay that's the new position um perhaps we should save this now and check out if this is actually working so we're gonna slowly scroll now and yeah it's moving out it's moving out right so the header is leaving our view just like expected but we also at the same time want to fade out the icons and therefore we gonna iterate now the children and set the opacity of each item within that area of children to our new opacity basically it's just one item but maybe you have more so now if can i get it like a scroll bar now you see if i scroll up it moves out and fades out which gives a lot nicer view cool the first part is working we're scrolling up the header but the ion segment is also lost and that's where the second directive takes over i will now bring in the code for this because it's basically the same um we're gonna define the input just like we did before we're gonna get the hate we're gonna set the element to the actual element and we're to listen to the scroll event we're also going to calculate the position but this time the new position um yeah actually that's that's still the same isn't it maybe we could have done this in one maybe we could have this done in one directive but i think now since we're doing it in two different places i think it's more cleaner to have two different directives um let's take a look what happens uh this also gets to the top and then we're lost why is this happening there's a simple reason within our tab one page we have defined the ion segment within the ion content so unless we use absolute positioning for the ion segment it will always scroll out since it's part of the ion content a quick solution is to put the ion segments simply outside of the ion content that means it's now in a different place it still looks the same like we did before remember how we used ion segment the index above everything else and then we're gonna check out and there it stops now we're able to fade out our header and the segment is still uh sticky to the top that's exactly the ui we were after we got the timeline um with the different functionalities highlighting styling rows grid layout we got the um scrolling error for the fleet and we also got this cool directive which fades out one part of the header right here and moves it up and then also moves up the other but makes sure it sticks to the top of our screen and is sticky in place and then in the end if we scroll back everything comes back up and we're done with the twitter ionic ui alright i hope you enjoyed this first video tutorial in a series of new posts about creating more advanced uis with ionic we've seen a lot in this tutorial from using json data using the rose custom components directives shared modules really a lot of information in this video and if there's any other ui uh specific ui that you want to see built with ionic please leave it in the comments i already think about a few different other cases and i'm sure you will enjoy those videos as well if you found this helpful please leave a like subscribe to the channel for more great ionic videos and general web development tips and i will catch you next time like always so happy coding [Music] simon

Channel: Simon Grimm

Views: 6,866

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial, built with ionic, ionic twitter, ionic interface, ionic ui tutorial

Id: OnIgLxCxkjw

Length: 37min 58sec (2278 seconds)

Published: Tue Jan 26 2021