Ionic Tutorial and Sample Application

IMG_0371

IMG_0370

I had a great time presenting the PhoneGap Day workshops with Michael and Holly last week in San Francisco. In the afternoon, I ran an AngularJS/Ionic workshop based on this tutorial. At the end of the workshop, I showed a more complete version of the application with additional UI polish and better code organization. A number of people asked me to share that version, so here it is…

Source Code

The complete version of the application is now available in this repository on GitHub.

Hosted Version

I also deployed a version of the application on Heroku. You can run the application here.

Tutorial

You can build the application from scratch using this tutorial

IMG_0372

IMG_0373

24 Responses to Ionic Tutorial and Sample Application

  1. istanbul travestileri November 18, 2014 at 5:24 am #

    Thanks for the info

  2. Angelo May 14, 2015 at 3:07 pm #

    Hi

    Nice tutorial and staring point, i would like to ask how can i provide an external url to retrieve JSON using the session.js file under server/routes directory , instead of a hand coded json . best regards.

  3. Shawn May 25, 2015 at 6:26 am #

    I was looking for such information for a long time on web and finally came across this website and its really great post on this topic.

  4. mitsubishi klima September 21, 2015 at 7:09 am #

    Thanks! This one is a nice and handy fix

  5. antrenman malzemeleri November 17, 2015 at 8:46 am #

    kalite,fiyat uygunlugu ve imalattan.rofesyonek ekip eşliğinden güvenilir işler yapılmaktadır

  6. kelvinfaxel November 19, 2015 at 5:07 am #

    Thanks for the tutorial

  7. lunaford November 19, 2015 at 5:09 am #

    This one is a nice and handy fix

  8. fordmaria November 19, 2015 at 5:11 am #

    nice tutorial

  9. sohbet December 8, 2015 at 5:08 pm #

    admincim very nice to blog coks

  10. manojkumar March 19, 2016 at 8:52 am #

    public class AndroidLogin extends Activity implements OnClickListener {

    Button ok,back,exit;
    TextView result;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
    StrictMode.setThreadPolicy(policy);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // Login button clicked
    ok = (Button)findViewById(R.id.btn_login);
    ok.setOnClickListener(this);

    result = (TextView)findViewById(R.id.lbl_result);

    }

    public void postLoginData() {
    // Create a new HttpClient and Post Header
    HttpClient httpclient = new DefaultHttpClient();

    /* login.php returns true if username and password is equal to saranga */
    HttpPost httppost = new HttpPost(“http://www.sencide.com/blog/login.php”);

    try {
    // Add user name and password
    EditText uname = (EditText)findViewById(R.id.txt_username);
    String username = uname.getText().toString();

    EditText pword = (EditText)findViewById(R.id.txt_password);
    String password = pword.getText().toString();

    List nameValuePairs = new ArrayList(2);
    nameValuePairs.add(new BasicNameValuePair(“username”, username));
    nameValuePairs.add(new BasicNameValuePair(“password”, password));
    httppost.setEntity(new UrlEncodedFormEntity(nameValuePairs));

    // Execute HTTP Post Request
    Log.w(“SENCIDE”, “Execute HTTP Post Request”);
    HttpResponse response = httpclient.execute(httppost);

    String str = inputStreamToString(response.getEntity().getContent()).toString();
    Log.w(“SENCIDE”, str);

    if(str.toString().equalsIgnoreCase(“true”))
    {
    Log.w(“SENCIDE”, “TRUE”);
    result.setText(“Login successful”);
    { Intent ntent = new Intent(MainActivity.this, Two.class);
    startActivity(ntent);
    }
    }else
    {
    Log.w(“SENCIDE”, “FALSE”);
    result.setText(str);
    }

    } catch (ClientProtocolException e) {
    e.printStackTrace();
    } catch (IOException e) {
    e.printStackTrace();
    }
    }

    private StringBuilder inputStreamToString(InputStream is) {
    String line = “”;
    StringBuilder total = new StringBuilder();
    // Wrap a BufferedReader around the InputStream
    BufferedReader rd = new BufferedReader(new InputStreamReader(is));
    // Read response until the end
    try {
    while ((line = rd.readLine()) != null) {
    total.append(line);
    }
    } catch (IOException e) {
    e.printStackTrace();
    }
    // Return full string
    return total;
    }

    @Override
    public void onClick(View view) {
    if(view == ok){
    postLoginData();
    }
    }

    }

  11. manojkumar March 19, 2016 at 8:53 am #

    what probleam in intent not pass

  12. RAVI March 20, 2016 at 12:59 pm #

    How can I Write code in Ionic Login Page

  13. Apurva May 6, 2016 at 4:03 pm #

    Thanks for this tutorials. I was wondering how can I use a REST api to get the data from the server to this app without using the json files on local server ?

  14. Hoa June 4, 2016 at 11:11 pm #

    I want to use external JSON file url for data, how can i do it ?

  15. Cubana Havana July 30, 2016 at 4:06 pm #

    i was wondering how i can use firebase together with the ionic framework

  16. Minacs Developer February 9, 2017 at 12:59 am #

    please check this repository for ionic seed: https://github.com/iamntg/ionic_1x_seed

  17. PsdDude March 3, 2017 at 4:25 am #

    Hey Cristophe, thank you so much for all the work you are doing. I have to say that a couple of years back it was several of your tutorials and code on github that helped me getting started with Cordova and PhoneGap. Since then I’ve switched to Ionic and have even started creating my own tutorials.

    I’m very proud to share my Ionic tutorial on how to create an Ionic app from scratch:

    Ionic App Tutorial: Create a Mobile App for Purchasing Public Transport Tickets via SMS
    http://www.coding-dude.com/wp/mobile-apps/ionic-app-tutorial-create-a-mobile-app-for-purchasing-public-transport-tickets-via-sms/

    looking forwards for feedback

  18. khalid April 3, 2017 at 4:02 am #

    Please is there any way to solve the problem of ionic 2.2.2 with salesforce Mobile SDK 5.0..
    Whenever i add he cordova plugin using: cordova plugin add http://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin
    I receive this error:
    no resource found matches the given name ( at ‘icon’ with value ‘@drawable/sf_icon’).

    Please is there any way to solve that.

  19. Dauglas Klein November 16, 2017 at 3:21 am #

    Christophe Coenraets please am sorry i have a question though its off topic.(ssempijjadz.rldta@gmail.com)
    Am building up a music download app but i would like to put some sort of copyright so that the downloaded song plays only on the downloaded device. It shouldn’t play if shared to any device.

  20. CIIT Noida April 21, 2018 at 3:06 am #

    Hi there I just wanted to tell you that I enjoyed looking at your website and to wish you the best of luck with it in the future.

    Hadoop Training Institute in Noida

  21. CIIT Noida April 25, 2018 at 2:52 am #

    I learning about a lot of great information for this weblog. We share it valuable information.

    Best B.Tech College in Noida

  22. yuvaraj singh November 24, 2020 at 2:14 am #

    Thanks for sharing this informative content
    To crack Agile coach interview : Agile coach Interview Questions

Trackbacks/Pingbacks

  1. The Salesforce Mobile SDK 3.1 - CodeFriar.com - February 11, 2015

    […] On the other hand(or fist), Example code is a Noobies best friend. When you’re starting out with a new API or SDK, you need to see what is happening. Indeed, you need to see what to do more than how to do. ‘Do I login first thing? or show a settings dialog?’ Example code leads to the Eureka of ‘Oh, I see — I present the login view first.’ Moreover, example code exposes new users to what methods and functions are available! Included in version 3.1 of the SDK we find iOS and Android example applications. More importantly, we also find a hybrid (html, css, js) example. Additionally, the SDK has related examples using Polymer. Perhaps most interestingly, the developer evangelism team has example code using Angular / Ionic! […]

  2. 5 Tutorials and Courses You Should Go Through Today to Learn Full Stack MEAN and Ionic App… – Like A Girl - November 28, 2018

    […] Ionic Tutorial and Sample Application […]

Leave a Reply

css.php